Update dependency @effect/language-service to ^0.78.0

bun.lock

@@ -6,7 +6,7 @@
       "name": "@effect-fc/monorepo",
       "devDependencies": {
         "@biomejs/biome": "^2.3.11",
-        "@effect/language-service": "^0.75.0",
+        "@effect/language-service": "^0.78.0",
         "@types/bun": "^1.3.6",
         "npm-check-updates": "^19.3.1",
         "npm-sort": "^0.0.4",
@@ -116,7 +116,7 @@
 
     "@effect-fc/example": ["@effect-fc/example@workspace:packages/example"],
 
-    "@effect/language-service": ["@effect/language-service@0.75.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-DxRN8+b5IEQ/x8hukpV39kJe7fs6er7LDWp1PvKjOxPkN5UJ8VJovUVzoHtOX6XWzMmJBRCN9/j0s8jujXTduw=="],
+    "@effect/language-service": ["@effect/language-service@0.78.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-dEYMhvhKFhikXpXjOlcByRKOU34xFeZbZcOuVTeWTQmjmZ/ZF4K3z0Ku6vL4cWKC8RRIB5di+ix18Y4f9ey5Dg=="],
 
     "@effect/platform": ["@effect/platform@0.94.2", "", { "dependencies": { "find-my-way-ts": "^0.1.6", "msgpackr": "^1.11.4", "multipasta": "^0.2.7" }, "peerDependencies": { "effect": "^3.19.15" } }, "sha512-85vdwpnK4oH/rJ3EuX/Gi2Hkt+K4HvXWr9bxCuqvty9hxyEcRxkJcqTesYrcVoQB6aULb1Za2B0MKoTbvffB3Q=="],
 

package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.11",
-    "@effect/language-service": "^0.75.0",
+    "@effect/language-service": "^0.78.0",
     "@types/bun": "^1.3.6",
     "npm-check-updates": "^19.3.1",
     "npm-sort": "^0.0.4",

packages/effect-fc/src/Async.ts

@@ -4,11 +4,13 @@ import * as React from "react"
 import * as Component from "./Component.js"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
-export type TypeId = typeof TypeId
+export const AsyncTypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
+export type AsyncTypeId = typeof AsyncTypeId
 
-export interface Async extends AsyncOptions {
-    readonly [TypeId]: TypeId
+export interface Async extends AsyncPrototype, AsyncOptions {}
+
+export interface AsyncPrototype {
+    readonly [AsyncTypeId]: AsyncTypeId
 }
 
 export interface AsyncOptions {
@@ -18,14 +20,14 @@ export interface AsyncOptions {
 export type AsyncProps = Omit<React.SuspenseProps, "children">
 
 
-export const AsyncPrototype = Object.freeze({
-    [TypeId]: TypeId,
+export const AsyncPrototype: AsyncPrototype = Object.freeze({
+    [AsyncTypeId]: AsyncTypeId,
 
     asFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
         this: Component.Component<P, A, E, R> & Async,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
     ) {
-        const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
+        const Inner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
 
         return ({ fallback, name, ...props }: AsyncProps) => {
             const promise = Runtime.runPromise(runtimeRef.current)(
@@ -38,17 +40,21 @@ export const AsyncPrototype = Object.freeze({
             return React.createElement(
                 React.Suspense,
                 { fallback: fallback ?? this.defaultFallback, name },
-                React.createElement(SuspenseInner, { promise }),
+                React.createElement(Inner, { promise }),
             )
         }
     },
 } as const)
 
 
-export const isAsync = (u: unknown): u is Async => Predicate.hasProperty(u, TypeId)
+export const isAsync = (u: unknown): u is Async => Predicate.hasProperty(u, AsyncTypeId)
 
 export const async = <T extends Component.Component<any, any, any, any>>(
-    self: T
+    self: T & (
+        "promise" extends keyof Component.Component.Props<T>
+            ? "The 'promise' prop name is restricted for Async components. Please rename the 'promise' prop to something else."
+            : T
+    )
 ): (
     & Omit<T, keyof Component.Component.AsComponent<T>>
     & Component.Component<

packages/effect-fc/src/Query.ts

@@ -10,7 +10,7 @@ export interface Query<in out K extends Query.AnyKey, in out A, in out KE = neve
 extends Pipeable.Pipeable {
     readonly [QueryTypeId]: QueryTypeId
 
-    readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>
+    readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | KR | R>
     readonly key: Stream.Stream<K, KE, KR>
     readonly f: (key: K) => Effect.Effect<A, E, R>
     readonly initialProgress: P
@@ -287,7 +287,7 @@ export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, KE =
 > {
     const client = yield* QueryClient.QueryClient
 
-    return new QueryImpl(
+    return new QueryImpl<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>(
         yield* Effect.context<Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>>(),
         options.key,
         options.f as any,

packages/effect-fc/src/Result.ts

@@ -240,16 +240,16 @@ export const unsafeForkEffect = <A, E, R, P = never>(
         Effect.provide(Layer.empty.pipe(
             Layer.provideMerge(makeProgressLayer<A, E, P>()),
             Layer.provideMerge(Layer.succeed(State<A, E, P>(), {
-                get: ref,
+                get: Ref.get(ref),
                 set: v => Effect.andThen(Ref.set(ref, v), PubSub.publish(pubsub, v))
             })),
         )),
     ))),
     Effect.map(({ ref, pubsub, fiber }) => [
         Subscribable.make({
-            get: ref,
+            get: Ref.get(ref),
             changes: Stream.unwrapScoped(Effect.map(
-                Effect.all([ref, Stream.fromPubSub(pubsub, { scoped: true })]),
+                Effect.all([Ref.get(ref), Stream.fromPubSub(pubsub, { scoped: true })]),
                 ([latest, stream]) => Stream.concat(Stream.make(latest), stream),
             )),
         }),

packages/example/src/routeTree.gen.ts

@@ -13,10 +13,10 @@ import { Route as ResultRouteImport } from './routes/result'
 import { Route as QueryRouteImport } from './routes/query'
 import { Route as FormRouteImport } from './routes/form'
 import { Route as BlankRouteImport } from './routes/blank'
+import { Route as AsyncRouteImport } from './routes/async'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DevMemoRouteImport } from './routes/dev/memo'
 import { Route as DevContextRouteImport } from './routes/dev/context'
-import { Route as DevAsyncRenderingRouteImport } from './routes/dev/async-rendering'
 
 const ResultRoute = ResultRouteImport.update({
   id: '/result',
@@ -38,6 +38,11 @@ const BlankRoute = BlankRouteImport.update({
   path: '/blank',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AsyncRoute = AsyncRouteImport.update({
+  id: '/async',
+  path: '/async',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -53,40 +58,35 @@ const DevContextRoute = DevContextRouteImport.update({
   path: '/dev/context',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DevAsyncRenderingRoute = DevAsyncRenderingRouteImport.update({
-  id: '/dev/async-rendering',
-  path: '/dev/async-rendering',
-  getParentRoute: () => rootRouteImport,
-} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/query': typeof QueryRoute
   '/result': typeof ResultRoute
-  '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/query': typeof QueryRoute
   '/result': typeof ResultRoute
-  '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/query': typeof QueryRoute
   '/result': typeof ResultRoute
-  '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
@@ -94,42 +94,42 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/async'
     | '/blank'
     | '/form'
     | '/query'
     | '/result'
-    | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/async'
     | '/blank'
     | '/form'
     | '/query'
     | '/result'
-    | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
   id:
     | '__root__'
     | '/'
+    | '/async'
     | '/blank'
     | '/form'
     | '/query'
     | '/result'
-    | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AsyncRoute: typeof AsyncRoute
   BlankRoute: typeof BlankRoute
   FormRoute: typeof FormRoute
   QueryRoute: typeof QueryRoute
   ResultRoute: typeof ResultRoute
-  DevAsyncRenderingRoute: typeof DevAsyncRenderingRoute
   DevContextRoute: typeof DevContextRoute
   DevMemoRoute: typeof DevMemoRoute
 }
@@ -164,6 +164,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof BlankRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/async': {
+      id: '/async'
+      path: '/async'
+      fullPath: '/async'
+      preLoaderRoute: typeof AsyncRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -185,23 +192,16 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DevContextRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dev/async-rendering': {
-      id: '/dev/async-rendering'
-      path: '/dev/async-rendering'
-      fullPath: '/dev/async-rendering'
-      preLoaderRoute: typeof DevAsyncRenderingRouteImport
-      parentRoute: typeof rootRouteImport
-    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AsyncRoute: AsyncRoute,
   BlankRoute: BlankRoute,
   FormRoute: FormRoute,
   QueryRoute: QueryRoute,
   ResultRoute: ResultRoute,
-  DevAsyncRenderingRoute: DevAsyncRenderingRoute,
   DevContextRoute: DevContextRoute,
   DevMemoRoute: DevMemoRoute,
 }

packages/example/src/routes/async.tsx

@@ -0,0 +1,64 @@
+import { HttpClient } from "@effect/platform"
+import { Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Array, Effect, flow, Option, Schema } from "effect"
+import { Async, Component, Memoized } from "effect-fc"
+import * as React from "react"
+import { runtime } from "@/runtime"
+
+
+const Post = Schema.Struct({
+    userId: Schema.Int,
+    id: Schema.Int,
+    title: Schema.String,
+    body: Schema.String,
+})
+
+interface AsyncFetchPostViewProps {
+    readonly id: number
+}
+
+class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(props: AsyncFetchPostViewProps) {
+    const post = yield* Component.useOnChange(() => HttpClient.HttpClient.pipe(
+        Effect.tap(Effect.sleep("500 millis")),
+        Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ props.id }`)),
+        Effect.andThen(response => response.json),
+        Effect.andThen(Schema.decodeUnknown(Post)),
+    ), [props.id])
+
+    return (
+        <div>
+            <Heading>{post.title}</Heading>
+            <Text>{post.body}</Text>
+        </div>
+    )
+}).pipe(
+    Async.async,
+    Async.withOptions({ defaultFallback: <Text>Loading post...</Text> }),
+    Memoized.memoized,
+) {}
+
+
+const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
+    const [id, setId] = React.useState(1)
+    const AsyncFetchPost = yield* AsyncFetchPostView.use
+
+    return (
+        <Container>
+            <Flex direction="column" align="center" gap="2">
+                <Slider
+                    value={[id]}
+                    onValueChange={flow(Array.head, Option.getOrThrow, setId)}
+                />
+
+                <AsyncFetchPost id={id} />
+            </Flex>
+        </Container>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
+export const Route = createFileRoute("/async")({
+    component: AsyncRouteComponent,
+})

packages/example/src/routes/dev/async-rendering.tsx

@@ -1,78 +0,0 @@
-import { Flex, Text, TextField } from "@radix-ui/themes"
-import { createFileRoute } from "@tanstack/react-router"
-import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Effect } from "effect"
-import { Async, Component, Memoized } from "effect-fc"
-import * as React from "react"
-import { runtime } from "@/runtime"
-
-
-// Generator version
-const RouteComponent = Component.makeUntraced(function* AsyncRendering() {
-    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent.use
-    const AsyncComponentFC = yield* AsyncComponent.use
-    const [input, setInput] = React.useState("")
-
-    return (
-        <Flex direction="column" align="stretch" gap="2">
-            <TextField.Root
-                value={input}
-                onChange={e => setInput(e.target.value)}
-            />
-
-            <MemoizedAsyncComponentFC fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
-            <AsyncComponentFC />
-        </Flex>
-    )
-}).pipe(
-    Component.withRuntime(runtime.context)
-)
-
-// Pipeline version
-// const RouteComponent = Component.make("RouteComponent")(() => Effect.Do,
-//     Effect.bind("VMemoizedAsyncComponent", () => Component.useFC(MemoizedAsyncComponent)),
-//     Effect.bind("VAsyncComponent", () => Component.useFC(AsyncComponent)),
-//     Effect.let("input", () => React.useState("")),
-
-//     Effect.map(({ input: [input, setInput], VAsyncComponent, VMemoizedAsyncComponent }) =>
-//         <Flex direction="column" align="stretch" gap="2">
-//             <TextField.Root
-//                 value={input}
-//                 onChange={e => setInput(e.target.value)}
-//             />
-
-//             <VMemoizedAsyncComponent />
-//             <VAsyncComponent />
-//         </Flex>
-//     ),
-// ).pipe(
-//     Component.withRuntime(runtime.context)
-// )
-
-
-class AsyncComponent extends Component.makeUntraced("AsyncComponent")(function*() {
-    const SubComponentFC = yield* SubComponent.use
-
-    yield* Effect.sleep("500 millis") // Async operation
-    // Cannot use React hooks after the async operation
-
-    return (
-        <Flex direction="column" align="stretch">
-            <Text>Rendered!</Text>
-            <SubComponentFC />
-        </Flex>
-    )
-}).pipe(
-    Async.async,
-    Async.withOptions({ defaultFallback: <p>Loading...</p> }),
-) {}
-class MemoizedAsyncComponent extends Memoized.memoized(AsyncComponent) {}
-
-class SubComponent extends Component.makeUntraced("SubComponent")(function*() {
-    const [state] = React.useState(yield* Component.useOnMount(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
-    return <Text>{state}</Text>
-}) {}
-
-export const Route = createFileRoute("/dev/async-rendering")({
-    component: RouteComponent
-})