Form work

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

bun.lock

@@ -46,9 +46,21 @@
         "vite": "^6.2.6",
       },
     },
+    "packages/extension-form": {
+      "name": "@reffuse/extension-form",
+      "version": "0.1.0",
+      "devDependencies": {
+        "reffuse": "workspace:*",
+      },
+      "peerDependencies": {
+        "effect": "^3.13.0",
+        "react": "^19.0.0",
+        "reffuse": "^0.1.6",
+      },
+    },
     "packages/extension-lazyref": {
       "name": "@reffuse/extension-lazyref",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "devDependencies": {
         "reffuse": "workspace:*",
       },
@@ -57,12 +69,12 @@
         "@types/react": "^19.0.0",
         "effect": "^3.13.0",
         "react": "^19.0.0",
-        "reffuse": "^0.1.4",
+        "reffuse": "^0.1.6",
       },
     },
     "packages/extension-query": {
       "name": "@reffuse/extension-query",
-      "version": "0.1.2",
+      "version": "0.1.3",
       "devDependencies": {
         "reffuse": "workspace:*",
       },
@@ -73,12 +85,12 @@
         "@types/react": "^19.0.0",
         "effect": "^3.13.0",
         "react": "^19.0.0",
-        "reffuse": "^0.1.4",
+        "reffuse": "^0.1.6",
       },
     },
     "packages/reffuse": {
       "name": "reffuse",
-      "version": "0.1.5",
+      "version": "0.1.6",
       "peerDependencies": {
         "@types/react": "^19.0.0",
         "effect": "^3.13.0",
@@ -363,6 +375,8 @@
 
     "@reffuse/example": ["@reffuse/example@workspace:packages/example"],
 
+    "@reffuse/extension-form": ["@reffuse/extension-form@workspace:packages/extension-form"],
+
     "@reffuse/extension-lazyref": ["@reffuse/extension-lazyref@workspace:packages/extension-lazyref"],
 
     "@reffuse/extension-query": ["@reffuse/extension-query@workspace:packages/extension-query"],

packages/example/src/QueryErrorHandler.tsx

@@ -1,57 +0,0 @@
-import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
-import { QueryErrorHandler } from "@reffuse/extension-query"
-import { Cause, Console, Context, Effect, Either, flow, Match, Option, Stream } from "effect"
-import { useState } from "react"
-import { AppQueryErrorHandler } from "./query"
-import { R } from "./reffuse"
-
-
-export function VQueryErrorHandler() {
-    const [failure, setFailure] = useState(Option.none<Cause.Cause<
-        QueryErrorHandler.Error<Context.Tag.Service<AppQueryErrorHandler>>
-    >>())
-
-    R.useFork(() => AppQueryErrorHandler.pipe(Effect.flatMap(handler =>
-        Stream.runForEach(handler.errors, v => Console.error(v).pipe(
-            Effect.andThen(Effect.sync(() => { setFailure(Option.some(v)) }))
-        ))
-    )), [])
-
-    return Option.match(failure, {
-        onSome: v => (
-            <AlertDialog.Root open>
-                <AlertDialog.Content maxWidth="450px">
-                    <AlertDialog.Title>Error</AlertDialog.Title>
-                    <AlertDialog.Description size="2">
-                        {Either.match(Cause.failureOrCause(v), {
-                            onLeft: flow(
-                                Match.value,
-                                Match.tag("RequestError", () => <Text>HTTP request error</Text>),
-                                Match.tag("ResponseError", () => <Text>HTTP response error</Text>),
-                                Match.exhaustive,
-                            ),
-
-                            onRight: flow(
-                                Cause.dieOption,
-                                Option.match({
-                                    onSome: () => <Text>Unrecoverable defect</Text>,
-                                    onNone: () => <Text>Unknown error</Text>,
-                                }),
-                            ),
-                        })}
-                    </AlertDialog.Description>
-
-                    <Flex gap="3" mt="4" justify="end">
-                        <AlertDialog.Action>
-                            <Button variant="solid" color="red" onClick={() => setFailure(Option.none())}>
-                                Ok
-                            </Button>
-                        </AlertDialog.Action>
-                    </Flex>
-                </AlertDialog.Content>
-            </AlertDialog.Root>
-        ),
-
-        onNone: () => <></>,
-    })
-}

packages/example/src/VQueryErrorHandler.tsx

@@ -0,0 +1,57 @@
+import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
+import { Cause, Console, Effect, Either, flow, Match, Option, Stream } from "effect"
+import { useState } from "react"
+import { AppQueryErrorHandler } from "./query"
+import { R } from "./reffuse"
+
+
+export function VQueryErrorHandler() {
+    const [open, setOpen] = useState(false)
+
+    const error = R.useSubscribeStream(
+        R.useMemo(() => AppQueryErrorHandler.pipe(
+            Effect.map(handler => handler.errors.pipe(
+                Stream.changes,
+                Stream.tap(Console.error),
+                Stream.tap(() => Effect.sync(() => setOpen(true))),
+            ))
+        ), [])
+    )
+
+    if (Option.isNone(error))
+        return <></>
+
+    return (
+        <AlertDialog.Root open={open}>
+            <AlertDialog.Content maxWidth="450px">
+                <AlertDialog.Title>Error</AlertDialog.Title>
+                <AlertDialog.Description size="2">
+                    {Either.match(Cause.failureOrCause(error.value), {
+                        onLeft: flow(
+                            Match.value,
+                            Match.tag("RequestError", () => <Text>HTTP request error</Text>),
+                            Match.tag("ResponseError", () => <Text>HTTP response error</Text>),
+                            Match.exhaustive,
+                        ),
+
+                        onRight: flow(
+                            Cause.dieOption,
+                            Option.match({
+                                onSome: () => <Text>Unrecoverable defect</Text>,
+                                onNone: () => <Text>Unknown error</Text>,
+                            }),
+                        ),
+                    })}
+                </AlertDialog.Description>
+
+                <Flex gap="3" mt="4" justify="end">
+                    <AlertDialog.Action>
+                        <Button variant="solid" color="red" onClick={() => setOpen(false)}>
+                            Ok
+                        </Button>
+                    </AlertDialog.Action>
+                </Flex>
+            </AlertDialog.Content>
+        </AlertDialog.Root>
+    )
+}

packages/example/src/routes/__root.tsx

@@ -1,4 +1,4 @@
-import { VQueryErrorHandler } from "@/QueryErrorHandler"
+import { VQueryErrorHandler } from "@/VQueryErrorHandler"
 import { Container, Flex, Theme } from "@radix-ui/themes"
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"

packages/extension-form/README.md

@@ -0,0 +1,9 @@
+# LazyRef extension for Reffuse
+
+Extension to integrate `@typed/lazy-ref` with Reffuse.
+
+## Peer dependencies
+- `@typed/lazy-ref`
+- `reffuse` 0.1.3+
+- `effect` 3.13+
+- `react` & `@types/react` 19+

packages/extension-form/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@reffuse/extension-form",
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "./README.md",
+    "./dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "url": "git+https://github.com/Thiladev/reffuse.git"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "lint:tsc": "tsc --noEmit",
+    "pack": "npm pack",
+    "clean:cache": "rm -f tsconfig.tsbuildinfo",
+    "clean:dist": "rm -rf dist",
+    "clean:node": "rm -rf node_modules"
+  },
+  "devDependencies": {
+    "reffuse": "workspace:*"
+  },
+  "peerDependencies": {
+    "effect": "^3.13.0",
+    "react": "^19.0.0",
+    "reffuse": "^0.1.7"
+  }
+}

packages/extension-form/src/FormExtension.ts

@@ -0,0 +1,9 @@
+import { ReffuseExtension, type ReffuseNamespace } from "reffuse"
+
+
+export const FormExtension = ReffuseExtension.make(() => ({
+    useForm<A, E, R>(
+        this: ReffuseNamespace.ReffuseNamespace<R>,
+    ) {
+    },
+}))

packages/extension-form/src/index.ts

@@ -0,0 +1 @@
+export * from "./FormExtension.js"

packages/extension-form/src/internal/Form.ts

@@ -0,0 +1,6 @@
+import { Schema } from "effect"
+
+
+export interface Form<A, I, R> {
+    readonly schema: Schema.Schema<A, I, R>
+}

packages/extension-form/src/internal/FormField.ts

@@ -0,0 +1,69 @@
+import type { Effect, Schema } from "effect"
+import type * as Formify from "./Formify.js"
+
+
+export interface FormField<S extends Schema.Schema.Any> {
+    readonly schema: S
+}
+
+export const makeFormField = <S extends Schema.Schema.Any>(
+    schema: S,
+    get: Effect.Effect<S["Type"]>,
+    set: (value: S["Type"]) => Effect.Effect<void>,
+): FormField<S> => {
+
+}
+
+export interface UnionFormField<
+    S extends Schema.Union<Members>,
+    Members extends ReadonlyArray<Schema.Schema.All>,
+> extends FormField<S> {
+    readonly member: Formify.Formify<Members[number]>
+}
+
+export interface TupleFormField<
+    S extends Schema.TupleType<Elements, Rest>,
+    Elements extends Schema.TupleType.Elements,
+    Rest extends Schema.TupleType.Rest,
+> extends FormField<S> {
+    readonly elements: [...{ readonly [K in keyof Elements]: Formify.Formify<Elements[K]> }]
+}
+
+export interface ArrayFormField<
+    S extends Schema.Array$<Value>,
+    Value extends Schema.Schema.Any,
+> extends FormField<S> {
+    readonly elements: readonly Formify.Formify<Value>[]
+}
+
+export type StructFormField<
+    S extends Schema.Struct<Fields>,
+    Fields extends Schema.Struct.Fields,
+> = (
+    & FormField<S>
+    & { readonly fields: { readonly [K in keyof Fields]: Formify.Formify<Fields[K]> } }
+    & {
+        [K in keyof Fields as Fields[K] extends
+            Schema.tag<infer _> ? K : never
+        ]: Fields[K] extends
+            Schema.tag<infer Tag> ? Tag : never
+    }
+)
+
+export interface GenericFormField<S extends Schema.Schema.Any> extends FormField<S> {
+}
+
+
+export interface PropertySignatureFormField<
+    S extends Schema.PropertySignature<TypeToken, Type, Key, EncodedToken, Encoded, HasDefault, R>,
+    TypeToken extends Schema.PropertySignature.Token,
+    Type,
+    Key extends PropertyKey,
+    EncodedToken extends Schema.PropertySignature.Token,
+    Encoded,
+    HasDefault extends boolean = false,
+    R = never,
+> {
+    readonly propertySignature: S
+    readonly value: Type
+}

packages/extension-form/src/internal/Formify.ts

@@ -0,0 +1,51 @@
+import { Schema } from "effect"
+import type * as FormField from "./FormField.js"
+
+
+export type Formify<S> = (
+    S extends Schema.Union<infer Members> ? FormField.UnionFormField<S, Members> :
+    S extends Schema.TupleType<infer Elements, infer Rest> ? FormField.TupleFormField<S, Elements, Rest> :
+    S extends Schema.Array$<infer Value> ? FormField.ArrayFormField<S, Value> :
+    S extends Schema.Struct<infer Fields> ? FormField.StructFormField<S, Fields> :
+    S extends Schema.Schema.Any ? FormField.GenericFormField<S> :
+    S extends Schema.PropertySignature<
+        infer TypeToken,
+        infer Type,
+        infer Key,
+        infer EncodedToken,
+        infer Encoded,
+        infer HasDefault,
+        infer R
+    > ? FormField.PropertySignatureFormField<S, TypeToken, Type, Key, EncodedToken, Encoded, HasDefault, R> :
+    never
+)
+
+
+const Login = Schema.Union(
+    Schema.Struct({
+        _tag: Schema.tag("ByEmail"),
+        email: Schema.String,
+        password: Schema.RedactedFromSelf(Schema.String),
+    }),
+
+    Schema.Struct({
+        _tag: Schema.tag("ByPhone"),
+        phone: Schema.String,
+        password: Schema.RedactedFromSelf(Schema.String),
+    }),
+
+    Schema.TaggedStruct("ByKey", {
+        id: Schema.String,
+        password: Schema.RedactedFromSelf(Schema.String),
+    }),
+)
+type LoginForm = Formify<typeof Login>
+declare const loginForm: LoginForm
+
+switch (loginForm.member._tag) {
+    case "ByEmail":
+        loginForm.member
+    break
+    case "ByPhone":
+    break
+}

packages/extension-form/src/internal/guards.ts

@@ -0,0 +1,37 @@
+import { Array, Predicate, Record, Schema, Tuple } from "effect"
+
+
+export const isTupleSchema = (u: unknown): u is Schema.Tuple<any> => (
+    Schema.isSchema(u) &&
+    Predicate.hasProperty(u, "elements") && Array.isArray(u.elements) &&
+    Predicate.hasProperty(u, "rest") && Array.isArray(u.rest)
+)
+
+export const isArraySchema = (u: unknown): u is Schema.Array$<any> => (
+    Schema.isSchema(u) &&
+    Predicate.hasProperty(u, "elements") && Array.isArray(u.elements) && Array.isEmptyArray(u.elements) &&
+    Predicate.hasProperty(u, "rest") && Array.isArray(u.rest) && Tuple.isTupleOf(u.rest, 1) &&
+    Predicate.hasProperty(u, "value")
+)
+
+export const isStructSchema = (u: unknown): u is Schema.Struct<any> => (
+    Schema.isSchema(u) &&
+    Predicate.hasProperty(u, "fields") && Predicate.isObject(u.fields) &&
+    Predicate.hasProperty(u, "records") && Array.isArray(u.records) && Array.isEmptyArray(u.records)
+)
+
+export const isRecordSchema = (u: unknown): u is Schema.Record$<any, any> => (
+    Schema.isSchema(u) &&
+    Predicate.hasProperty(u, "fields") && Predicate.isObject(u.fields) && Record.isEmptyRecord(u.fields) &&
+    Predicate.hasProperty(u, "records") && Array.isArray(u.records) &&
+    Predicate.hasProperty(u, "key") &&
+    Predicate.hasProperty(u, "value")
+)
+
+
+const myTuple = Schema.Tuple(Schema.String)
+const myArray = Schema.Array(Schema.String)
+const myStruct = Schema.Struct({})
+const myRecord = Schema.Record({ key: Schema.String, value: Schema.String })
+
+console.log(isArraySchema(myTuple))

packages/extension-form/src/internal/index.ts

@@ -0,0 +1 @@
+export * as Form from "./Form.js"

packages/extension-form/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    // "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "NodeNext",
+    // "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    // "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+
+    // Build
+    "outDir": "./dist",
+    "declaration": true
+  },
+
+  "include": ["./src"]
+}

packages/extension-lazyref/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reffuse/extension-lazyref",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "files": [
     "./README.md",
@@ -37,6 +37,6 @@
     "@types/react": "^19.0.0",
     "effect": "^3.13.0",
     "react": "^19.0.0",
-    "reffuse": "^0.1.6"
+    "reffuse": "^0.1.7"
   }
 }

packages/extension-lazyref/src/index.ts

@@ -1,16 +1,43 @@
 import * as LazyRef from "@typed/lazy-ref"
-import { Effect, Stream } from "effect"
+import { Effect, pipe, Stream } from "effect"
 import * as React from "react"
 import { ReffuseExtension, type ReffuseNamespace, SetStateAction } from "reffuse"
 
 
 export const LazyRefExtension = ReffuseExtension.make(() => ({
+    useSubscribeLazyRefs<
+        const Refs extends readonly LazyRef.LazyRef<any>[],
+        R,
+    >(
+        this: ReffuseNamespace.ReffuseNamespace<R>,
+        ...refs: Refs
+    ): [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }] {
+        const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
+            () => Effect.all(refs as readonly LazyRef.LazyRef<any>[]),
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: true },
+        ) as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }])
+
+        this.useFork(() => pipe(
+            refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
+            streams => Stream.zipLatestAll(...streams),
+            Stream.runForEach(v =>
+                Effect.sync(() => setReactStateValue(v as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }]))
+            ),
+        ), refs)
+
+        return reactStateValue
+    },
+
     useLazyRefState<A, E, R>(
         this: ReffuseNamespace.ReffuseNamespace<R>,
         ref: LazyRef.LazyRef<A, E, R>,
     ): [A, React.Dispatch<React.SetStateAction<A>>] {
-        const initialState = this.useMemo(() => ref, [], { doNotReExecuteOnRuntimeOrContextChange: true })
+        const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
-        const [reactStateValue, setReactStateValue] = React.useState(initialState)
+            () => ref,
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: true },
+        ))
 
         this.useFork(() => Stream.runForEach(
             Stream.changesWith(ref.changes, (x, y) => x === y),

packages/reffuse/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reffuse",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "files": [
     "./README.md",

packages/reffuse/src/ReffuseNamespace.ts

@@ -1,4 +1,4 @@
-import { Array, type Context, Effect, ExecutionStrategy, Exit, type Fiber, type Layer, pipe, Pipeable, Queue, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
+import { type Context, Effect, ExecutionStrategy, Exit, type Fiber, type Layer, Option, pipe, Pipeable, Queue, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
 import * as React from "react"
 import * as ReffuseContext from "./ReffuseContext.js"
 import * as ReffuseRuntime from "./ReffuseRuntime.js"
@@ -21,6 +21,7 @@ export abstract class ReffuseNamespace<R> {
     constructor() {
         this.SubscribeRefs = this.SubscribeRefs.bind(this as any) as any
         this.RefState = this.RefState.bind(this as any) as any
+        this.SubscribeStream = this.SubscribeStream.bind(this as any) as any
     }
 
 
@@ -396,8 +397,8 @@ export abstract class ReffuseNamespace<R> {
             { doNotReExecuteOnRuntimeOrContextChange: true },
         ) as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }])
 
-        this.useFork(() => pipe(refs as readonly SubscriptionRef.SubscriptionRef<any>[],
+        this.useFork(() => pipe(
-            Array.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
+            refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
             streams => Stream.zipLatestAll(...streams),
             Stream.runForEach(v =>
                 Effect.sync(() => setReactStateValue(v as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }]))
@@ -418,8 +419,11 @@ export abstract class ReffuseNamespace<R> {
         this: ReffuseNamespace<R>,
         ref: SubscriptionRef.SubscriptionRef<A>,
     ): [A, React.Dispatch<React.SetStateAction<A>>] {
-        const initialState = this.useMemo(() => ref, [], { doNotReExecuteOnRuntimeOrContextChange: true })
+        const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
-        const [reactStateValue, setReactStateValue] = React.useState(initialState)
+            () => ref,
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: true },
+        ))
 
         this.useFork(() => Stream.runForEach(
             Stream.changesWith(ref.changes, (x, y) => x === y),
@@ -448,6 +452,21 @@ export abstract class ReffuseNamespace<R> {
         return stream
     }
 
+    useSubscribeStream<A, InitialA extends A | undefined, E, R>(
+        this: ReffuseNamespace<R>,
+        stream: Stream.Stream<A, E, R>,
+        initialValue?: InitialA,
+    ): InitialA extends A ? Option.Some<A> : Option.Option<A> {
+        const [reactStateValue, setReactStateValue] = React.useState<Option.Option<A>>(Option.fromNullable(initialValue))
+
+        this.useFork(() => Stream.runForEach(
+            Stream.changesWith(stream, (x, y) => x === y),
+            v => Effect.sync(() => setReactStateValue(Option.some(v))),
+        ), [stream])
+
+        return reactStateValue as InitialA extends A ? Option.Some<A> : Option.Option<A>
+    }
+
 
     SubscribeRefs<
         const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[],
@@ -471,6 +490,17 @@ export abstract class ReffuseNamespace<R> {
     ): React.ReactNode {
         return props.children(this.useRefState(props.ref))
     }
+
+    SubscribeStream<A, InitialA extends A | undefined, E, R>(
+        this: ReffuseNamespace<R>,
+        props: {
+            readonly stream: Stream.Stream<A, E, R>
+            readonly initialValue?: InitialA
+            readonly children: (latestValue: InitialA extends A ? Option.Some<A> : Option.Option<A>) => React.ReactNode
+        },
+    ): React.ReactNode {
+        return props.children(this.useSubscribeStream(props.stream, props.initialValue))
+    }
 }