0.2.0 (#18)

Co-authored-by: Renovate Bot <renovate-bot@valverde.cloud>
Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: #18

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

@@ -2,7 +2,7 @@ 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 { Async, Component, Hooks, Memoized } from "effect-fc"
+import { Async, Component, Memoized } from "effect-fc"
 import * as React from "react"
 import { runtime } from "@/runtime"
 
@@ -69,7 +69,7 @@ class AsyncComponent extends Component.makeUntraced("AsyncComponent")(function*(
 class MemoizedAsyncComponent extends Memoized.memoized(AsyncComponent) {}
 
 class SubComponent extends Component.makeUntraced("SubComponent")(function*() {
-    const [state] = React.useState(yield* Hooks.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
+    const [state] = React.useState(yield* Component.useOnMount(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
     return <Text>{state}</Text>
 }) {}
 

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

@@ -0,0 +1,42 @@
+import { Container, Flex, Text, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, Effect } from "effect"
+import { Component } from "effect-fc"
+import * as React from "react"
+import { runtime } from "@/runtime"
+
+
+class SubService extends Effect.Service<SubService>()("SubService", {
+    effect: (value: string) => Effect.succeed({ value })
+}) {}
+
+const SubComponent = Component.makeUntraced("SubComponent")(function*() {
+    const service = yield* SubService
+    yield* Component.useOnMount(() => Effect.gen(function*() {
+        yield* Effect.addFinalizer(() => Console.log("SubComponent unmounted"))
+        yield* Console.log("SubComponent mounted")
+    }))
+
+    return <Text>{service.value}</Text>
+})
+
+const ContextView = Component.makeUntraced("ContextView")(function*() {
+    const [serviceValue, setServiceValue] = React.useState("test")
+    const SubServiceLayer = React.useMemo(() => SubService.Default(serviceValue), [serviceValue])
+    const SubComponentFC = yield* Effect.provide(SubComponent, yield* Component.useContext(SubServiceLayer))
+
+    return (
+        <Container>
+            <Flex direction="column" align="center">
+                <TextField.Root value={serviceValue} onChange={e => setServiceValue(e.target.value)} />
+                <SubComponentFC />
+            </Flex>
+        </Container>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
+export const Route = createFileRoute("/dev/context")({
+    component: ContextView
+})

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

@@ -1,41 +0,0 @@
-import { Container } from "@radix-ui/themes"
-import { createFileRoute } from "@tanstack/react-router"
-import { Schema, SubscriptionRef } from "effect"
-import { Component, Hooks, Memoized } from "effect-fc"
-import { TextFieldInput } from "@/lib/input/TextFieldInput"
-import { runtime } from "@/runtime"
-
-
-const IntFromString = Schema.NumberFromString.pipe(Schema.int())
-
-const IntTextFieldInput = TextFieldInput({ schema: IntFromString })
-const StringTextFieldInput = TextFieldInput({ schema: Schema.String })
-
-const Input = Component.makeUntraced("Input")(function*() {
-    const IntTextFieldInputFC = yield* IntTextFieldInput
-    const StringTextFieldInputFC = yield* StringTextFieldInput
-
-    const intRef1 = yield* Hooks.useOnce(() => SubscriptionRef.make(0))
-    // const intRef2 = yield* useOnce(() => SubscriptionRef.make(0))
-    const stringRef = yield* Hooks.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(
-    Memoized.memoized,
-    Component.withRuntime(runtime.context)
-)
-
-export const Route = createFileRoute("/dev/input")({
-    component: Input,
-})

packages/example/src/routes/form.tsx

@@ -1,7 +1,7 @@
 import { Button, Container, Flex } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Option, ParseResult, Schema } from "effect"
-import { Component, Form, Hooks } from "effect-fc"
+import { Component, Form, Subscribable } from "effect-fc"
 import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
 import { runtime } from "@/runtime"
@@ -50,10 +50,15 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
 class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
     const form = yield* RegisterForm
     const submit = yield* Form.useSubmit(form)
-    const [canSubmit] = yield* Hooks.useSubscribables(form.canSubmitSubscribable)
+    const [canSubmit] = yield* Subscribable.useSubscribables(form.canSubmitSubscribable)
 
     const TextFieldFormInputFC = yield* TextFieldFormInput
 
+    yield* Component.useOnMount(() => Effect.gen(function*() {
+        yield* Effect.addFinalizer(() => Console.log("RegisterFormView unmounted"))
+        yield* Console.log("RegisterFormView mounted")
+    }))
+
 
     return (
         <Container width="300">
@@ -87,7 +92,7 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
 const RegisterPage = Component.makeUntraced("RegisterPage")(function*() {
     const RegisterFormViewFC = yield* Effect.provide(
         RegisterFormView,
-        yield* Hooks.useContext(RegisterForm.Default, { finalizerExecutionMode: "fork" }),
+        yield* Component.useContext(RegisterForm.Default),
     )
 
     return <RegisterFormViewFC />

packages/example/src/routes/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { Effect } from "effect"
-import { Component, Hooks } from "effect-fc"
+import { Component } from "effect-fc"
 import { runtime } from "@/runtime"
 import { Todos } from "@/todo/Todos"
 import { TodosState } from "@/todo/TodosState.service"
@@ -11,7 +11,7 @@ const TodosStateLive = TodosState.Default("todos")
 const Index = Component.makeUntraced("Index")(function*() {
     const TodosFC = yield* Effect.provide(
         Todos,
-        yield* Hooks.useContext(TodosStateLive, { finalizerExecutionMode: "fork" }),
+        yield* Component.useContext(TodosStateLive),
     )
 
     return <TodosFC />