Svelte 5: Variadic snippets

[Rich-Harris]

Describe the problem

Snippets take a single argument. This is for two reasons:

• we initially thought it would be difficult to type variadic snippets
• a vague notion that it might be easier to optimise snippets (e.g. hoisting them) if we know that they always have zero or one arguments

Describe the proposed solution

Hat-tip to @tcc-sejohnson for solving the typing issue:

type Snippet<Args = any, This = any> = Args extends any[] ? (this: This, ...args: Args) => unknown : (this: This, arg: Args) => unknown;

type MyCustomSnippet = Snippet<[firstName: string, lastName: string, dob: Date]>;
type MyCustomSnippetWithOneArg = Snippet<{ firstName: string, lastName: string, dob: Date }>;

I haven't thought deeply about the optimisation question. It may be a non-issue.

Alternatives considered

not doing this

Importance

nice to have

[elliott-with-the-longest-name-on-github]

You can remove the This generic and just change this: This to this: void!

[dummdidumm]

There's one caveat with ambiguity: type MyCustomSnippetThatShouldHaveOneArg = Snippet<boolean[]> is interpreted as passing many arguments as booleans when the user likely meant "I want this to be one argument". The solution for this is type MyCustomSnippetThatShouldHaveOneArg = Snippet<[boolean[]]> - not sure how many people would run into this.

[Not-Jayden]

There's one caveat with ambiguity: type MyCustomSnippetThatShouldHaveOneArg = Snippet<boolean[]> is interpreted as passing many arguments as booleans when the user likely meant "I want this to be one argument". The solution for this is type MyCustomSnippetThatShouldHaveOneArg = Snippet<[boolean[]]> - not sure how many people would run into this.

Maybe it should just be simplified to always require an array generic?

type Snippet<Args extends unknown[] = []> = (this: void, ...args: Args) => unknown;

type ObjectSnippet = Snippet<[{ name: string, age: number }]>;
type TupleSnippet = Snippet<[string, number, boolean, ...boolean[]]>;
type BooleanRestSnippet = Snippet<[...boolean[]]>;
type BooleanArraySnippet = Snippet<[boolean[]]>;
type OptionalArgSnippet = Snippet<
  [string, number, boolean?]
>;

Reduces ambiguity as you'll always need to type the function arguments based on their position in the arguments list. Just has the tradeoff of being a bit less pretty for the single argument cases.

EDIT:
I guess this doesn't actually address the problem of being able to do this and expecting it to be a single arg:

type BooleanRestSnippet = Snippet<boolean[]>;

but it's still less ambiguous once you realise it's always an array of function args.

[elliott-with-the-longest-name-on-github]

I raise you all the version that works with tuples, single-argument-typed-as-an-array, and objects + primitives as a single argument:

type Snippet<Args = any> = 
    Args extends any[]
        // it's an array
        ? number extends Args['length']
            // it's an array, not a tuple
            ? (this: void, arg: Args) => unknown
            // it's a tuple (because the type of Args['length'] is narrower than `number`)
            : (this: void, ...args: Args) => unknown
        // it's anything else
        : (this: void, arg: Args) => unknown;

type MyCustomSnippet = Snippet<[firstName: string, lastName: string, dob: Date]>;
type MyCustomSnippetWithOneArg = Snippet<{ firstName: string, lastName: string, dob: Date }>;
type MyPreviouslyBrokenSnippet = Snippet<boolean[]>

Playground

[Not-Jayden]

@tcc-sejohnson this prevents being able to define snippets with single rest arguments AFAICT though.

e.g.

type MyBrokenSnippet = Snippet<[...boolean[]]>
//   ^? (this: void, arg: boolean[]) => unknown

I'd probably go with your original type over this one for that reason, though I'm still leaning towards the generic always being an array that maps to the function args as the most practical/unambiguous solution.

[elliott-with-the-longest-name-on-github]

Rats 😆 yeah, guess I don't have a solution for that one. I kinda agree with you, there's something nice about just:

type Snippet<Args = any> = (this: void, ...args: Args) => unknown;

type MyCustomSnippet = Snippet<[todos: Todo[]]>;

It's an extra pair of brackets in the absolute simplest case, but it gives you just one way to do things...

[flo-at]

Good to see this is completed now!
Just to make sure, the type of children would be Snippet<[]>, right?

Edit: I just saw the updated documentation, Snippet seems to be the correct answer.

[dummdidumm]

Snippet is equivalent to Snippet<[]> so they both work