packages/example/src/routes/__root.tsx

@@ -13,7 +13,7 @@ export const Route = createRootRoute({
 function Root() {
     return (
         <Theme>
-            <Container>
+            <Container mb="4">
                 <Flex direction="row" justify="center" align="center" gap="2">
                     <Link to="/">Index</Link>
                     <Link to="/blank">Blank</Link>

packages/example/src/routes/index.tsx

@@ -1,4 +1,5 @@
 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"
@@ -7,9 +8,11 @@ import { ReactComponent, ReactHook } from "effect-fc"
 
 export const Route = createFileRoute("/")({
     component: pipe(
-        Effect.fn(function*() {
-            const context = yield* ReactHook.useMemoLayer(TodosState.Default("todos"))
-            return <div>Hello "/"!</div>
+        Effect.fn("Route")(function*() {
+            return yield* Effect.provide(
+                ReactComponent.use(Todos, Todos => <Todos />),
+                yield* ReactHook.useMemoLayer(TodosState.Default("todos")),
+            )
         }),
 
         ReactComponent.withDisplayName("Index"),

packages/example/src/todo/Todo.tsx

@@ -0,0 +1,72 @@
+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 { ReactComponent, ReactHook } from "effect-fc"
+import { SubscriptionSubRef } from "effect-fc/types"
+import * as React from "react"
+import { TodosState } from "./TodosState.service"
+
+
+export type TodoProps = (
+    | {
+        readonly _tag: "new"
+        readonly ref?: never
+    }
+    | {
+        readonly _tag: "edit"
+        readonly ref: SubscriptionRef.SubscriptionRef<Domain.Todo.Todo>
+    }
+)
+
+export const Todo = pipe(
+    Effect.fn(function*(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 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))}
+                />
+
+                {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"),
+)
+
+
+const makeTodo = makeUuid4.pipe(
+    Effect.map(id => Domain.Todo.Todo.make({
+        id,
+        content: "",
+        completedAt: Option.none(),
+    })),
+    Effect.provide(GetRandomValues.CryptoRandom),
+)

packages/example/src/todo/Todos.tsx

@@ -0,0 +1,56 @@
+import { Container, Flex, Heading } from "@radix-ui/themes"
+import { Chunk, Effect, pipe } from "effect"
+import { ReactComponent, ReactHook } from "effect-fc"
+import { SubscriptionSubRef } from "effect-fc/types"
+import * as React from "react"
+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)
+
+        return (
+            <Container>
+                <Heading align="center">Todos</Heading>
+
+                <Flex direction="column" align="stretch" gap="2" mt="2">
+                    {yield* ReactComponent.use(Todo, Todo =>
+                        <Todo _tag="new" />
+                    )}
+
+                    {yield* Effect.all(Chunk.map(todos, (v, k) =>
+                        ReactComponent.use(TodosItem, TodosItem =>
+                            <TodosItem key={v.id} index={k} />
+                        )
+                    ))}
+                </Flex>
+            </Container>
+        )
+    }),
+
+    ReactComponent.withDisplayName("Todos"),
+)
+
+
+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])
+
+        return yield* ReactComponent.use(Todo, Todo =>
+            <Todo _tag="edit" ref={ref} />
+        )
+    }),
+
+    ReactComponent.withDisplayName("TodosItem"),
+)