packages/effect-fc/src/Form.ts

@@ -26,7 +26,7 @@ extends Pipeable.Pipeable {
     readonly debounce: Option.Option<Duration.DurationInput>
 
     readonly value: Subscribable.Subscribable<Option.Option<A>>
-    readonly encodedValue: Subscribable.Subscribable<I>
+    readonly encodedValue: SubscriptionRef.SubscriptionRef<I>
     readonly error: Subscribable.Subscribable<Option.Option<ParseResult.ParseError>>
     readonly validationFiber: Subscribable.Subscribable<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>>
 

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

@@ -29,9 +29,9 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
         : { optional: false, ...yield* Form.useInput(props.field, props) }
 
     const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables([
-        props.field.issuesSubscribable,
+        props.field.issues,
-        props.field.isValidatingSubscribable,
+        props.field.isValidating,
-        props.field.isSubmittingSubscribable,
+        props.field.isSubmitting,
     ])
 
     return (

packages/example/src/routes/form.tsx

@@ -54,7 +54,7 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
         ),
 
         initialEncodedValue: { email: "", password: "", birth: Option.none() },
-        onSubmit: Effect.fnUntraced(function*(v) {
+        f: Effect.fnUntraced(function*([v]) {
             yield* Effect.sleep("500 millis")
             return yield* Schema.decode(RegisterFormSubmitSchema)(v)
         }),
@@ -65,8 +65,8 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
 class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
     const form = yield* RegisterForm
     const [canSubmit, submitResult] = yield* Subscribable.useSubscribables([
-        form.canSubmitSubscribable,
+        form.canSubmit,
-        form.submitResultRef,
+        form.mutation.result,
     ])
 
     const runPromise = yield* Component.useRunPromise()
@@ -82,21 +82,21 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
         <Container width="300">
             <form onSubmit={e => {
                 e.preventDefault()
-                void runPromise(Form.submit(form))
+                void runPromise(form.submit)
             }}>
                 <Flex direction="column" gap="2">
                     <TextFieldFormInputFC
-                        field={yield* Form.field(form, ["email"])}
+                        field={yield* form.field(["email"])}
                     />
 
                     <TextFieldFormInputFC
-                        field={yield* Form.field(form, ["password"])}
+                        field={yield* form.field(["password"])}
                     />
 
                     <TextFieldFormInputFC
                         optional
                         type="datetime-local"
-                        field={yield* Form.field(form, ["birth"])}
+                        field={yield* form.field(["birth"])}
                         defaultValue=""
                     />
 

packages/example/src/todo/Todo.tsx

@@ -54,17 +54,15 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
                     Match.exhaustive,
                 )
             ),
-            onSubmit: function(todo) {
+            f: ([todo, form]) => Match.value(props).pipe(
-                return Match.value(props).pipe(
+                Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
-                    Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
+                    Effect.andThen(makeTodo),
-                        Effect.andThen(makeTodo),
+                    Effect.andThen(Schema.encode(TodoFormSchema)),
-                        Effect.andThen(Schema.encode(TodoFormSchema)),
+                    Effect.andThen(v => Ref.set(form.encodedValue, v)),
-                        Effect.andThen(v => Ref.set(this.encodedValueRef, v)),
+                )),
-                    )),
+                Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
-                    Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
+                Match.exhaustive,
-                    Match.exhaustive,
+            ),
-                )
-            },
             autosubmit: props._tag === "edit",
             debounce: "250 millis",
         })
@@ -72,15 +70,15 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
         return [
             indexRef,
             form,
-            yield* Form.field(form, ["content"]),
+            yield* form.field(["content"]),
-            yield* Form.field(form, ["completedAt"]),
+            yield* form.field(["completedAt"]),
         ] as const
     }), [props._tag, props._tag === "edit" ? props.id : undefined])
 
     const [index, size, canSubmit] = yield* Subscribable.useSubscribables([
         indexRef,
         state.sizeSubscribable,
-        form.canSubmitSubscribable,
+        form.canSubmit,
     ])
 
     const runSync = yield* Component.useRunSync()
@@ -103,7 +101,7 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
                         />
 
                         {props._tag === "new" &&
-                            <Button disabled={!canSubmit} onClick={() => void runPromise(Form.submit(form))}>
+                            <Button disabled={!canSubmit} onClick={() => void runPromise(form.submit)}>
                                 Add
                             </Button>
                         }