Component refactoring

2025-07-06 00:48:50 +02:00
parent a4dca4281a
commit 198df1f2f2
5 changed files with 126 additions and 122 deletions
--- a/packages/effect-fc/src/ReactComponent.ts
+++ b/packages/effect-fc/src/ReactComponent.ts
@@ -1,47 +1,71 @@
-import { Context, Effect, ExecutionStrategy, Exit, Function, Ref, Runtime, Scope, Tracer } from "effect"
-import type { Mutable } from "effect/Types"
+import { Context, Effect, ExecutionStrategy, Exit, Function, Pipeable, Ref, Runtime, Scope, String, Tracer, type Types, type Utils } from "effect"
 import * as React from "react"
-import type * as ReactHook from "./ReactHook.js"


-export interface ReactComponent<E, R, P> {
+export interface ReactComponent<E, R, P> extends Pipeable.Pipeable {
    (props: P): Effect.Effect<React.ReactNode, E, R>
    readonly displayName?: string
+    readonly options: Options
 }

-export type Error<T> = T extends ReactComponent<infer E, any, any> ? E : never
-export type Context<T> = T extends ReactComponent<any, infer R, any> ? R : never
-export type Props<T> = T extends ReactComponent<any, any, infer P> ? P : never
+export interface Options {
+    readonly finalizerExecutionMode: "sync" | "fork"
+    readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
+}
+
+export type Error<T> = T extends ReactComponent<infer E, infer _R, infer _P> ? E : never
+export type Context<T> = T extends ReactComponent<infer _E, infer R, infer _P> ? R : never
+export type Props<T> = T extends ReactComponent<infer _E, infer _R, infer P> ? P : never

 export const nonReactiveTags = [Tracer.ParentSpan] as const


-export const withDisplayName: {
-    <C extends ReactComponent<any, any, any>>(displayName: string): (self: C) => C
-    <C extends ReactComponent<any, any, any>>(self: C, displayName: string): C
-} = Function.dual(2, <C extends ReactComponent<any, any, any>>(
-    self: C,
-    displayName: string,
-): C => {
-    (self as Mutable<C>).displayName = displayName
-    return self
-})
+export interface MakeOptions {
+    readonly traced?: boolean
+    readonly finalizerExecutionMode?: "sync" | "fork"
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+}
+
+export const make = <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, P>(
+    body: (props: P) => Generator<Eff, React.ReactNode, never>,
+    options?: MakeOptions,
+): ReactComponent<
+    [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,
+    P
+> => {
+    const displayName = !String.isEmpty(body.name) ? body.name : undefined
+
+    const f = ((options?.traced ?? true)
+        ? displayName
+            ? Effect.fn(displayName)(body)
+            : Effect.fn(body)
+        : Effect.fnUntraced(body)
+    ) as ReactComponent<any, any, any>
+
+    f.pipe = function pipe() { return Pipeable.pipeArguments(this, arguments) };
+    (f as Types.Mutable<typeof f>).displayName = displayName;
+    (f as Types.Mutable<typeof f>).options = {
+        finalizerExecutionStrategy: options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential,
+        finalizerExecutionMode: options?.finalizerExecutionMode ?? "sync",
+    }
+
+    return f
+}


 export const useFC: {
    <E, R, P extends {} = {}>(
-        self: ReactComponent<E, R, P>,
-        options?: ReactHook.ScopeOptions,
+        self: ReactComponent<E, R, P>
    ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
 } = Effect.fnUntraced(function* <E, R, P extends {}>(
-    self: ReactComponent<E, R, P>,
-    options?: ReactHook.ScopeOptions,
+    self: ReactComponent<E, R, P>
 ) {
    const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
    runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()

    return React.useMemo(() => function ScopeProvider(props: P) {
-        const scope = useScope(runtimeRef.current, options)
+        const scope = useScope(runtimeRef.current, self.options)

        const FC = React.useMemo(() => {
            const f = (props: P) => Runtime.runSync(runtimeRef.current)(
@@ -59,10 +83,10 @@ export const useFC: {

 const useScope = (
    runtime: Runtime.Runtime<never>,
-    options?: ReactHook.ScopeOptions,
+    options: Options,
 ) => {
    const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(
-        Effect.all([Ref.make(true), makeScope(options)])
+        Effect.all([Ref.make(true), Scope.make(options.finalizerExecutionStrategy)])
    ), [])
    const [scope, setScope] = React.useState(initialScope)

@@ -73,7 +97,7 @@ const useScope = (
                () => closeScope(scope, runtime, options),
            ),

-            onFalse: () => makeScope(options).pipe(
+            onFalse: () => Scope.make(options.finalizerExecutionStrategy).pipe(
                Effect.tap(scope => Effect.sync(() => setScope(scope))),
                Effect.map(scope => () => closeScope(scope, runtime, options)),
            ),
@@ -83,13 +107,12 @@ const useScope = (
    return scope
 }

-const makeScope = (options?: ReactHook.ScopeOptions) => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
 const closeScope = (
    scope: Scope.CloseableScope,
    runtime: Runtime.Runtime<never>,
-    options?: ReactHook.ScopeOptions,
+    options: Options,
 ) => {
-    switch (options?.finalizerExecutionMode ?? "sync") {
+    switch (options.finalizerExecutionMode) {
        case "sync":
            Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
            break
@@ -104,27 +127,23 @@ export const use: {
    <E, R, P extends {} = {}>(
        self: ReactComponent<E, R, P>,
        fn: (Component: React.FC<P>) => React.ReactNode,
-        options?: ReactHook.ScopeOptions,
    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
-} = Effect.fnUntraced(function*(self, fn, options) {
-    return fn(yield* useFC(self, options))
+} = Effect.fnUntraced(function*(self, fn) {
+    return fn(yield* useFC(self))
 })

 export const withRuntime: {
    <E, R, P extends {} = {}>(
        context: React.Context<Runtime.Runtime<R>>,
-        options?: ReactHook.ScopeOptions,
    ): (self: ReactComponent<E, R | Scope.Scope, P>) => React.FC<P>
    <E, R, P extends {} = {}>(
        self: ReactComponent<E, R | Scope.Scope, P>,
        context: React.Context<Runtime.Runtime<R>>,
-        options?: ReactHook.ScopeOptions,
    ): React.FC<P>
-} = Function.dual(3, <E, R, P extends {}>(
+} = Function.dual(2, <E, R, P extends {}>(
    self: ReactComponent<E, R | Scope.Scope, P>,
    context: React.Context<Runtime.Runtime<R>>,
-    options?: ReactHook.ScopeOptions,
 ): React.FC<P> => function WithRuntime(props) {
    const runtime = React.useContext(context)
-    return React.createElement(Runtime.runSync(runtime)(useFC(self, options)), props)
+    return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
 })
--- a/packages/effect-fc/src/ReactHook.ts
+++ b/packages/effect-fc/src/ReactHook.ts
@@ -4,8 +4,8 @@ import { SetStateAction } from "./types/index.js"


 export interface ScopeOptions {
-    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
    readonly finalizerExecutionMode?: "sync" | "fork"
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
 }


--- a/packages/example/src/routes/index.tsx
+++ b/packages/example/src/routes/index.tsx
@@ -2,20 +2,17 @@ import { runtime } from "@/runtime"
 import { Todos } from "@/todo/Todos"
 import { TodosState } from "@/todo/TodosState.service"
 import { createFileRoute } from "@tanstack/react-router"
-import { Effect, pipe } from "effect"
+import { Effect } from "effect"
 import { ReactComponent, ReactHook } from "effect-fc"


 export const Route = createFileRoute("/")({
-    component: pipe(
-        Effect.fn("Route")(function*() {
-            return yield* Effect.provide(
-                ReactComponent.use(Todos, Todos => <Todos />),
-                yield* ReactHook.useMemoLayer(TodosState.Default("todos")),
-            )
-        }),
-
-        ReactComponent.withDisplayName("Index"),
-        ReactComponent.withRuntime(runtime.context, { finalizerExecutionMode: "fork" }),
+    component: ReactComponent.make(function* Index() {
+        return yield* Effect.provide(
+            ReactComponent.use(Todos, Todos => <Todos />),
+            yield* ReactHook.useMemoLayer(TodosState.Default("todos")),
+        )
+    }).pipe(
+        ReactComponent.withRuntime(runtime.context),
    )
 })
--- a/packages/example/src/todo/Todo.tsx
+++ b/packages/example/src/todo/Todo.tsx
@@ -1,7 +1,7 @@
 import * as Domain from "@/domain"
 import { Button, Flex, TextArea } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, Effect, Match, Option, pipe, Ref, Runtime, SubscriptionRef } from "effect"
+import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
 import { ReactComponent, ReactHook } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
@@ -19,47 +19,43 @@ export type TodoProps = (
    }
 )

-export const Todo = pipe(
-    Effect.fn(function*(props: TodoProps) {
-        const runtime = yield* Effect.runtime()
-        const state = yield* TodosState
+export const Todo = ReactComponent.make(function* Todo(props: TodoProps) {
+    const runtime = yield* Effect.runtime()
+    const state = yield* TodosState

-        const ref = yield* ReactHook.useMemo(() => Match.value(props).pipe(
-            Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
-            Match.tag("edit", ({ ref }) => Effect.succeed(ref)),
-            Match.exhaustive,
-        ), [props._tag, props.ref])
+    const ref = yield* ReactHook.useMemo(() => Match.value(props).pipe(
+        Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
+        Match.tag("edit", ({ ref }) => Effect.succeed(ref)),
+        Match.exhaustive,
+    ), [props._tag, props.ref])

-        const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
-        const [todo] = yield* ReactHook.useSubscribeRefs(ref)
+    const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
+    const [todo] = yield* ReactHook.useSubscribeRefs(ref)

-        return (
-            <Flex direction="column" align="stretch" gap="2">
-                <TextArea
-                    value={todo.content}
-                    onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
-                />
+    return (
+        <Flex direction="column" align="stretch" gap="2">
+            <TextArea
+                value={todo.content}
+                onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
+            />

-                {props._tag === "new" &&
-                    <Flex direction="row" justify="center">
-                        <Button
-                            onClick={() => ref.pipe(
-                                Effect.andThen(todo => Ref.update(state.ref, Chunk.append(todo))),
-                                Effect.andThen(makeTodo),
-                                Effect.andThen(todo => Ref.set(ref, todo)),
-                                Runtime.runSync(runtime),
-                            )}
-                        >
-                            Ajouter
-                        </Button>
-                    </Flex>
-                }
-            </Flex>
-        )
-    }),
-
-    ReactComponent.withDisplayName("Todo"),
-)
+            {props._tag === "new" &&
+                <Flex direction="row" justify="center">
+                    <Button
+                        onClick={() => ref.pipe(
+                            Effect.andThen(todo => Ref.update(state.ref, Chunk.append(todo))),
+                            Effect.andThen(makeTodo),
+                            Effect.andThen(todo => Ref.set(ref, todo)),
+                            Runtime.runSync(runtime),
+                        )}
+                    >
+                        Ajouter
+                    </Button>
+                </Flex>
+            }
+        </Flex>
+    )
+})


 const makeTodo = makeUuid4.pipe(
--- a/packages/example/src/todo/Todos.tsx
+++ b/packages/example/src/todo/Todos.tsx
@@ -1,5 +1,5 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
-import { Chunk, Effect, pipe } from "effect"
+import { Chunk } from "effect"
 import { ReactComponent, ReactHook } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
@@ -7,49 +7,41 @@ import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"


-export const Todos = pipe(
-    Effect.fn(function*() {
-        const state = yield* TodosState
-        const [todos] = yield* ReactHook.useSubscribeRefs(state.ref)
+export const Todos = ReactComponent.make(function* Todos() {
+    const state = yield* TodosState
+    const [todos] = yield* ReactHook.useSubscribeRefs(state.ref)

-        const VTodosItem = yield* ReactComponent.useFC(TodosItem)
-        const VTodo = yield* ReactComponent.useFC(Todo)
+    const VTodosItem = yield* ReactComponent.useFC(TodosItem)
+    const VTodo = yield* ReactComponent.useFC(Todo)

-        return (
-            <Container>
-                <Heading align="center">Todos</Heading>
+    return (
+        <Container>
+            <Heading align="center">Todos</Heading>

-                <Flex direction="column" align="stretch" gap="2" mt="2">
-                    <VTodo _tag="new" />
+            <Flex direction="column" align="stretch" gap="2" mt="2">
+                <VTodo _tag="new" />

-                    {Chunk.map(todos, (v, k) =>
-                        <VTodosItem key={v.id} index={k} />
-                    )}
-                </Flex>
-            </Container>
-        )
-    }),
-
-    ReactComponent.withDisplayName("Todos"),
-)
+                {Chunk.map(todos, (v, k) =>
+                    <VTodosItem key={v.id} index={k} />
+                )}
+            </Flex>
+        </Container>
+    )
+})


 interface TodosItemProps {
    readonly index: number
 }

-const TodosItem = pipe(
-    Effect.fn(function*(props: TodosItemProps) {
-        const state = yield* TodosState
-        const ref = React.useMemo(() => SubscriptionSubRef.makeFromGetSet(state.ref, {
-            get: parent => Chunk.unsafeGet(parent, props.index),
-            set: (parent, v) => Chunk.replace(parent, props.index, v),
-        }), [props.index, state.ref])
+const TodosItem = ReactComponent.make(function* TodosItem(props: TodosItemProps) {
+    const state = yield* TodosState
+    const ref = React.useMemo(() => SubscriptionSubRef.makeFromGetSet(state.ref, {
+        get: parent => Chunk.unsafeGet(parent, props.index),
+        set: (parent, v) => Chunk.replace(parent, props.index, v),
+    }), [props.index, state.ref])

-        return yield* ReactComponent.use(Todo, Todo =>
-            <Todo _tag="edit" ref={ref} />
-        )
-    }),
-
-    ReactComponent.withDisplayName("TodosItem"),
-)
+    return yield* ReactComponent.use(Todo, Todo =>
+        <Todo _tag="edit" ref={ref} />
+    )
+})