diff --git a/.changeset/tricky-laws-bathe.md b/.changeset/tricky-laws-bathe.md new file mode 100644 index 0000000000..36ac44d512 --- /dev/null +++ b/.changeset/tricky-laws-bathe.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +feat: improve type arguments for Snippet and $bindable diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts index 35bc292be3..f6d62194e6 100644 --- a/packages/svelte/src/ambient.d.ts +++ b/packages/svelte/src/ambient.d.ts @@ -306,7 +306,7 @@ declare function $props(): any; * * https://svelte-5-preview.vercel.app/docs/runes#$bindable */ -declare function $bindable(t?: T): T; +declare function $bindable(fallback?: T): T; /** * Inspects one or more values whenever they, or the properties they contain, change. Example: diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts index 29282f4fa6..adebed6dd1 100644 --- a/packages/svelte/src/index.d.ts +++ b/packages/svelte/src/index.d.ts @@ -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 = +export type Snippet = // 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"'; }; diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index a325cab40a..1bae92f495 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -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 = + type Snippet = // 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; +declare function $bindable(fallback?: T): T; /** * Inspects one or more values whenever they, or the properties they contain, change. Example: