Remote Function Form typechecking does not work with `variant` / `discriminatedUnion`

[hrueger]

Describe the bug

Hi, in my schema, I depend on valibot's variant (I believe that is Zod's discriminatedUnion) quite a lot. This allows you to define conditions (if the user has selected type a earlier, ask for email, otherwise ask for telefone).
However, this does not work on the frontend. Or maybe I'm just doing it wrong? EDIT: It actually does work on the frontend if you do myForm.fields.myField.value == "type1" in the condition, but TypeScript complains (see below).

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-mpz8w8fc?file=src%2Froutes%2F%2Bpage.svelte

I'd expect that those properties either always exist or exist conditionally. However, they just don't really work at all? with the in operator, I can make TypeScript happy, but it does not work in the runtime. EDIT: The code below works at runtime, but svelte check fails. If I replace {#if myForm.fields.differing.type.value() == "a"} with {#if "propA" in myForm.fields.differing}, TS is happy, but then it does not work anymore (the condition is always false).

Schema:

export const schema = v.object({
  alwaysExisting: v.string(),
  differing: v.variant('type', [
    v.object({
      type: v.literal('a'),
      propA: v.string(),
    }),
    v.object({
      type: v.literal('b'),
      propB: v.string(),
    }),
  ]),
});

UI:

<form {...myForm}>
	Always: <input {...myForm.fields.alwaysExisting.as("text")}>
	<br>
	Differing:
	<select {...myForm.fields.differing.type.as("select")}>
		<option value="a">a</option>
		<option value="b">b</option>
	</select>

	{#if myForm.fields.differing.type.value() == "a"}
		PropA: <input {...myForm.fields.differing.propA.as("text")}>
	{:else}
		PropB: <input {...myForm.fields.differing.propB.as("text")}>
	{/if}
	<br>
	propA in myForm.fields.differing: {"propA" in myForm.fields.differing}<br>
	propB in myForm.fields.differing: {"propB" in myForm.fields.differing}<br>
</form>

Backend types (they are ok):

export const myForm = form(schema, async (data) => {
  console.log(data.alwaysExisting);
  console.log(data.differing.type);
  if (data.differing.type == 'a') {
    console.log(data.differing.propA);
  } else {
    console.log(data.differing.propB);
  }
});

Logs

-

System Info

System:
    OS: macOS 15.7.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 145.41 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.17.0 - /Users/hannes/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 4.9.3 - /Users/hannes/.nvm/versions/node/v22.17.0/bin/yarn
    npm: 11.5.2 - /Users/hannes/.nvm/versions/node/v22.17.0/bin/npm
    bun: 1.2.23 - /opt/homebrew/bin/bun
    Deno: 2.5.3 - /opt/homebrew/bin/deno
  Browsers:
    Chrome: 141.0.7390.65
    Firefox: 143.0.4
    Safari: 26.0.1
  npmPackages:
    @sveltejs/adapter-node: ^5.3.3 => 5.3.3 
    @sveltejs/kit: ^2.46.4 => 2.46.4 
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1 
    vite: 6 => 6.3.6

Severity

blocking an upgrade

Additional Information

Blocking the upgrade to using remote functions instead of my old custom validation implementation.

[hyunbinseo]

I am not certain about what this means:

However, this does not work on the frontend. ... but it does not work in the runtime.

Regarding this mismatch, I've created a separate issue #14676

Differing [a] -- a is selected
Prop B: [   ] -- b label is shown

1. The user didn't change the <select>
2. The initial value is an '' empty string
3. Since .value() !== "a", Prop B: label is shown:

---

I personally wouldn't nest fields like that, I would just use this for DX:

import * as v from 'valibot';

const SharedSchema = v.object({
  name: v.string(),
});

const VariantSchema = v.variant('type', [
  v.object({
    type: v.literal('email'),
    email: v.pipe(v.string(), v.email()),
    ...SharedSchema.entries,
  }),
  v.object({
    type: v.literal('url'),
    url: v.pipe(v.string(), v.url()),
    ...SharedSchema.entries,
  }),
]);

[hrueger]

Hi @hyunbinseo,
thanks for your reply.

I am not certain about what this means:

It this does not work on the frontend. ... but it does not work in the runtime.

You're right, it does work indeed. I was just confused, because TypeScript was not happy with this implementation (checking the value of value(), therefore I seem to have forgotten to running this. TypeScript was only happy with the in version, but this does not work. The StackBlitz does not have the Svelte Extension, so it does not do Type Checking in the HTML. When I download the project and open it e.g. in VSCode, I get this:

So you're correct - it does work at runtime, only TS and svelte check are not satisfied:

npm run check

> kit-template-default@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./jsconfig.json

Loading svelte-check in workspace: /home/me/Downloads/sveltejs-kit-template-default-mpz8w8fc
Getting Svelte diagnostics...

/home/me/Downloads/sveltejs-kit-template-default-mpz8w8fc/src/routes/+page.svelte:18:51
Error: Property 'propA' does not exist on type '(RemoteFormFieldMethods<{ type: "a"; propA: string; }> & { allIssues(): RemoteFormIssue[] | undefined; } & { type: RemoteFormField<"a">; propA: RemoteFormField<...>; }) | (RemoteFormFieldMethods<...> & ... 1 more ... & { ...; })'.
  Property 'propA' does not exist on type 'RemoteFormFieldMethods<{ type: "b"; propB: string; }> & { allIssues(): RemoteFormIssue[] | undefined; } & { type: RemoteFormField<"b">; propB: RemoteFormField<...>; }'. (ts)
    {#if myForm.fields.differing.type.value() == "a"}
        PropA: <input {...myForm.fields.differing.propA.as("text")} />
    {:else}

/home/me/Downloads/sveltejs-kit-template-default-mpz8w8fc/src/routes/+page.svelte:20:51
Error: Property 'propB' does not exist on type '(RemoteFormFieldMethods<{ type: "a"; propA: string; }> & { allIssues(): RemoteFormIssue[] | undefined; } & { type: RemoteFormField<"a">; propA: RemoteFormField<...>; }) | (RemoteFormFieldMethods<...> & ... 1 more ... & { ...; })'.
  Property 'propB' does not exist on type 'RemoteFormFieldMethods<{ type: "a"; propA: string; }> & { allIssues(): RemoteFormIssue[] | undefined; } & { type: RemoteFormField<"a">; propA: RemoteFormField<...>; }'. (ts)
    {:else}
        PropB: <input {...myForm.fields.differing.propB.as("text")} />
    {/if}

[dummdidumm]

Mhm I don't know how we could accomodate this with the current API - if (foo.bar.value() === 'x') { foo.bar.propThatIsThereOnlyWhenX } is impossible to type-narrow in TypeScript. See this playground for a reduced example which also doesn't type-narrow

[hrueger]

What is the reason for value() being a function and not a getter? If I recall correctly, with a getter the type-narrow should be possible, right?

[sillvva]

Mhm I don't know how we could accomodate this with the current API - if (foo.bar.value() === 'x') { foo.bar.propThatIsThereOnlyWhenX } is impossible to type-narrow in TypeScript. See this playground for a reduced example which also doesn't type-narrow

Your example is slightly incorrect. In your example, a.x can be both a string 'x' | 'y' and an object with an .x or .y property. Here's a TypeScript example showing how you'd make it work. You need to assign it to a variable at the discriminated union parent level and then reference it that way.

Working example in Svelte, I think:
https://stackblitz.com/edit/sveltejs-kit-template-default-hoh9fe7s?file=src%2Froutes%2F%2Bpage.svelte,src%2Froutes%2Ftest.remote.ts,src%2Froutes%2Fschema.ts

... Edit: Now that I think about it, I think the proxies would still complain. I don't think there really is any way to make this work.

[hrueger]

Yes, same error unfortunately.

As far as I understand it with your provided playground link:
The problem is that value() could (in theory) return different results each time it is called. Therefore, we'd need to put that in a variable first and check it's value, then the siblings are typed correctly. However, this won't work in Svelte as value() returns the values only, not the subfields.

Maybe it would be possible to have a subfields() function, returning something like

{
    type: "a",
    propA: FormField,
    ...otherFieldsOnThatLayer
} | {
    type: "b",
    propB: FormField,
    ...otherFields2OnThatLayer
}

?

[hrueger]

I found some semi-acceptable way of casting using some typescript magic ;-)

type ExtractGeneric<P> = P extends RemoteForm<infer T, void> ? T : never;

{#if myForm.fields.differing.type.value() == "a"}
    PropA: <input {...(myForm as RemoteForm<ExtractGeneric<typeof myForm> & { differing: { type: "a" } }, void>).fields.differing.propA.as("text")} />
{:else}
    PropB: <input {...(myForm as RemoteForm<ExtractGeneric<typeof myForm> & { differing: { type: "b" } }, void>).fields.differing.propB.as("text")} />
{/if}

This makes everything pretty typesafe - e.g. it throws if I try to use a wrong type or if I try to use a nonexisting field later.

Maybe SvelteKit could expose some kind of helper type for this?

[hrueger]

As I found out, my approach above does not really work with checkboxes, since the union narrow does not seem to work when the inner value is set to undefined. I also was not able to work around it using never.

My current workaround is to export the subschemas, too, and then creating a subform constant like so:

import * as v from 'valibot';

export const typeASubschema = v.object({
  propA: v.string(),
});

export const typeBSubschema = v.object({
  propB: v.string(),
});

export const schema = v.object({
  alwaysExisting: v.string(),
  differing: v.variant('type', [
    v.object({
      type: v.literal('a'),
      ...typeASubschema.entries,
    }),
    v.object({
      type: v.literal('b'),
      ...typeBSubschema.entries,
    }),
  ]),
});

{#if myForm.fields.differing.type.value() == "a"}
	{@const subform = myForm.fields.differing as RemoteForm<
		v.InferInput<typeof typeASubschema>,
		void
	>["fields"]}
	PropA: <input {...subform.propA.as("text")}>
{:else}
	{@const subform = myForm.fields.differing as RemoteForm<
		v.InferInput<typeof typeBSubschema>,
		void
	>["fields"]}
	PropB: <input {...subform.propB.as("text")}>
{/if}

See this copy of the original stackblitz.

For me this works quite well, maybe we can add some helper types to make it look nicer?

[sillvva]

@hrueger I like your solution, As of a couple days ago, you can now use this type instead of RemoteForm<>["fields"]. This type refers to a field container at any nested level:

RemoteFormFields<v.InferInput<typeof ...>>

---

Also, #14771 made it possible to handle discriminated unions if you are willing to manually assign the attributes for those fields, without .as(). Accessing the issues (without .issues()) for those fields will be possible with #14784.

Example: https://stackblitz.com/edit/sveltekit-template-sjtkof-cvvrlrax?file=src%2Froutes%2Fschema.ts,src%2Froutes%2F%2Bpage.svelte