From a72dc8eadbf63189d9ae12e9ea18711378f8f12f Mon Sep 17 00:00:00 2001 From: "svelte-triage-bot[bot]" <316883489+svelte-triage-bot[bot]@users.noreply.github.com> Date: Fri, 18 Sep 2026 15:24:06 -0400 Subject: [PATCH 1/7] fix: make Object.hasOwn reactive for state proxies (#18838) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #18837 ### What changed State proxies now establish a per-property reactive dependency when `Object.hasOwn(proxy, prop)` invokes the `getOwnPropertyDescriptor` trap. Property additions and deletions therefore invalidate the expression, consistently with the `prop in proxy` operator. The source creation uses the same eligibility constraints as the existing `has` trap so inherited properties retain their existing semantics. A runtime-runes regression sample covers both adding and deleting the observed property in DOM and hydration modes. ### Tests and linting - `FILTER=object-has-own-reactive pnpm test runtime-runes --reporter=dot` — 4 passed - `pnpm exec vitest run packages/svelte/src/internal/client/proxy.test.ts --reporter=dot` — 8 passed - `pnpm test runtime-runes --reporter=dot` — 2707 passed, 34 skipped - `pnpm test --reporter=dot` — 7786 passed, 55 skipped - `cd packages/svelte && pnpm check` — passed - `pnpm format` — passed - `pnpm lint` — passed Includes a patch changeset for `svelte`. --------- Co-authored-by: svelte-triage-bot Co-authored-by: Rich Harris --- .changeset/reactive-has-own.md | 5 ++++ packages/svelte/src/internal/client/proxy.js | 19 +++++++++------ .../object-has-own-reactive/_config.js | 24 +++++++++++++++++++ .../object-has-own-reactive/main.svelte | 7 ++++++ 4 files changed, 48 insertions(+), 7 deletions(-) create mode 100644 .changeset/reactive-has-own.md create mode 100644 packages/svelte/tests/runtime-runes/samples/object-has-own-reactive/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/object-has-own-reactive/main.svelte diff --git a/.changeset/reactive-has-own.md b/.changeset/reactive-has-own.md new file mode 100644 index 0000000000..2ec5d27cee --- /dev/null +++ b/.changeset/reactive-has-own.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: make Object.hasOwn reactive for state proxy ownership changes diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js index 91d82f8903..d7e8c98896 100644 --- a/packages/svelte/src/internal/client/proxy.js +++ b/packages/svelte/src/internal/client/proxy.js @@ -204,16 +204,21 @@ export function proxy(value) { }, getOwnPropertyDescriptor(target, prop) { + this.has?.(target, prop); + var descriptor = Reflect.getOwnPropertyDescriptor(target, prop); + var s = sources.get(prop); - if (descriptor && 'value' in descriptor) { - var s = sources.get(prop); - if (s) descriptor.value = get(s); - } else if (descriptor === undefined) { - var source = sources.get(prop); - var value = source?.v; + if (s !== undefined) { + var value = get(s); + + if (value === UNINITIALIZED) { + return undefined; + } - if (source !== undefined && value !== UNINITIALIZED) { + if (descriptor && 'value' in descriptor) { + descriptor.value = value; + } else { return { enumerable: true, configurable: true, diff --git a/packages/svelte/tests/runtime-runes/samples/object-has-own-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/object-has-own-reactive/_config.js new file mode 100644 index 0000000000..17344b343d --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/object-has-own-reactive/_config.js @@ -0,0 +1,24 @@ +import { test } from '../../test'; +import { tick } from 'svelte'; + +export default test({ + html: `

false

`, + + async test({ assert, target }) { + const [add, remove] = target.querySelectorAll('button'); + + add.click(); + await tick(); + assert.htmlEqual( + target.innerHTML, + `

true

` + ); + + remove.click(); + await tick(); + assert.htmlEqual( + target.innerHTML, + `

false

` + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/object-has-own-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/object-has-own-reactive/main.svelte new file mode 100644 index 0000000000..bd0773ae83 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/object-has-own-reactive/main.svelte @@ -0,0 +1,7 @@ + + + + +

{Object.hasOwn(state, 'y')}

From 8030ff2a2c8b84231f1d8f3bbc7d9974f12669b9 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 18 Sep 2026 17:23:42 -0400 Subject: [PATCH 2/7] fix: remove incorrect special handling of :export pseudo-selectors (#18839) #18793 added special handling for `:export` selectors, but this is incorrect. `:export` is (apparently) part of [Interoperable CSS](https://github.com/css-modules/icss) but Svelte doesn't (and shouldn't) know what that is. No changeset because #18793 is unreleased, and the changeset in that PR didn't mention ICSS --- .../src/compiler/phases/2-analyze/css/css-prune.js | 9 +-------- .../tests/css/samples/global-head-only/expected.css | 1 - .../tests/css/samples/global-head-only/input.svelte | 1 - 3 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js index 125f096783..0c8fdb79f2 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js @@ -146,16 +146,9 @@ export function prune(stylesheet, elements) { ComplexSelector(node) { const selectors = get_relative_selectors(node); const rule = /** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule); - const first = selectors[0]?.selectors[0]; - const is_icss_export = - selectors.length === 1 && - selectors[0].selectors.length === 1 && - first?.type === 'PseudoClassSelector' && - first.name === 'export' && - first.args === null; // Global and ICSS export rules do not depend on an element in this component - if (every_is_global(selectors, 0, selectors.length, rule) || is_icss_export) { + if (every_is_global(selectors, 0, selectors.length, rule)) { node.metadata.used = true; } diff --git a/packages/svelte/tests/css/samples/global-head-only/expected.css b/packages/svelte/tests/css/samples/global-head-only/expected.css index 0496468076..d2047e57d2 100644 --- a/packages/svelte/tests/css/samples/global-head-only/expected.css +++ b/packages/svelte/tests/css/samples/global-head-only/expected.css @@ -1,2 +1 @@ -:export { foo: red; } :is(td, th) { color: red; } diff --git a/packages/svelte/tests/css/samples/global-head-only/input.svelte b/packages/svelte/tests/css/samples/global-head-only/input.svelte index 3b0e647728..2ade1defdf 100644 --- a/packages/svelte/tests/css/samples/global-head-only/input.svelte +++ b/packages/svelte/tests/css/samples/global-head-only/input.svelte @@ -1,6 +1,5 @@ From 636eaaaa6f064b55072e7d192bb76dc9d8c4516e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 18 Sep 2026 19:43:30 -0400 Subject: [PATCH 3/7] Version Packages (#18750) This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## svelte@5.57.1 ### Patch Changes - fix: cancel deferred event listeners during cleanup ([#18749](https://github.com/sveltejs/svelte/pull/18749)) - fix: preserve global CSS in components without scopable elements ([#18793](https://github.com/sveltejs/svelte/pull/18793)) - fix: reduce SSR render result garbage collection ([#18798](https://github.com/sveltejs/svelte/pull/18798)) - fix: resolve the fallback of an each block in the enclosing scope ([#18803](https://github.com/sveltejs/svelte/pull/18803)) - perf: speed up parser interactions with Acorn or avoid them where possible ([#18740](https://github.com/sveltejs/svelte/pull/18740)) - fix: prevent effect tree of batches from interfering with each other ([#18508](https://github.com/sveltejs/svelte/pull/18508)) - fix: serialize input default values during server rendering ([#18733](https://github.com/sveltejs/svelte/pull/18733)) - fix: remove `WAS_MARKED` flag in favor of `Set` ([#18127](https://github.com/sveltejs/svelte/pull/18127)) - fix: throw `set_context_after_init` when `setContext` is called after an `await` during SSR ([#18739](https://github.com/sveltejs/svelte/pull/18739)) - fix: make Object.hasOwn reactive for state proxy ownership changes ([#18838](https://github.com/sveltejs/svelte/pull/18838)) - fix: keep `$state.eager` when used as a variable initializer ([#18809](https://github.com/sveltejs/svelte/pull/18809)) - perf: avoid regex matching in parser where possible ([#18736](https://github.com/sveltejs/svelte/pull/18736)) - fix: in non-async mode, only push variable to current_sources when active_reaction is updating ([#18550](https://github.com/sveltejs/svelte/pull/18550)) - fix: recognise `aria-braillelabel` and `aria-brailleroledescription` as known ARIA attributes ([#18765](https://github.com/sveltejs/svelte/pull/18765)) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/calm-events-cleanup.md | 5 ---- .changeset/calm-heads-glow.md | 5 ---- .changeset/calm-render-results.md | 5 ---- .changeset/each-fallback-scope.md | 5 ---- .changeset/easy-points-tan.md | 5 ---- .changeset/gold-trams-knock.md | 5 ---- .changeset/green-inputs-ssr.md | 5 ---- .changeset/grumpy-pens-press.md | 5 ---- .changeset/olive-mice-argue.md | 5 ---- .changeset/reactive-has-own.md | 5 ---- .changeset/state-eager-let-declaration.md | 5 ---- .changeset/tall-kids-juggle.md | 5 ---- .changeset/tricky-cooks-help.md | 5 ---- .changeset/wild-cases-smile.md | 5 ---- packages/svelte/CHANGELOG.md | 32 +++++++++++++++++++++++ packages/svelte/package.json | 2 +- packages/svelte/src/version.js | 2 +- 17 files changed, 34 insertions(+), 72 deletions(-) delete mode 100644 .changeset/calm-events-cleanup.md delete mode 100644 .changeset/calm-heads-glow.md delete mode 100644 .changeset/calm-render-results.md delete mode 100644 .changeset/each-fallback-scope.md delete mode 100644 .changeset/easy-points-tan.md delete mode 100644 .changeset/gold-trams-knock.md delete mode 100644 .changeset/green-inputs-ssr.md delete mode 100644 .changeset/grumpy-pens-press.md delete mode 100644 .changeset/olive-mice-argue.md delete mode 100644 .changeset/reactive-has-own.md delete mode 100644 .changeset/state-eager-let-declaration.md delete mode 100644 .changeset/tall-kids-juggle.md delete mode 100644 .changeset/tricky-cooks-help.md delete mode 100644 .changeset/wild-cases-smile.md diff --git a/.changeset/calm-events-cleanup.md b/.changeset/calm-events-cleanup.md deleted file mode 100644 index 4f5c2357f1..0000000000 --- a/.changeset/calm-events-cleanup.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: cancel deferred event listeners during cleanup diff --git a/.changeset/calm-heads-glow.md b/.changeset/calm-heads-glow.md deleted file mode 100644 index ee21d566bb..0000000000 --- a/.changeset/calm-heads-glow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: preserve global CSS in components without scopable elements diff --git a/.changeset/calm-render-results.md b/.changeset/calm-render-results.md deleted file mode 100644 index f3073ec4b5..0000000000 --- a/.changeset/calm-render-results.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: reduce SSR render result garbage collection diff --git a/.changeset/each-fallback-scope.md b/.changeset/each-fallback-scope.md deleted file mode 100644 index 5134fc462b..0000000000 --- a/.changeset/each-fallback-scope.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: resolve the fallback of an each block in the enclosing scope diff --git a/.changeset/easy-points-tan.md b/.changeset/easy-points-tan.md deleted file mode 100644 index 60edbf94eb..0000000000 --- a/.changeset/easy-points-tan.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -perf: speed up parser interactions with Acorn or avoid them where possible diff --git a/.changeset/gold-trams-knock.md b/.changeset/gold-trams-knock.md deleted file mode 100644 index 8006d13fef..0000000000 --- a/.changeset/gold-trams-knock.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: prevent effect tree of batches from interfering with each other diff --git a/.changeset/green-inputs-ssr.md b/.changeset/green-inputs-ssr.md deleted file mode 100644 index e034d0e79a..0000000000 --- a/.changeset/green-inputs-ssr.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: serialize input default values during server rendering diff --git a/.changeset/grumpy-pens-press.md b/.changeset/grumpy-pens-press.md deleted file mode 100644 index 0ba87ab0c5..0000000000 --- a/.changeset/grumpy-pens-press.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: remove `WAS_MARKED` flag in favor of `Set` diff --git a/.changeset/olive-mice-argue.md b/.changeset/olive-mice-argue.md deleted file mode 100644 index 6d749bcc3b..0000000000 --- a/.changeset/olive-mice-argue.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: throw `set_context_after_init` when `setContext` is called after an `await` during SSR diff --git a/.changeset/reactive-has-own.md b/.changeset/reactive-has-own.md deleted file mode 100644 index 2ec5d27cee..0000000000 --- a/.changeset/reactive-has-own.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: make Object.hasOwn reactive for state proxy ownership changes diff --git a/.changeset/state-eager-let-declaration.md b/.changeset/state-eager-let-declaration.md deleted file mode 100644 index 6939094109..0000000000 --- a/.changeset/state-eager-let-declaration.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: keep `$state.eager` when used as a variable initializer diff --git a/.changeset/tall-kids-juggle.md b/.changeset/tall-kids-juggle.md deleted file mode 100644 index f116590a28..0000000000 --- a/.changeset/tall-kids-juggle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -perf: avoid regex matching in parser where possible diff --git a/.changeset/tricky-cooks-help.md b/.changeset/tricky-cooks-help.md deleted file mode 100644 index f61c7944a1..0000000000 --- a/.changeset/tricky-cooks-help.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: in non-async mode, only push variable to current_sources when active_reaction is updating diff --git a/.changeset/wild-cases-smile.md b/.changeset/wild-cases-smile.md deleted file mode 100644 index ac5edacfd1..0000000000 --- a/.changeset/wild-cases-smile.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: recognise `aria-braillelabel` and `aria-brailleroledescription` as known ARIA attributes diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index e88e078486..75592eba84 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,37 @@ # svelte +## 5.57.1 + +### Patch Changes + +- fix: cancel deferred event listeners during cleanup ([#18749](https://github.com/sveltejs/svelte/pull/18749)) + +- fix: preserve global CSS in components without scopable elements ([#18793](https://github.com/sveltejs/svelte/pull/18793)) + +- fix: reduce SSR render result garbage collection ([#18798](https://github.com/sveltejs/svelte/pull/18798)) + +- fix: resolve the fallback of an each block in the enclosing scope ([#18803](https://github.com/sveltejs/svelte/pull/18803)) + +- perf: speed up parser interactions with Acorn or avoid them where possible ([#18740](https://github.com/sveltejs/svelte/pull/18740)) + +- fix: prevent effect tree of batches from interfering with each other ([#18508](https://github.com/sveltejs/svelte/pull/18508)) + +- fix: serialize input default values during server rendering ([#18733](https://github.com/sveltejs/svelte/pull/18733)) + +- fix: remove `WAS_MARKED` flag in favor of `Set` ([#18127](https://github.com/sveltejs/svelte/pull/18127)) + +- fix: throw `set_context_after_init` when `setContext` is called after an `await` during SSR ([#18739](https://github.com/sveltejs/svelte/pull/18739)) + +- fix: make Object.hasOwn reactive for state proxy ownership changes ([#18838](https://github.com/sveltejs/svelte/pull/18838)) + +- fix: keep `$state.eager` when used as a variable initializer ([#18809](https://github.com/sveltejs/svelte/pull/18809)) + +- perf: avoid regex matching in parser where possible ([#18736](https://github.com/sveltejs/svelte/pull/18736)) + +- fix: in non-async mode, only push variable to current_sources when active_reaction is updating ([#18550](https://github.com/sveltejs/svelte/pull/18550)) + +- fix: recognise `aria-braillelabel` and `aria-brailleroledescription` as known ARIA attributes ([#18765](https://github.com/sveltejs/svelte/pull/18765)) + ## 5.57.0 ### Minor Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 53e5516bf6..6404eb0596 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -2,7 +2,7 @@ "name": "svelte", "description": "Cybernetically enhanced web apps", "license": "MIT", - "version": "5.57.0", + "version": "5.57.1", "type": "module", "types": "./types/index.d.ts", "engines": { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index 46620a618b..d925d3eb2e 100644 --- a/packages/svelte/src/version.js +++ b/packages/svelte/src/version.js @@ -4,5 +4,5 @@ * The current version, as set in package.json. * @type {string} */ -export const VERSION = '5.57.0'; +export const VERSION = '5.57.1'; export const PUBLIC_VERSION = '5'; From 803f59b171e1f962c0b0acb20dba2074bc9d2e84 Mon Sep 17 00:00:00 2001 From: Kunpeng Xie <68572236+pentaoa@users.noreply.github.com> Date: Tue, 22 Sep 2026 22:09:26 +0800 Subject: [PATCH 4/7] fix: avoid reinserting dynamic elements during hydration (#18855) Hydrating a `` currently removes and reinserts the DOM node that was already claimed from the server-rendered HTML. This can restart CSS animations and disconnect/reconnect custom elements inside it. Keep claimed elements in place while preserving insertion for client-created elements and later tag changes. Capture the hydration state before rendering children, since empty or void elements can temporarily turn hydration off. Fixes #18852. ### Before submitting the PR, please make sure you do the following - [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`. - [x] This message body should clearly illustrate what problems it solves. - [x] Ideally, include a test that fails without this PR but passes with it. - [x] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [x] Run the tests with `pnpm test` and lint the project with `pnpm lint` Validation: - The real Chromium regression fails on unchanged `636eaaaa`: hydration removes all four server-rendered dynamic elements. Client mounting and server rendering pass. - The regression checks node removals and custom-element connection callbacks for ordinary, empty, void, and custom dynamic elements, then changes the tags and removes/recreates an element. - A hydration mismatch regression verifies that different client/server child branches recover while retaining the outer element and its following sibling. - `pnpm test hydration runtime-browser`: 219 passed. - Full `CI=true pnpm test`: 34 test files passed, 7,790 tests passed, 55 existing skips. The real-browser suite ran with Chromium. - `pnpm check`: passed, including build, generated type checks, and treeshakeability checks. - `pnpm lint`: passed. AI assistance: This change and its tests were prepared with OpenAI Codex. The PR description is also AI-assisted. --------- Co-authored-by: paoloricciuti --- .changeset/tidy-trees-stay.md | 5 ++ .../client/dom/blocks/svelte-element.js | 4 +- .../dynamic-element-child-mismatch/_config.js | 10 +++ .../_expected.html | 2 + .../main.svelte | 9 +++ .../svelte/tests/runtime-browser/assert.js | 1 + .../_config.js | 71 +++++++++++++++++++ .../main.svelte | 11 +++ 8 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 .changeset/tidy-trees-stay.md create mode 100644 packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js create mode 100644 packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html create mode 100644 packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte create mode 100644 packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js create mode 100644 packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte diff --git a/.changeset/tidy-trees-stay.md b/.changeset/tidy-trees-stay.md new file mode 100644 index 0000000000..65bf7de619 --- /dev/null +++ b/.changeset/tidy-trees-stay.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: preserve dynamic element connections during hydration diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js index 84217c57e3..adca73b181 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js @@ -71,6 +71,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio branches.ensure(next_tag, (anchor) => { if (next_tag) { + var is_hydrating = hydrating; element = hydrating ? /** @type {Element} */ (element) : create_element(next_tag, ns); if (DEV && location) { @@ -123,7 +124,8 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio // we do this after calling `render_fn` so that child effects don't override `nodes.end` /** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = element; - anchor.before(element); + // we only move the node if we are not hydrating since a claimed element is already in place + if (!is_hydrating) anchor.before(element); } if (hydrating) { diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js new file mode 100644 index 0000000000..cdd8f4484b --- /dev/null +++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js @@ -0,0 +1,10 @@ +import { test } from '../../test'; + +export default test({ + server_props: { condition: false }, + props: { condition: true }, + + snapshot(target) { + return { element: target.querySelector('div'), sibling: target.querySelector(':scope > p') }; + } +}); diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html new file mode 100644 index 0000000000..5f68a45e48 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html @@ -0,0 +1,2 @@ +

client

+

after

diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte new file mode 100644 index 0000000000..839a06981f --- /dev/null +++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte @@ -0,0 +1,9 @@ + + + + {#if condition}

client

{:else}server{/if} + +

after

diff --git a/packages/svelte/tests/runtime-browser/assert.js b/packages/svelte/tests/runtime-browser/assert.js index 249c5ad33d..9fdb917048 100644 --- a/packages/svelte/tests/runtime-browser/assert.js +++ b/packages/svelte/tests/runtime-browser/assert.js @@ -128,6 +128,7 @@ function normalize_children(node) { * id_prefix?: string; * props?: Props; * compileOptions?: Partial; + * before_test?: () => void; * test?: (args: { * assert: typeof assert & { * htmlEqual(a: string, b: string, description?: string): void; diff --git a/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js new file mode 100644 index 0000000000..beabb5b1fa --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js @@ -0,0 +1,71 @@ +import { flushSync } from 'svelte'; +import { assert_ok, test } from '../../assert'; + +/** @type {Record} */ +const connections = {}; +/** @type {string[]} */ +const disconnections = []; +/** @type {Element[]} */ +let claimed; +/** @type {MutationObserver} */ +let observer; + +export default test({ + before_test() { + const target = document.querySelector('main'); + assert_ok(target); + claimed = Array.from(target.children); + customElements.define( + 'connection-probe', + class extends HTMLElement { + connectedCallback() { + connections[this.id] = (connections[this.id] || 0) + 1; + } + disconnectedCallback() { + disconnections.push(this.id); + } + } + ); + observer = new MutationObserver(() => {}); + observer.observe(target, { childList: true }); + }, + + test({ assert, component, target }) { + const removed = observer.takeRecords().flatMap((record) => Array.from(record.removedNodes)); + observer.disconnect(); + assert.deepEqual( + removed + .filter((node) => node instanceof Element) + .filter((node) => claimed.includes(node)) + .map((node) => node.id), + [] + ); + assert.deepEqual(connections, { child: 1, custom: 1 }); + assert.deepEqual(disconnections, []); + + flushSync(() => { + component.tag = 'section'; + component.empty_tag = 'span'; + component.void_tag = 'hr'; + component.custom_tag = 'aside'; + }); + assert.equal(target.querySelector('#parent')?.tagName, 'SECTION'); + assert.equal(target.querySelector('#empty')?.tagName, 'SPAN'); + assert.equal(target.querySelector('#void')?.tagName, 'HR'); + assert.equal(target.querySelector('#custom')?.tagName, 'ASIDE'); + assert.deepEqual(connections, { child: 2, custom: 1 }); + assert.deepEqual(disconnections, ['child', 'custom']); + + flushSync(() => { + component.tag = null; + }); + assert.equal(target.querySelector('#parent'), null); + assert.deepEqual(disconnections, ['child', 'custom', 'child']); + + flushSync(() => { + component.tag = 'div'; + }); + assert.equal(target.querySelector('#parent')?.tagName, 'DIV'); + assert.deepEqual(connections, { child: 3, custom: 1 }); + } +}); diff --git a/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte new file mode 100644 index 0000000000..44e902188c --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte @@ -0,0 +1,11 @@ + + + + + + From 325620ba63eeff13c9f36e42806a545aaa7ee242 Mon Sep 17 00:00:00 2001 From: Tee Ming Date: Thu, 24 Sep 2026 00:37:04 +0800 Subject: [PATCH 5/7] fix: bypass error boundaries for hydration recovery (#18841) Fixes #18840 This PR rethrows the hydration error rather than catching it at the boundaries so that the svelte hydration warning can surface ### Before submitting the PR, please make sure you do the following - [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`. - [x] This message body should clearly illustrate what problems it solves. - [x] Ideally, include a test that fails without this PR but passes with it. - [x] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [x] Run the tests with `pnpm test` and lint the project with `pnpm lint` --------- Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- .changeset/tidy-pandas-hydrate.md | 5 +++++ .../svelte/src/internal/client/dom/blocks/boundary.js | 10 +++++++++- packages/svelte/src/internal/client/error-handling.js | 6 +++++- .../samples/boundary-mismatch-recovery/_config.js | 5 +++++ .../samples/boundary-mismatch-recovery/_expected.html | 1 + .../samples/boundary-mismatch-recovery/main.svelte | 7 +++++++ 6 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 .changeset/tidy-pandas-hydrate.md create mode 100644 packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/_config.js create mode 100644 packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/_expected.html create mode 100644 packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/main.svelte diff --git a/.changeset/tidy-pandas-hydrate.md b/.changeset/tidy-pandas-hydrate.md new file mode 100644 index 0000000000..944797a760 --- /dev/null +++ b/.changeset/tidy-pandas-hydrate.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: prevent hydration mismatch recovery from being intercepted by error boundaries diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js index fd6bbdf5b4..979d3e50b4 100644 --- a/packages/svelte/src/internal/client/dom/blocks/boundary.js +++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js @@ -1,6 +1,10 @@ /** @import { Effect, Source, TemplateNode, } from '#client' */ import { BOUNDARY_EFFECT, EFFECT_PRESERVED, EFFECT_TRANSPARENT } from '#client/constants'; -import { HYDRATION_START_ELSE, HYDRATION_START_FAILED } from '../../../../constants.js'; +import { + HYDRATION_ERROR, + HYDRATION_START_ELSE, + HYDRATION_START_FAILED +} from '../../../../constants.js'; import { component_context, set_component_context } from '../../context.js'; import { invoke_error_boundary } from '../../error-handling.js'; import { @@ -445,6 +449,10 @@ export class Boundary { /** @param {unknown} error */ error(error) { + if (error === HYDRATION_ERROR) { + throw error; + } + // If we have nothing to capture the error, or if we hit an error while // rendering the fallback, re-throw for another boundary to handle if (!this.#props.onerror && !this.#props.failed) { diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js index a46281d36c..7c69f05dcc 100644 --- a/packages/svelte/src/internal/client/error-handling.js +++ b/packages/svelte/src/internal/client/error-handling.js @@ -1,7 +1,7 @@ /** @import { Derived, Effect } from '#client' */ /** @import { Boundary } from './dom/blocks/boundary.js' */ import { DEV } from 'esm-env'; -import { FILENAME } from '../../constants.js'; +import { FILENAME, HYDRATION_ERROR } from '../../constants.js'; import { is_firefox } from './dom/operations.js'; import { ERROR_VALUE, @@ -52,6 +52,10 @@ export function handle_error(error) { * @param {Effect | null} effect */ export function invoke_error_boundary(error, effect) { + if (error === HYDRATION_ERROR) { + throw error; + } + if (effect !== null && (effect.f & DESTROYED) !== 0) { return; } diff --git a/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/_config.js b/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/_config.js new file mode 100644 index 0000000000..cf22ff2c85 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/_config.js @@ -0,0 +1,5 @@ +import { test } from '../../test'; + +export default test({ + expect_hydration_error: true +}); diff --git a/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/_expected.html b/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/_expected.html new file mode 100644 index 0000000000..8286c59709 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/_expected.html @@ -0,0 +1 @@ +

Valid HTML fragment

diff --git a/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/main.svelte b/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/main.svelte new file mode 100644 index 0000000000..8b9cc0770e --- /dev/null +++ b/packages/svelte/tests/hydration/samples/boundary-mismatch-recovery/main.svelte @@ -0,0 +1,7 @@ + +

{@html '

Valid HTML fragment

'}

+ + {#snippet failed()} +

boundary fallback

+ {/snippet} + From 38098a931142dfef6ca7330d33264d1908b698fa Mon Sep 17 00:00:00 2001 From: Mariana Castro <121824373+maricastroc@users.noreply.github.com> Date: Wed, 23 Sep 2026 13:58:28 -0300 Subject: [PATCH 6/7] fix: don't overwrite an unchanged spread `value` (#18864) Fixes #18862 When a `value` is applied through a spread (``), `set_attributes` always writes `element.value`, even if the element already has that value. Writing `value` on a number input clears any incomplete text: typing `250.` makes `input.value` `''` (the text is still visible, but `validity.badInput` is `true`). If the spread `value` then becomes `''` too, writing `''` erases what the user typed. This is what happens with SvelteKit remote forms: `fields.quantity.as('number')` coerces `''` to `undefined`, the spread `value` becomes `''`, and Svelte writes it back to the input. When `.` is typed: - Chromium clears the input in every locale, because `250.` is always incomplete input there. - WebKit/Safari clears it in locales where `.` is not the decimal separator (e.g. `fr-CH`), which is where the reporter saw it. A plain `` never clears. Neither does the same `value` in Svelte without a spread (`value={...}`), because `set_value` already skips writing when `element.value === value`. This PR adds the same check to the spread path. Svelte 3 had this check too (#3426, #3495); it was lost in Svelte 5. The first write still always happens. Writing `value` sets the input's dirty value flag, and without that flag a `defaultValue` applied afterwards would change the current value (covered by `form-default-value-spread`). This also likely affects sveltejs/kit#16270 (same symptom, plus a cursor jump caused by redundant writes). That issue is handled on the kit side in sveltejs/kit#16320; this PR is independent of it. The test runs in a real browser (`runtime-browser`). It types with `document.execCommand('insertText')`, which goes through Chromium's own editing, so `250.` is real incomplete input. The locale is not mocked. The test fails without this change and passes with it. ### Before submitting the PR, please make sure you do the following - [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`. - [x] This message body should clearly illustrate what problems it solves. - [x] Ideally, include a test that fails without this PR but passes with it. - [x] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [x] Run the tests with `pnpm test` and lint the project with `pnpm lint` --------- Co-authored-by: Paolo Ricciuti --- .changeset/quiet-inputs-keep.md | 5 ++++ .../client/dom/elements/attributes.js | 16 ++++++++++- .../_config.js | 28 +++++++++++++++++++ .../main.svelte | 5 ++++ 4 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 .changeset/quiet-inputs-keep.md create mode 100644 packages/svelte/tests/runtime-browser/samples/spread-input-number-incomplete-value/_config.js create mode 100644 packages/svelte/tests/runtime-browser/samples/spread-input-number-incomplete-value/main.svelte diff --git a/.changeset/quiet-inputs-keep.md b/.changeset/quiet-inputs-keep.md new file mode 100644 index 0000000000..0efcfcc058 --- /dev/null +++ b/.changeset/quiet-inputs-keep.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: don't overwrite an unchanged spread `value`, preserving incomplete number input diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 0fe1b8b2d3..7d2dd62baf 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -422,7 +422,21 @@ function set_attributes( } else if (!is_custom_element && (key === '__value' || (key === 'value' && value != null))) { // @ts-ignore We're not running this for custom elements because __value is actually // how Lit stores the current value on the element, and messing with that would break things. - element.value = element.__value = value; + element.__value = value; + // we don't set the value if it hasn't changed. This supports invalid number inputs like `1e` because + // 1. user types 1e + // 2. the state is updated reading e.target.value which is '' + // 3. the spreaded value is '' + // 4. updating input.value would thus, clear the user value + if ( + prev_value == null || + // @ts-ignore + element.value !== value || + (value === 0 && element.nodeName === PROGRESS_TAG) + ) { + // @ts-ignore + element.value = value; + } } else if (key === 'selected' && is_option_element) { set_selected(/** @type {HTMLOptionElement} */ (element), value); } else { diff --git a/packages/svelte/tests/runtime-browser/samples/spread-input-number-incomplete-value/_config.js b/packages/svelte/tests/runtime-browser/samples/spread-input-number-incomplete-value/_config.js new file mode 100644 index 0000000000..cec1e179ac --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/spread-input-number-incomplete-value/_config.js @@ -0,0 +1,28 @@ +import { flushSync } from 'svelte'; +import { ok, test } from '../../assert'; + +export default test({ + async test({ assert, target }) { + const input = target.querySelector('input'); + ok(input); + + input.focus(); + + // we need to use `document.execCommand('insertText', false, ...)` to simulate user input + // because directly setting an invalid value to `input.value` would simply clear the input + // and dispatching an event would not update the input correctly + document.execCommand('insertText', false, '1'); + flushSync(); + // `1e` is incomplete on every platform, unlike `1.` which Chromium on Linux accepts as `1` + document.execCommand('insertText', false, 'e'); + flushSync(); + + assert.equal(input.value, ''); + assert.equal(input.validity.badInput, true); + + document.execCommand('insertText', false, '5'); + flushSync(); + + assert.equal(input.value, '1e5'); + } +}); diff --git a/packages/svelte/tests/runtime-browser/samples/spread-input-number-incomplete-value/main.svelte b/packages/svelte/tests/runtime-browser/samples/spread-input-number-incomplete-value/main.svelte new file mode 100644 index 0000000000..3e7a5cc335 --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/spread-input-number-incomplete-value/main.svelte @@ -0,0 +1,5 @@ + + + (value = e.currentTarget.value)} /> From 58297c5a73e6a06687c3892efbfc807eec3f23af Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 24 Sep 2026 04:19:37 -0400 Subject: [PATCH 7/7] chore: extract some minor changes from #18861 (#18866) doing my usual thing of extracting no-brainer changes from a giant PR to try and make it slightly less giant --- packages/svelte/src/internal/client/dev/tracing.js | 4 +++- packages/svelte/src/internal/client/dom/blocks/each.js | 4 ++-- packages/svelte/src/internal/client/reactivity/batch.js | 4 ++++ packages/svelte/src/internal/client/reactivity/sources.js | 6 +++--- packages/svelte/src/internal/client/runtime.js | 6 +++--- packages/svelte/src/reactivity/date.js | 4 ++-- 6 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js index c6edfde933..9fea8175bd 100644 --- a/packages/svelte/src/internal/client/dev/tracing.js +++ b/packages/svelte/src/internal/client/dev/tracing.js @@ -131,8 +131,10 @@ export function trace(label, fn) { } /** - * @param {Value} source + * @template {Value} T + * @param {T} source * @param {string} label + * @returns {T} */ export function tag(source, label) { source.label = label; diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index 9a2504f887..ea828f893b 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/packages/svelte/src/internal/client/dom/blocks/each.js @@ -1,4 +1,4 @@ -/** @import { EachItem, EachOutroGroup, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */ +/** @import { EachItem, EachOutroGroup, EachState, Effect, EffectNodes, MaybeSource, TemplateNode, TransitionManager } from '#client' */ /** @import { Batch } from '../../reactivity/batch.js'; */ import { EACH_INDEX_REACTIVE, @@ -664,7 +664,7 @@ function reconcile(state, array, anchor, flags, get_key) { * @param {V} value * @param {unknown} key * @param {number} index - * @param {(anchor: Node, item: V | Source, index: number | Value, collection: () => V[]) => void} render_fn + * @param {(anchor: Node, item: MaybeSource, index: MaybeSource, collection: () => V[]) => void} render_fn * @param {number} flags * @param {() => V[]} get_collection * @returns {EachItem} diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js index 75ce33b1c5..f620c2b4c8 100644 --- a/packages/svelte/src/internal/client/reactivity/batch.js +++ b/packages/svelte/src/internal/client/reactivity/batch.js @@ -1295,6 +1295,10 @@ export function eager(fn) { let version = version_map.get(parent) ?? source(0); version_map.set(parent, version); + if (DEV) { + version.label ??= '$state.eager version'; + } + teardown(() => { if (parent.f & DESTROYING) version_map.delete(parent); }); diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js index 006494f0b5..4b10ddbd31 100644 --- a/packages/svelte/src/internal/client/reactivity/sources.js +++ b/packages/svelte/src/internal/client/reactivity/sources.js @@ -46,7 +46,7 @@ import { set_signal_status, update_derived_status } from './status.js'; /** @type {Set} */ export let eager_effects = new Set(); -/** @type {Map} */ +/** @type {Map} */ export const old_values = new Map(); /** @@ -141,7 +141,7 @@ export function mutate(source, value) { /** * @template V - * @param {Source} source + * @param {Value} source * @param {V} value * @param {boolean} [should_proxy] * @returns {V} @@ -181,7 +181,7 @@ var count_deps = 0; /** * @template V - * @param {Source} source + * @param {Value} source * @param {V} value * @param {Effect[] | null} [updated_during_traversal] * @returns {V} diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js index 27def05300..6212605008 100644 --- a/packages/svelte/src/internal/client/runtime.js +++ b/packages/svelte/src/internal/client/runtime.js @@ -93,7 +93,7 @@ export function set_active_effect(effect) { /** * When sources are created within a reaction, reading and writing * them within that reaction should not cause a re-run - * @type {null | Set} + * @type {null | Set} */ export let current_sources = null; @@ -121,11 +121,11 @@ export let skipped_deps = 0; /** * Tracks writes that the effect it's executed in doesn't listen to yet, * so that the dependency can be added to the effect later on if it then reads it - * @type {null | Source[]} + * @type {null | Value[]} */ export let untracked_writes = null; -/** @param {null | Source[]} value */ +/** @param {null | Value[]} value */ export function set_untracked_writes(value) { untracked_writes = value; } diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js index f882c05d76..b70ba7969a 100644 --- a/packages/svelte/src/reactivity/date.js +++ b/packages/svelte/src/reactivity/date.js @@ -1,4 +1,4 @@ -/** @import { Source } from '#client' */ +/** @import { Derived } from '#client' */ import { derived } from '../internal/client/index.js'; import { set, state } from '../internal/client/reactivity/sources.js'; import { tag } from '../internal/client/dev/tracing.js'; @@ -42,7 +42,7 @@ var inited = false; export class SvelteDate extends Date { #time = state(super.getTime()); - /** @type {Map>} */ + /** @type {Map>} */ #deriveds = new Map(); #reaction = active_reaction;