Merge branch 'main' into push-spyzomlslloo

.changeset/thick-islands-pull.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't revert source to UNINITIALIZED state when time travelling

packages/svelte/src/internal/client/dom/blocks/boundary.js

@@ -161,6 +161,10 @@ export class Boundary {
 					this.#hydrate_pending_content();
 				} else {
 					this.#hydrate_resolved_content();
+
+					if (this.#pending_count === 0) {
+						this.is_pending = false;
+					}
 				}
 			} else {
 				var anchor = this.#get_anchor();
@@ -194,10 +198,6 @@ export class Boundary {
 		} catch (error) {
 			this.error(error);
 		}
-
-		// Since server rendered resolved content, we never show pending state
-		// Even if client-side async operations are still running, the content is already displayed
-		this.is_pending = false;
 	}
 
 	#hydrate_pending_content() {

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

@@ -38,6 +38,7 @@ import { invoke_error_boundary } from '../error-handling.js';
 import { flush_eager_effects, old_values, set_eager_effects, source, update } from './sources.js';
 import { eager_effect, unlink_effect } from './effects.js';
 import { defer_effect } from './utils.js';
+import { UNINITIALIZED } from '../../../constants.js';
 
 /** @type {Set<Batch>} */
 const batches = new Set();
@@ -281,7 +282,7 @@ export class Batch {
 	 * @param {any} value
 	 */
 	capture(source, value) {
-		if (!this.previous.has(source)) {
+		if (value !== UNINITIALIZED && !this.previous.has(source)) {
 			this.previous.set(source, value);
 		}
 

packages/svelte/tests/hydration/test.ts

@@ -131,19 +131,12 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 
 		flushSync();
 
-		const normalize = (string: string) =>
-			string
-				.trim()
-				.replaceAll('\r\n', '\n')
-				.replaceAll('/>', '>')
-				.replace(/<!--.+?-->/g, '');
-
 		const expected = read(`${cwd}/_expected.html`) ?? rendered.html;
-		assert.equal(normalize(target.innerHTML), normalize(expected));
+		assert_html_equal(target.innerHTML, expected);
 
 		if (rendered.head) {
 			const expected = read(`${cwd}/_expected_head.html`) ?? rendered.head;
-			assert.equal(normalize(head.innerHTML), normalize(expected));
+			assert_html_equal(head.innerHTML, expected);
 		}
 
 		if (config.snapshot) {

packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js

@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>baz: 69</p>
+				<p></p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	let foo = $state(null);
+
+	$effect(() => {
+		foo = 69;
+	});
+
+	let bar = $derived(await 1);
+
+	let baz = $derived(foo ? foo * bar : null);
+
+	const qux = "qux";
+</script>
+
+<p>baz: {baz}</p>
+
+<svelte:boundary>
+	{#snippet pending()}
+		<p>Loading...</p>
+	{/snippet}
+
+	{#if qux}
+		<p></p>
+	{/if}
+</svelte:boundary>