0.1.2 (#3)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/effect-fc/pulls/3

packages/effect-fc/README.md

@@ -15,15 +15,12 @@ Documentation is currently being written. In the meantime, you can take a look a
 
 ## What writing components looks like
 ```typescript
-import { Container, Flex, Heading } from "@radix-ui/themes"
+import { Component, Hook, Memoized } from "effect-fc"
-import { Chunk, Console, Effect } from "effect"
-import { Component, Hook } from "effect-fc"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
+import { runtime } from "@/runtime"
 
-//           Component.Component<never, TodosState | Scope, {}>
+class Todos extends Component.make(function* Todos() {
-//           VVV
-export const Todos = Component.make(function* Todos() {
     const state = yield* TodosState
     const [todos] = yield* Hook.useSubscribeRefs(state.ref)
 
@@ -32,20 +29,31 @@ export const Todos = Component.make(function* Todos() {
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))
 
-    const VTodo = yield* Component.useFC(Todo)
+    const TodoFC = yield* Component.useFC(Todo)
 
     return (
         <Container>
             <Heading align="center">Todos</Heading>
 
             <Flex direction="column" align="stretch" gap="2" mt="2">
-                <VTodo _tag="new" />
+                <TodoFC _tag="new" />
 
                 {Chunk.map(todos, (v, k) =>
-                    <VTodo key={v.id} _tag="edit" index={k} />
+                    <TodoFC key={v.id} _tag="edit" index={k} />
                 )}
             </Flex>
         </Container>
     )
-})
+}).pipe(
+    Memoized.memo
+) {}
+
+const TodosEntrypoint = Component.make(function* TodosEntrypoint() {
+    const context = yield* Hook.useContext(TodosState.Default, { finalizerExecutionMode: "fork" })
+    const TodosFC = yield* Effect.provide(Component.useFC(Todos), context)
+
+    return <TodosFC />
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
 ```

packages/effect-fc/package.json

@@ -1,7 +1,7 @@
 {
   "name": "effect-fc",
   "description": "Write React function components with Effect",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "./README.md",

packages/effect-fc/src/Component.ts

@@ -1,47 +1,93 @@
-import { Context, Effect, type Equivalence, ExecutionStrategy, Function, pipe, Pipeable, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
+import { Context, Effect, Effectable, ExecutionStrategy, Function, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
 import * as React from "react"
 import * as Hook from "./Hook.js"
-import type { ExcludeKeys } from "./utils.js"
+import * as Memoized from "./Memoized.js"
 
 
-export interface Component<E, R, P extends {}> extends Pipeable.Pipeable {
+export const TypeId: unique symbol = Symbol.for("effect-fc/Component")
+export type TypeId = typeof TypeId
+
+export interface Component<P extends {} = {}, E = never, R = never>
+extends Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>, Component.Options {
+    new(_: never): {}
+    readonly [TypeId]: TypeId
+    /** @internal */
+    makeFunctionComponent(runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>, scope: Scope.Scope): React.FC<P>
+    /** @internal */
     readonly body: (props: P) => Effect.Effect<React.ReactNode, E, R>
-    readonly displayName?: string
-    readonly options: Component.Options
 }
 
 export namespace Component {
-    export type Error<T> = T extends Component<infer E, infer _R, infer _P> ? E : never
+    export type Props<T> = T extends Component<infer P, infer _E, infer _R> ? P : never
-    export type Context<T> = T extends Component<infer _E, infer R, infer _P> ? R : never
+    export type Error<T> = T extends Component<infer _P, infer E, infer _R> ? E : never
-    export type Props<T> = T extends Component<infer _E, infer _R, infer P> ? P : never
+    export type Context<T> = T extends Component<infer _P, infer _E, infer R> ? R : never
 
     export interface Options {
+        readonly displayName?: string
         readonly finalizerExecutionMode: "sync" | "fork"
         readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
     }
 }
 
 
-const ComponentProto = Object.seal({
+const ComponentProto = Object.freeze({
-    pipe() { return Pipeable.pipeArguments(this, arguments) }
+    ...Effectable.CommitPrototype,
+    [TypeId]: TypeId,
+
+    commit: Effect.fn("Component")(function* <P extends {}, E, R>(this: Component<P, E, R>) {
+        const self = this
+        const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
+        runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+        return React.useCallback(function ScopeProvider(props: P) {
+            const scope = Runtime.runSync(runtimeRef.current)(Hook.useScope(
+                Array.from(
+                    Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
+                ),
+                self,
+            ))
+
+            const FC = React.useMemo(() => {
+                const f = self.makeFunctionComponent(runtimeRef, scope)
+                f.displayName = self.displayName ?? "Anonymous"
+                return Memoized.isMemoized(self)
+                    ? React.memo(f, self.propsAreEqual)
+                    : f
+            }, [scope])
+
+            return React.createElement(FC, props)
+        }, [])
+    }),
+
+    makeFunctionComponent <P extends {}, E, R>(
+        this: Component<P, E, R>,
+        runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
+        scope: Scope.Scope,
+    ): React.FC<P> {
+        return (props: P) => Runtime.runSync(runtimeRef.current)(
+            Effect.provideService(this.body(props), Scope.Scope, scope)
+        )
+    },
 } as const)
 
-const defaultOptions: Component.Options = {
+const defaultOptions = {
     finalizerExecutionMode: "sync",
     finalizerExecutionStrategy: ExecutionStrategy.sequential,
-}
+} as const
 
 const nonReactiveTags = [Tracer.ParentSpan] as const
 
 
+export const isComponent = (u: unknown): u is Component<{}, unknown, unknown> => Predicate.hasProperty(u, TypeId)
+
 export namespace make {
     export type Gen = {
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, React.ReactNode, never>,
         ): Component<
+            P,
             [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
-            [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never,
+            [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
-            P
         >
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
@@ -53,7 +99,7 @@ export namespace make {
                 >,
                 props: NoInfer<P>,
             ) => B
-        ): Component<Effect.Effect.Error<B>, Effect.Effect.Context<B>, P>
+        ): Component<P, Effect.Effect.Error<B>, Effect.Effect.Context<B>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -65,7 +111,7 @@ export namespace make {
                 props: NoInfer<P>,
             ) => B,
             b: (_: B, props: NoInfer<P>) => C,
-        ): Component<Effect.Effect.Error<C>, Effect.Effect.Context<C>, P>
+        ): Component<P, Effect.Effect.Error<C>, Effect.Effect.Context<C>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -78,7 +124,7 @@ export namespace make {
             ) => B,
             b: (_: B, props: NoInfer<P>) => C,
             c: (_: C, props: NoInfer<P>) => D,
-        ): Component<Effect.Effect.Error<D>, Effect.Effect.Context<D>, P>
+        ): Component<P, Effect.Effect.Error<D>, Effect.Effect.Context<D>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -92,7 +138,7 @@ export namespace make {
             b: (_: B, props: NoInfer<P>) => C,
             c: (_: C, props: NoInfer<P>) => D,
             d: (_: D, props: NoInfer<P>) => E,
-        ): Component<Effect.Effect.Error<E>, Effect.Effect.Context<E>, P>
+        ): Component<P, Effect.Effect.Error<E>, Effect.Effect.Context<E>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -107,7 +153,7 @@ export namespace make {
             c: (_: C, props: NoInfer<P>) => D,
             d: (_: D, props: NoInfer<P>) => E,
             e: (_: E, props: NoInfer<P>) => F,
-        ): Component<Effect.Effect.Error<F>, Effect.Effect.Context<F>, P>
+        ): Component<P, Effect.Effect.Error<F>, Effect.Effect.Context<F>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -123,7 +169,7 @@ export namespace make {
             d: (_: D, props: NoInfer<P>) => E,
             e: (_: E, props: NoInfer<P>) => F,
             f: (_: F, props: NoInfer<P>) => G,
-        ): Component<Effect.Effect.Error<G>, Effect.Effect.Context<G>, P>
+        ): Component<P, Effect.Effect.Error<G>, Effect.Effect.Context<G>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -140,7 +186,7 @@ export namespace make {
             e: (_: E, props: NoInfer<P>) => F,
             f: (_: F, props: NoInfer<P>) => G,
             g: (_: G, props: NoInfer<P>) => H,
-        ): Component<Effect.Effect.Error<H>, Effect.Effect.Context<H>, P>
+        ): Component<P, Effect.Effect.Error<H>, Effect.Effect.Context<H>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H, I extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -158,7 +204,7 @@ export namespace make {
             f: (_: F, props: NoInfer<P>) => G,
             g: (_: G, props: NoInfer<P>) => H,
             h: (_: H, props: NoInfer<P>) => I,
-        ): Component<Effect.Effect.Error<I>, Effect.Effect.Context<I>, P>
+        ): Component<P, Effect.Effect.Error<I>, Effect.Effect.Context<I>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H, I, J extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -177,35 +223,35 @@ export namespace make {
             g: (_: G, props: NoInfer<P>) => H,
             h: (_: H, props: NoInfer<P>) => I,
             i: (_: I, props: NoInfer<P>) => J,
-        ): Component<Effect.Effect.Error<J>, Effect.Effect.Context<J>, P>
+        ): Component<P, Effect.Effect.Error<J>, Effect.Effect.Context<J>>
     }
 
     export type NonGen = {
         <Eff extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Eff
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
             b: (_: B, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
             b: (_: B, props: NoInfer<P>) => C,
             c: (_: C, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
             b: (_: B, props: NoInfer<P>) => C,
             c: (_: C, props: NoInfer<P>) => D,
             d: (_: D, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -213,7 +259,7 @@ export namespace make {
             c: (_: C, props: NoInfer<P>) => D,
             d: (_: D, props: NoInfer<P>) => E,
             e: (_: E, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -222,7 +268,7 @@ export namespace make {
             d: (_: D, props: NoInfer<P>) => E,
             e: (_: E, props: NoInfer<P>) => F,
             f: (_: F, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -232,7 +278,7 @@ export namespace make {
             e: (_: E, props: NoInfer<P>) => F,
             f: (_: F, props: NoInfer<P>) => G,
             g: (_: G, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, H, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -243,7 +289,7 @@ export namespace make {
             f: (_: F, props: NoInfer<P>) => G,
             g: (_: G, props: NoInfer<P>) => H,
             h: (_: H, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, H, I, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -255,7 +301,7 @@ export namespace make {
             g: (_: G, props: NoInfer<P>) => H,
             h: (_: H, props: NoInfer<P>) => I,
             i: (_: I, props: NoInfer<P>) => Eff,
-        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
     }
 }
 
@@ -266,52 +312,44 @@ export const make: (
         spanName: string,
         spanOptions?: Tracer.SpanOptions,
     ) => make.Gen & make.NonGen)
-) = (spanNameOrBody: Function | string, ...pipeables: any[]) => {
+) = (spanNameOrBody: Function | string, ...pipeables: any[]): any => {
     if (typeof spanNameOrBody !== "string") {
         const displayName = displayNameFromBody(spanNameOrBody)
-        return Object.setPrototypeOf({
+        return Object.setPrototypeOf(
-            body: displayName
+            Object.assign(function() {}, defaultOptions, {
-                ? Effect.fn(displayName)(spanNameOrBody as any, ...pipeables as [])
+                body: displayName
-                : Effect.fn(spanNameOrBody as any, ...pipeables),
+                    ? Effect.fn(displayName)(spanNameOrBody as any, ...pipeables as [])
-            displayName,
+                    : Effect.fn(spanNameOrBody as any, ...pipeables),
-            options: { ...defaultOptions },
+                displayName,
-        }, ComponentProto)
+            }),
+            ComponentProto,
+        )
     }
     else {
         const spanOptions = pipeables[0]
-        return (body: any, ...pipeables: any[]) => Object.setPrototypeOf({
+        return (body: any, ...pipeables: any[]) => Object.setPrototypeOf(
-            body: Effect.fn(spanNameOrBody, spanOptions)(body, ...pipeables as []),
+            Object.assign(function() {}, defaultOptions, {
-            displayName: displayNameFromBody(body) ?? spanNameOrBody,
+                body: Effect.fn(spanNameOrBody, spanOptions)(body, ...pipeables as []),
-            options: { ...defaultOptions },
+                displayName: displayNameFromBody(body) ?? spanNameOrBody,
-        }, ComponentProto)
+            }),
+            ComponentProto,
+        )
     }
 }
 
-export const makeUntraced: make.Gen & make.NonGen = (body: Function, ...pipeables: any[]) => Object.setPrototypeOf({
+export const makeUntraced: make.Gen & make.NonGen = (
-    body: Effect.fnUntraced(body as any, ...pipeables as []),
+    body: Function,
-    displayName: displayNameFromBody(body),
+    ...pipeables: any[]
-    options: { ...defaultOptions },
+) => Object.setPrototypeOf(
-}, ComponentProto)
+    Object.assign(function() {}, defaultOptions, {
+        body: Effect.fnUntraced(body as any, ...pipeables as []),
+        displayName: displayNameFromBody(body),
+    }),
+    ComponentProto,
+)
 
 const displayNameFromBody = (body: Function) => !String.isEmpty(body.name) ? body.name : undefined
 
-
-export const withDisplayName: {
-    <T extends Component<any, any, any>>(
-        displayName: string
-    ): (self: T) => T
-    <T extends Component<any, any, any>>(
-        self: T,
-        displayName: string,
-    ): T
-} = Function.dual(2, <T extends Component<any, any, any>>(
-    self: T,
-    displayName: string,
-): T => Object.setPrototypeOf(
-    { ...self, displayName },
-    Object.getPrototypeOf(self),
-))
-
 export const withOptions: {
     <T extends Component<any, any, any>>(
         options: Partial<Component.Options>
@@ -324,148 +362,24 @@ export const withOptions: {
     self: T,
     options: Partial<Component.Options>,
 ): T => Object.setPrototypeOf(
-    { ...self, options: { ...self.options, ...options } },
+    Object.assign(function() {}, self, options),
     Object.getPrototypeOf(self),
 ))
 
 export const withRuntime: {
-    <T extends Component<any, R, any>, R>(
+    <P extends {}, E, R>(
         context: React.Context<Runtime.Runtime<R>>,
-    ): (self: T) => React.FC<T extends Suspense
+    ): (self: Component<P, E, R>) => React.FC<P>
-        ? Component.Props<T> & SuspenseProps
+    <P extends {}, E, R>(
-        : Component.Props<T>
+        self: Component<P, E, R>,
-    >
-    <E, R, P extends {}>(
-        self: Component<E, R, P> & Suspense,
-        context: React.Context<Runtime.Runtime<R>>,
-    ): React.FC<P & SuspenseProps>
-    <E, R, P extends {}>(
-        self: Component<E, R, P>,
         context: React.Context<Runtime.Runtime<R>>,
     ): React.FC<P>
-} = Function.dual(2, <E, R, P extends {}>(
+} = Function.dual(2, <P extends {}, E, R>(
-    self: Component<E, R, P>,
+    self: Component<P, E, R>,
     context: React.Context<Runtime.Runtime<R>>,
 ): React.FC<P> => function WithRuntime(props) {
-    const runtime = React.useContext(context)
+    return React.createElement(
-    return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
+        Runtime.runSync(React.useContext(context))(self),
-})
+        props,
-
+    )
-
-export interface Memoized<P> {
-    readonly memo: true
-    readonly memoOptions: Memoized.Options<P>
-}
-
-export namespace Memoized {
-    export interface Options<P> {
-        readonly propsAreEqual?: Equivalence.Equivalence<P>
-    }
-}
-
-export const memo = <T extends Component<any, any, any>>(
-    self: ExcludeKeys<T, keyof Memoized<Component.Props<T>>>
-): T & Memoized<Component.Props<T>> => Object.setPrototypeOf(
-    { ...self, memo: true, memoOptions: {} },
-    Object.getPrototypeOf(self),
-)
-
-export const memoWithEquivalence: {
-    <T extends Component<any, any, any>>(
-        propsAreEqual: Equivalence.Equivalence<Component.Props<T>>
-    ): (
-        self: ExcludeKeys<T, keyof Memoized<Component.Props<T>>>
-    ) => T & Memoized<Component.Props<T>>
-    <T extends Component<any, any, any>>(
-        self: ExcludeKeys<T, keyof Memoized<Component.Props<T>>>,
-        propsAreEqual: Equivalence.Equivalence<Component.Props<T>>,
-    ): T & Memoized<Component.Props<T>>
-} = Function.dual(2, <T extends Component<any, any, any>>(
-    self: ExcludeKeys<T, keyof Memoized<Component.Props<T>>>,
-    propsAreEqual: Equivalence.Equivalence<Component.Props<T>>,
-): T & Memoized<Component.Props<T>> => Object.setPrototypeOf(
-    { ...self, memo: true, memoOptions: { propsAreEqual } },
-    Object.getPrototypeOf(self),
-))
-
-
-export interface Suspense {
-    readonly suspense: true
-}
-
-export type SuspenseProps = Omit<React.SuspenseProps, "children">
-
-export const suspense = <T extends Component<any, any, P>, P extends {}>(
-    self: ExcludeKeys<T, keyof Suspense> & Component<any, any, ExcludeKeys<P, keyof SuspenseProps>>
-): T & Suspense => Object.setPrototypeOf(
-    { ...self, suspense: true },
-    Object.getPrototypeOf(self),
-)
-
-
-export const useFC: {
-    <E, R, P extends {}>(
-        self: Component<E, R, P> & Suspense
-    ): Effect.Effect<React.FC<P & SuspenseProps>, never, Exclude<R, Scope.Scope>>
-    <E, R, P extends {}>(
-        self: Component<E, R, P>
-    ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
-} = Effect.fn("useFC")(function* <E, R, P extends {}>(
-    self: Component<E, R, P> & (Memoized<P> | Suspense | {})
-) {
-    const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
-    runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
-
-    return React.useCallback(function ScopeProvider(props: P) {
-        const scope = Runtime.runSync(runtimeRef.current)(Hook.useScope(
-            Array.from(
-                Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
-            ),
-            self.options,
-        ))
-
-        const FC = React.useMemo(() => {
-            const f: React.FC<P> = Predicate.hasProperty(self, "suspense")
-                ? pipe(
-                    function SuspenseInner(props: { readonly promise: Promise<React.ReactNode> }) {
-                        return React.use(props.promise)
-                    },
-
-                    SuspenseInner => ({ fallback, name, ...props }: P & SuspenseProps) => {
-                        const promise = Runtime.runPromise(runtimeRef.current)(
-                            Effect.provideService(self.body(props as P), Scope.Scope, scope)
-                        )
-
-                        return React.createElement(
-                            React.Suspense,
-                            { fallback, name },
-                            React.createElement(SuspenseInner, { promise }),
-                        )
-                    },
-                )
-                : (props: P) => Runtime.runSync(runtimeRef.current)(
-                    Effect.provideService(self.body(props), Scope.Scope, scope)
-                )
-
-            f.displayName = self.displayName ?? "Anonymous"
-            return Predicate.hasProperty(self, "memo")
-                ? React.memo(f, self.memoOptions.propsAreEqual)
-                : f
-        }, [scope])
-
-        return React.createElement(FC, props)
-    }, [])
-})
-
-export const use: {
-    <E, R, P extends {}>(
-        self: Component<E, R, P> & Suspense,
-        fn: (Component: React.FC<P & SuspenseProps>) => React.ReactNode,
-    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
-    <E, R, P extends {}>(
-        self: Component<E, R, P>,
-        fn: (Component: React.FC<P>) => React.ReactNode,
-    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
-} = Effect.fn("use")(function*(self, fn) {
-    return fn(yield* useFC(self))
 })

packages/effect-fc/src/Memoized.ts

@@ -0,0 +1,47 @@
+import { type Equivalence, Function, Predicate } from "effect"
+import type * as Component from "./Component.js"
+
+
+export const TypeId: unique symbol = Symbol.for("effect-fc/Memoized")
+export type TypeId = typeof TypeId
+
+export interface Memoized<P> extends Memoized.Options<P> {
+    readonly [TypeId]: TypeId
+}
+
+export namespace Memoized {
+    export interface Options<P> {
+        readonly propsAreEqual?: Equivalence.Equivalence<P>
+    }
+}
+
+
+const MemoizedProto = Object.freeze({
+    [TypeId]: TypeId
+} as const)
+
+
+export const isMemoized = (u: unknown): u is Memoized<unknown> => Predicate.hasProperty(u, TypeId)
+
+export const memo = <T extends Component.Component<any, any, any>>(
+    self: T
+): T & Memoized<Component.Component.Props<T>> => Object.setPrototypeOf(
+    Object.assign(function() {}, self, MemoizedProto),
+    Object.getPrototypeOf(self),
+)
+
+export const withOptions: {
+    <T extends Component.Component<any, any, any> & Memoized<any>>(
+        options: Partial<Memoized.Options<Component.Component.Props<T>>>
+    ): (self: T) => T
+    <T extends Component.Component<any, any, any> & Memoized<any>>(
+        self: T,
+        options: Partial<Memoized.Options<Component.Component.Props<T>>>,
+    ): T
+} = Function.dual(2, <T extends Component.Component<any, any, any> & Memoized<any>>(
+    self: T,
+    options: Partial<Memoized.Options<Component.Component.Props<T>>>,
+): T => Object.setPrototypeOf(
+    Object.assign(function() {}, self, options),
+    Object.getPrototypeOf(self),
+))

packages/effect-fc/src/Suspense.ts

@@ -0,0 +1,74 @@
+import { Effect, Function, Predicate, Runtime, Scope } from "effect"
+import * as React from "react"
+import type * as Component from "./Component.js"
+import type { ExcludeKeys } from "./utils.js"
+
+
+export const TypeId: unique symbol = Symbol.for("effect-fc/Suspense")
+export type TypeId = typeof TypeId
+
+export interface Suspense extends Suspense.Options {
+    readonly [TypeId]: TypeId
+}
+
+export namespace Suspense {
+    export interface Options {
+        readonly defaultFallback?: React.ReactNode
+    }
+
+    export type Props = Omit<React.SuspenseProps, "children">
+}
+
+
+const SuspenseProto = Object.freeze({
+    [TypeId]: TypeId,
+    makeFunctionComponent(
+        this: Component.Component<any, any, any> & Suspense,
+        runtimeRef: React.RefObject<Runtime.Runtime<any>>,
+        scope: Scope.Scope,
+    ): React.FC<any> {
+        const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
+
+        return ({ fallback, name, ...props }: Suspense.Props) => {
+            const promise = Runtime.runPromise(runtimeRef.current)(
+                Effect.provideService(this.body(props), Scope.Scope, scope)
+            )
+
+            return React.createElement(
+                React.Suspense,
+                { fallback: fallback ?? this.defaultFallback, name },
+                React.createElement(SuspenseInner, { promise }),
+            )
+        }
+    },
+} as const)
+
+
+export const isSuspense = (u: unknown): u is Suspense => Predicate.hasProperty(u, TypeId)
+
+export const suspense = <T extends Component.Component<P, any, any>, P extends {}>(
+    self: T & Component.Component<ExcludeKeys<P, keyof Suspense.Props>, any, any>
+): (
+    & Omit<T, keyof Component.Component<P, Component.Component.Error<T>, Component.Component.Context<T>>>
+    & Component.Component<P & Suspense.Props, Component.Component.Error<T>, Component.Component.Context<T>>
+    & Suspense
+) => Object.setPrototypeOf(
+    Object.assign(function() {}, self, SuspenseProto),
+    Object.getPrototypeOf(self),
+)
+
+export const withOptions: {
+    <T extends Component.Component<any, any, any> & Suspense>(
+        options: Partial<Suspense.Options>
+    ): (self: T) => T
+    <T extends Component.Component<any, any, any> & Suspense>(
+        self: T,
+        options: Partial<Suspense.Options>,
+    ): T
+} = Function.dual(2, <T extends Component.Component<any, any, any> & Suspense>(
+    self: T,
+    options: Partial<Suspense.Options>,
+): T => Object.setPrototypeOf(
+    Object.assign(function() {}, self, options),
+    Object.getPrototypeOf(self),
+))

packages/effect-fc/src/index.ts

@@ -1,3 +1,5 @@
 export * as Component from "./Component.js"
 export * as Hook from "./Hook.js"
+export * as Memoized from "./Memoized.js"
 export * as ReactManagedRuntime from "./ReactManagedRuntime.js"
+export * as Suspense from "./Suspense.js"

packages/example/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.tanstack

packages/example/.tanstack/tmp/router-generator-K3vMsf/dfef8bd1830fa25b780317b9e88c0651

@@ -1,9 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/dev/memo')({
-  component: RouteComponent,
-})
-
-function RouteComponent() {
-  return <div>Hello "/dev/memo"!</div>
-}

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

@@ -3,14 +3,14 @@ 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 { Component, Hook } from "effect-fc"
+import { Component, Hook, Memoized, Suspense } from "effect-fc"
 import * as React from "react"
 
 
 // Generator version
 const RouteComponent = Component.make(function* AsyncRendering() {
-    const VMemoizedAsyncComponent = yield* Component.useFC(MemoizedAsyncComponent)
+    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
-    const VAsyncComponent = yield* Component.useFC(AsyncComponent)
+    const AsyncComponentFC = yield* AsyncComponent
     const [input, setInput] = React.useState("")
 
     return (
@@ -20,8 +20,8 @@ const RouteComponent = Component.make(function* AsyncRendering() {
                 onChange={e => setInput(e.target.value)}
             />
 
-            <VMemoizedAsyncComponent />
+            <MemoizedAsyncComponentFC fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
-            <VAsyncComponent />
+            <AsyncComponentFC />
         </Flex>
     )
 }).pipe(
@@ -50,25 +50,28 @@ const RouteComponent = Component.make(function* AsyncRendering() {
 // )
 
 
-const AsyncComponent = Component.make(function* AsyncComponent() {
+class AsyncComponent extends Component.make(function* AsyncComponent() {
-    const VSubComponent = yield* Component.useFC(SubComponent)
+    const SubComponentFC = yield* SubComponent
-    yield* Effect.sleep("500 millis")
+
+    yield* Effect.sleep("500 millis") // Async operation
+    // Cannot use React hooks after the async operation
 
     return (
         <Flex direction="column" align="stretch">
             <Text>Rendered!</Text>
-            <VSubComponent />
+            <SubComponentFC />
         </Flex>
     )
 }).pipe(
-    Component.suspense
+    Suspense.suspense,
-)
+    Suspense.withOptions({ defaultFallback: <p>Loading...</p> }),
-const MemoizedAsyncComponent = Component.memo(AsyncComponent)
+) {}
+class MemoizedAsyncComponent extends Memoized.memo(AsyncComponent) {}
 
-const SubComponent = Component.make(function* SubComponent() {
+class SubComponent extends Component.make(function* SubComponent() {
     const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
     return <Text>{state}</Text>
-})
+}) {}
 
 export const Route = createFileRoute("/dev/async-rendering")({
     component: RouteComponent

packages/example/src/routes/dev/memo.tsx

@@ -3,14 +3,11 @@ 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 { Component } from "effect-fc"
+import { Component, Memoized } from "effect-fc"
 import * as React from "react"
 
 
 const RouteComponent = Component.make(function* RouteComponent() {
-    const VSubComponent = yield* Component.useFC(SubComponent)
-    const VMemoizedSubComponent = yield* Component.useFC(MemoizedSubComponent)
-
     const [value, setValue] = React.useState("")
 
     return (
@@ -20,20 +17,20 @@ const RouteComponent = Component.make(function* RouteComponent() {
                 onChange={e => setValue(e.target.value)}
             />
 
-            <VSubComponent />
+            {yield* Effect.map(SubComponent, FC => <FC />)}
-            <VMemoizedSubComponent />
+            {yield* Effect.map(MemoizedSubComponent, FC => <FC />)}
         </Flex>
     )
 }).pipe(
     Component.withRuntime(runtime.context)
 )
 
-const SubComponent = Component.make(function* SubComponent() {
+class SubComponent extends Component.make(function* SubComponent() {
     const id = yield* makeUuid4.pipe(Effect.provide(GetRandomValues.CryptoRandom))
     return <Text>{id}</Text>
-})
+}) {}
 
-const MemoizedSubComponent = Component.memo(SubComponent)
+class MemoizedSubComponent extends Memoized.memo(SubComponent) {}
 
 export const Route = createFileRoute("/dev/memo")({
     component: RouteComponent,

packages/example/src/routes/index.tsx

@@ -10,16 +10,11 @@ const TodosStateLive = TodosState.Default("todos")
 
 export const Route = createFileRoute("/")({
     component: Component.make(function* Index() {
-        const context = yield* Hook.useContext(TodosStateLive, { finalizerExecutionMode: "fork" })
+        return yield* Todos.pipe(
-        return yield* Effect.provide(Component.use(Todos, Todos => <Todos />), context)
+            Effect.map(FC => <FC />),
+            Effect.provide(yield* Hook.useContext(TodosStateLive, { finalizerExecutionMode: "fork" })),
+        )
     }).pipe(
         Component.withRuntime(runtime.context)
     )
-
-    // component: Component.make("Index")(
-    //     () => Hook.useContext(TodosStateLive, { finalizerExecutionMode: "fork" }),
-    //     Effect.andThen(context => Effect.provide(Component.use(Todos, Todos => <Todos />), context)),
-    // ).pipe(
-    //     Component.withRuntime(runtime.context)
-    // )
 })

packages/example/src/todo/Todo.tsx

@@ -2,7 +2,7 @@ import * as Domain from "@/domain"
 import { Box, Button, Flex, IconButton, TextArea } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
-import { Component, Hook } from "effect-fc"
+import { Component, Hook, Memoized } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
@@ -24,7 +24,7 @@ export type TodoProps = (
     | { readonly _tag: "edit", readonly index: number }
 )
 
-export const Todo = Component.make(function* Todo(props: TodoProps) {
+export class Todo extends Component.make(function* Todo(props: TodoProps) {
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
@@ -111,5 +111,5 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
         </Flex>
     )
 }).pipe(
-    Component.memo
+    Memoized.memo
-)
+) {}

packages/example/src/todo/Todos.tsx

@@ -5,7 +5,7 @@ import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
 
-export const Todos = Component.make(function* Todos() {
+export class Todos extends Component.make(function* Todos() {
     const state = yield* TodosState
     const [todos] = yield* Hook.useSubscribeRefs(state.ref)
 
@@ -14,19 +14,19 @@ export const Todos = Component.make(function* Todos() {
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))
 
-    const VTodo = yield* Component.useFC(Todo)
+    const TodoFC = yield* Todo
 
     return (
         <Container>
             <Heading align="center">Todos</Heading>
 
             <Flex direction="column" align="stretch" gap="2" mt="2">
-                <VTodo _tag="new" />
+                <TodoFC _tag="new" />
 
                 {Chunk.map(todos, (v, k) =>
-                    <VTodo key={v.id} _tag="edit" index={k} />
+                    <TodoFC key={v.id} _tag="edit" index={k} />
                 )}
             </Flex>
         </Container>
     )
-})
+}) {}