sveltejs / sveltejs/kit

Allow Remote Form schemas to have additional input types to what forms may receive

Open
#16,094 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

forms types / typescript
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

At the moment, the remote form typings are pretty strict about their schema's input types. For example, the following example is currently not allowed, even though it doesn't produce a problem at runtime:

const numberish = v.union([v.number(), v.bigint()])

export const foo = form(
  v.object({
    bar: numberish,
         ^^^^^^^^^
      // Property bar is incompatible with index signature. Type number | bigint
      // is not assignable to type MaybeArray<string | number | boolean | RemoteFormInput | File>
  }),
  async (data) => { ... },
)

In my apps, I have some quite specialised schemas that sometimes happen to additionally allow input that remote function can't give (and thus disallow). I use schemas more many different things, and I'd like to reuse them as much as possible.

As another example, it feels weird that v.optional(...) is allowed, but v.nullish(...) isn't – even though it's basically v.optional(v.nullable(...)). It feels weird because I don't understand why remote forms have to police that my schema handles other inputs.

It's also already allowed to NOT handle possible inputs.

Describe the proposed solution

The form should allow schemas as long as there is an overlap with the types that the form can possibly send. To pick up the example from above:

export const foo = form(
  v.object({
    // Should be allowed, because there's overlap between 
    // `number | bigint` and `MaybeArray<string | number | boolean | RemoteFormInput | File>`
    bar: v.union([v.number(), v.bigint()]),

    // Should be forbidden, because there's no overlap between
    // `date | bigint` and `MaybeArray<string | number | boolean | RemoteFormInput | File>`
    bar2: v.union([v.date(), v.bigint()]),
  }),
  async (data) => { ... },
)
Alternatives considered

I could implement separate schemas for remote forms and the rest of my app, but this seems error prone and a bit annoying.

Importance

would make my life easier

Additional Information

This is extracted from https://github.com/sveltejs/kit/issues/15249#issuecomment-4745841931, which was closed by the original author, and I think my particular problem was only half related anyway.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the remote form typings used by form(...) and inspect how object schema input types are currently constrained. Compare the stated number|bigint and date|bigint examples, then verify that the resulting type behavior permits overlapping inputs and rejects inputs with no overlap.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
api
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.