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 * 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: * 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: * 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 * ```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. * 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 // this conditional allows tuples but not arrays. Arrays would indicate a
// rest parameter type, which is not supported. If rest parameters are added // rest parameter type, which is not supported. If rest parameters are added
// in the future, the condition can be removed. // in the future, the condition can be removed.
number extends T['length'] number extends Parameters['length']
? never ? never
: { : {
( (
this: void, this: void,
...args: T ...args: Parameters
): typeof SnippetReturn & { ): typeof SnippetReturn & {
_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"'; _: '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: * 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 * ```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. * 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 // this conditional allows tuples but not arrays. Arrays would indicate a
// rest parameter type, which is not supported. If rest parameters are added // rest parameter type, which is not supported. If rest parameters are added
// in the future, the condition can be removed. // in the future, the condition can be removed.
number extends T['length'] number extends Parameters['length']
? never ? never
: { : {
( (
this: void, this: void,
...args: T ...args: Parameters
): typeof SnippetReturn & { ): typeof SnippetReturn & {
_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"'; _: '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 * 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: * Inspects one or more values whenever they, or the properties they contain, change. Example:

Loading…
Cancel
Save