0.1.5 (#15)

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

.gitea/workflows/test-build.yaml

@@ -10,7 +10,7 @@ jobs:
       - name: Setup Bun
         uses: oven-sh/setup-bun@v2
       - name: Setup Node
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: "22"
       - name: Clone repo

bun.lock

@@ -5,7 +5,7 @@
       "name": "@effect-fc/monorepo",
       "devDependencies": {
         "@biomejs/biome": "^2.2.5",
-        "@effect/language-service": "^0.42.0",
+        "@effect/language-service": "^0.45.0",
         "@types/bun": "^1.2.23",
         "npm-check-updates": "^19.0.0",
         "npm-sort": "^0.0.4",
@@ -135,7 +135,7 @@
 
     "@effect-fc/example": ["@effect-fc/example@workspace:packages/example"],
 
-    "@effect/language-service": ["@effect/language-service@0.42.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-a5naAdmFxrp6T6IsKNTbsoPJXgn2/WXcjzHHrvq7O/MCCWWiJepSVeJiD8rhb8YsWhiNXnvV5/MzOtljwWHY7w=="],
+    "@effect/language-service": ["@effect/language-service@0.45.1", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-SEZ9TaVCpRKYumTQJPApg3os9O94bN2lCYQLgZbyK/xD+NSfYPPJZQ+6T5LkpcNgW8BRk1ACI7S1W2/noxm7Qg=="],
 
     "@effect/platform": ["@effect/platform@0.92.1", "", { "dependencies": { "find-my-way-ts": "^0.1.6", "msgpackr": "^1.11.4", "multipasta": "^0.2.7" }, "peerDependencies": { "effect": "^3.18.1" } }, "sha512-XXWCBVwyhaKZISN7aM1fv/3fWDGyxr84ObywnUrL8aHvJLoIeskWFAP/fqw3c5MFCrJ3ZV97RWLbv6JiBQugdg=="],
 

package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.5",
-    "@effect/language-service": "^0.42.0",
+    "@effect/language-service": "^0.45.0",
     "@types/bun": "^1.2.23",
     "npm-check-updates": "^19.0.0",
     "npm-sort": "^0.0.4",

packages/effect-fc/package.json

@@ -1,7 +1,7 @@
 {
   "name": "effect-fc",
   "description": "Write React function components with Effect",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "files": [
     "./README.md",

packages/effect-fc/src/Component.ts

@@ -55,7 +55,7 @@ const ComponentProto = Object.freeze({
         this: Component<P, A, E, R>
     ) {
         const self = this
-        // biome-ignore lint/style/noNonNullAssertion: context initialization
+        // biome-ignore lint/style/noNonNullAssertion: React ref initialization
         const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
         runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
 

packages/effect-fc/src/Form.ts

@@ -1,10 +1,10 @@
 import * as AsyncData from "@typed/async-data"
-import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, pipe, Ref, Schema, type Scope, Stream, type Subscribable, SubscriptionRef } from "effect"
+import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream, SubscriptionRef } from "effect"
 import type { NoSuchElementException } from "effect/Cause"
 import * as React from "react"
 import * as Hooks from "./Hooks/index.js"
 import * as PropertyPath from "./PropertyPath.js"
-import * as SubscribableInternal from "./Subscribable.js"
+import * as Subscribable from "./Subscribable.js"
 import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
 
 
@@ -16,7 +16,7 @@ extends Pipeable.Pipeable {
     readonly [FormTypeId]: FormTypeId
 
     readonly schema: Schema.Schema<A, I, R>
-    readonly submit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>
+    readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>
     readonly debounce: Option.Option<Duration.DurationInput>
 
     readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>
@@ -34,7 +34,7 @@ extends Pipeable.Class() implements Form<A, I, R, SA, SE, SR> {
 
     constructor(
         readonly schema: Schema.Schema<A, I, R>,
-        readonly submit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
+        readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
         readonly debounce: Option.Option<Duration.DurationInput>,
 
         readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
@@ -55,7 +55,7 @@ export namespace make {
     export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never> {
         readonly schema: Schema.Schema<A, I, R>
         readonly initialEncodedValue: NoInfer<I>
-        readonly submit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
+        readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
         readonly debounce?: Duration.DurationInput,
     }
 }
@@ -74,7 +74,7 @@ export const make: {
 
     return new FormImpl(
         options.schema,
-        options.submit,
+        options.onSubmit,
         Option.fromNullable(options.debounce),
 
         valueRef,
@@ -83,28 +83,14 @@ export const make: {
         validationFiberRef,
         submitStateRef,
 
-        pipe(
+        Subscribable.map(
-            <A>([value, error, validationFiber, submitState]: readonly [
+            Subscribable.zipLatestAll(valueRef, errorRef, validationFiberRef, submitStateRef),
-                Option.Option<A>,
+            ([value, error, validationFiber, submitState]) => (
-                Option.Option<ParseResult.ParseError>,
+                Option.isSome(value) &&
-                Option.Option<Fiber.Fiber<void, never>>,
+                Option.isNone(error) &&
-                AsyncData.AsyncData<SA, SE>,
+                Option.isNone(validationFiber) &&
-            ]) => Option.isSome(value) && Option.isNone(error) && Option.isNone(validationFiber) && !AsyncData.isLoading(submitState),
+                !AsyncData.isLoading(submitState)
-
+            ),
-            filter => SubscribableInternal.make({
-                get: Effect.map(Effect.all([valueRef, errorRef, validationFiberRef, submitStateRef]), filter),
-                get changes() {
-                    return Stream.map(
-                        Stream.zipLatestAll(
-                            valueRef.changes,
-                            errorRef.changes,
-                            validationFiberRef.changes,
-                            submitStateRef.changes,
-                        ),
-                        filter,
-                    )
-                },
-            }),
         ),
     )
 })
@@ -156,13 +142,14 @@ export const submit = <A, I, R, SA, SE, SR>(
         Effect.andThen(identity),
         Effect.tap(Ref.set(self.submitStateRef, AsyncData.loading())),
         Effect.andThen(flow(
-            self.submit,
+            self.onSubmit as (value: NoInfer<A>) => Effect.Effect<SA, SE | ParseResult.ParseError, SR>,
+            Effect.tapErrorTag("ParseError", e => Ref.set(self.errorRef, Option.some(e as ParseResult.ParseError))),
             Effect.exit,
             Effect.map(Exit.match({
                 onSuccess: a => AsyncData.success(a),
-                onFailure: e => AsyncData.failure(e),
+                onFailure: e => AsyncData.failure(e as Cause.Cause<SE>),
             })),
-            Effect.tap(v => Ref.set(self.submitStateRef, v))
+            Effect.tap(v => Ref.set(self.submitStateRef, v)),
         )),
     ),
 
@@ -185,48 +172,20 @@ export const field = <A, I, R, SA, SE, SR, const P extends PropertyPath.Paths<No
     self: Form<A, I, R, SA, SE, SR>,
     path: P,
 ): FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>> => new FormFieldImpl(
-    pipe(
+    Subscribable.mapEffect(self.valueRef, Option.match({
-        Option.match({
+        onSome: v => Option.map(PropertyPath.get(v, path), Option.some),
-            onSome: (v: A) => Option.map(PropertyPath.get(v, path), Option.some),
+        onNone: () => Option.some(Option.none()),
-            onNone: () => Option.some(Option.none()),
+    })),
-        }),
-        filter => SubscribableInternal.make({
-            get: Effect.flatMap(self.valueRef, filter),
-            get changes() { return Stream.flatMap(self.valueRef.changes, filter) },
-        }),
-    ),
-
     SubscriptionSubRef.makeFromPath(self.encodedValueRef, path),
-
+    Subscribable.mapEffect(self.errorRef, Option.match({
-    pipe(
+        onSome: flow(
-        Option.match({
+            ParseResult.ArrayFormatter.formatError,
-            onSome: (v: ParseResult.ParseError) => Effect.andThen(
+            Effect.map(Array.filter(issue => PropertyPath.equivalence(issue.path, path))),
-                ParseResult.ArrayFormatter.formatError(v),
+        ),
-                Array.filter(issue => PropertyPath.equivalence(issue.path, path)),
+        onNone: () => Effect.succeed([]),
-            ),
+    })),
-            onNone: () => Effect.succeed([]),
+    Subscribable.map(self.validationFiberRef, Option.isSome),
-        }),
+    Subscribable.map(self.submitStateRef, AsyncData.isLoading)
-        filter => SubscribableInternal.make({
-            get: Effect.flatMap(self.errorRef.get, filter),
-            get changes() { return Stream.flatMap(self.errorRef.changes, filter) },
-        }),
-    ),
-
-    pipe(
-        Option.isSome,
-        filter => SubscribableInternal.make({
-            get: Effect.map(self.validationFiberRef.get, filter),
-            get changes() { return Stream.map(self.validationFiberRef.changes, filter) },
-        }),
-    ),
-
-    pipe(
-        AsyncData.isLoading,
-        filter => SubscribableInternal.make({
-            get: Effect.map(self.submitStateRef, filter),
-            get changes() { return Stream.map(self.submitStateRef.changes, filter) },
-        }),
-    ),
 )
 
 

packages/effect-fc/src/Subscribable.ts

@@ -1,24 +1,17 @@
-import { type Effect, Effectable, Readable, type Stream, Subscribable } from "effect"
+import { Effect, Stream, Subscribable } from "effect"
 
 
-class SubscribableImpl<A, E, R>
+export const zipLatestAll = <T extends ReadonlyArray<Subscribable.Subscribable<any, any, any>>>(
-extends Effectable.Class<A, E, R> implements Subscribable.Subscribable<A, E, R> {
+    ...subscribables: T
-    readonly [Readable.TypeId]: Readable.TypeId = Readable.TypeId
+): Subscribable.Subscribable<
-    readonly [Subscribable.TypeId]: Subscribable.TypeId = Subscribable.TypeId
+    [T[number]] extends [never]
+        ? never
+        : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
+    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _E : never,
+    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _R : never
+> => Subscribable.make({
+    get: Effect.all(subscribables.map(v => v.get)),
+    changes: Stream.zipLatestAll(...subscribables.map(v => v.changes)),
+}) as any
 
-    constructor(
+export * from "effect/Subscribable"
-        readonly get: Effect.Effect<A, E, R>,
-        readonly changes: Stream.Stream<A, E, R>,
-    ) {
-        super()
-    }
-
-    commit() {
-        return this.get
-    }
-}
-
-export const make = <A, E, R>(values: {
-    readonly get: Effect.Effect<A, E, R>
-    readonly changes: Stream.Stream<A, E, R>
-}): Subscribable.Subscribable<A, E, R> => new SubscribableImpl(values.get, values.changes)

packages/example/src/lib/form/TextFieldFormInput.tsx

@@ -1,5 +1,5 @@
 import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
-import { Array, Option } from "effect"
+import { Array, Option, Struct } from "effect"
 import { Component, Form, Hooks } from "effect-fc"
 
 
@@ -10,7 +10,7 @@ extends TextField.RootProps, Form.useInput.Options {
 }
 
 interface OptionalProps
-extends Omit<TextField.RootProps, "defaultValue">, Form.useOptionalInput.Options<string> {
+extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptionalInput.Options<string> {
     readonly optional: true
     readonly field: Form.FormField<any, Option.Option<string>>
 }
@@ -41,7 +41,7 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
                     value={input.value}
                     onChange={e => input.setValue(e.target.value)}
                     disabled={(input.optional && !input.enabled) || isSubmitting}
-                    {...props}
+                    {...Struct.omit(props, "optional", "defaultValue")}
                 >
                     {input.optional &&
                         <TextField.Slot side="left">

packages/example/src/routes/form.tsx

@@ -39,7 +39,7 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
         ),
 
         initialEncodedValue: { email: "", password: "", birth: Option.none() },
-        submit: v => Effect.sleep("500 millis").pipe(
+        onSubmit: v => Effect.sleep("500 millis").pipe(
             Effect.andThen(Console.log(v)),
             Effect.andThen(Effect.sync(() => alert("Done!"))),
         ),
@@ -47,7 +47,7 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
     })
 }) {}
 
-class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
+class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
     const form = yield* RegisterForm
     const submit = yield* Form.useSubmit(form)
     const [canSubmit] = yield* Hooks.useSubscribables(form.canSubmitSubscribable)
@@ -84,16 +84,18 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
     )
 }) {}
 
+const RegisterPage = Component.makeUntraced("RegisterPage")(function*() {
+    const RegisterFormViewFC = yield* Effect.provide(
+        RegisterFormView,
+        yield* Hooks.useContext(RegisterForm.Default, { finalizerExecutionMode: "fork" }),
+    )
+
+    return <RegisterFormViewFC />
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
 
 export const Route = createFileRoute("/form")({
-    component: Component.makeUntraced("RegisterRoute")(function*() {
+    component: RegisterPage
-        const RegisterRouteFC = yield* Effect.provide(
-            RegisterPage,
-            yield* Hooks.useContext(RegisterForm.Default, { finalizerExecutionMode: "fork" }),
-        )
-
-        return <RegisterRouteFC />
-    }).pipe(
-        Component.withRuntime(runtime.context)
-    )
 })