Update dependency @effect/language-service to ^0.58.0

bun.lock

@@ -6,7 +6,7 @@
       "name": "@effect-fc/monorepo",
       "devDependencies": {
         "@biomejs/biome": "^2.3.4",
-        "@effect/language-service": "^0.56.0",
+        "@effect/language-service": "^0.58.0",
         "@types/bun": "^1.3.2",
         "npm-check-updates": "^19.1.2",
         "npm-sort": "^0.0.4",
@@ -131,7 +131,7 @@
 
     "@effect-fc/example": ["@effect-fc/example@workspace:packages/example"],
 
-    "@effect/language-service": ["@effect/language-service@0.56.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-gvJaHoeXMHAoA6+Xyj9Vdq52yDCs+ECLbKpHvxHtdJP/C0D9b3JFEfLjdVuw37zoWcYS856um4rgEYHlW2LSEQ=="],
+    "@effect/language-service": ["@effect/language-service@0.58.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-M5T9zEEu6sLuzXOIp+bQ8B1pMcX3A9gyahTTWlv9idr+b2SlZOfydomwgXkod4vlXw7mYhLLcXgCsnHcBUz9rw=="],
 
     "@effect/platform": ["@effect/platform@0.93.0", "", { "dependencies": { "find-my-way-ts": "^0.1.6", "msgpackr": "^1.11.4", "multipasta": "^0.2.7" }, "peerDependencies": { "effect": "^3.19.0" } }, "sha512-VaIv0duA+Dk2h8XYDPxCLCXGbMyd6hwuHUQt9THL1ZEqv1C3Fypg/Gi2UkzRys6TQsSnC9fJbdpMb7haPURYkQ=="],
 

package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.4",
-    "@effect/language-service": "^0.56.0",
+    "@effect/language-service": "^0.58.0",
     "@types/bun": "^1.3.2",
     "npm-check-updates": "^19.1.2",
     "npm-sort": "^0.0.4",

packages/effect-fc/src/ErrorObserver.ts

@@ -18,7 +18,7 @@ extends Pipeable.Class() implements ErrorObserver<E> {
     readonly subscribe: Effect.Effect<Queue.Dequeue<Cause.Cause<E>>, never, Scope.Scope>
 
     constructor(
-        private readonly pubsub: PubSub.PubSub<Cause.Cause<E>>
+        readonly pubsub: PubSub.PubSub<Cause.Cause<E>>
     ) {
         super()
         this.subscribe = pubsub.subscribe
@@ -36,8 +36,9 @@ class ErrorObserverSupervisorImpl extends Supervisor.AbstractSupervisor<void> {
     }
 
     onEnd<A, E>(_value: Exit.Exit<A, E>): void {
-        if (Exit.isFailure(_value))
+        if (Exit.isFailure(_value)) {
             Effect.runSync(PubSub.publish(this.pubsub, _value.cause as Cause.Cause<never>))
+        }
     }
 }
 

packages/effect-fc/src/Form.ts

@@ -1,7 +1,7 @@
 import { Array, Cause, Chunk, type Context, type Duration, Effect, Equal, Exit, Fiber, flow, Hash, HashMap, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream } from "effect"
 import type * as React from "react"
 import * as Component from "./Component.js"
-import type * as Mutation from "./Mutation.js"
+import * as Mutation from "./Mutation.js"
 import * as PropertyPath from "./PropertyPath.js"
 import * as Result from "./Result.js"
 import * as Subscribable from "./Subscribable.js"
@@ -12,33 +12,43 @@ import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
 export const FormTypeId: unique symbol = Symbol.for("@effect-fc/Form/Form")
 export type FormTypeId = typeof FormTypeId
 
-export interface Form<in out A, in out MA, in out I = A, in out R = never, in out ME = never, in out MR = never, in out MP = never>
+export interface Form<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
 extends Pipeable.Pipeable {
     readonly [FormTypeId]: FormTypeId
 
     readonly schema: Schema.Schema<A, I, R>
     readonly context: Context.Context<Scope.Scope | R>
-    readonly mutation: Mutation.Mutation<readonly [value: A], MA, ME, MR, MP>
+    readonly mutation: Mutation.Mutation<
+        readonly [value: A, form: Form<A, I, R, unknown, unknown, unknown>],
+        MA, ME, MR, MP
+    >
     readonly autosubmit: boolean
     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>>>
 
     readonly canSubmit: Subscribable.Subscribable<boolean>
 
+    field<const P extends PropertyPath.Paths<I>>(
+        path: P
+    ): Effect.Effect<FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>>
     readonly submit: Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException>
 }
 
-export class FormImpl<in out A, in out MA, in out I = A, in out R = never, in out ME = never, in out MR = never, in out MP = never>
-extends Pipeable.Class() implements Form<A, MA, I, R, ME, MR, MP> {
+export class FormImpl<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+extends Pipeable.Class() implements Form<A, I, R, MA, ME, MR, MP> {
     readonly [FormTypeId]: FormTypeId = FormTypeId
 
     constructor(
         readonly schema: Schema.Schema<A, I, R>,
-        readonly mutation: Mutation.Mutation<readonly [value: A], MA, ME, MR, MP>,
+        readonly context: Context.Context<Scope.Scope | R>,
+        readonly mutation: Mutation.Mutation<
+            readonly [value: A, form: Form<A, I, R, unknown, unknown, unknown>],
+            MA, ME, MR, MP
+        >,
         readonly autosubmit: boolean,
         readonly debounce: Option.Option<Duration.DurationInput>,
 
@@ -51,10 +61,8 @@ extends Pipeable.Class() implements Form<A, MA, I, R, ME, MR, MP> {
         readonly fieldCache: Ref.Ref<HashMap.HashMap<FormFieldKey, FormField<unknown, unknown>>>,
     ) {
         super()
-    }
 
-    get canSubmit(): Subscribable.Subscribable<boolean> {
-        return Subscribable.map(
+        this.canSubmit = Subscribable.map(
             Subscribable.zipLatestAll(this.value, this.error, this.validationFiber, this.mutation.result),
             ([value, error, validationFiber, submitResult]) => (
                 Option.isSome(value) &&
@@ -65,12 +73,34 @@ extends Pipeable.Class() implements Form<A, MA, I, R, ME, MR, MP> {
         )
     }
 
+    field<const P extends PropertyPath.Paths<I>>(
+        path: P
+    ): Effect.Effect<FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>> {
+        return this.fieldCache.pipe(
+            Effect.map(HashMap.get(new FormFieldKey(path))),
+            Effect.flatMap(Option.match({
+                onSome: v => Effect.succeed(v as FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>),
+                onNone: () => Effect.tap(
+                    Effect.succeed(makeFormField(this as Form<A, I, R, MA, ME, MR, MP>, path)),
+                    v => Ref.update(this.fieldCache, HashMap.set(new FormFieldKey(path), v as FormField<unknown, unknown>)),
+                ),
+            })),
+        )
+    }
+
+    readonly canSubmit: Subscribable.Subscribable<boolean, never, never>
+
     get submit(): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException> {
+        return this.value.pipe(
+            Effect.andThen(identity),
+            Effect.andThen(value => this.submitValue(value)),
+        )
+    }
+    submitValue(value: A): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>> {
         return Effect.whenEffect(
-            this.value.pipe(
-                Effect.andThen(identity),
-                Effect.andThen(value => this.mutation.mutate([value])),
-                Effect.tap(result => Result.isFailure(result)
+            Effect.tap(
+                this.mutation.mutate([value, this as any]),
+                result => Result.isFailure(result)
                     ? Option.match(
                         Chunk.findFirst(
                             Cause.failures(result.cause as Cause.Cause<ParseResult.ParseError>),
@@ -82,9 +112,7 @@ extends Pipeable.Class() implements Form<A, MA, I, R, ME, MR, MP> {
                         },
                     )
                     : Effect.void
-                ),
             ),
-
             this.canSubmit.get,
         )
     }
@@ -93,50 +121,49 @@ extends Pipeable.Class() implements Form<A, MA, I, R, ME, MR, MP> {
 export const isForm = (u: unknown): u is Form<unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
 
 export namespace make {
-    export interface Options<in out A, in out MA, in out I = A, in out R = never, in out ME = never, in out MR = never, in out MP = never> {
+    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+    extends Mutation.make.Options<
+        readonly [value: NoInfer<A>, form: Form<NoInfer<A>, NoInfer<I>, NoInfer<R>, unknown, unknown, unknown>],
+        MA, ME, MR, MP
+    > {
         readonly schema: Schema.Schema<A, I, R>
         readonly initialEncodedValue: NoInfer<I>
-        readonly onSubmit: (
-            this: Form<NoInfer<A>, NoInfer<I>, NoInfer<R>, unknown, unknown, unknown>,
-            value: NoInfer<A>,
-        ) => Effect.Effect<SA, SE, Result.forkEffect.InputContext<SR, NoInfer<SP>>>
-        readonly initialSubmitProgress?: SP
         readonly autosubmit?: boolean
         readonly debounce?: Duration.DurationInput
     }
-
-    export type Success<A, I, R, SA = void, SE = A, SR = never, SP = never> = (
-        Form<A, I, R, SA, SE, Exclude<SR, Result.Progress<any> | Result.Progress<never>>, SP>
-    )
 }
 
-export const make = Effect.fnUntraced(function* <A, I = A, R = never, SA = void, SE = A, SR = never, SP = never>(
-    options: make.Options<A, I, R, SA, SE, SR, SP>
-): Effect.fn.Return<make.Success<A, I, R, SA, SE, SR, SP>> {
-    const valueRef = yield* SubscriptionRef.make(Option.none<A>())
-    const errorRef = yield* SubscriptionRef.make(Option.none<ParseResult.ParseError>())
-    const validationFiberRef = yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>())
-
+export const make = Effect.fnUntraced(function* <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
+    options: make.Options<A, I, R, MA, ME, MR, MP>
+): Effect.fn.Return<
+    Form<A, I, R, MA, ME, Result.forkEffect.OutputContext<MA, ME, MR, MP>, MP>,
+    never,
+    Scope.Scope | R | Result.forkEffect.OutputContext<MA, ME, MR, MP>
+> {
     return new FormImpl(
         options.schema,
+        yield* Effect.context<Scope.Scope | R>(),
+        yield* Mutation.make(options),
         options.autosubmit ?? false,
         Option.fromNullable(options.debounce),
 
-        yield* Ref.make(HashMap.empty<FormFieldKey, FormField<unknown, unknown>>()),
-        valueRef,
+        yield* SubscriptionRef.make(Option.none<A>()),
         yield* SubscriptionRef.make(options.initialEncodedValue),
-        errorRef,
-        validationFiberRef,
+        yield* SubscriptionRef.make(Option.none<ParseResult.ParseError>()),
+        yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>()),
+
+        yield* Effect.makeSemaphore(1),
+        yield* Ref.make(HashMap.empty<FormFieldKey, FormField<unknown, unknown>>()),
     )
 })
 
-export const run = <A, MA, I, R, ME, MR, MP>(
-    self: Form<A, MA, I, R, ME, MR, MP>
+export const run = <A, I, R, MA, ME, MR, MP>(
+    self: Form<A, I, R, MA, ME, MR, MP>
 ): Effect.Effect<void> => {
-    const _self = self as FormImpl<A, MA, I, R, ME, MR, MP>
+    const _self = self as FormImpl<A, I, R, MA, ME, MR, MP>
     return _self.runSemaphore.withPermits(1)(Stream.runForEach(
         _self.encodedValue.changes.pipe(
-            Option.isSome(self.debounce) ? Stream.debounce(self.debounce.value) : identity
+            Option.isSome(_self.debounce) ? Stream.debounce(_self.debounce.value) : identity
         ),
 
         encodedValue => _self.validationFiber.pipe(
@@ -163,49 +190,34 @@ export const run = <A, MA, I, R, ME, MR, MP>(
                 )).pipe(
                     Effect.tap(fiber => Ref.set(_self.validationFiber, Option.some(fiber))),
                     Effect.andThen(Fiber.join),
-                    Effect.andThen(() => self.autosubmit
-                        ? Effect.asVoid(Effect.forkScoped(submit(self)))
+                    Effect.andThen(value => _self.autosubmit
+                        ? Effect.asVoid(Effect.forkScoped(_self.submitValue(value)))
                         : Effect.void
                     ),
                     Effect.forkScoped,
                 )
             ),
+            Effect.provide(_self.context),
         ),
     ))
 }
 
 export namespace service {
-    export interface Options<in out A, in out I, in out R, in out SA = void, in out SE = A, out SR = never, in out SP = never>
-    extends make.Options<A, I, R, SA, SE, SR, SP> {}
-
-    export type Return<A, I, R, SA = void, SE = A, SR = never, SP = never> = Effect.Effect<
-        Form<A, I, R, SA, SE, Exclude<SR, Result.Progress<any> | Result.Progress<never>>, SP>,
-        never,
-        Scope.Scope | R | Exclude<SR, Result.Progress<any> | Result.Progress<never>>
-    >
+    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+    extends make.Options<A, I, R, MA, ME, MR, MP> {}
 }
 
-export const service = <A, I = A, R = never, SA = void, SE = A, SR = never, SP = never>(
-    options: service.Options<A, I, R, SA, SE, SR, SP>
-): service.Return<A, I, R, SA, SE, SR, SP> => Effect.tap(
+export const service = <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
+    options: service.Options<A, I, R, MA, ME, MR, MP>
+): Effect.Effect<
+    Form<A, I, R, MA, ME, Result.forkEffect.OutputContext<MA, ME, MR, MP>, MP>,
+    never,
+    Scope.Scope | R | Result.forkEffect.OutputContext<MA, ME, MR, MP>
+> => Effect.tap(
     make(options),
     form => Effect.forkScoped(run(form)),
 )
 
-export const field = <A, I, R, SA, SE, SR, SP, const P extends PropertyPath.Paths<NoInfer<I>>>(
-    self: Form<A, I, R, SA, SE, SR, SP>,
-    path: P,
-): Effect.Effect<FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>> => self.fieldCacheRef.pipe(
-    Effect.map(HashMap.get(new FormFieldKey(path))),
-    Effect.flatMap(Option.match({
-        onSome: v => Effect.succeed(v as FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>),
-        onNone: () => Effect.tap(
-            Effect.succeed(makeFormField(self, path)),
-            v => Ref.update(self.fieldCacheRef, HashMap.set(new FormFieldKey(path), v as FormField<unknown, unknown>)),
-        ),
-    })),
-)
-
 
 export const FormFieldTypeId: unique symbol = Symbol.for("@effect-fc/Form/FormField")
 export type FormFieldTypeId = typeof FormFieldTypeId
@@ -254,11 +266,11 @@ class FormFieldKey implements Equal.Equal {
 export const isFormField = (u: unknown): u is FormField<unknown, unknown> => Predicate.hasProperty(u, FormFieldTypeId)
 const isFormFieldKey = (u: unknown): u is FormFieldKey => Predicate.hasProperty(u, FormFieldKeyTypeId)
 
-export const makeFormField = <A, MA, I, R, ME, MR, MP, const P extends PropertyPath.Paths<NoInfer<I>>>(
-    self: Form<A, MA, I, R, ME, MR, MP>,
+export const makeFormField = <A, I, R, MA, ME, MR, MP, const P extends PropertyPath.Paths<NoInfer<I>>>(
+    self: Form<A, I, R, MA, ME, MR, MP>,
     path: P,
 ): FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>> => {
-    const _self = self as FormImpl<A, MA, I, R, ME, MR, MP>
+    const _self = self as FormImpl<A, I, R, MA, ME, MR, MP>
     return new FormFieldImpl(
         Subscribable.mapEffect(_self.value, Option.match({
             onSome: v => Option.map(PropertyPath.get(v, path), Option.some),
@@ -292,12 +304,12 @@ export namespace useInput {
 export const useInput = Effect.fnUntraced(function* <A, I>(
     field: FormField<A, I>,
     options?: useInput.Options,
-): Effect.fn.Return<useInput.Result<I>, NoSuchElementException, Scope.Scope> {
+): Effect.fn.Return<useInput.Result<I>, Cause.NoSuchElementException, Scope.Scope> {
     const internalValueRef = yield* Component.useOnChange(() => Effect.tap(
-        Effect.andThen(field.encodedValueRef, SubscriptionRef.make),
+        Effect.andThen(field.encodedValue, SubscriptionRef.make),
         internalValueRef => Effect.forkScoped(Effect.all([
             Stream.runForEach(
-                Stream.drop(field.encodedValueRef, 1),
+                Stream.drop(field.encodedValue, 1),
                 upstreamEncodedValue => Effect.whenEffect(
                     Ref.set(internalValueRef, upstreamEncodedValue),
                     Effect.andThen(internalValueRef, internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
@@ -310,7 +322,7 @@ export const useInput = Effect.fnUntraced(function* <A, I>(
                     Stream.changesWith(Equal.equivalence()),
                     options?.debounce ? Stream.debounce(options.debounce) : identity,
                 ),
-                internalValue => Ref.set(field.encodedValueRef, internalValue),
+                internalValue => Ref.set(field.encodedValue, internalValue),
             ),
         ], { concurrency: "unbounded" })),
     ), [field, options?.debounce])
@@ -333,10 +345,10 @@ export namespace useOptionalInput {
 export const useOptionalInput = Effect.fnUntraced(function* <A, I>(
     field: FormField<A, Option.Option<I>>,
     options: useOptionalInput.Options<I>,
-): Effect.fn.Return<useOptionalInput.Result<I>, NoSuchElementException, Scope.Scope> {
+): Effect.fn.Return<useOptionalInput.Result<I>, Cause.NoSuchElementException, Scope.Scope> {
     const [enabledRef, internalValueRef] = yield* Component.useOnChange(() => Effect.tap(
         Effect.andThen(
-            field.encodedValueRef,
+            field.encodedValue,
             Option.match({
                 onSome: v => Effect.all([SubscriptionRef.make(true), SubscriptionRef.make(v)]),
                 onNone: () => Effect.all([SubscriptionRef.make(false), SubscriptionRef.make(options.defaultValue)]),
@@ -345,7 +357,7 @@ export const useOptionalInput = Effect.fnUntraced(function* <A, I>(
 
         ([enabledRef, internalValueRef]) => Effect.forkScoped(Effect.all([
             Stream.runForEach(
-                Stream.drop(field.encodedValueRef, 1),
+                Stream.drop(field.encodedValue, 1),
 
                 upstreamEncodedValue => Effect.whenEffect(
                     Option.match(upstreamEncodedValue, {
@@ -373,7 +385,7 @@ export const useOptionalInput = Effect.fnUntraced(function* <A, I>(
                     Stream.changesWith(Equal.equivalence()),
                     options?.debounce ? Stream.debounce(options.debounce) : identity,
                 ),
-                ([enabled, internalValue]) => Ref.set(field.encodedValueRef, enabled ? Option.some(internalValue) : Option.none()),
+                ([enabled, internalValue]) => Ref.set(field.encodedValue, enabled ? Option.some(internalValue) : Option.none()),
             ),
         ], { concurrency: "unbounded" })),
     ), [field, options.debounce])

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.isValidatingSubscribable,
-        props.field.isSubmittingSubscribable,
+        props.field.issues,
+        props.field.isValidating,
+        props.field.isSubmitting,
     ])
 
     return (

packages/example/src/routes/form.tsx

@@ -54,9 +54,9 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
         ),
 
         initialEncodedValue: { email: "", password: "", birth: Option.none() },
-        onSubmit: Effect.fnUntraced(function*(v) {
+        f: Effect.fnUntraced(function*([value]) {
             yield* Effect.sleep("500 millis")
-            return yield* Schema.decode(RegisterFormSubmitSchema)(v)
+            return yield* Schema.decode(RegisterFormSubmitSchema)(value)
         }),
         debounce: "500 millis",
     })
@@ -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.submitResultRef,
+        form.canSubmit,
+        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) {
-                return Match.value(props).pipe(
-                    Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
-                        Effect.andThen(makeTodo),
-                        Effect.andThen(Schema.encode(TodoFormSchema)),
-                        Effect.andThen(v => Ref.set(this.encodedValueRef, v)),
-                    )),
-                    Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
-                    Match.exhaustive,
-                )
-            },
+            f: ([todo, form]) => Match.value(props).pipe(
+                Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
+                    Effect.andThen(makeTodo),
+                    Effect.andThen(Schema.encode(TodoFormSchema)),
+                    Effect.andThen(v => Ref.set(form.encodedValue, v)),
+                )),
+                Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
+                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(form, ["completedAt"]),
+            yield* form.field(["content"]),
+            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>
                         }