feat: improve type arguments for Snippet and $bindable (#12197)

* Improve type arguments for snippet and bindable

* generate:types

* tweak

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
pull/12190/head
Tiger Oakes 6 months ago committed by GitHub
parent 2c807ad88c
commit 72fec99b06
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
"svelte": patch
---
feat: improve type arguments for Snippet and $bindable

@ -306,7 +306,7 @@ declare function $props(): any;
*
* https://svelte-5-preview.vercel.app/docs/runes#$bindable
*/
declare function $bindable<T>(t?: T): T;
declare function $bindable<T>(fallback?: T): T;
/**
* Inspects one or more values whenever they, or the properties they contain, change. Example:

@ -259,20 +259,24 @@ declare const SnippetReturn: unique symbol;
/**
* The type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type:
* ```ts
* let { banner }: { banner: Snippet<{ text: string }> } = $props();
* let { banner }: { banner: Snippet<[{ text: string }]> } = $props();
* ```
* You can only call a snippet through the `{@render ...}` tag.
*
* https://svelte-5-preview.vercel.app/docs/snippets
*
* @template Parameters the parameters that the snippet expects (if any) as a tuple.
*/
export type Snippet<T extends unknown[] = []> =
export type Snippet<Parameters extends unknown[] = []> =
// this conditional allows tuples but not arrays. Arrays would indicate a
// rest parameter type, which is not supported. If rest parameters are added
// in the future, the condition can be removed.
number extends T['length']
number extends Parameters['length']
? never
: {
(
this: void,
...args: T
...args: Parameters
): typeof SnippetReturn & {
_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
};

@ -256,20 +256,24 @@ declare module 'svelte' {
/**
* The type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type:
* ```ts
* let { banner }: { banner: Snippet<{ text: string }> } = $props();
* let { banner }: { banner: Snippet<[{ text: string }]> } = $props();
* ```
* You can only call a snippet through the `{@render ...}` tag.
*
* https://svelte-5-preview.vercel.app/docs/snippets
*
* @template Parameters the parameters that the snippet expects (if any) as a tuple.
*/
type Snippet<T extends unknown[] = []> =
type Snippet<Parameters extends unknown[] = []> =
// this conditional allows tuples but not arrays. Arrays would indicate a
// rest parameter type, which is not supported. If rest parameters are added
// in the future, the condition can be removed.
number extends T['length']
number extends Parameters['length']
? never
: {
(
this: void,
...args: T
...args: Parameters
): typeof SnippetReturn & {
_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
};
@ -3015,7 +3019,7 @@ declare function $props(): any;
*
* https://svelte-5-preview.vercel.app/docs/runes#$bindable
*/
declare function $bindable<T>(t?: T): T;
declare function $bindable<T>(fallback?: T): T;
/**
* Inspects one or more values whenever they, or the properties they contain, change. Example:

Loading…
Cancel
Save