Cleanup

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

@@ -9,8 +9,8 @@ import * as React from "react"
 
 // Generator version
 const RouteComponent = Component.make(function* AsyncRendering() {
-    const VMemoizedAsyncComponent = yield* MemoizedAsyncComponent
-    const VAsyncComponent = yield* AsyncComponent
+    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
+    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 fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
-            <VAsyncComponent />
+            <MemoizedAsyncComponentFC fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
+            <AsyncComponentFC />
         </Flex>
     )
 }).pipe(
@@ -51,13 +51,15 @@ const RouteComponent = Component.make(function* AsyncRendering() {
 
 
 class AsyncComponent extends Component.make(function* AsyncComponent() {
-    const VSubComponent = yield* Component.useFC(SubComponent)
-    yield* Effect.sleep("500 millis")
+    const SubComponentFC = yield* SubComponent
+
+    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(

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

@@ -8,9 +8,6 @@ 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,8 +17,8 @@ const RouteComponent = Component.make(function* RouteComponent() {
                 onChange={e => setValue(e.target.value)}
             />
 
-            <VSubComponent />
-            <VMemoizedSubComponent />
+            {yield* Effect.map(SubComponent, FC => <FC />)}
+            {yield* Effect.map(MemoizedSubComponent, FC => <FC />)}
         </Flex>
     )
 }).pipe(

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* Effect.provide(Component.use(Todos, Todos => <Todos />), context)
+        return yield* Todos.pipe(
+            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/Todos.tsx

@@ -14,17 +14,17 @@ export class Todos extends 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>