Merge branch 'main' into svelte-custom-renderer

.changeset/easy-singers-retire.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't rebase just-created batches

.changeset/flat-shrimps-worry.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: flush eager effects in production

.changeset/full-waves-tease.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: account for proxified instance when updating `bind:this`

.changeset/many-pandas-add.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure scheduled batch is flushed if not obsolete

.changeset/small-tools-walk.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow `@debug` tags to reference awaited variables

.changeset/smooth-poems-tap.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: re-run fallback props if dependencies update

.changeset/three-pears-build.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ignore comments when reading CSS values

.changeset/twelve-cooks-speak.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ignore false-positive errors of `$inspect` dependencies

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).

packages/svelte/src/ambient.d.ts

@@ -147,6 +147,8 @@ declare namespace $state {
 	 * </script>
 	 * ```
 	 *
+	 * 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

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;

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(
+	if (blockers.length > 0) {
-		b.stmt(b.call('$.template_effect', b.thunk(b.block([b.stmt(call), b.debugger]))))
+		args.push(b.array([]), b.array([]), b.array(blockers));
-	);
+	}
+
+	context.state.init.push(b.stmt(b.call('$.template_effect', ...args)));
 }

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(
+		...create_child_block(
-			b.call(
+			[
-				'console.log',
+				b.stmt(
-				b.object(
+					b.call(
-					node.identifiers.map((identifier) =>
+						'console.log',
-						b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+						b.object(
+							node.identifiers.map((identifier) =>
+								b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+							)
+						)
 					)
-				)
+				),
-			)
+				b.debugger
-		),
+			],
-		b.debugger
+			b.array(blockers),
+			false
+		)
 	);
 }

packages/svelte/src/internal/client/dev/inspect.js

@@ -20,6 +20,8 @@ export function inspect(get_value, inspector, show_stack = false) {
 	// in an error (an `$inspect(object.property)` will run before the
 	// `{#if object}...{/if}` that contains it)
 	eager_effect(() => {
+		error = UNINITIALIZED;
+
 		try {
 			var value = get_value();
 		} catch (e) {

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -621,7 +621,7 @@ function get_setters(element) {
 	var element_proto = Element.prototype;
 
 	// Stop at Element, from there on there's only unnecessary setters we're not interested in
-	// Do not use contructor.name here as that's unreliable in some browser environments
+	// Do not use constructor.name here as that's unreliable in some browser environments
 	while (element_proto !== proto) {
 		descriptors = get_descriptors(proto);
 

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.

packages/svelte/src/internal/client/reactivity/batch.js

@@ -342,6 +342,14 @@ export class Batch {
 			this.#deferred?.resolve();
 		}
 
+		// Order matters here - we need to commit and THEN continue flushing new batches, not the other way around,
+		// else we could start flushing a new batch and then, if it has pending work, rebase it right afterwards, which is wrong.
+		// In sync mode flushSync can cause #commit to wrongfully think that there needs to be a rebase, so we only do it in async mode
+		// TODO fix the underlying cause, otherwise this will likely regress when non-async mode is removed
+		if (async_mode_flag && !batches.has(this)) {
+			this.#commit();
+		}
+
 		var next_batch = /** @type {Batch | null} */ (/** @type {unknown} */ (current_batch));
 
 		// Edge case: During traversal new branches might create effects that run immediately and set state,
@@ -363,12 +371,6 @@ export class Batch {
 
 			next_batch.#process();
 		}
-
-		// In sync mode flushSync can cause #commit to wrongfully think that there needs to be a rebase, so we only do it in async mode
-		// TODO fix the underlying cause, otherwise this will likely regress when non-async mode is removed
-		if (async_mode_flag && !batches.has(this)) {
-			this.#commit();
-		}
 	}
 
 	/**
@@ -575,19 +577,23 @@ export class Batch {
 
 				checked = new Map();
 				var current_unequal = [...batch.current.keys()].filter((c) =>
-					this.current.has(c) ? /** @type {[any, boolean]} */ (this.current.get(c))[0] !== c : true
+					this.current.has(c)
+						? /** @type {[any, boolean]} */ (this.current.get(c))[0] !== c.v
+						: true
 				);
 
-				for (const effect of this.#new_effects) {
+				if (current_unequal.length > 0) {
-					if (
+					for (const effect of this.#new_effects) {
-						(effect.f & (DESTROYED | INERT | EAGER_EFFECT)) === 0 &&
+						if (
-						depends_on(effect, current_unequal, checked)
+							(effect.f & (DESTROYED | INERT | EAGER_EFFECT)) === 0 &&
-					) {
+							depends_on(effect, current_unequal, checked)
-						if ((effect.f & (ASYNC | BLOCK_EFFECT)) !== 0) {
+						) {
-							set_signal_status(effect, DIRTY);
+							if ((effect.f & (ASYNC | BLOCK_EFFECT)) !== 0) {
-							batch.schedule(effect);
+								set_signal_status(effect, DIRTY);
-						} else {
+								batch.schedule(effect);
-							batch.#dirty_effects.add(effect);
+							} else {
+								batch.#dirty_effects.add(effect);
+							}
 						}
 					}
 				}
@@ -716,7 +722,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;
 						}

packages/svelte/src/internal/client/reactivity/deriveds.js

@@ -43,7 +43,7 @@ import { get_error } from '../../shared/dev.js';
 import { async_mode_flag, tracing_mode_flag } from '../../flags/index.js';
 import { component_context } from '../context.js';
 import { UNINITIALIZED } from '../../../constants.js';
-import { batch_values, current_batch } from './batch.js';
+import { batch_values, current_batch, previous_batch } from './batch.js';
 import { increment_pending, unset_context } from './async.js';
 import { deferred, includes, noop } from '../../shared/utils.js';
 import { set_signal_status, update_derived_status } from './status.js';
@@ -399,7 +399,14 @@ export function update_derived(derived) {
 		// change, `derived.equals` may incorrectly return `true`
 		if (!current_batch?.is_fork || derived.deps === null) {
 			if (current_batch !== null) {
+				// We also write to previous_batch because if it exists, it is a sign that we're
+				// currently in the process of flushing effects. These updates to deriveds may belong
+				// to the previous batch, not the new one (which can already exist if an earlier
+				// effect wrote to a source). This can cause bugs when running batch.#commit() later,
+				// but not adding it to current_batch can, too, so we add it to both.
+				// See https://github.com/sveltejs/svelte/pull/18117 for more details.
 				current_batch.capture(derived, value, true);
+				previous_batch?.capture(derived, value, true);
 			} else {
 				derived.v = value;
 			}

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<V> | undefined} */ (undefined);
 
 	var get_fallback = () => {
+		if (lazy && runes) {
+			fallback_signal ??= derived(/** @type {() => V} */ (fallback));
+			return get(fallback_signal);
+		}
+
 		if (fallback_dirty) {
 			fallback_dirty = false;
 

packages/svelte/src/internal/client/reactivity/sources.js

@@ -47,7 +47,7 @@ import { proxy } from '../proxy.js';
 import { execute_derived } from './deriveds.js';
 import { set_signal_status, update_derived_status } from './status.js';
 
-/** @type {Set<any>} */
+/** @type {Set<Effect>} */
 export let eager_effects = new Set();
 
 /** @type {Map<Source, any>} */
@@ -272,7 +272,18 @@ export function flush_eager_effects() {
 			set_signal_status(effect, MAYBE_DIRTY);
 		}
 
-		if (is_dirty(effect)) {
+		let dirty;
+
+		try {
+			dirty = is_dirty(effect);
+		} catch {
+			// Dirty-checking can evaluate derived dependencies and throw in cases where
+			// parent effects are about to destroy this eager effect. Run the effect so
+			// its own error handling can deal with transient failures.
+			dirty = true;
+		}
+
+		if (dirty) {
 			update_effect(effect);
 		}
 	}
@@ -338,12 +349,6 @@ function mark_reactions(signal, status, updated_during_traversal) {
 		// In legacy mode, skip the current effect to prevent infinite loops
 		if (!runes && reaction === active_effect) continue;
 
-		// Inspect effects need to run immediately, so that the stack trace makes sense
-		if (DEV && (flags & EAGER_EFFECT) !== 0) {
-			eager_effects.add(reaction);
-			continue;
-		}
-
 		var not_dirty = (flags & DIRTY) === 0;
 
 		// don't set a DIRTY reaction to MAYBE_DIRTY
@@ -351,7 +356,12 @@ function mark_reactions(signal, status, updated_during_traversal) {
 			set_signal_status(reaction, status);
 		}
 
-		if ((flags & DERIVED) !== 0) {
+		if ((flags & EAGER_EFFECT) !== 0) {
+			// Eager effects need to run immediately:
+			// - for $inspect so that the stack trace makes sense
+			// - for $state.eager because they might be without an effect parent
+			eager_effects.add(/** @type {Effect} */ (reaction));
+		} else if ((flags & DERIVED) !== 0) {
 			var derived = /** @type {Derived} */ (reaction);
 
 			batch_values?.delete(derived);

packages/svelte/tests/css/samples/comment-with-apostrophe/expected.css

@@ -0,0 +1,4 @@
+
+	p.svelte-xyz {
+		padding: 0 /* it's a comment */ 1em;
+	}

packages/svelte/tests/css/samples/comment-with-apostrophe/input.svelte

@@ -0,0 +1,7 @@
+<p>red</p>
+
+<style>
+	p {
+		padding: 0 /* it's a comment */ 1em;
+	}
+</style>

packages/svelte/tests/helpers.js

@@ -201,7 +201,7 @@ export const async_mode = process.env.SVELTE_NO_ASYNC !== 'true';
  * @param {any[]} logs
  */
 export function normalise_inspect_logs(logs) {
-	/** @type {string[]} */
+	/** @type {any[]} */
 	const normalised = [];
 
 	for (const log of logs) {

packages/svelte/tests/runtime-production/samples/async-eager-derived/_config.js

@@ -0,0 +1,23 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>clicks: 0 - 0 - 0</button> <button>shift</button> <p>true - true</p>`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>clicks: 1 - 1 - 1</button> <button>shift</button> <p>false - false</p>`
+		);
+	}
+});

packages/svelte/tests/runtime-production/samples/async-eager-derived/main.svelte

@@ -0,0 +1,22 @@
+<script>
+	
+	let count = $state(0);
+	const delayedCount = $derived(await push(count));
+	const derivedCount = $derived(count);
+
+	let resolvers = [];
+
+	function push(value) {
+        if (!value) return value;
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>
+	clicks: {count} - {delayedCount} - {derivedCount}
+</button> 
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+
+<p>{$state.eager(count) !== count} - {$state.eager(derivedCount) !== derivedCount}</p>

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' }]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte

@@ -0,0 +1,4 @@
+<svelte:boundary>
+	{@const data = await Promise.resolve("works")}
+	{@debug data}
+</svelte:boundary>

packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-1/_config.js

@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
+// rescheduling an effect on the new batch that shouldn't run.
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, resolve] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		// This resolve
+		// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
+		// - shouldn't result in #commit() rebasing the new batch
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+
+		// As a result, this resolve shouldn't result in another execution of the effect depending on the derived
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-1/main.svelte

@@ -0,0 +1,32 @@
+<script>
+	let count = $state(0);
+	let double = $derived(count * 2);
+	let count_mirror = $state(0);
+
+	const queued = [];
+	function delay(v) {
+		if (!v) return v;
+		return new Promise(resolve => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)}</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+
+{#if count}
+	<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
+	<!-- first $effect creates new batch ... -->
+	{(() => {
+		$effect(() => {
+			count_mirror = count;
+		})
+	})()}
+	<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
+	{(() => {
+		$effect(() => {
+			console.log(double);
+		})
+	})()}
+{/if}

packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-2/_config.js

@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
+// rescheduling an effect on the new batch that shouldn't run.
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, resolve] = target.querySelectorAll('button');
+		assert.deepEqual(logs, ['delay 0']);
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, ['delay 0', 'delay 2']);
+
+		// This resolve should trigger the async effect only once
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, ['delay 0', 'delay 2', 'effect run', 'delay 4']);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, ['delay 0', 'delay 2', 'effect run', 'delay 4']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-2/main.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { untrack } from "svelte";
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+
+	const queued = [];
+	function delay(v) {
+		console.log('delay ' + v);
+		if (!v) return v;
+		return new Promise(resolve => {
+			queued.push(() => resolve(v));
+		});
+	}
+
+	$effect(() => {
+		if (b + c === 0 || b + c > 2) return;
+		console.log('effect run')
+		untrack(() => {
+			b++;
+			c++;
+		})
+	})
+</script>
+
+<button onclick={() => { a++; b++; }}>increment</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+{await delay(a + b + c)}

packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-3/_config.js

@@ -0,0 +1,31 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
+// rescheduling an effect on the new batch that shouldn't run.
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, shift, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		// Resolve the blocking await which shouldn't result in the derived execution capturing
+		// the new derived value on the new batch, but on the previous batch which is currently flushing
+		pop.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+
+		// Resolve the non-blocking await which shouldn't result in #commit() rebasing the new batch
+		shift.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+
+		// Resolve the new batch's await
+		shift.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-3/main.svelte

@@ -0,0 +1,37 @@
+<script>
+	let count = $state(0);
+	let double = $derived(count * 2);
+	let count_mirror = $state(0);
+
+	const queued = [];
+	function delay(v) {
+		if (!v) return v;
+		return new Promise(resolve => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)}</button>
+<button onclick={() => queued.shift()?.()}>shift</button>
+<button onclick={() => queued.pop()?.()}>pop</button>
+
+{#if count}
+	<svelte:boundary>
+		{await delay(count)}
+		{#snippet pending()}loading{/snippet}
+	</svelte:boundary>
+	<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
+	<!-- first $effect creates new batch ... -->
+	{(() => {
+		$effect(() => {
+			count_mirror = count;
+		})
+	})()}
+	<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
+	{(() => {
+		$effect(() => {
+			console.log(double);
+		})
+	})()}
+{/if}

packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-4/_config.js

@@ -0,0 +1,58 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
+// rescheduling an effect on the new batch that shouldn't run.
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, unrelated, resolve] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		// This resolve
+		// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
+		// - shouldn't result in #commit() rebasing the new batch
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>count 1 | count_mirror 0 | count_mirror_d 0 | unrelated 0</button>
+				<button>unrelated++</button>
+				<button>resolve</button>
+			`
+		);
+
+		// This resolve
+		// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
+		// - shouldn't result in #commit() rebasing the new batch
+		unrelated.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>count 1 | count_mirror 0 | count_mirror_d 0 | unrelated 1</button>
+				<button>unrelated++</button>
+				<button>resolve</button>
+			`
+		);
+
+		// As a result, this resolve shouldn't result in another execution of the effect depending on the derived
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>count 1 | count_mirror 1 | count_mirror_d 2 | unrelated 1</button>
+				<button>unrelated++</button>
+				<button>resolve</button>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-4/main.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { untrack } from "svelte";
+
+	let count = $state(0);
+	let double = $derived(count * 2);
+	let count_mirror = $state(0);
+	let unrelated = $state(0);
+	let count_mirror_d = $derived(count_mirror * 2);
+
+	const queued = [];
+	function delay(v) {
+		if (!v) return v;
+		return new Promise(resolve => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)} | count_mirror_d {count_mirror_d} | unrelated {unrelated}</button>
+<button onclick={() => unrelated++}>unrelated++</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+
+{#if count}
+	<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
+	<!-- first $effect creates new batch ... -->
+	{(() => {
+		$effect(() => {
+			count_mirror = count;
+			untrack(() => count_mirror_d); // execute derived; should associate value with the right batch
+		})
+	})()}
+	<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
+	{(() => {
+		$effect(() => {
+			console.log(double);
+		})
+	})()}
+{/if}

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');
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+</script>
+
+{#if a}
+	{@const toShow = await a}
+	{toShow}
+	{b}
+{:else}
+	<button
+		onclick={async () => {
+			a = 1;
+			await 1;
+			await 1; // two microtasks needed to get timing right to reproduce the bug
+			b = 1;
+		}}>click</button>
+{/if}

packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/Component.svelte

@@ -0,0 +1,5 @@
+<script>
+	const props = $props();
+	// svelte-ignore state_referenced_locally
+	export const name = props.name;
+</script>

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' } }
+		]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Row from "./Component.svelte";
+
+	const nums = $state([]);
+	const rows = $derived(nums.map(n => ({id: n, name: `Row ${n}` })));
+	const refs = $state({});
+
+	$effect(() => {
+		console.log({...refs});
+	})
+</script>
+
+<button onclick={() => nums.push(nums.length)}>Add</button>
+{#each rows as row (row.id)}
+	<Row name={row.name} bind:this={refs[row.id]} />
+{/each}

packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/List.svelte

@@ -0,0 +1,11 @@
+<script>
+	let {things} = $props();
+	
+	$inspect(things);
+</script>
+
+<ul>
+	{#each things as thing}
+		<li>thing {thing.id}</li>
+	{/each}
+</ul>

packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/_config.js

@@ -0,0 +1,21 @@
+import { normalise_inspect_logs } from '../../../helpers';
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, errors, logs }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, '<button>clear</button>');
+		assert.equal(errors.length, 0);
+		assert.deepEqual(normalise_inspect_logs(logs), [[{ id: 1 }, { id: 2 }]]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import List from "./List.svelte"
+	
+	let data = $state({things: [{id:1}, {id:2}]})
+	
+  function reloadData() {
+		data = null
+	}
+</script>
+
+{#if data}
+  <List things={data.things.map((t) => t)} />
+{/if}
+
+<button onclick={() => reloadData()}>clear</button>

packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte

@@ -1,5 +1,5 @@
 <script>
-	let log = $state([]);
+	let log = [];
 
 	const fallback_value = 1;
 	const nested = {

packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte

@@ -1,5 +1,5 @@
 <script>
-	let log = $state([]);
+	let log = [];
 
 	const fallback_value = 1;
 	const nested = {

packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/_config.js

@@ -0,0 +1,19 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	accessors: false,
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>greeting: Hola</p>
+			<button>Change Language</button>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Sub from './sub.svelte';
+	import { set_translation } from './translations.svelte.js';
+</script>
+
+<Sub />
+
+<button onclick={() => set_translation('Hola')}>
+	Change Language
+</button>

packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/sub.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { get_translation } from './translations.svelte.js';
+
+	const {
+		p0 = get_translation()
+	} = $props();
+</script>
+
+<p>greeting: {p0}</p>

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;
+}

packages/svelte/types/index.d.ts

@@ -3661,6 +3661,8 @@ declare namespace $state {
 	 * </script>
 	 * ```
 	 *
+	 * 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