Form refactoring

bun.lock

@@ -13,6 +13,9 @@
     "packages/effect-fc": {
       "name": "effect-fc",
       "version": "0.1.3",
+      "dependencies": {
+        "@typed/async-data": "^0.13.1",
+      },
       "devDependencies": {
         "@effect/language-service": "^0.35.2",
       },

packages/effect-fc/package.json

@@ -45,5 +45,8 @@
   },
   "devDependencies": {
     "@effect/language-service": "^0.35.2"
+  },
+  "dependencies": {
+    "@typed/async-data": "^0.13.1"
   }
 }

packages/effect-fc/src/Form.ts

@@ -1,51 +1,57 @@
-import { Array, Duration, Effect, Equal, Equivalence, flow, identity, Option, ParseResult, pipe, Pipeable, Schema, Scope, Stream, Subscribable, SubscriptionRef } from "effect"
+import * as AsyncData from "@typed/async-data"
+import { Array, Duration, Effect, Equal, Equivalence, identity, Option, ParseResult, pipe, Pipeable, Schema, Scope, Stream, Subscribable, SubscriptionRef } from "effect"
 import type { NoSuchElementException } from "effect/Cause"
 import * as React from "react"
 import { Hooks } from "./hooks/index.js"
 import { PropertyPath, Subscribable as SubscribableInternal } from "./types/index.js"
 
 
-export const TypeId: unique symbol = Symbol.for("effect-fc/Form")
+export const FormTypeId: unique symbol = Symbol.for("effect-fc/Form")
-export type TypeId = typeof TypeId
+export type FormTypeId = typeof FormTypeId
 
-export interface Form<in out A, in out I = A, out R = never>
+export interface Form<in out A, in out I = A, out R = never, in out SA = void, in out SE = A, out SR = never>
 extends Pipeable.Pipeable {
+    readonly [FormTypeId]: FormTypeId
+
     readonly schema: Schema.Schema<A, I, R>,
-    /** A reference to the latest valid value produced by the form, if any. */
+    readonly submit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
+
     readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
     readonly encodedValueRef: SubscriptionRef.SubscriptionRef<I>,
     readonly errorRef: SubscriptionRef.SubscriptionRef<Option.Option<ParseResult.ParseError>>,
+    /** Whether or not a validation is currently being executed */
+    readonly isValidatingRef: SubscriptionRef.SubscriptionRef<boolean>
+    readonly submitStateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<SA, SE>>,
 
     readonly canSubmitSubscribable: Subscribable.Subscribable<boolean>
-
-    makeFieldIssuesSubscribable<const P extends PropertyPath.Paths<A>>(
-        path: P
-    ): Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[]>
 }
 
-
+class FormImpl<in out A, in out I = A, out R = never, in out SA = void, in out SE = A, out SR = never>
-class FormImpl<in out A, in out I, out R>
+extends Pipeable.Class() implements Form<A, I, R, SA, SE, SR> {
-extends Pipeable.Class() implements Form<A, I, R> {
+    readonly [FormTypeId]: FormTypeId = FormTypeId
-    readonly [TypeId]: TypeId = TypeId
     readonly canSubmitSubscribable: Subscribable.Subscribable<boolean>
 
     constructor(
         readonly schema: Schema.Schema<A, I, R>,
+        readonly submit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
         readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
         readonly encodedValueRef: SubscriptionRef.SubscriptionRef<I>,
         readonly errorRef: SubscriptionRef.SubscriptionRef<Option.Option<ParseResult.ParseError>>,
+        readonly isValidatingRef: SubscriptionRef.SubscriptionRef<boolean>,
+        readonly submitStateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<SA, SE>>,
     ) {
         super()
 
         this.canSubmitSubscribable = pipe(
-            <A>([value, error]: readonly [
+            <A>([value, error, isValidating]: readonly [
                 Option.Option<A>,
                 Option.Option<ParseResult.ParseError>,
-            ]) => Option.isSome(value) && Option.isNone(error),
+                boolean,
+            ]) => Option.isSome(value) && Option.isNone(error) && !isValidating,
 
             filter => SubscribableInternal.make({
-                get: Effect.map(Effect.all([valueRef, errorRef]), filter),
+                get: Effect.map(Effect.all([valueRef, errorRef, isValidatingRef]), filter),
-                get changes() { return Stream.map(Stream.zipLatestAll(valueRef.changes, errorRef.changes), filter)},
+                get changes() { return Stream.map(Stream.zipLatestAll(valueRef.changes, errorRef.changes, isValidatingRef.changes), filter)},
             }),
         )
     }
@@ -70,54 +76,99 @@ extends Pipeable.Class() implements Form<A, I, R> {
 }
 
 
+export const FormFieldTypeId: unique symbol = Symbol.for("effect-fc/FormField")
+export type FormFieldTypeId = typeof FormFieldTypeId
+
+export interface FormField<in out A, in out I = A>
+extends Pipeable.Pipeable {
+    readonly [FormFieldTypeId]: FormFieldTypeId
+
+    readonly valueSubscribable: Subscribable.Subscribable<Option.Option<A>, NoSuchElementException>
+    readonly encodedValueRef: SubscriptionRef.SubscriptionRef<I>
+    readonly issuesSubscribable: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[]>
+    readonly isValidatingSubscribable: Subscribable.Subscribable<boolean>
+    readonly isSubmittingSubscribable: Subscribable.Subscribable<boolean>
+}
+
+class FormFieldImpl<in out A, in out I = A>
+extends Pipeable.Class() implements FormField<A, I> {
+    readonly [FormFieldTypeId]: FormFieldTypeId = FormFieldTypeId
+
+    constructor(
+        readonly valueSubscribable: Subscribable.Subscribable<Option.Option<A>, NoSuchElementException>,
+        readonly encodedValueRef: SubscriptionRef.SubscriptionRef<I>,
+        readonly issuesSubscribable: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[]>,
+        readonly isValidatingSubscribable: Subscribable.Subscribable<boolean>,
+        readonly isSubmittingSubscribable: Subscribable.Subscribable<boolean>,
+    ) {
+        super()
+    }
+}
+
+
 export namespace make {
-    export interface Options<in out A, in out I, out R> {
+    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>
     }
 }
 
 export const make: {
-    <A, I = A, R = never>(options: make.Options<A, I, R>): Effect.Effect<Form<A, I, R>>
+    <A, I = A, R = never, SA = void, SE = A, SR = never>(
-} = Effect.fnUntraced(function* <A, I = A, R = never>(options: make.Options<A, I, R>) {
+        options: make.Options<A, I, R, SA, SE, SR>
+    ): Effect.Effect<Form<A, I, R, SA, SE, SR>>
+} = Effect.fnUntraced(function* <A, I = A, R = never, SA = void, SE = A, SR = never>(
+    options: make.Options<A, I, R, SA, SE, SR>
+) {
     return new FormImpl(
         options.schema,
+        options.submit,
         yield* SubscriptionRef.make(Option.none<A>()),
         yield* SubscriptionRef.make(options.initialEncodedValue),
         yield* SubscriptionRef.make(Option.none<ParseResult.ParseError>()),
+        yield* SubscriptionRef.make(false),
+        yield* SubscriptionRef.make(AsyncData.noData<SA, SE>()),
     )
 })
 
 export namespace service {
-    export interface Options<in out A, in out I, out R> extends make.Options<A, I, R> {}
+    export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never>
+    extends make.Options<A, I, R, SA, SE, SR> {}
 }
 
-export const service = <A, I = A, R = never>(
+export const service = <A, I = A, R = never, SA = void, SE = A, SR = never>(
-    options: service.Options<A, I, R>
+    options: service.Options<A, I, R, SA, SE, SR>
-): Effect.Effect<Form<A, I, R>, never, R | Scope.Scope> => Effect.tap(
+): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, R | Scope.Scope> => Effect.tap(
     make(options),
     form => Effect.forkScoped(run(form)),
 )
 
 export namespace useForm {
-    export interface Options<in out A, in out I, out R> extends make.Options<A, I, R> {}
+    export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never>
+    extends make.Options<A, I, R, SA, SE, SR> {}
 }
 
 export const useForm: {
-    <A, I = A, R = never>(options: service.Options<A, I, R>): Effect.Effect<Form<A, I, R>, never, R | Scope.Scope>
+    <A, I = A, R = never, SA = void, SE = A, SR = never>(
-} = Effect.fnUntraced(function* <A, I = A, R = never>(options: service.Options<A, I, R>) {
+        options: service.Options<A, I, R, SA, SE, SR>
+    ): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, R>
+} = Effect.fnUntraced(function* <A, I = A, R = never, SA = void, SE = A, SR = never>(
+    options: service.Options<A, I, R, SA, SE, SR>
+) {
     const form = yield* Hooks.useOnce(() => make(options))
     yield* Hooks.useFork(() => run(form), [form])
     return form
 })
 
-const run = <A, I, R>(self: Form<A, I, R>) => Stream.runForEach(
+const run = <A, I, R, SA, SE, SR>(self: Form<A, I, R, SA, SE, SR>) => Stream.runForEach(
     self.encodedValueRef.changes,
-    flow(
+    encodedValue => SubscriptionRef.set(self.isValidatingRef, true).pipe(
-        Schema.decode(self.schema, { errors: "all" }),
+        Effect.andThen(Schema.decode(self.schema, { errors: "all" })(encodedValue)),
         Effect.andThen(v => SubscriptionRef.set(self.valueRef, Option.some(v))),
         Effect.andThen(SubscriptionRef.set(self.errorRef, Option.none())),
-        Effect.catchTag("ParseError", e => SubscriptionRef.set(self.errorRef, Option.some(e)))
+        Effect.catchTag("ParseError", e => SubscriptionRef.set(self.errorRef, Option.some(e))),
+        Effect.andThen(SubscriptionRef.set(self.isValidatingRef, false)),
     ),
 )
 
@@ -135,34 +186,21 @@ export namespace useInput {
 }
 
 export const useInput: {
-    <A, I, R, const P extends PropertyPath.Paths<NoInfer<I>>>(
+    <A, I>(
-        self: Form<A, I, R>,
+        field: FormField<A, I>,
-        path: P,
         options?: useInput.Options,
-    ): Effect.Effect<useInput.Result<PropertyPath.ValueFromPath<I, P>>, NoSuchElementException, R>
+    ): Effect.Effect<useInput.Result<I>, NoSuchElementException>
-} = Effect.fnUntraced(function* <A, I, R, const P extends PropertyPath.Paths<I>>(
+} = Effect.fnUntraced(function* <A, I>(
-    self: Form<A, I, R>,
+    field: FormField<A, I>,
-    path: P,
     options?: useInput.Options,
 ) {
-    const [internalValueRef, issuesSubscribable] = yield* Hooks.useMemo(() => Effect.all([
+    const internalValueRef = yield* Hooks.useMemo(() => Effect.andThen(field.encodedValueRef, SubscriptionRef.make), [field])
-        self.encodedValueRef.pipe(
-            Effect.andThen(PropertyPath.get(path)),
-            Effect.andThen(SubscriptionRef.make<PropertyPath.ValueFromPath<I, P>>),
-        ),
-        Effect.succeed(self.makeFieldIssuesSubscribable(path)),
-    ]), [self, ...path])
-
     const [value, setValue] = yield* Hooks.useRefState(internalValueRef)
-    const [issues] = yield* Hooks.useSubscribables(issuesSubscribable)
+    const [issues] = yield* Hooks.useSubscribables(field.issuesSubscribable)
 
     yield* Hooks.useFork(() => Effect.all([
         Stream.runForEach(
-            self.encodedValueRef.changes.pipe(
+            Stream.drop(field.encodedValueRef, 1),
-                Stream.flatMap(PropertyPath.get(path)),
-                Stream.drop(1),
-            ),
-
             upstreamEncodedValue => Effect.whenEffect(
                 SubscriptionRef.set(internalValueRef, upstreamEncodedValue),
                 Effect.andThen(internalValueRef, internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
@@ -175,13 +213,9 @@ export const useInput: {
                 options?.debounce ? Stream.debounce(options.debounce) : identity,
                 Stream.drop(1),
             ),
-
+            internalValue => SubscriptionRef.set(field.encodedValueRef, internalValue),
-            internalValue => self.encodedValueRef.pipe(
-                Effect.andThen(encodedValue => PropertyPath.immutableSet(encodedValue, path, internalValue)),
-                Effect.andThen(encodedValue => SubscriptionRef.set(self.encodedValueRef, encodedValue)),
-            ),
         ),
-    ], { concurrency: "unbounded" }), [internalValueRef, self, ...path])
+    ], { concurrency: "unbounded" }), [field, internalValueRef])
 
     return { value, setValue, issues }
 })