Component refactoring

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),
     )
 })

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(

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} />
+    )
+})