0.1.2 (#3)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/effect-fc/pulls/3

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

@@ -3,14 +3,14 @@ import { Flex, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Effect } from "effect"
-import { Component, Hook } from "effect-fc"
+import { Component, Hook, Memoized, Suspense } from "effect-fc"
 import * as React from "react"
 
 
 // Generator version
 const RouteComponent = Component.make(function* AsyncRendering() {
-    const VMemoizedAsyncComponent = yield* Component.useFC(MemoizedAsyncComponent)
-    const VAsyncComponent = yield* Component.useFC(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 />
-            <VAsyncComponent />
+            <MemoizedAsyncComponentFC fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
+            <AsyncComponentFC />
         </Flex>
     )
 }).pipe(
@@ -50,25 +50,28 @@ const RouteComponent = Component.make(function* AsyncRendering() {
 // )
 
 
-const AsyncComponent = Component.make(function* AsyncComponent() {
-    const VSubComponent = yield* Component.useFC(SubComponent)
-    yield* Effect.sleep("500 millis")
+class AsyncComponent extends Component.make(function* AsyncComponent() {
+    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(
-    Component.suspense
-)
-const MemoizedAsyncComponent = Component.memo(AsyncComponent)
+    Suspense.suspense,
+    Suspense.withOptions({ defaultFallback: <p>Loading...</p> }),
+) {}
+class MemoizedAsyncComponent extends Memoized.memo(AsyncComponent) {}
 
-const SubComponent = Component.make(function* SubComponent() {
+class SubComponent extends Component.make(function* SubComponent() {
     const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
     return <Text>{state}</Text>
-})
+}) {}
 
 export const Route = createFileRoute("/dev/async-rendering")({
     component: RouteComponent

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

@@ -3,14 +3,11 @@ import { Flex, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Effect } from "effect"
-import { Component } from "effect-fc"
+import { Component, Memoized } from "effect-fc"
 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,20 +17,20 @@ 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(
     Component.withRuntime(runtime.context)
 )
 
-const SubComponent = Component.make(function* SubComponent() {
+class SubComponent extends Component.make(function* SubComponent() {
     const id = yield* makeUuid4.pipe(Effect.provide(GetRandomValues.CryptoRandom))
     return <Text>{id}</Text>
-})
+}) {}
 
-const MemoizedSubComponent = Component.memo(SubComponent)
+class MemoizedSubComponent extends Memoized.memo(SubComponent) {}
 
 export const Route = createFileRoute("/dev/memo")({
     component: RouteComponent,

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/Todo.tsx

@@ -2,7 +2,7 @@ import * as Domain from "@/domain"
 import { Box, Button, Flex, IconButton, TextArea } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
-import { Component, Hook } from "effect-fc"
+import { Component, Hook, Memoized } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
@@ -24,7 +24,7 @@ export type TodoProps = (
     | { readonly _tag: "edit", readonly index: number }
 )
 
-export const Todo = Component.make(function* Todo(props: TodoProps) {
+export class Todo extends Component.make(function* Todo(props: TodoProps) {
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
@@ -111,5 +111,5 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
         </Flex>
     )
 }).pipe(
-    Component.memo
-)
+    Memoized.memo
+) {}

packages/example/src/todo/Todos.tsx

@@ -5,7 +5,7 @@ import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
 
-export const Todos = Component.make(function* Todos() {
+export class Todos extends Component.make(function* Todos() {
     const state = yield* TodosState
     const [todos] = yield* Hook.useSubscribeRefs(state.ref)
 
@@ -14,19 +14,19 @@ export const Todos = 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>
     )
-})
+}) {}