Refactor Hooks

packages/example/src/domain/Todo.ts

@@ -1,5 +1,5 @@
-import { assertEncodedJsonifiable } from "@/lib/schema"
 import { Schema } from "effect"
+import { assertEncodedJsonifiable } from "@/lib/schema"
 
 
 export class Todo extends Schema.Class<Todo>("Todo")({

packages/example/src/lib/input/TextAreaInput.tsx

@@ -1,41 +0,0 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: effect-fc HOC */
-import { Callout, Flex, TextArea, type TextAreaProps } from "@radix-ui/themes"
-import { Array, type Equivalence, Option, ParseResult, type Schema, Struct } from "effect"
-import { Component } from "effect-fc"
-import { useInput } from "effect-fc/Hooks"
-import * as React from "react"
-
-
-export type TextAreaInputProps<A, R> = Omit<useInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextAreaProps, "ref">
-
-export const TextAreaInput = <A, R>(options: {
-    readonly schema: Schema.Schema<A, string, R>
-    readonly equivalence?: Equivalence.Equivalence<A>
-}): Component.Component<
-    TextAreaInputProps<A, R>,
-    React.JSX.Element,
-    ParseResult.ParseError,
-    R
-> => Component.makeUntraced("TextFieldInput")(function*(props) {
-    const input = yield* useInput({ ...options, ...props })
-    const issue = React.useMemo(() => input.error.pipe(
-        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
-        Option.flatMap(Array.head),
-    ), [input.error])
-
-    return (
-        <Flex direction="column" gap="1">
-            <TextArea
-                value={input.value}
-                onChange={e => input.setValue(e.target.value)}
-                {...Struct.omit(props, "ref")}
-            />
-
-            {Option.isSome(issue) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>{issue.value.message}</Callout.Text>
-                </Callout.Root>
-            }
-        </Flex>
-    )
-})

packages/example/src/lib/input/TextFieldInput.tsx

@@ -1,69 +0,0 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: effect-fc HOC */
-import { Callout, Checkbox, Flex, TextField } from "@radix-ui/themes"
-import { Array, type Equivalence, Option, ParseResult, type Schema, Struct } from "effect"
-import { Component } from "effect-fc"
-import { useInput, useOptionalInput } from "effect-fc/Hooks"
-import * as React from "react"
-
-
-export type TextFieldInputProps<A, R> = (
-    & Omit<useInput.Options<A, R>, "schema" | "equivalence">
-    & Omit<TextField.RootProps, "ref">
-)
-export type TextFieldOptionalInputProps<A, R> = (
-    & Omit<useOptionalInput.Options<A, R>, "schema" | "equivalence">
-    & Omit<TextField.RootProps, "ref" | "defaultValue">
-)
-
-export const TextFieldInput = <A, R, O extends boolean = false>(options: {
-    readonly optional?: O
-    readonly schema: Schema.Schema<A, string, R>
-    readonly equivalence?: Equivalence.Equivalence<A>
-}) => Component.makeUntraced("TextFieldInput")(function*(props: O extends true
-    ? TextFieldOptionalInputProps<A, R>
-    : TextFieldInputProps<A, R>
-) {
-    const input: (
-        | { readonly optional: true } & useOptionalInput.Result
-        | { readonly optional: false } & useInput.Result
-    ) = options.optional
-        ? {
-            optional: true,
-            ...yield* useOptionalInput({ ...options, ...props as TextFieldOptionalInputProps<A, R> }),
-        }
-        : {
-            optional: false,
-            ...yield* useInput({ ...options, ...props as TextFieldInputProps<A, R> }),
-        }
-
-    const issue = React.useMemo(() => input.error.pipe(
-        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
-        Option.flatMap(Array.head),
-    ), [input.error])
-
-    return (
-        <Flex direction="column" gap="1">
-            <Flex direction="row" align="center" gap="1">
-                {input.optional &&
-                    <Checkbox
-                        checked={input.enabled}
-                        onCheckedChange={checked => input.setEnabled(checked !== "indeterminate" && checked)}
-                    />
-                }
-
-                <TextField.Root
-                    value={input.value}
-                    onChange={e => input.setValue(e.target.value)}
-                    disabled={input.optional ? !input.enabled : undefined}
-                    {...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref", "defaultValue")}
-                />
-            </Flex>
-
-            {(!(input.optional && !input.enabled) && Option.isSome(issue)) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>{issue.value.message}</Callout.Text>
-                </Callout.Root>
-            }
-        </Flex>
-    )
-})

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

@@ -1,19 +1,14 @@
 import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, DateTime, Effect, Match, Option, Ref, Runtime, Schema, Stream, SubscriptionRef } from "effect"
-import { Component, Hooks, Memoized, Subscribable, SubscriptionSubRef } from "effect-fc"
+import { Component, Form, Hooks, Memoized, Subscribable, SubscriptionSubRef } from "effect-fc"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
 import * as Domain from "@/domain"
-import { TextAreaInput } from "@/lib/input/TextAreaInput"
-import { TextFieldInput } from "@/lib/input/TextFieldInput"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
 import { TodosState } from "./TodosState.service"
 
 
-const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
-const OptionalDateTimeInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })
-
 const makeTodo = makeUuid4.pipe(
     Effect.map(id => Domain.Todo.Todo.make({
         id,
@@ -48,10 +43,23 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
         Effect.let("completedAtRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["completedAt"])),
     ), [props._tag, props._tag === "edit" ? props.id : undefined])
 
-    const [index, size] = yield* Hooks.useSubscribables(indexRef, state.sizeSubscribable)
+    const { form } = yield* Component.useOnChange(() => Effect.gen(function*() {
+        const form = yield* Form.service({
+            schema: Domain.Todo.TodoFromJson,
+            initialEncodedValue: yield* Schema.encode(Domain.Todo.TodoFromJson)(
+                yield* Match.value(props).pipe(
+                    Match.tag("new", () => makeTodo),
+                    Match.tag("edit", ({ id }) => state.getElementRef(id)),
+                    Match.exhaustive,
+                )
+            ),
+            onSubmit: v => Effect.void,
+        })
 
-    const StringTextAreaInputFC = yield* StringTextAreaInput
-    const OptionalDateTimeInputFC = yield* OptionalDateTimeInput
+        return { form }
+    }), [props._tag, props._tag === "edit" ? props.id : undefined])
+
+    const [index, size] = yield* Hooks.useSubscribables(indexRef, state.sizeSubscribable)
 
 
     return (

packages/example/src/todo/Todos.tsx

@@ -1,15 +1,15 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk, Console, Effect } from "effect"
-import { Component, Hooks } from "effect-fc"
+import { Component, Subscribable } from "effect-fc"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
 
 export class Todos extends Component.makeUntraced("Todos")(function*() {
     const state = yield* TodosState
-    const [todos] = yield* Hooks.useSubscribables(state.ref)
+    const [todos] = yield* Subscribable.useSubscribables(state.ref)
 
-    yield* Hooks.useOnce(() => Effect.andThen(
+    yield* Component.useOnMount(() => Effect.andThen(
         Console.log("Todos mounted"),
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))