From d16099ef0fa666f3610ef75ad9fca3252b0b47d0 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 9 Sep 2026 10:58:29 +0200 Subject: [PATCH 1/3] fix: remove `WAS_MARKED` flag in favor of `Set` (#18127) Removes the `WAS_MARKED` logic in favor of a simple `Set` heuristic: If `mark_reactions` goes beyond a certain count, initialize it, otherwise keep it `null`. Balances the common case of not having many transitive dependencies with the edge case of cyclic dependencies as was seen in #16658 (I rechecked that reproduction and it remains fast with this change). I ran the benchmark against this and it doesn't hit the `Seen` heuristic once (i.e. even the benchmark doesn't have this extreme level of dependencies where it becomes noticeable). Fixes #18123, supersedes #18124 --------- Co-authored-by: Rich Harris --- .changeset/grumpy-pens-press.md | 5 +++ benchmarking/benchmarks/reactivity/index.js | 5 ++- .../svelte/src/internal/client/constants.js | 9 ---- .../svelte/src/internal/client/dev/debug.js | 2 - .../internal/client/reactivity/deriveds.js | 3 -- .../src/internal/client/reactivity/sources.js | 44 ++++++++++++------- .../src/internal/client/reactivity/utils.js | 25 +---------- .../svelte/src/internal/client/runtime.js | 8 ---- 8 files changed, 38 insertions(+), 63 deletions(-) create mode 100644 .changeset/grumpy-pens-press.md diff --git a/.changeset/grumpy-pens-press.md b/.changeset/grumpy-pens-press.md new file mode 100644 index 0000000000..0ba87ab0c5 --- /dev/null +++ b/.changeset/grumpy-pens-press.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: remove `WAS_MARKED` flag in favor of `Set` diff --git a/benchmarking/benchmarks/reactivity/index.js b/benchmarking/benchmarks/reactivity/index.js index 3fe9639376..d971b25e9b 100644 --- a/benchmarking/benchmarks/reactivity/index.js +++ b/benchmarking/benchmarks/reactivity/index.js @@ -13,7 +13,7 @@ import { sbench_create_4to1, sbench_create_signals } from './sbench.js'; -import { fileURLToPath } from 'node:url'; +import { fileURLToPath, pathToFileURL } from 'node:url'; import { create_test } from './util.js'; // This benchmark has been adapted from the js-reactivity-benchmark (https://github.com/milomg/js-reactivity-benchmark) @@ -39,7 +39,8 @@ for (const file of fs.readdirSync(`${dirname}/tests`)) { const name = file.replace('.bench.js', ''); - const module = await import(`${dirname}/tests/${file}`); + const module_url = pathToFileURL(path.join(dirname, 'tests', file)); + const module = await import(module_url.href); const { owned, unowned } = create_test(name, module.default); reactivity_benchmarks.push(owned, unowned); diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js index e0b7a8779b..b086bfedff 100644 --- a/packages/svelte/src/internal/client/constants.js +++ b/packages/svelte/src/internal/client/constants.js @@ -51,15 +51,6 @@ export const EFFECT_PRESERVED = 1 << 19; export const USER_EFFECT = 1 << 20; export const EFFECT_OFFSCREEN = 1 << 25; -// Flags exclusive to deriveds -/** - * Tells that we marked this derived and its reactions as visited during the "mark as (maybe) dirty"-phase. - * Will be lifted during execution of the derived and during checking its dirty state (both are necessary - * because a derived might be checked but not executed). This is a pure performance optimization flag and - * should not be used for any other purpose! - */ -export const WAS_MARKED = 1 << 16; - // Flags used for async export const REACTION_IS_UPDATING = 1 << 21; export const ASYNC = 1 << 22; diff --git a/packages/svelte/src/internal/client/dev/debug.js b/packages/svelte/src/internal/client/dev/debug.js index 83cc510ae2..2513d15c97 100644 --- a/packages/svelte/src/internal/client/dev/debug.js +++ b/packages/svelte/src/internal/client/dev/debug.js @@ -15,7 +15,6 @@ import { MAYBE_DIRTY, RENDER_EFFECT, ROOT_EFFECT, - WAS_MARKED, MANAGED_EFFECT } from '#client/constants'; import { snapshot } from '../../shared/clone.js'; @@ -204,7 +203,6 @@ export function log_reactions(signal) { if ((flags & DIRTY) !== 0) names.push('DIRTY'); if ((flags & MAYBE_DIRTY) !== 0) names.push('MAYBE_DIRTY'); if ((flags & CONNECTED) !== 0) names.push('CONNECTED'); - if ((flags & WAS_MARKED) !== 0) names.push('WAS_MARKED'); if ((flags & INERT) !== 0) names.push('INERT'); if ((flags & DESTROYED) !== 0) names.push('DESTROYED'); diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js index 6b48bc8a23..728ef1d214 100644 --- a/packages/svelte/src/internal/client/reactivity/deriveds.js +++ b/packages/svelte/src/internal/client/reactivity/deriveds.js @@ -9,7 +9,6 @@ import { EFFECT_PRESERVED, STALE_REACTION, ASYNC, - WAS_MARKED, DESTROYED, CLEAN, REACTION_RAN, @@ -365,7 +364,6 @@ export function execute_derived(derived) { stack.push(derived); - derived.f &= ~WAS_MARKED; destroy_derived_effects(derived); value = update_reaction(derived); } finally { @@ -375,7 +373,6 @@ export function execute_derived(derived) { } } else { try { - derived.f &= ~WAS_MARKED; destroy_derived_effects(derived); value = update_reaction(derived); } finally { diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js index 70be6489a4..006494f0b5 100644 --- a/packages/svelte/src/internal/client/reactivity/sources.js +++ b/packages/svelte/src/internal/client/reactivity/sources.js @@ -25,10 +25,7 @@ import { MAYBE_DIRTY, BLOCK_EFFECT, ROOT_EFFECT, - ASYNC, - WAS_MARKED, - CONNECTED, - REACTION_IS_UPDATING + ASYNC } from '#client/constants'; import * as e from '../errors.js'; import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js'; @@ -171,6 +168,17 @@ export function set(source, value, should_proxy = false) { return internal_set(source, new_value, legacy_updates); } +/** + * A set of signals we have already seen while traversing in mark_reactions. + * Not always set to balance the common case of sources only having a couple + * of (transitive) dependencies (where always creating a Set would be bad for perf) + * with the edge case of extremely deep or wide dependency arrays with cycles. + * @type {Set | null} + */ +var seen = null; +/** Number of transitive dependencies, see {@link seen} for more info */ +var count_deps = 0; + /** * @template V * @param {Source} source @@ -240,7 +248,10 @@ export function internal_set(source, value, updated_during_traversal = null) { // For debugging, in case you want to know which reactions are being scheduled: // log_reactions(source); + seen = null; + count_deps = 0; mark_reactions(source, DIRTY, updated_during_traversal); + seen = null; // It's possible that the current reaction might not have up-to-date dependencies // whilst it's actively running. So in the case of ensuring it registers the reaction @@ -347,6 +358,18 @@ function mark_reactions(signal, status, updated_during_traversal) { var runes = is_runes(); var length = reactions.length; + count_deps += length; + // Activate the `seen` Set if we think from the unusually high number of deps that + // there might be cycles in the graph, to avoid repeated lookups for reactions + // Example: https://github.com/sveltejs/svelte/issues/16658 has a graph with one source + // reaching ~10000 distinct deriveds/effects each, resulting in 65 million walks through repeated visits. + if (count_deps > 100000 && seen === null) seen = new Set(); + + if (seen !== null) { + if (seen.has(signal)) return; + seen.add(signal); + } + for (var i = 0; i < length; i++) { var reaction = reactions[i]; var flags = reaction.f; @@ -370,18 +393,7 @@ function mark_reactions(signal, status, updated_during_traversal) { var derived = /** @type {Derived} */ (reaction); batch_values?.delete(derived); - - if ((flags & WAS_MARKED) === 0) { - // Only connected deriveds being executed outside the update cycle can be reliably unmarked right away - if ( - flags & CONNECTED && - (active_effect === null || (active_effect.f & REACTION_IS_UPDATING) === 0) - ) { - reaction.f |= WAS_MARKED; - } - - mark_reactions(derived, MAYBE_DIRTY, updated_during_traversal); - } + mark_reactions(derived, MAYBE_DIRTY, updated_during_traversal); } else if (not_dirty) { var effect = /** @type {Effect} */ (reaction); diff --git a/packages/svelte/src/internal/client/reactivity/utils.js b/packages/svelte/src/internal/client/reactivity/utils.js index 0d27cb8b84..3280f2372e 100644 --- a/packages/svelte/src/internal/client/reactivity/utils.js +++ b/packages/svelte/src/internal/client/reactivity/utils.js @@ -1,24 +1,7 @@ -/** @import { Derived, Effect, Value } from '#client' */ -import { CLEAN, DERIVED, DIRTY, MAYBE_DIRTY, WAS_MARKED } from '#client/constants'; +/** @import { Effect } from '#client' */ +import { CLEAN, DIRTY, MAYBE_DIRTY } from '#client/constants'; import { set_signal_status } from './status.js'; -/** - * @param {Value[] | null} deps - */ -function clear_marked(deps) { - if (deps === null) return; - - for (const dep of deps) { - if ((dep.f & DERIVED) === 0 || (dep.f & WAS_MARKED) === 0) { - continue; - } - - dep.f ^= WAS_MARKED; - - clear_marked(/** @type {Derived} */ (dep).deps); - } -} - /** * @param {Effect} effect * @param {Set} dirty_effects @@ -31,10 +14,6 @@ export function defer_effect(effect, dirty_effects, maybe_dirty_effects) { maybe_dirty_effects.add(effect); } - // Since we're not executing these effects now, we need to clear any WAS_MARKED flags - // so that other batches can correctly reach these effects during their own traversal - clear_marked(effect.deps); - // mark as clean so they get scheduled if they depend on pending async state set_signal_status(effect, CLEAN); } diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js index d86c349445..27def05300 100644 --- a/packages/svelte/src/internal/client/runtime.js +++ b/packages/svelte/src/internal/client/runtime.js @@ -21,7 +21,6 @@ import { REACTION_IS_UPDATING, STALE_REACTION, ERROR_VALUE, - WAS_MARKED, MANAGED_EFFECT, REACTION_RAN } from './constants.js'; @@ -164,10 +163,6 @@ export function is_dirty(reaction) { return true; } - if (flags & DERIVED) { - reaction.f &= ~WAS_MARKED; - } - if ((flags & MAYBE_DIRTY) !== 0) { var dependencies = /** @type {Value[]} */ (reaction.deps); var length = dependencies.length; @@ -408,11 +403,8 @@ function remove_reaction(signal, dependency) { ) { var derived = /** @type {Derived} */ (dependency); - // If we are working with a derived that is owned by an effect, then mark it as being - // disconnected and remove the mark flag, as it cannot be reliably removed otherwise if ((derived.f & CONNECTED) !== 0) { derived.f ^= CONNECTED; - derived.f &= ~WAS_MARKED; } // In a fork it's possible that a derived is executed and gets reactions, then commits, but is From ce89035ecbf88ee131838527d29584b968d450fb Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 9 Sep 2026 11:47:41 +0200 Subject: [PATCH 2/3] fix: prevent effect tree of batches from interfering with each other (#18508) While working on another Svelte feature I noticed a bug that boils down to batches interfering with each other through the effect tree: If batch A schedules an effect, it is walked up to the root (possibly). Now if in the meantime batch B also wants to schedule effects, it can have unintended consequences. Normally this does not happen, since it's extremely hard to run into this situation. There's basically two cases: Either an unfortunate timing of microtasks, or during flushing effects are scheduling new effects which messes with a `#commit()` right after (the test case does this). To fix this we now defer walking up the tree until the batch is actually processed. That way we set + unset the markers on the branches synchronously so there's no chance of another batch interfering. --- .changeset/gold-trams-knock.md | 5 + .../src/internal/client/reactivity/batch.js | 162 ++++++++++-------- .../async-commit-effect-overlap/_config.js | 41 +++++ .../async-commit-effect-overlap/main.svelte | 38 ++++ 4 files changed, 175 insertions(+), 71 deletions(-) create mode 100644 .changeset/gold-trams-knock.md create mode 100644 packages/svelte/tests/runtime-runes/samples/async-commit-effect-overlap/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/async-commit-effect-overlap/main.svelte diff --git a/.changeset/gold-trams-knock.md b/.changeset/gold-trams-knock.md new file mode 100644 index 0000000000..8006d13fef --- /dev/null +++ b/.changeset/gold-trams-knock.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: prevent effect tree of batches from interfering with each other diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js index 8251f79298..75ce33b1c5 100644 --- a/packages/svelte/src/internal/client/reactivity/batch.js +++ b/packages/svelte/src/internal/client/reactivity/batch.js @@ -22,7 +22,6 @@ import { import { async_mode_flag } from '../../flags/index.js'; import { deferred, define_property, includes } from '../../shared/utils.js'; import { - active_effect, active_reaction, get, increment_write_version, @@ -38,7 +37,6 @@ import { eager_effect, teardown, unlink_effect } from './effects.js'; import { defer_effect } from './utils.js'; import { UNINITIALIZED } from '../../../constants.js'; import { set_signal_status } from './status.js'; -import { legacy_is_updating_store } from './store.js'; import { invariant } from '../../shared/dev.js'; import { log_effect_tree } from '../dev/debug.js'; import { OBSOLETE } from './deriveds.js'; @@ -160,10 +158,17 @@ export class Batch { #deferred = null; /** - * The root effects that need to be flushed + * Effects that were scheduled in this batch but not yet 'resolved' into the + * root effects that need to be flushed. Resolving — the upwards traversal that + * marks the path to each effect on the shared effect tree (see #resolve) — is + * deferred until the batch is processed, so that the markers are created and + * consumed within a single traversal. Scheduling into other batches (which can + * happen concurrently, e.g. while a batch is committed) can therefore never + * observe (and be confused by) this batch's markers. + * May contain duplicates — deduplication happens during resolving * @type {Effect[]} */ - #roots = []; + #scheduled = []; /** * Effects created while this batch was active. @@ -273,14 +278,57 @@ export class Batch { this.#unskipped_branches.add(effect); } - #process() { - this.#started = true; + /** + * Convert the effects that were scheduled in this batch into the root effects + * that need to be traversed, marking the path to each effect (by clearing the + * `CLEAN` flag on ancestor branches) so that the traversal can find them. + * This happens right before traversal rather than at scheduling time, so that + * the markers left on the (shared) effect tree are created and consumed within + * a single traversal — scheduling into other batches can never observe them + * @returns {Effect[]} + */ + #resolve() { + /** @type {Effect[]} */ + var roots = []; - if (flush_count++ > 1000) { - this.#unlink(); - infinite_loop_guard(); + for (const effect of this.#scheduled) { + // skip effects that are destroyed, or that already ran (e.g. because + // they were reached by the traversal that preceded a drain iteration, + // or because they were scheduled twice) + if ((effect.f & DESTROYED) !== 0 || (effect.f & (DIRTY | MAYBE_DIRTY)) === 0) continue; + + var e = effect; + var covered = false; + + while (e.parent !== null) { + e = e.parent; + var flags = e.f; + + if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) { + if ((flags & CLEAN) === 0) { + // the path to the root was already marked, meaning the + // root was already collected — nothing left to do + covered = true; + break; + } + + e.f ^= CLEAN; + } + } + + if (!covered) { + roots.push(e); + } } + this.#scheduled = []; + + return roots; + } + + #process() { + this.#started = true; + if (DEV) { // track all the values that were updated during this flush, // so that they can be reset afterwards @@ -304,9 +352,6 @@ export class Batch { this.schedule(e); } - const roots = this.#roots; - this.#roots = []; - this.apply(); /** @type {Effect[]} */ @@ -321,18 +366,28 @@ export class Batch { */ var updates = (legacy_updates = []); - for (const root of roots) { - try { - this.#traverse(root, effects, render_effects); - } catch (e) { - reset_all(root); - // If there's no async work left, this branch is now dead and needs - // to be discarded to not become a zombie that is never cleaned up. - // See https://github.com/sveltejs/svelte/issues/18221#issuecomment-4497918414 - // for a (non-minimal) reproduction that demonstrates a case where this is necessary - // to not get follow-up false-positives via "batch has scheduled roots" invariant errors. - if (!this.#is_deferred()) this.discard(); - throw e; + // Effects can be scheduled during traversal (e.g. because a parent each/await/etc + // block updated an internal source, or because an effect invalidated itself) + // hence we loop until there are no more scheduled effects. + while (this.#scheduled.length > 0) { + if (flush_count++ > 1000) { + this.#unlink(); + infinite_loop_guard(); // TODO try to reset_all() here? + } + + for (const root of this.#resolve()) { + try { + this.#traverse(root, effects, render_effects); + } catch (e) { + reset_all(root); + // If there's no async work left, this branch is now dead and needs + // to be discarded to not become a zombie that is never cleaned up. + // See https://github.com/sveltejs/svelte/issues/18221#issuecomment-4497918414 + // for a (non-minimal) reproduction that demonstrates a case where this is necessary + // to not get follow-up false-positives via "batch has scheduled roots" invariant errors. + if (!this.#is_deferred()) this.discard(); + throw e; + } } } @@ -393,7 +448,7 @@ export class Batch { var next_batch = /** @type {Batch | null} */ (/** @type {unknown} */ (current_batch)); - if (this.#pending === 0 && (this.#roots.length === 0 || next_batch !== null)) { + if (this.#pending === 0 && (this.#scheduled.length === 0 || next_batch !== null)) { this.#unlink(); // Order matters here - we need to commit and THEN continue flushing new batches, not the other way around, @@ -408,12 +463,15 @@ export class Batch { } // Edge case: During traversal new branches might create effects that run immediately and set state, - // causing an effect and therefore a root to be scheduled again. We need to traverse the current batch + // causing an effect to be scheduled again. We need to traverse the current batch // once more in that case - most of the time this will just clean up dirty branches. - if (this.#roots.length > 0) { + if (this.#scheduled.length > 0) { if (next_batch !== null) { - const batch = next_batch; - batch.#roots.push(...this.#roots.filter((r) => !batch.#roots.includes(r))); + for (const e of this.#scheduled) { + next_batch.#scheduled.push(e); + } + + this.#scheduled = []; } else { next_batch = this; } @@ -712,7 +770,7 @@ export class Batch { // The microtask queue can contain the batch already scheduled to run right // after this one is finished, so throwing the invariant would be wrong here. if (DEV && !batch.#decrement_queued) { - invariant(batch.#roots.length === 0, 'Batch has scheduled roots'); + invariant(batch.#scheduled.length === 0, 'Batch has scheduled effects'); } // A batch was unskipped in a later batch -> tell prior batches to unskip it, too @@ -768,14 +826,12 @@ export class Batch { // Only apply and traverse when we know we triggered async work with marking the effects // and know this won't run anyway right afterwards - if (batch.#roots.length > 0 && !batch.#decrement_queued) { + if (batch.#scheduled.length > 0 && !batch.#decrement_queued) { batch.apply(); - for (var root of batch.#roots) { + for (var root of batch.#resolve()) { batch.#traverse(root, [], []); } - - batch.#roots = []; } batch.deactivate(); @@ -939,43 +995,7 @@ export class Batch { return; } - var e = effect; - - while (e.parent !== null) { - e = e.parent; - var flags = e.f; - - // if the effect is being scheduled because a parent (each/await/etc) block - // updated an internal source, or because a branch is being unskipped, - // bail out or we'll cause a second flush - if (collected_effects !== null && e === active_effect) { - if (async_mode_flag) return; - - // in sync mode, render effects run during traversal. in an extreme edge case - // — namely that we're setting a value inside a derived read during traversal — - // they can be made dirty after they have already been visited, in which - // case we shouldn't bail out. we also shouldn't bail out if we're - // updating a store inside a `$:`, since this might invalidate - // effects that were already visited - if ( - (active_reaction === null || (active_reaction.f & DERIVED) === 0) && - !legacy_is_updating_store - ) { - return; - } - } - - if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) { - if ((flags & CLEAN) === 0) { - // branch is already dirty, bail - return; - } - - e.f ^= CLEAN; - } - } - - this.#roots.push(e); + this.#scheduled.push(effect); } #unlink() { diff --git a/packages/svelte/tests/runtime-runes/samples/async-commit-effect-overlap/_config.js b/packages/svelte/tests/runtime-runes/samples/async-commit-effect-overlap/_config.js new file mode 100644 index 0000000000..5557c7ebbb --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-commit-effect-overlap/_config.js @@ -0,0 +1,41 @@ +import { tick } from 'svelte'; +import { test } from '../../test'; + +const buttons = ' '; + +export default test({ + async test({ assert, target }) { + await tick(); + + const [a, b, , pop] = target.querySelectorAll('button'); + const shift = target.querySelectorAll('button')[2]; + + assert.htmlEqual(target.innerHTML, `${buttons}

a

a

aa

1

`); + + // start two independent batches, both blocked on their awaited expression + a.click(); + await tick(); + assert.htmlEqual(target.innerHTML, `${buttons}

a

a

aa

1

`); + + b.click(); + await tick(); + assert.htmlEqual(target.innerHTML, `${buttons}

a

a

aa

1

`); + + // resolve the newer (b) batch first. Committing it must not commit the + // still-pending `a` batch, whose async work has not completed — `a` must + // still read 'a', and the unrelated `c` update must not be blocked + pop.click(); + await tick(); + assert.htmlEqual(target.innerHTML, `${buttons}

a

b

ab

2

`); + + // stale promise from the `a` batch's first run — resolving it does nothing + shift.click(); + await tick(); + assert.htmlEqual(target.innerHTML, `${buttons}

a

b

ab

2

`); + + // the `a` batch's re-run await ('bb') resolves — everything is committed + shift.click(); + await tick(); + assert.htmlEqual(target.innerHTML, `${buttons}

b

b

bb

2

`); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-commit-effect-overlap/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-commit-effect-overlap/main.svelte new file mode 100644 index 0000000000..ae2746a3b8 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-commit-effect-overlap/main.svelte @@ -0,0 +1,38 @@ + + + + + + + +

{a}

+

{b}

+

{await push(a + b)}

+

{c}

From 34b13ac3e4a8c7919eb8d044a7c31d2d16f72678 Mon Sep 17 00:00:00 2001 From: Xia Chao Date: Fri, 11 Sep 2026 18:35:15 +0800 Subject: [PATCH 3/3] fix: keep `$state.eager` when used as a variable initializer (#18809) fixes #18808 If you write `let x = $state.eager(...)`, the client compiler used to delete that line and then still read `x`. The page crashed with `x is not defined`. Server rendering kept the binding. Using `$state.eager(...)` directly in the markup already worked. This puts the `let` / `const` form on the same path as `$state.snapshot`. Added a runtime-runes sample that fails without this change. Co-authored-by: Xia Chao <236466140+bun-unsafe@users.noreply.github.com> --- .changeset/state-eager-let-declaration.md | 5 +++++ .../3-transform/client/visitors/VariableDeclaration.js | 1 + .../samples/state-eager-declaration/_config.js | 5 +++++ .../samples/state-eager-declaration/main.svelte | 7 +++++++ 4 files changed, 18 insertions(+) create mode 100644 .changeset/state-eager-let-declaration.md create mode 100644 packages/svelte/tests/runtime-runes/samples/state-eager-declaration/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/state-eager-declaration/main.svelte diff --git a/.changeset/state-eager-let-declaration.md b/.changeset/state-eager-let-declaration.md new file mode 100644 index 0000000000..6939094109 --- /dev/null +++ b/.changeset/state-eager-let-declaration.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: keep `$state.eager` when used as a variable initializer diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js index 246feaccf6..0ad52dc457 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js @@ -35,6 +35,7 @@ export function VariableDeclaration(node, context) { rune === '$inspect' || rune === '$inspect.trace' || rune === '$state.snapshot' || + rune === '$state.eager' || rune === '$host' ) { declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator))); diff --git a/packages/svelte/tests/runtime-runes/samples/state-eager-declaration/_config.js b/packages/svelte/tests/runtime-runes/samples/state-eager-declaration/_config.js new file mode 100644 index 0000000000..61811ad0d6 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/state-eager-declaration/_config.js @@ -0,0 +1,5 @@ +import { test } from '../../test'; + +export default test({ + html: `

20

` +}); diff --git a/packages/svelte/tests/runtime-runes/samples/state-eager-declaration/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-eager-declaration/main.svelte new file mode 100644 index 0000000000..ed5e175c55 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/state-eager-declaration/main.svelte @@ -0,0 +1,7 @@ + + +

{x}