From b771df346444d486243882099d2a36f88e32dde0 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 23 Apr 2026 17:44:54 -0600 Subject: [PATCH 1/7] Version Packages (#18125) 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.55.5 ### Patch Changes - fix: don't mark deriveds while an effect is updating ([#18124](https://github.com/sveltejs/svelte/pull/18124)) - fix: do not dispatch introstart event with animation of animate directive ([#18122](https://github.com/sveltejs/svelte/pull/18122)) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/common-candles-sneeze.md | 5 ----- .changeset/hip-flowers-give.md | 5 ----- packages/svelte/CHANGELOG.md | 8 ++++++++ packages/svelte/package.json | 2 +- packages/svelte/src/version.js | 2 +- 5 files changed, 10 insertions(+), 12 deletions(-) delete mode 100644 .changeset/common-candles-sneeze.md delete mode 100644 .changeset/hip-flowers-give.md diff --git a/.changeset/common-candles-sneeze.md b/.changeset/common-candles-sneeze.md deleted file mode 100644 index a0ef7b610b..0000000000 --- a/.changeset/common-candles-sneeze.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: don't mark deriveds while an effect is updating diff --git a/.changeset/hip-flowers-give.md b/.changeset/hip-flowers-give.md deleted file mode 100644 index 77f4dd8892..0000000000 --- a/.changeset/hip-flowers-give.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: do not dispatch introstart event with animation of animate directive diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 7aa8f9818e..8e0f8a0916 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,13 @@ # svelte +## 5.55.5 + +### Patch Changes + +- fix: don't mark deriveds while an effect is updating ([#18124](https://github.com/sveltejs/svelte/pull/18124)) + +- fix: do not dispatch introstart event with animation of animate directive ([#18122](https://github.com/sveltejs/svelte/pull/18122)) + ## 5.55.4 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 12aa895ecf..a4ae208913 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.55.4", + "version": "5.55.5", "type": "module", "types": "./types/index.d.ts", "engines": { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index cb8d3f76ab..04b0b0398a 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.55.4'; +export const VERSION = '5.55.5'; export const PUBLIC_VERSION = '5'; From bd29b9ef2ba2a140e7e7d8835177e5ad34c6bf18 Mon Sep 17 00:00:00 2001 From: Wesley <2011150255@email.szu.edu.cn> Date: Thu, 30 Apr 2026 00:34:09 +0800 Subject: [PATCH 2/7] docs: document $state.snapshot toJSON behavior (#18154) ### 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. - [ ] Ideally, include a test that fails without this PR but passes with it. - [ ] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint` `$state.snapshot` already clones the value returned from `toJSON`, and its `Snapshot` type reflects that return type. The `$state.snapshot` docs now call out that behavior explicitly, including the generated ambient types shown by editors. Test plan: `pnpm check`; `pnpm lint`. Fixes #18129 Co-authored-by: sakaenyeniceri5 --- documentation/docs/02-runes/02-$state.md | 2 ++ packages/svelte/src/ambient.d.ts | 2 ++ packages/svelte/types/index.d.ts | 2 ++ 3 files changed, 6 insertions(+) diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md index d763b6578f..b90c71366a 100644 --- a/documentation/docs/02-runes/02-$state.md +++ b/documentation/docs/02-runes/02-$state.md @@ -167,6 +167,8 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`. +If a value has a `toJSON` method, the snapshot will clone the value returned from `toJSON` instead of the original object. + ## `$state.eager` When state changes, it may not be reflected in the UI immediately if it is used by an `await` expression, because [updates are synchronized](await-expressions#Synchronized-updates). diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts index 159a568477..bbbc86c997 100644 --- a/packages/svelte/src/ambient.d.ts +++ b/packages/svelte/src/ambient.d.ts @@ -147,6 +147,8 @@ declare namespace $state { * * ``` * + * If `state` has a `toJSON` method, the snapshot will clone the value returned from `toJSON` instead of the original object. + * * @see {@link https://svelte.dev/docs/svelte/$state#$state.snapshot Documentation} * * @param state The value to snapshot diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 019baf45dd..3f71d44177 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -3345,6 +3345,8 @@ declare namespace $state { * * ``` * + * If `state` has a `toJSON` method, the snapshot will clone the value returned from `toJSON` instead of the original object. + * * @see {@link https://svelte.dev/docs/svelte/$state#$state.snapshot Documentation} * * @param state The value to snapshot From ada3076967c34054a7450816f933f3c879f137fe Mon Sep 17 00:00:00 2001 From: 7nik Date: Wed, 29 Apr 2026 20:45:55 +0300 Subject: [PATCH 3/7] fix: account for proxified instance when updating `bind:this` (#18147) Fixes #18145 I wonder why nulling happens after updating `bind:this` but not before, which would fix the issue as well, though not as efficiently. ### 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` --- .changeset/full-waves-tease.md | 5 +++++ .../client/dom/elements/bindings/this.js | 2 +- .../bind-this-proxy-deep/Component.svelte | 5 +++++ .../samples/bind-this-proxy-deep/_config.js | 22 +++++++++++++++++++ .../samples/bind-this-proxy-deep/main.svelte | 16 ++++++++++++++ 5 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 .changeset/full-waves-tease.md create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/Component.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/main.svelte diff --git a/.changeset/full-waves-tease.md b/.changeset/full-waves-tease.md new file mode 100644 index 0000000000..3915334bf7 --- /dev/null +++ b/.changeset/full-waves-tease.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: account for proxified instance when updating `bind:this` diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/this.js b/packages/svelte/src/internal/client/dom/elements/bindings/this.js index c39ca34062..52f0c213d3 100644 --- a/packages/svelte/src/internal/client/dom/elements/bindings/this.js +++ b/packages/svelte/src/internal/client/dom/elements/bindings/this.js @@ -40,7 +40,7 @@ export function bind_this(element_or_component = {}, update, get_value, get_part parts = get_parts?.() || []; untrack(() => { - if (element_or_component !== get_value(...parts)) { + if (!is_bound_this(get_value(...parts), element_or_component)) { update(element_or_component, ...parts); // If this is an effect rerun (cause: each block context changes), then nullify the binding at // the previous position if it isn't already taken over by a different effect. diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/Component.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/Component.svelte new file mode 100644 index 0000000000..c43810b6bf --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/Component.svelte @@ -0,0 +1,5 @@ + diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/_config.js new file mode 100644 index 0000000000..2f9e60e017 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/_config.js @@ -0,0 +1,22 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + async test({ assert, target, logs }) { + const btn = target.querySelector('button'); + + flushSync(() => { + btn?.click(); + }); + + flushSync(() => { + btn?.click(); + }); + + assert.deepEqual(logs, [ + {}, + { 0: { name: 'Row 0' } }, + { 0: { name: 'Row 0' }, 1: { name: 'Row 1' } } + ]); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/main.svelte new file mode 100644 index 0000000000..2e2a49b3f6 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/main.svelte @@ -0,0 +1,16 @@ + + + +{#each rows as row (row.id)} + +{/each} From 69b4c9f561a6dc14899889d815d555d398799a91 Mon Sep 17 00:00:00 2001 From: Dor Alagem Date: Wed, 29 Apr 2026 20:47:12 +0300 Subject: [PATCH 4/7] fix: skip block comments in read_value to prevent apostrophe parsing error (#18153) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #18134. ## Problem `read_value()` in `packages/svelte/src/compiler/phases/1-parse/read/style.js` has no logic to skip CSS block comments (`/* ... */`). When the parser encounters an apostrophe inside a comment, it sets `quote_mark = "'"` — treating it as the start of a string literal — then never finds a matching closing quote, and ultimately throws `unexpected_eof` at the end of the style block. Minimal repro: ```svelte ``` → `Error: Unexpected end of input` ## Fix Add a `/* ... */` skip path inside the `read_value` loop, mirroring the same pattern already used in `allow_comment_or_whitespace`. When `/*` is detected outside a string or url context, the parser advances past the entire comment without adding its content to the value string. --------- Co-authored-by: Dor Alagem Co-authored-by: Rich Harris --- .changeset/three-pears-build.md | 5 +++++ .../src/compiler/phases/1-parse/read/style.js | 15 +++++++++++++++ .../samples/comment-with-apostrophe/expected.css | 4 ++++ .../samples/comment-with-apostrophe/input.svelte | 7 +++++++ 4 files changed, 31 insertions(+) create mode 100644 .changeset/three-pears-build.md create mode 100644 packages/svelte/tests/css/samples/comment-with-apostrophe/expected.css create mode 100644 packages/svelte/tests/css/samples/comment-with-apostrophe/input.svelte diff --git a/.changeset/three-pears-build.md b/.changeset/three-pears-build.md new file mode 100644 index 0000000000..8a638149a3 --- /dev/null +++ b/.changeset/three-pears-build.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ignore comments when reading CSS values diff --git a/packages/svelte/src/compiler/phases/1-parse/read/style.js b/packages/svelte/src/compiler/phases/1-parse/read/style.js index 8cb1d54d54..160e5da277 100644 --- a/packages/svelte/src/compiler/phases/1-parse/read/style.js +++ b/packages/svelte/src/compiler/phases/1-parse/read/style.js @@ -524,6 +524,21 @@ function read_value(parser) { in_url = true; } else if ((char === ';' || char === '{' || char === '}') && !in_url && !quote_mark) { return value.trim(); + } else if ( + char === '/' && + !in_url && + !quote_mark && + parser.template[parser.index + 1] === '*' + ) { + parser.index += 2; + while (parser.index < parser.template.length) { + if (parser.template[parser.index] === '*' && parser.template[parser.index + 1] === '/') { + parser.index += 2; + break; + } + parser.index++; + } + continue; } value += char; diff --git a/packages/svelte/tests/css/samples/comment-with-apostrophe/expected.css b/packages/svelte/tests/css/samples/comment-with-apostrophe/expected.css new file mode 100644 index 0000000000..a196d53cc8 --- /dev/null +++ b/packages/svelte/tests/css/samples/comment-with-apostrophe/expected.css @@ -0,0 +1,4 @@ + + p.svelte-xyz { + padding: 0 /* it's a comment */ 1em; + } diff --git a/packages/svelte/tests/css/samples/comment-with-apostrophe/input.svelte b/packages/svelte/tests/css/samples/comment-with-apostrophe/input.svelte new file mode 100644 index 0000000000..0f9e0d2355 --- /dev/null +++ b/packages/svelte/tests/css/samples/comment-with-apostrophe/input.svelte @@ -0,0 +1,7 @@ +

red

+ + From 4c96b469f809c2615bf1a634521bdbd1ca91fbcd Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 29 Apr 2026 20:50:11 +0200 Subject: [PATCH 5/7] fix: allow `@debug` tags to reference awaited variables (#18138) Fixes #18137 --- .changeset/small-tools-walk.md | 5 +++ .../3-transform/client/visitors/DebugTag.js | 14 ++++++--- .../3-transform/server/visitors/DebugTag.js | 31 +++++++++++++------ .../async-debug-awaited-expression/_config.js | 18 +++++++++++ .../main.svelte | 4 +++ 5 files changed, 58 insertions(+), 14 deletions(-) create mode 100644 .changeset/small-tools-walk.md create mode 100644 packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte diff --git a/.changeset/small-tools-walk.md b/.changeset/small-tools-walk.md new file mode 100644 index 0000000000..2b275368b3 --- /dev/null +++ b/.changeset/small-tools-walk.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: allow `@debug` tags to reference awaited variables diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js index ef9a070859..01a7e0e872 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js @@ -8,6 +8,10 @@ import * as b from '#compiler/builders'; * @param {ComponentContext} context */ export function DebugTag(node, context) { + const blockers = node.identifiers + .map((identifier) => context.state.scope.get(identifier.name)?.blocker) + .filter((blocker) => blocker != null); + const object = b.object( node.identifiers.map((identifier) => { const visited = b.call('$.snapshot', /** @type {Expression} */ (context.visit(identifier))); @@ -20,9 +24,11 @@ export function DebugTag(node, context) { }) ); - const call = b.call('console.log', object); + const args = [b.thunk(b.block([b.stmt(b.call('console.log', object)), b.debugger]))]; - context.state.init.push( - b.stmt(b.call('$.template_effect', b.thunk(b.block([b.stmt(call), b.debugger])))) - ); + if (blockers.length > 0) { + args.push(b.array([]), b.array([]), b.array(blockers)); + } + + context.state.init.push(b.stmt(b.call('$.template_effect', ...args))); } diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js index 31b53fd3eb..3c4af2fe04 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js @@ -2,23 +2,34 @@ /** @import { AST } from '#compiler' */ /** @import { ComponentContext } from '../types.js' */ import * as b from '#compiler/builders'; +import { create_child_block } from './shared/utils.js'; /** * @param {AST.DebugTag} node * @param {ComponentContext} context */ export function DebugTag(node, context) { + const blockers = node.identifiers + .map((identifier) => context.state.scope.get(identifier.name)?.blocker) + .filter((blocker) => blocker != null); + context.state.template.push( - b.stmt( - b.call( - 'console.log', - b.object( - node.identifiers.map((identifier) => - b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier))) + ...create_child_block( + [ + b.stmt( + b.call( + 'console.log', + b.object( + node.identifiers.map((identifier) => + b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier))) + ) + ) ) - ) - ) - ), - b.debugger + ), + b.debugger + ], + b.array(blockers), + false + ) ); } diff --git a/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/_config.js new file mode 100644 index 0000000000..304f65cd0a --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/_config.js @@ -0,0 +1,18 @@ +import { tick } from 'svelte'; +import { test } from '../../test'; + +export default test({ + compileOptions: { + dev: true + }, + mode: ['client', 'async-server'], + + async test({ assert, logs }) { + await tick(); + + assert.deepEqual(logs, [{ data: 'works' }]); + }, + test_ssr({ assert, logs }) { + assert.deepEqual(logs, [{ data: 'works' }]); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte new file mode 100644 index 0000000000..92b69df8fb --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte @@ -0,0 +1,4 @@ + + {@const data = await Promise.resolve("works")} + {@debug data} + \ No newline at end of file From bc82a55647745db00d2c3e565e6b1f4125d6e391 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 29 Apr 2026 20:57:10 +0200 Subject: [PATCH 6/7] fix: ensure scheduled batch is flushed if not obsolete (#18131) The logic of checking that the current batch is still the generated one is flawed. If microtasks align the current batch can be a different value even if the batch still need to be flushed. This therefore switches the heuristic to what it actually should express: "has this batch run already?" Fixes #18126 (because the batch isn't running, it later runs into the invariant) --- .changeset/many-pandas-add.md | 5 +++++ .../src/internal/client/reactivity/batch.js | 2 +- .../_config.js | 15 +++++++++++++++ .../main.svelte | 18 ++++++++++++++++++ 4 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 .changeset/many-pandas-add.md create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/main.svelte diff --git a/.changeset/many-pandas-add.md b/.changeset/many-pandas-add.md new file mode 100644 index 0000000000..85de7acb35 --- /dev/null +++ b/.changeset/many-pandas-add.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure scheduled batch is flushed if not obsolete diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js index 82be1d1e8d..7adf3be00c 100644 --- a/packages/svelte/src/internal/client/reactivity/batch.js +++ b/packages/svelte/src/internal/client/reactivity/batch.js @@ -716,7 +716,7 @@ export class Batch { if (!is_flushing_sync) { queue_micro_task(() => { - if (current_batch !== batch) { + if (!batches.has(batch) || batch.#pending.size > 0) { // a flushSync happened in the meantime return; } diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/_config.js new file mode 100644 index 0000000000..dea121c456 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/_config.js @@ -0,0 +1,15 @@ +import { tick } from 'svelte'; +import { test } from '../../test'; + +// Ensure that microtask timing doesn't influence whether or not a scheduled batch is flushed. +// Timing can be such that the current_batch is reset before the scheduled flush runs, which +// would cause the flush to skip without the fix. +export default test({ + async test({ assert, target }) { + const [btn] = target.querySelectorAll('button'); + + btn.click(); + await tick(); + assert.htmlEqual(target.innerHTML, '1 1'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/main.svelte new file mode 100644 index 0000000000..ebfbf4ca4e --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/main.svelte @@ -0,0 +1,18 @@ + + +{#if a} + {@const toShow = await a} + {toShow} + {b} +{:else} + +{/if} From 146cb5ea6c0fc6c49677a732c047b3ff497936a1 Mon Sep 17 00:00:00 2001 From: Eduardo Kurek <133408246+eduardo-kurek@users.noreply.github.com> Date: Wed, 29 Apr 2026 16:10:19 -0300 Subject: [PATCH 7/7] fix: lazy props reactivity (#18146) Fix #18132 This PR treat lazy fallbacks on `prop()` as derived. Now a default function that uses a $state is recalculated whenever its dependents changes. This change implies that this lazy functions cannot mutate a state anymore (because it is derived), causing a `state_unsafe_mutation`error. This implies on a breaking change, but reasonable. --- ### New breaking change here - **Who does this affect**: Everyone that has updated a $state on a default lazy prop. Example: ```html ``` **Why make this breaking change** This encourages people to not update states on a function that fundamentaly, is readonly. When someone wants to use a default function expecting that it should be tracked, its not likely that this function will change some state. It is anti-pattern to change some state inside a getter function. But what if someone wants to do it, like in the code above? The code above doesn't make sense before this PR, the old way to calculate lazy functions is to execute it one time, and only one, so the `callCount` variable will never change. But let's assume that someone did it, how to migrate? The migration in same example is easy, since the `callCount` is executed only once, it will not be executed after the component is mounted. So the `callCount` doesn't need to be a state, the `callCount` will be in a valid state when the component is created. So here is the migrated code: ```html ``` As we can see, there is no reason for the variable `callCount` in this example (before this PR), and if someone did it, it is more likely that they used a constant instead: ```html ``` There is another example that causes the `state_unsafe_mutation` and how to fix (this happened on the tests that i changed): ```html ``` Here, we can see that `log` variable is a state. Before this PR, as i said, this function `fallbackExample` will be executed once. So the logs will be computed when the component is mounted. So there is no reason to make the `log` a state. The simplest way to fix this is to make it a normal variable: ```html ``` But with this PR, the function might be recalculated at some point, and the `log` with a state makes sense now, so how to migrate in this case? As i said, changing a state inside a lazy prop function is not a good practice, we can think in a way to invert this dependency, and change the approach from push (imperative mutation) to pull (declarative derivation). If a developer really needs to track how many times a fallback is executed or react to its changes, they should use a $derived or an $effect that observes the same dependencies as the fallback, or simply observe the property itself: ```html ``` ### After all, how to migrate? 1. **If there is no state mutation inside the prop function, no need to changes**; 2. **If there is a state mutation inside the prop function, but the value muted is declared inside the same component:** remove the state from it. Before this PR the method will be executed only once, and to get the same result, you do not need the variable to be a state; **Before** ```html ``` **After** ```html ``` 3. **If there is a state mutation inside the prop function, and the value is read in multiple places:** change your approach, use a effect to detect the change on the prop, and apply your mutation inside the effect; Before: ```html ``` After ```html ``` ### Severity (number of people affected x effort): Low - **Affected Users:** Minimal. Mutating state inside a property initializer is a rare edge case and considered an anti-pattern (because its a side effect inside a getter). Most users use constants or pure functions for fallbacks. - **Migration Effort:** Low. As demonstrated in the examples above, the fix usually involves either removing an unnecessary $state or moving the side effect to its proper place, the $effect ### Conclusion This PR encourages users to program in a better way. Forcing a clean separation between data and their side effects. The developer can use this new feature mainly in i18n services, providing better usability and experience. Also, this PR makes the properties more predictable, since the expected behavior is that it works reactively, eliminating this bug for future developers. Even though this PR adds a breaking change, it's easily solvable, and the chance of any user facing this problem is low. **Full example to test reactivity in props** (won't work on web, you can get the PR and test localy to see it working): https://svelte.dev/playground/a6608434d8c642179f0e2b72468c74d7?version=latest *A unit test for this reactivity was created: runtime-runes/props-default-value-reactivity*. --------- Co-authored-by: Rich Harris Co-authored-by: Rich Harris --- .changeset/smooth-poems-tap.md | 5 +++++ .../src/internal/client/reactivity/props.js | 8 +++++++- .../main.svelte | 2 +- .../props-default-value-lazy/sub.svelte | 2 +- .../props-default-value-reactivity/_config.js | 19 +++++++++++++++++++ .../main.svelte | 10 ++++++++++ .../props-default-value-reactivity/sub.svelte | 9 +++++++++ .../translations.svelte.js | 9 +++++++++ 8 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 .changeset/smooth-poems-tap.md create mode 100644 packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/main.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/sub.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/translations.svelte.js diff --git a/.changeset/smooth-poems-tap.md b/.changeset/smooth-poems-tap.md new file mode 100644 index 0000000000..ac160656cf --- /dev/null +++ b/.changeset/smooth-poems-tap.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: re-run fallback props if dependencies update diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js index e208d3b6f6..5626639a84 100644 --- a/packages/svelte/src/internal/client/reactivity/props.js +++ b/packages/svelte/src/internal/client/reactivity/props.js @@ -1,4 +1,4 @@ -/** @import { Effect, Source } from './types.js' */ +/** @import { Derived, Effect, Source } from './types.js' */ import { DEV } from 'esm-env'; import { PROPS_IS_BINDABLE, @@ -283,8 +283,14 @@ export function prop(props, key, flags, fallback) { var fallback_value = /** @type {V} */ (fallback); var fallback_dirty = true; + var fallback_signal = /** @type {Derived | undefined} */ (undefined); var get_fallback = () => { + if (lazy && runes) { + fallback_signal ??= derived(/** @type {() => V} */ (fallback)); + return get(fallback_signal); + } + if (fallback_dirty) { fallback_dirty = false; diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte index fe2ac37bd3..f6437d6589 100644 --- a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte @@ -1,5 +1,5 @@ + + + + \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/sub.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/sub.svelte new file mode 100644 index 0000000000..b3cd3fae36 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/sub.svelte @@ -0,0 +1,9 @@ + + +

greeting: {p0}

\ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/translations.svelte.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/translations.svelte.js new file mode 100644 index 0000000000..4aa4dc9999 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/translations.svelte.js @@ -0,0 +1,9 @@ +let greeting = $state('Hello'); + +export function get_translation() { + return greeting; +} + +export function set_translation(value) { + greeting = value; +}