diff --git a/packages/effect-fc/README.md b/packages/effect-fc/README.md index 09f553e..260f32a 100644 --- a/packages/effect-fc/README.md +++ b/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 { Chunk, Console, Effect } from "effect" -import { Component, Hook } from "effect-fc" +import { Component, Hook, Memoized } from "effect-fc" import { Todo } from "./Todo" import { TodosState } from "./TodosState.service" +import { runtime } from "@/runtime" -// Component.Component -// VVV -export const Todos = Component.make(function* Todos() { +class Todos extends 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 ( Todos - + {Chunk.map(todos, (v, k) => - + )} ) -}) +}).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 +}).pipe( + Component.withRuntime(runtime.context) +) ``` diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx index be03b9f..ecc52e6 100644 --- a/packages/example/src/routes/dev/async-rendering.tsx +++ b/packages/example/src/routes/dev/async-rendering.tsx @@ -20,7 +20,7 @@ const RouteComponent = Component.make(function* AsyncRendering() { onChange={e => setInput(e.target.value)} /> - Loading memoized...

} /> +

Loading memoized...

, [])} /> )