From 8e16c777e023ad8d4df7c4a05bd86217e1b00c7c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 22 May 2025 21:32:40 -0400 Subject: [PATCH 1/4] docs: improve bind:group example (#15968) --- .../docs/03-template-syntax/12-bind.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md index 0970ee384eba..a59a2d8321e8 100644 --- a/documentation/docs/03-template-syntax/12-bind.md +++ b/documentation/docs/03-template-syntax/12-bind.md @@ -142,26 +142,27 @@ Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs ## `` -Inputs that work together can use `bind:group`. +Inputs that work together can use `bind:group` ([demo](/playground/untitled#H4sIAAAAAAAAE62T32_TMBDH_5XDQkpbrct7SCMGEvCEECDxsO7BSW6L2c227EvbKOv_jp0f6jYhQKJv5_P3PvdL1wstH1Bk4hMSGdgbRzUssFaM9VJciFtF6EV23QvubNRFR_BPUVfWXvodEkdfKT3-zl8Zzag5YETuK6csF1u9ZUIGNo4VkYQNvPYsGRfJF5JKJ8s3QRJE6WoFb2Nq6K-ck13u2Sl9Vxxhlc6QUBIFnz9Brm9ifJ6esun81XoNd860FmtwslYGlLYte5AO4aHlVhJ1gIeKWq92COt1iMtJlkhFPkgh1rHZiiF6K6BUus4G5KafGznCTlIbVUMfQZUWMJh5OrL-C_qjMYSwb1DyiH7iOEuCb1ZpWTUjfHqcwC_GWDVY3ZfmME_SGttSmD9IHaYatvWHIc6xLyqad3mq6KuqcCwnWn9p8p-p71BqP2IH81zc9w2in-od7XORP7ayCpd5YCeXI_-p59mObPF9WmwGpx3nqS2Gzw8TO3zOaS5_GqUXyQUkS3h8hOSz0ZhMESHGc0c4Hm3MAn00t1wrb0l2GZRkqvt4sXwczm6Qh8vnUJzI2LV4vAkvqWgfehTZrSSPx19WiVfFfAQAAA==)): ```svelte + - - - + + + - - - - + + + + ``` > [!NOTE] `bind:group` only works if the inputs are in the same Svelte component. From 08346b51f28697676b95835ca10f93642e1c00fc Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 22 May 2025 21:33:47 -0400 Subject: [PATCH 2/4] docs: move some `$state` information around (#15969) --- documentation/docs/02-runes/02-$state.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md index f7314e29506c..e19e68f6a863 100644 --- a/documentation/docs/02-runes/02-$state.md +++ b/documentation/docs/02-runes/02-$state.md @@ -20,9 +20,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates. -> [!NOTE] Class instances are not proxied. You can create [reactive state fields](#Classes) on classes that you define. Svelte provides reactive implementations of built-ins like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity). - -State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this... +State is proxified recursively until Svelte finds something other than an array or simple object (like a class). In a case like this... ```js let todos = $state([ @@ -67,7 +65,7 @@ todos[0].done = !todos[0].done; ### Classes -You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`: +Class instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`: ```js // @errors: 7006 2554 @@ -121,6 +119,8 @@ class Todo { } ``` +> Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity). + ## `$state.raw` In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`. @@ -145,6 +145,8 @@ person = { This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects). +As with `$state`, you can declare class fields using `$state.raw`. + ## `$state.snapshot` To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`: From 6928aaca06d8bcc37d17ce715ed04221d6eccc72 Mon Sep 17 00:00:00 2001 From: venus Date: Fri, 23 May 2025 13:58:42 +0200 Subject: [PATCH 3/4] feat: enable TS autocomplete for Svelte HTML element definitions (#15972) Covers #15971. adds autocomplete support to SvelteHTMLElements while preserving its functionality that key can be any string using string & {} TS trick. --- packages/svelte/elements.d.ts | 2 +- packages/svelte/svelte-html.d.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts index 237e96c69919..71f28b4f97e6 100644 --- a/packages/svelte/elements.d.ts +++ b/packages/svelte/elements.d.ts @@ -2066,7 +2066,7 @@ export interface SvelteHTMLElements { failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>; }; - [name: string]: { [name: string]: any }; + [name: string & {}]: { [name: string]: any }; } export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary; diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts index 5042eaa4b849..6e37cc93e82e 100644 --- a/packages/svelte/svelte-html.d.ts +++ b/packages/svelte/svelte-html.d.ts @@ -8,7 +8,7 @@ import * as svelteElements from './elements.js'; /** * @internal do not use */ -type HTMLProps = Omit< +type HTMLProps = Omit< import('./elements.js').SvelteHTMLElements[Property], keyof Override > & @@ -250,7 +250,7 @@ declare global { }; // don't type svelte:options, it would override the types in svelte/elements and it isn't extendable anyway - [name: string]: { [name: string]: any }; + [name: string & {}]: { [name: string]: any }; } } } From 4c21f66f2789d11a7e3907014bfdc01960948214 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 23 May 2025 10:04:31 -0400 Subject: [PATCH 4/4] chore: add `@since` tag to fragments option (#15990) --- packages/svelte/src/compiler/types/index.d.ts | 1 + packages/svelte/types/index.d.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts index a53a431cf123..0da036242b07 100644 --- a/packages/svelte/src/compiler/types/index.d.ts +++ b/packages/svelte/src/compiler/types/index.d.ts @@ -129,6 +129,7 @@ export interface CompileOptions extends ModuleCompileOptions { * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere * * @default 'html' + * @since 5.33 */ fragments?: 'html' | 'tree'; /** diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 201dbed9aa83..1a83e0d0f100 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -992,6 +992,7 @@ declare module 'svelte/compiler' { * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere * * @default 'html' + * @since 5.33 */ fragments?: 'html' | 'tree'; /** @@ -2888,6 +2889,7 @@ declare module 'svelte/types/compiler/interfaces' { * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere * * @default 'html' + * @since 5.33 */ fragments?: 'html' | 'tree'; /**