0.1.3 (#4)

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

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

@@ -3,12 +3,13 @@ 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, Memoized, Suspense } from "effect-fc"
+import { Component, Memo, Suspense } from "effect-fc"
+import { Hooks } from "effect-fc/hooks"
 import * as React from "react"
 
 
 // Generator version
-const RouteComponent = Component.make(function* AsyncRendering() {
+const RouteComponent = Component.makeUntraced(function* AsyncRendering() {
     const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
     const AsyncComponentFC = yield* AsyncComponent
     const [input, setInput] = React.useState("")
@@ -50,7 +51,7 @@ const RouteComponent = Component.make(function* AsyncRendering() {
 // )
 
 
-class AsyncComponent extends Component.make(function* AsyncComponent() {
+class AsyncComponent extends Component.makeUntraced(function* AsyncComponent() {
     const SubComponentFC = yield* SubComponent
 
     yield* Effect.sleep("500 millis") // Async operation
@@ -66,10 +67,10 @@ class AsyncComponent extends Component.make(function* AsyncComponent() {
     Suspense.suspense,
     Suspense.withOptions({ defaultFallback: <p>Loading...</p> }),
 ) {}
-class MemoizedAsyncComponent extends Memoized.memo(AsyncComponent) {}
+class MemoizedAsyncComponent extends Memo.memo(AsyncComponent) {}
 
-class SubComponent extends Component.make(function* SubComponent() {
-    const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
+class SubComponent extends Component.makeUntraced(function* SubComponent() {
+    const [state] = React.useState(yield* Hooks.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
     return <Text>{state}</Text>
 }) {}
 

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

@@ -0,0 +1,42 @@
+import { TextFieldInput } from "@/lib/input/TextFieldInput"
+import { runtime } from "@/runtime"
+import { Container } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Schema, SubscriptionRef } from "effect"
+import { Component, Memo } from "effect-fc"
+import { useInput, useOnce, useRefState } from "effect-fc/hooks"
+
+
+const IntFromString = Schema.NumberFromString.pipe(Schema.int())
+
+const IntTextFieldInput = TextFieldInput({ schema: IntFromString })
+const StringTextFieldInput = TextFieldInput({ schema: Schema.String })
+
+const Input = Component.makeUntraced(function* Input() {
+    const IntTextFieldInputFC = yield* IntTextFieldInput
+    const StringTextFieldInputFC = yield* StringTextFieldInput
+
+    const intRef1 = yield* useOnce(() => SubscriptionRef.make(0))
+    const intRef2 = yield* useOnce(() => SubscriptionRef.make(0))
+    const stringRef = yield* useOnce(() => SubscriptionRef.make(""))
+    // yield* useFork(() => Stream.runForEach(intRef1.changes, Console.log), [intRef1])
+
+    const input2 = yield* useInput({ schema: IntFromString, ref: intRef2 })
+
+    const [str, setStr] = yield* useRefState(stringRef)
+
+    return (
+        <Container>
+            <IntTextFieldInputFC ref={intRef1} />
+            <StringTextFieldInputFC ref={stringRef} />
+            <StringTextFieldInputFC ref={stringRef} />
+        </Container>
+    )
+}).pipe(
+    Memo.memo,
+    Component.withRuntime(runtime.context)
+)
+
+export const Route = createFileRoute("/dev/input")({
+    component: Input,
+})

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

@@ -3,11 +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, Memoized } from "effect-fc"
+import { Component, Memo } from "effect-fc"
 import * as React from "react"
 
 
-const RouteComponent = Component.make(function* RouteComponent() {
+const RouteComponent = Component.makeUntraced(function* RouteComponent() {
     const [value, setValue] = React.useState("")
 
     return (
@@ -25,12 +25,12 @@ const RouteComponent = Component.make(function* RouteComponent() {
     Component.withRuntime(runtime.context)
 )
 
-class SubComponent extends Component.make(function* SubComponent() {
+class SubComponent extends Component.makeUntraced(function* SubComponent() {
     const id = yield* makeUuid4.pipe(Effect.provide(GetRandomValues.CryptoRandom))
     return <Text>{id}</Text>
 }) {}
 
-class MemoizedSubComponent extends Memoized.memo(SubComponent) {}
+class MemoizedSubComponent extends Memo.memo(SubComponent) {}
 
 export const Route = createFileRoute("/dev/memo")({
     component: RouteComponent,

packages/example/src/routes/index.tsx

@@ -3,18 +3,21 @@ import { Todos } from "@/todo/Todos"
 import { TodosState } from "@/todo/TodosState.service"
 import { createFileRoute } from "@tanstack/react-router"
 import { Effect } from "effect"
-import { Component, Hook } from "effect-fc"
+import { Component } from "effect-fc"
+import { useContext } from "effect-fc/hooks"
 
 
 const TodosStateLive = TodosState.Default("todos")
 
+const Index = Component.makeUntraced(function* Index() {
+    const context = yield* useContext(TodosStateLive, { finalizerExecutionMode: "fork" })
+    const TodosFC = yield* Effect.provide(Todos, context)
+
+    return <TodosFC />
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
 export const Route = createFileRoute("/")({
-    component: Component.make(function* Index() {
-        return yield* Todos.pipe(
-            Effect.map(FC => <FC />),
-            Effect.provide(yield* Hook.useContext(TodosStateLive, { finalizerExecutionMode: "fork" })),
-        )
-    }).pipe(
-        Component.withRuntime(runtime.context)
-    )
+    component: Index
 })