From 7f10642add4612563c5283384004c8baa5824161 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 23 Mar 2024 12:10:12 -0400
Subject: [PATCH] chore: improve hydration tests (#10887)

* use server-rendered HTML as hydration test starting point

* update tests

* remove _before.html files

* remove _before_head.html files

* override output with _expected.html

* expected output for binding-input case

* remove unused files

* fix

* changeset
---
 .changeset/serious-gorillas-eat.md            |  5 ++
 .../src/internal/client/dom/blocks/each.js    |  8 +--
 .../hydration/samples/basic/_before.html      |  1 -
 .../samples/binding-input/_before.html        |  2 -
 .../samples/binding-input/_expected.html      |  1 +
 .../samples/claim-comment/_before.html        |  3 -
 .../samples/claim-static/_before.html         |  8 ---
 .../hydration/samples/claim-text/_before.html |  5 --
 .../samples/component-in-element/_before.html |  3 -
 .../hydration/samples/component/_before.html  |  3 -
 .../samples/dynamic-text-changed/_before.html |  1 -
 .../samples/dynamic-text-changed/_config.js   |  4 ++
 .../{_after.html => _expected.html}           |  0
 .../samples/dynamic-text-nil/_before.html     |  1 -
 .../samples/dynamic-text/_before.html         |  1 -
 .../samples/each-block-arg-clash/_before.html |  5 --
 .../each-block-fallback-mismatch/_before.html |  2 -
 .../each-block-fallback-mismatch/_config.js   | 12 +++-
 .../{_after.html => _expected.html}           |  0
 .../each-block-fallback-mismatch/main.svelte  |  3 +-
 .../_before.html                              | 12 ----
 .../_config.js                                |  8 +++
 .../{_after.html => _expected.html}           |  0
 .../main.svelte                               |  2 +-
 .../_before.html                              |  9 ---
 .../_config.js                                |  8 +++
 .../{_after.html => _expected.html}           |  0
 .../main.svelte                               |  2 +-
 .../hydration/samples/each-block/_before.html |  5 --
 .../hydration/samples/each-else/_before.html  |  3 -
 .../element-attribute-added/_before.html      |  1 -
 .../element-attribute-added/_config.js        |  2 +
 .../{_after.html => _expected.html}           |  0
 .../element-attribute-changed/_before.html    |  1 -
 .../element-attribute-changed/_config.js      |  4 ++
 .../{_after.html => _expected.html}           |  0
 .../element-attribute-removed/_before.html    |  1 -
 .../element-attribute-removed/_config.js      |  4 ++
 .../{_after.html => _expected.html}           |  0
 .../_before.html                              |  1 -
 .../element-attribute-unchanged/_before.html  |  1 -
 .../element-nested-sibling/_before.html       |  3 -
 .../samples/element-nested/_before.html       |  3 -
 .../samples/element-ref/_before.html          |  1 -
 .../samples/event-handler/_before.html        |  5 --
 .../samples/expression-sibling/_before.html   |  1 -
 .../head-html-and-component/_before.html      |  1 -
 .../head-html-and-component/_before_head.html |  6 --
 .../head-meta-hydrate-duplicate/_before.html  |  1 -
 .../_before_head.html                         |  4 --
 .../samples/html-tag-hydration/_after.html    |  1 -
 .../samples/html-tag-hydration/_before.html   |  1 -
 .../samples/if-block-anchor/_before.html      |  2 -
 .../samples/if-block-empty/_after.html        |  4 --
 .../samples/if-block-empty/_before.html       |  4 --
 .../samples/if-block-empty/_config.js         | 10 +++-
 .../samples/if-block-false/_before.html       |  5 --
 .../samples/if-block-mismatch/_after.html     |  1 -
 .../samples/if-block-mismatch/_before.html    |  1 -
 .../samples/if-block-mismatch/_config.js      |  8 +++
 .../samples/if-block-mismatch/main.svelte     |  4 ++
 .../samples/if-block-update/_before.html      |  1 -
 .../hydration/samples/if-block/_before.html   |  4 --
 .../ignore-mismatched-href/_before.html       |  1 -
 .../samples/ignore-mismatched-href/_config.js |  8 +++
 .../ignore-mismatched-href/main.svelte        |  2 +-
 .../hydration/samples/noscript/_before.html   |  2 -
 .../noscript/{_after.html => _expected.html}  |  0
 .../samples/raw-mismatch/_after.html          |  1 -
 .../samples/raw-mismatch/_before.html         |  1 -
 .../hydration/samples/raw-repair/_after.html  |  2 -
 .../hydration/samples/raw-repair/_before.html |  6 --
 .../hydration/samples/raw-svg/_before.html    |  1 -
 .../raw-with-empty-line-at-top/_before.html   | 10 ----
 .../tests/hydration/samples/raw/_before.html  |  4 --
 .../_after.html                               |  1 -
 .../_before.html                              |  1 -
 .../hydration/samples/text-empty/_before.html |  1 -
 .../hydration/samples/text-empty/_config.js   | 10 +++-
 .../{_after.html => _expected.html}           |  0
 .../hydration/samples/text-empty/main.svelte  |  2 +-
 .../samples/text-fallback/_before.html        |  1 -
 .../samples/top-level-text/_before.html       |  1 -
 packages/svelte/tests/hydration/test.ts       | 55 ++++++++-----------
 84 files changed, 116 insertions(+), 197 deletions(-)
 create mode 100644 .changeset/serious-gorillas-eat.md
 delete mode 100644 packages/svelte/tests/hydration/samples/basic/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/binding-input/_before.html
 create mode 100644 packages/svelte/tests/hydration/samples/binding-input/_expected.html
 delete mode 100644 packages/svelte/tests/hydration/samples/claim-comment/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/claim-static/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/claim-text/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/component-in-element/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/component/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/dynamic-text-changed/_before.html
 rename packages/svelte/tests/hydration/samples/dynamic-text-changed/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/dynamic-text-nil/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/dynamic-text/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/each-block-arg-clash/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_before.html
 rename packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_before.html
 rename packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_before.html
 rename packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/each-block/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/each-else/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/element-attribute-added/_before.html
 rename packages/svelte/tests/hydration/samples/element-attribute-added/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/element-attribute-changed/_before.html
 rename packages/svelte/tests/hydration/samples/element-attribute-changed/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/element-attribute-removed/_before.html
 rename packages/svelte/tests/hydration/samples/element-attribute-removed/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/element-attribute-unchanged-2/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/element-attribute-unchanged/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/element-nested-sibling/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/element-nested/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/element-ref/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/event-handler/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/expression-sibling/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/head-html-and-component/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/head-html-and-component/_before_head.html
 delete mode 100644 packages/svelte/tests/hydration/samples/head-meta-hydrate-duplicate/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
 delete mode 100644 packages/svelte/tests/hydration/samples/html-tag-hydration/_after.html
 delete mode 100644 packages/svelte/tests/hydration/samples/html-tag-hydration/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/if-block-anchor/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/if-block-empty/_after.html
 delete mode 100644 packages/svelte/tests/hydration/samples/if-block-empty/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/if-block-false/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/if-block-mismatch/_after.html
 delete mode 100644 packages/svelte/tests/hydration/samples/if-block-mismatch/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/if-block-update/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/if-block/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/ignore-mismatched-href/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/noscript/_before.html
 rename packages/svelte/tests/hydration/samples/noscript/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/raw-mismatch/_after.html
 delete mode 100644 packages/svelte/tests/hydration/samples/raw-mismatch/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/raw-repair/_after.html
 delete mode 100644 packages/svelte/tests/hydration/samples/raw-repair/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/raw-svg/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/raw-with-empty-line-at-top/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/raw/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/repairs-apparent-static-content/_after.html
 delete mode 100644 packages/svelte/tests/hydration/samples/repairs-apparent-static-content/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/text-empty/_before.html
 rename packages/svelte/tests/hydration/samples/text-empty/{_after.html => _expected.html} (100%)
 delete mode 100644 packages/svelte/tests/hydration/samples/text-fallback/_before.html
 delete mode 100644 packages/svelte/tests/hydration/samples/top-level-text/_before.html

diff --git a/.changeset/serious-gorillas-eat.md b/.changeset/serious-gorillas-eat.md
new file mode 100644
index 0000000000..407f2e6db8
--- /dev/null
+++ b/.changeset/serious-gorillas-eat.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly hydrate controlled each-else block
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index ce17cced94..bf4d0b5a17 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -50,7 +50,7 @@ export function set_current_each_item(item) {
  * @param {number} flags
  * @param {null | ((item: V) => string)} get_key
  * @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
- * @param {null | ((anchor: Node) => void)} fallback_fn
+ * @param {null | ((anchor: Node | null) => void)} fallback_fn
  * @param {typeof reconcile_indexed_array | reconcile_tracked_array} reconcile_fn
  * @returns {void}
  */
@@ -158,7 +158,7 @@ function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, re
 					resume_effect(fallback);
 				} else {
 					fallback = render_effect(() => {
-						var dom = fallback_fn(anchor);
+						var dom = fallback_fn(hydrating ? null : anchor);
 
 						return () => {
 							if (dom !== undefined) {
@@ -199,7 +199,7 @@ function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, re
  * @param {number} flags
  * @param {null | ((item: V) => string)} get_key
  * @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
- * @param {null | ((anchor: Node) => void)} fallback_fn
+ * @param {null | ((anchor: Node | null) => void)} fallback_fn
  * @returns {void}
  */
 export function each_keyed(anchor, get_collection, flags, get_key, render_fn, fallback_fn) {
@@ -212,7 +212,7 @@ export function each_keyed(anchor, get_collection, flags, get_key, render_fn, fa
  * @param {() => V[]} get_collection
  * @param {number} flags
  * @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
- * @param {null | ((anchor: Node) => void)} fallback_fn
+ * @param {null | ((anchor: Node | null) => void)} fallback_fn
  * @returns {void}
  */
 export function each_indexed(anchor, get_collection, flags, render_fn, fallback_fn) {
diff --git a/packages/svelte/tests/hydration/samples/basic/_before.html b/packages/svelte/tests/hydration/samples/basic/_before.html
deleted file mode 100644
index f97ad9726b..0000000000
--- a/packages/svelte/tests/hydration/samples/basic/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><h1>Hello world!</h1><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/binding-input/_before.html b/packages/svelte/tests/hydration/samples/binding-input/_before.html
deleted file mode 100644
index c6b1da4217..0000000000
--- a/packages/svelte/tests/hydration/samples/binding-input/_before.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!--ssr:0--><input />
-<p>Hello world!</p><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/binding-input/_expected.html b/packages/svelte/tests/hydration/samples/binding-input/_expected.html
new file mode 100644
index 0000000000..b5bc6af161
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/binding-input/_expected.html
@@ -0,0 +1 @@
+<!--ssr:0--><input> <p>Hello world!</p><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/claim-comment/_before.html b/packages/svelte/tests/hydration/samples/claim-comment/_before.html
deleted file mode 100644
index e1bab99a66..0000000000
--- a/packages/svelte/tests/hydration/samples/claim-comment/_before.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!--ssr:0--><div><!-- test1 --></div>
-p
-<div><!-- test1 --><!-- test2 --></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/claim-static/_before.html b/packages/svelte/tests/hydration/samples/claim-static/_before.html
deleted file mode 100644
index bfbe85f59c..0000000000
--- a/packages/svelte/tests/hydration/samples/claim-static/_before.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!--ssr:0--><div>hello</div>
-
-<div><div>bye</div></div>
-
-<div>
-	<div>aaa</div>
-	<div>bbb</div>
-</div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/claim-text/_before.html b/packages/svelte/tests/hydration/samples/claim-text/_before.html
deleted file mode 100644
index 98702233ff..0000000000
--- a/packages/svelte/tests/hydration/samples/claim-text/_before.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!--ssr:0-->
-<!--ssr:1--><p>This <code>p</code> and the <code>slot</code> below are direct children of the root.</p>
-<!--ssr:2--><main>There should be one</main><!--ssr:2-->
-<!--ssr:1-->
-<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/component-in-element/_before.html b/packages/svelte/tests/hydration/samples/component-in-element/_before.html
deleted file mode 100644
index c95522231e..0000000000
--- a/packages/svelte/tests/hydration/samples/component-in-element/_before.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!--ssr:0--><div>
-	<!--ssr:1--><p>nested</p><!--ssr:1-->
-</div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/component/_before.html b/packages/svelte/tests/hydration/samples/component/_before.html
deleted file mode 100644
index bc73093efd..0000000000
--- a/packages/svelte/tests/hydration/samples/component/_before.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!--ssr:0-->
-<!--ssr:1--><p>nested</p><!--ssr:1-->
-<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/dynamic-text-changed/_before.html b/packages/svelte/tests/hydration/samples/dynamic-text-changed/_before.html
deleted file mode 100644
index f97ad9726b..0000000000
--- a/packages/svelte/tests/hydration/samples/dynamic-text-changed/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><h1>Hello world!</h1><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/dynamic-text-changed/_config.js b/packages/svelte/tests/hydration/samples/dynamic-text-changed/_config.js
index 4c00df87e5..9852c25463 100644
--- a/packages/svelte/tests/hydration/samples/dynamic-text-changed/_config.js
+++ b/packages/svelte/tests/hydration/samples/dynamic-text-changed/_config.js
@@ -1,6 +1,10 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {
+		name: 'world'
+	},
+
 	props: {
 		name: 'everybody'
 	},
diff --git a/packages/svelte/tests/hydration/samples/dynamic-text-changed/_after.html b/packages/svelte/tests/hydration/samples/dynamic-text-changed/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/dynamic-text-changed/_after.html
rename to packages/svelte/tests/hydration/samples/dynamic-text-changed/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/dynamic-text-nil/_before.html b/packages/svelte/tests/hydration/samples/dynamic-text-nil/_before.html
deleted file mode 100644
index 7508e31db6..0000000000
--- a/packages/svelte/tests/hydration/samples/dynamic-text-nil/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><hr><hr> <p></p> <p></p><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/dynamic-text/_before.html b/packages/svelte/tests/hydration/samples/dynamic-text/_before.html
deleted file mode 100644
index f97ad9726b..0000000000
--- a/packages/svelte/tests/hydration/samples/dynamic-text/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><h1>Hello world!</h1><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/each-block-arg-clash/_before.html b/packages/svelte/tests/hydration/samples/each-block-arg-clash/_before.html
deleted file mode 100644
index 184a66ac72..0000000000
--- a/packages/svelte/tests/hydration/samples/each-block-arg-clash/_before.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!--ssr:0--><ul><!--ssr:1-->
-	<!--ssr:2--><li>animal</li><!--ssr:2-->
-	<!--ssr:3--><li>vegetable</li><!--ssr:3-->
-	<!--ssr:4--><li>mineral</li><!--ssr:4-->
-	<!--ssr:1--></ul><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_before.html b/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_before.html
deleted file mode 100644
index 215e1e3c8e..0000000000
--- a/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_before.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!--ssr:0--><!--ssr:1--><!--ssr:each_else--><p>empty</p><!--ssr:1-->
-<!--ssr:2--><!--ssr:3--><p>a</p><!--ssr:3--><!--ssr:2--><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_config.js b/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_config.js
index f47bee71df..0b7783bd1c 100644
--- a/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_config.js
+++ b/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_config.js
@@ -1,3 +1,13 @@
 import { test } from '../../test';
 
-export default test({});
+export default test({
+	server_props: {
+		items1: [],
+		items2: [{ name: 'a' }]
+	},
+
+	props: {
+		items1: [{ name: 'a' }],
+		items2: []
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_after.html b/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_after.html
rename to packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/main.svelte b/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/main.svelte
index 835f726435..c130034bbe 100644
--- a/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/main.svelte
+++ b/packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/main.svelte
@@ -1,6 +1,5 @@
 <script>
-	let items1 = $state(typeof window !== 'undefined' ? [{name: 'a'}]: []);
-	let items2 = $state(typeof window === 'undefined' ? [{name: 'a'}]: []);
+	let { items1, items2 } = $props();
 </script>
 
 {#each items1 as item}
diff --git a/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_before.html b/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_before.html
deleted file mode 100644
index f480ea096d..0000000000
--- a/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_before.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!--ssr:0--><ul><!--ssr:1--><!--ssr:7--><li>a</li><!--ssr:7--><!--ssr:8--><li>b</li><!--ssr:8--><!--ssr:1--></ul>
-<ul><!--ssr:2--><!--ssr:9--><li>a</li><!--ssr:9--><!--ssr:10--><li>b</li><!--ssr:10--><!--ssr:2--></ul>
-<ul><!--ssr:3--><!--ssr:11--><li>a</li><!--ssr:11--><!--ssr:12--><li>b</li><!--ssr:12--><!--ssr:3--></ul>
-<!--ssr:4--><!--ssr:13--><li>a</li>
-<li>a</li><!--ssr:13--><!--ssr:14--><li>b</li>
-<li>b</li><!--ssr:14--><!--ssr:4-->
-<!--ssr:5--><!--ssr:15--><li>a</li>
-<li>a</li><!--ssr:15--><!--ssr:16--><li>b</li>
-<li>b</li><!--ssr:16--><!--ssr:5-->
-<!--ssr:6--><!--ssr:17--><li>a</li>
-<li>a</li><!--ssr:17--><!--ssr:18--><li>b</li>
-<li>b</li><!--ssr:18--><!--ssr:6--><!--ssr:0--></div>
diff --git a/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_config.js b/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_config.js
index 5b0adcfd86..fa28dbe009 100644
--- a/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_config.js
+++ b/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_config.js
@@ -1,6 +1,14 @@
 import { assert_ok, test } from '../../test';
 
 export default test({
+	server_props: {
+		items: [{ name: 'a' }, { name: 'b' }]
+	},
+
+	props: {
+		items: [{ name: 'a' }]
+	},
+
 	snapshot(target) {
 		const ul = target.querySelector('ul');
 		assert_ok(ul);
diff --git a/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_after.html b/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_after.html
rename to packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/main.svelte b/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/main.svelte
index e2ff0750e3..093e59cef9 100644
--- a/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/main.svelte
+++ b/packages/svelte/tests/hydration/samples/each-block-less-nodes-on-client/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	let items = $state(typeof window !== 'undefined' ? [{name: 'a'}]: [{name: 'a'}, {name: 'b'}]);
+	let { items } = $props();
 </script>
 
 <ul>
diff --git a/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_before.html b/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_before.html
deleted file mode 100644
index 7c3233df17..0000000000
--- a/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_before.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!--ssr:0--><ul><!--ssr:1--><!--ssr:7--><li>a</li><!--ssr:7--><!--ssr:1--></ul>
-<ul><!--ssr:2--><!--ssr:8--><li>a</li><!--ssr:8--><!--ssr:2--></ul>
-<ul><!--ssr:3--><!--ssr:9--><li>a</li><!--ssr:9--><!--ssr:3--></ul>
-<!--ssr:4--><!--ssr:10--><li>a</li>
-<li>a</li><!--ssr:10--><!--ssr:4-->
-<!--ssr:5--><!--ssr:11--><li>a</li>
-<li>a</li><!--ssr:11--><!--ssr:5-->
-<!--ssr:6--><!--ssr:12--><li>a</li>
-<li>a</li><!--ssr:12--><!--ssr:6--><!--ssr:0--></div>
diff --git a/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_config.js b/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_config.js
index 5b0adcfd86..baffef3b8b 100644
--- a/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_config.js
+++ b/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_config.js
@@ -1,6 +1,14 @@
 import { assert_ok, test } from '../../test';
 
 export default test({
+	server_props: {
+		items: [{ name: 'x' }]
+	},
+
+	props: {
+		items: [{ name: 'a' }, { name: 'b' }]
+	},
+
 	snapshot(target) {
 		const ul = target.querySelector('ul');
 		assert_ok(ul);
diff --git a/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_after.html b/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_after.html
rename to packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/main.svelte b/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/main.svelte
index 7df2b52e2e..093e59cef9 100644
--- a/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/main.svelte
+++ b/packages/svelte/tests/hydration/samples/each-block-more-nodes-on-client/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	let items = $state(typeof window === 'undefined' ? [{name: 'x'}]: [{name: 'a'}, {name: 'b'}]);
+	let { items } = $props();
 </script>
 
 <ul>
diff --git a/packages/svelte/tests/hydration/samples/each-block/_before.html b/packages/svelte/tests/hydration/samples/each-block/_before.html
deleted file mode 100644
index 184a66ac72..0000000000
--- a/packages/svelte/tests/hydration/samples/each-block/_before.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!--ssr:0--><ul><!--ssr:1-->
-	<!--ssr:2--><li>animal</li><!--ssr:2-->
-	<!--ssr:3--><li>vegetable</li><!--ssr:3-->
-	<!--ssr:4--><li>mineral</li><!--ssr:4-->
-	<!--ssr:1--></ul><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/each-else/_before.html b/packages/svelte/tests/hydration/samples/each-else/_before.html
deleted file mode 100644
index 3335979fb8..0000000000
--- a/packages/svelte/tests/hydration/samples/each-else/_before.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!--ssr:0--><h1>Hello, world</h1>
-<!--ssr:1--><p>foo</p><!--ssr:1-->
-<div><!--ssr:2--><p>foo</p><!--ssr:2--></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-added/_before.html b/packages/svelte/tests/hydration/samples/element-attribute-added/_before.html
deleted file mode 100644
index fec75ee427..0000000000
--- a/packages/svelte/tests/hydration/samples/element-attribute-added/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><div class="foo"></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-added/_config.js b/packages/svelte/tests/hydration/samples/element-attribute-added/_config.js
index 3972adadfe..e432ceb468 100644
--- a/packages/svelte/tests/hydration/samples/element-attribute-added/_config.js
+++ b/packages/svelte/tests/hydration/samples/element-attribute-added/_config.js
@@ -1,6 +1,8 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {},
+
 	props: {
 		className: 'bar'
 	},
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-added/_after.html b/packages/svelte/tests/hydration/samples/element-attribute-added/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/element-attribute-added/_after.html
rename to packages/svelte/tests/hydration/samples/element-attribute-added/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-changed/_before.html b/packages/svelte/tests/hydration/samples/element-attribute-changed/_before.html
deleted file mode 100644
index fec75ee427..0000000000
--- a/packages/svelte/tests/hydration/samples/element-attribute-changed/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><div class="foo"></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-changed/_config.js b/packages/svelte/tests/hydration/samples/element-attribute-changed/_config.js
index 3972adadfe..fe02d429b3 100644
--- a/packages/svelte/tests/hydration/samples/element-attribute-changed/_config.js
+++ b/packages/svelte/tests/hydration/samples/element-attribute-changed/_config.js
@@ -1,6 +1,10 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {
+		className: 'foo'
+	},
+
 	props: {
 		className: 'bar'
 	},
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-changed/_after.html b/packages/svelte/tests/hydration/samples/element-attribute-changed/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/element-attribute-changed/_after.html
rename to packages/svelte/tests/hydration/samples/element-attribute-changed/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-removed/_before.html b/packages/svelte/tests/hydration/samples/element-attribute-removed/_before.html
deleted file mode 100644
index 4bb2d47ff3..0000000000
--- a/packages/svelte/tests/hydration/samples/element-attribute-removed/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><div id="foo"></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-removed/_config.js b/packages/svelte/tests/hydration/samples/element-attribute-removed/_config.js
index a6b6b845f7..62c72f3f7c 100644
--- a/packages/svelte/tests/hydration/samples/element-attribute-removed/_config.js
+++ b/packages/svelte/tests/hydration/samples/element-attribute-removed/_config.js
@@ -1,6 +1,10 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {
+		id: 'foo'
+	},
+
 	snapshot(target) {
 		const div = target.querySelector('div');
 
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-removed/_after.html b/packages/svelte/tests/hydration/samples/element-attribute-removed/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/element-attribute-removed/_after.html
rename to packages/svelte/tests/hydration/samples/element-attribute-removed/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-unchanged-2/_before.html b/packages/svelte/tests/hydration/samples/element-attribute-unchanged-2/_before.html
deleted file mode 100644
index 433df7f9d1..0000000000
--- a/packages/svelte/tests/hydration/samples/element-attribute-unchanged-2/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><div class="bar" foo="bar"></div> <div class="bar" foo="bar"></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-unchanged/_before.html b/packages/svelte/tests/hydration/samples/element-attribute-unchanged/_before.html
deleted file mode 100644
index fec75ee427..0000000000
--- a/packages/svelte/tests/hydration/samples/element-attribute-unchanged/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><div class="foo"></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-nested-sibling/_before.html b/packages/svelte/tests/hydration/samples/element-nested-sibling/_before.html
deleted file mode 100644
index 78323f1806..0000000000
--- a/packages/svelte/tests/hydration/samples/element-nested-sibling/_before.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!--ssr:0--><p><span>1</span>
-	<!--ssr:1-->
-	<!--ssr:if:true--><code>2</code><!--ssr:1--></p><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-nested/_before.html b/packages/svelte/tests/hydration/samples/element-nested/_before.html
deleted file mode 100644
index a3bf64142d..0000000000
--- a/packages/svelte/tests/hydration/samples/element-nested/_before.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!--ssr:0--><div>
-	<p>nested</p>
-</div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-ref/_before.html b/packages/svelte/tests/hydration/samples/element-ref/_before.html
deleted file mode 100644
index f97ad9726b..0000000000
--- a/packages/svelte/tests/hydration/samples/element-ref/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><h1>Hello world!</h1><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/event-handler/_before.html b/packages/svelte/tests/hydration/samples/event-handler/_before.html
deleted file mode 100644
index 833699217c..0000000000
--- a/packages/svelte/tests/hydration/samples/event-handler/_before.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!--ssr:0--><button>click me</button>
-<!--ssr:1-->
-<!--ssr:if:false-->
-<!--ssr:1-->
-<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/expression-sibling/_before.html b/packages/svelte/tests/hydration/samples/expression-sibling/_before.html
deleted file mode 100644
index 0ce5257133..0000000000
--- a/packages/svelte/tests/hydration/samples/expression-sibling/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><p>1 2 <span>3</span></p><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/head-html-and-component/_before.html b/packages/svelte/tests/hydration/samples/head-html-and-component/_before.html
deleted file mode 100644
index bb7c602edf..0000000000
--- a/packages/svelte/tests/hydration/samples/head-html-and-component/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><!--ssr:1--><!--ssr:1--><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/head-html-and-component/_before_head.html b/packages/svelte/tests/hydration/samples/head-html-and-component/_before_head.html
deleted file mode 100644
index cc1d406e3d..0000000000
--- a/packages/svelte/tests/hydration/samples/head-html-and-component/_before_head.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!--ssr:0-->
-<!--ssr:1--><meta name="main_html" content="main_html"><!--ssr:1-->
-<meta name="main" content="main">
-<!--ssr:2--><!--ssr:3--><meta name="head_nested_html" content="head_nested_html"><!--ssr:3-->
-<meta name="head_nested" content="head_nested"><!--ssr:2--><!--ssr:4--><meta name="nested_html" content="nested_html"><!--ssr:4-->
-<meta name="nested" content="nested"><!--ssr:0-->
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/head-meta-hydrate-duplicate/_before.html b/packages/svelte/tests/hydration/samples/head-meta-hydrate-duplicate/_before.html
deleted file mode 100644
index 7217379ee6..0000000000
--- a/packages/svelte/tests/hydration/samples/head-meta-hydrate-duplicate/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><div>Just a dummy page.</div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/head-meta-hydrate-duplicate/_before_head.html b/packages/svelte/tests/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
deleted file mode 100644
index 040469d618..0000000000
--- a/packages/svelte/tests/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<title>Some Title</title><!--ssr:0-->
-<link rel="canonical" href="/">
-<meta name="description" content="some description">
-<meta name="keywords" content="some keywords"><!--ssr:0-->
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/html-tag-hydration/_after.html b/packages/svelte/tests/hydration/samples/html-tag-hydration/_after.html
deleted file mode 100644
index b85905ec0b..0000000000
--- a/packages/svelte/tests/hydration/samples/html-tag-hydration/_after.html
+++ /dev/null
@@ -1 +0,0 @@
-1 2 3
diff --git a/packages/svelte/tests/hydration/samples/html-tag-hydration/_before.html b/packages/svelte/tests/hydration/samples/html-tag-hydration/_before.html
deleted file mode 100644
index 2d1b0bd6c3..0000000000
--- a/packages/svelte/tests/hydration/samples/html-tag-hydration/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0-->&nbsp;1 <!--ssr:1-->2<!--ssr:1--> 3<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/if-block-anchor/_before.html b/packages/svelte/tests/hydration/samples/if-block-anchor/_before.html
deleted file mode 100644
index 163050a1a6..0000000000
--- a/packages/svelte/tests/hydration/samples/if-block-anchor/_before.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!--ssr:0--><div><!--ssr:1--><!--ssr:if:true--><p>foo!</p><!--ssr:1-->
-	<!--ssr:2--><!--ssr:if:true--><p>bar!</p><!--ssr:2--></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/if-block-empty/_after.html b/packages/svelte/tests/hydration/samples/if-block-empty/_after.html
deleted file mode 100644
index 9c71a6ffee..0000000000
--- a/packages/svelte/tests/hydration/samples/if-block-empty/_after.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!--ssr:0-->
-<!--ssr:1-->
-<!--ssr:if:true-->x<!--ssr:1-->
-<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/if-block-empty/_before.html b/packages/svelte/tests/hydration/samples/if-block-empty/_before.html
deleted file mode 100644
index 88c34c8f29..0000000000
--- a/packages/svelte/tests/hydration/samples/if-block-empty/_before.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!--ssr:0-->
-<!--ssr:1-->
-<!--ssr:if:true--><!--ssr:1-->
-<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/if-block-empty/_config.js b/packages/svelte/tests/hydration/samples/if-block-empty/_config.js
index f47bee71df..78f00a1b51 100644
--- a/packages/svelte/tests/hydration/samples/if-block-empty/_config.js
+++ b/packages/svelte/tests/hydration/samples/if-block-empty/_config.js
@@ -1,3 +1,11 @@
 import { test } from '../../test';
 
-export default test({});
+export default test({
+	server_props: {
+		foo: ''
+	},
+
+	props: {
+		foo: 'x'
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/if-block-false/_before.html b/packages/svelte/tests/hydration/samples/if-block-false/_before.html
deleted file mode 100644
index 7911a5ef45..0000000000
--- a/packages/svelte/tests/hydration/samples/if-block-false/_before.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!--ssr:0--><p>before</p>
-<!--ssr:1-->
-<!--ssr:if:false-->
-<!--ssr:1-->
-<p>after</p><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/if-block-mismatch/_after.html b/packages/svelte/tests/hydration/samples/if-block-mismatch/_after.html
deleted file mode 100644
index b98a7cb541..0000000000
--- a/packages/svelte/tests/hydration/samples/if-block-mismatch/_after.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><!--ssr:1--><!--ssr:if:false--><p>foo</p><!--ssr:1--><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/if-block-mismatch/_before.html b/packages/svelte/tests/hydration/samples/if-block-mismatch/_before.html
deleted file mode 100644
index fe8876acb7..0000000000
--- a/packages/svelte/tests/hydration/samples/if-block-mismatch/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><!--ssr:1--><!--ssr:if:false--><p>bar</p><!--ssr:1--><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/if-block-mismatch/_config.js b/packages/svelte/tests/hydration/samples/if-block-mismatch/_config.js
index 9bf1e9b276..f93877415f 100644
--- a/packages/svelte/tests/hydration/samples/if-block-mismatch/_config.js
+++ b/packages/svelte/tests/hydration/samples/if-block-mismatch/_config.js
@@ -3,5 +3,13 @@ import { test } from '../../test';
 // even {#if true} or {#if false} should be kept as an if block, because it could be {#if browser} originally,
 // which is then different between client and server.
 export default test({
+	server_props: {
+		condition: false
+	},
+
+	props: {
+		condition: true
+	},
+
 	trim_whitespace: false
 });
diff --git a/packages/svelte/tests/hydration/samples/if-block-mismatch/main.svelte b/packages/svelte/tests/hydration/samples/if-block-mismatch/main.svelte
index 4059553992..c6799c5f95 100644
--- a/packages/svelte/tests/hydration/samples/if-block-mismatch/main.svelte
+++ b/packages/svelte/tests/hydration/samples/if-block-mismatch/main.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { condition } = $props();
+</script>
+
 {#if true}
 	<p>foo</p>
 {:else}
diff --git a/packages/svelte/tests/hydration/samples/if-block-update/_before.html b/packages/svelte/tests/hydration/samples/if-block-update/_before.html
deleted file mode 100644
index 5821b859a7..0000000000
--- a/packages/svelte/tests/hydration/samples/if-block-update/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><!--ssr:1--><!--ssr:if:true--><p>foo!</p><!--ssr:1--> <!--ssr:2--><!--ssr:2--><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/if-block/_before.html b/packages/svelte/tests/hydration/samples/if-block/_before.html
deleted file mode 100644
index ebd6a90aad..0000000000
--- a/packages/svelte/tests/hydration/samples/if-block/_before.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!--ssr:0-->
-<!--ssr:1-->
-<!--ssr:if:true--><p>foo!</p><!--ssr:1-->
-<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/ignore-mismatched-href/_before.html b/packages/svelte/tests/hydration/samples/ignore-mismatched-href/_before.html
deleted file mode 100644
index afeffd5eb6..0000000000
--- a/packages/svelte/tests/hydration/samples/ignore-mismatched-href/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><a href="/bar">foo</a><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/ignore-mismatched-href/_config.js b/packages/svelte/tests/hydration/samples/ignore-mismatched-href/_config.js
index cc24163f2c..ce81251e5e 100644
--- a/packages/svelte/tests/hydration/samples/ignore-mismatched-href/_config.js
+++ b/packages/svelte/tests/hydration/samples/ignore-mismatched-href/_config.js
@@ -1,6 +1,14 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {
+		browser: false
+	},
+
+	props: {
+		browser: true
+	},
+
 	test(assert, target) {
 		assert.equal(target.querySelector('a')?.getAttribute('href'), '/bar');
 	}
diff --git a/packages/svelte/tests/hydration/samples/ignore-mismatched-href/main.svelte b/packages/svelte/tests/hydration/samples/ignore-mismatched-href/main.svelte
index 5dcd4d4002..de78109c00 100644
--- a/packages/svelte/tests/hydration/samples/ignore-mismatched-href/main.svelte
+++ b/packages/svelte/tests/hydration/samples/ignore-mismatched-href/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	let browser = typeof window !== 'undefined';
+	let { browser } = $props();
 </script>
 
 <a href={browser ? '/foo': '/bar'}>foo</a>
diff --git a/packages/svelte/tests/hydration/samples/noscript/_before.html b/packages/svelte/tests/hydration/samples/noscript/_before.html
deleted file mode 100644
index 34ac9d9bc3..0000000000
--- a/packages/svelte/tests/hydration/samples/noscript/_before.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!--ssr:0--><noscript>JavaScript is required for this site.</noscript>
-<h1>Hello!</h1><p>Count: 0</p><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/noscript/_after.html b/packages/svelte/tests/hydration/samples/noscript/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/noscript/_after.html
rename to packages/svelte/tests/hydration/samples/noscript/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/raw-mismatch/_after.html b/packages/svelte/tests/hydration/samples/raw-mismatch/_after.html
deleted file mode 100644
index d28ae350fb..0000000000
--- a/packages/svelte/tests/hydration/samples/raw-mismatch/_after.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><!--ssr:1--><p>foo</p><!--ssr:1--><!--ssr:0-->
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/raw-mismatch/_before.html b/packages/svelte/tests/hydration/samples/raw-mismatch/_before.html
deleted file mode 100644
index 4c04a81f66..0000000000
--- a/packages/svelte/tests/hydration/samples/raw-mismatch/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><!--ssr:1--><p>bar</p><!--ssr:1--><!--ssr:0-->
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/raw-repair/_after.html b/packages/svelte/tests/hydration/samples/raw-repair/_after.html
deleted file mode 100644
index 31cdc12015..0000000000
--- a/packages/svelte/tests/hydration/samples/raw-repair/_after.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<p><p>invalid</p></p>
-<p><p>invalid</p></p>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/raw-repair/_before.html b/packages/svelte/tests/hydration/samples/raw-repair/_before.html
deleted file mode 100644
index 3e2942c4be..0000000000
--- a/packages/svelte/tests/hydration/samples/raw-repair/_before.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!--ssr:0--><!--ssr:1--><p><!--ssr:2--></p>
-<p>invalid</p><!--ssr:2--><p></p><!--ssr:1-->
-<p><!--ssr:3--></p>
-<p>invalid</p>
-<!--ssr:3-->
-<p></p><!--ssr:0-->
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/raw-svg/_before.html b/packages/svelte/tests/hydration/samples/raw-svg/_before.html
deleted file mode 100644
index 7ec08fa13f..0000000000
--- a/packages/svelte/tests/hydration/samples/raw-svg/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><svg><!--ssr:1--><circle cx="200" cy="500" r="200"></circle><!--ssr:1--></svg><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/raw-with-empty-line-at-top/_before.html b/packages/svelte/tests/hydration/samples/raw-with-empty-line-at-top/_before.html
deleted file mode 100644
index 6aea13491a..0000000000
--- a/packages/svelte/tests/hydration/samples/raw-with-empty-line-at-top/_before.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!--ssr:0--><div>before</div>
-<br />
-
-<!--ssr:1-->
-<!--ssr:2--><!--ssr:3-->a<!--ssr:3--><!--ssr:2-->
-<!--ssr:4--><!--ssr:5-->b<!--ssr:5--><!--ssr:4-->
-<!--ssr:6--><!--ssr:7-->c<!--ssr:7--><!--ssr:6-->
-<!--ssr:1-->
-
-<div>after</div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/raw/_before.html b/packages/svelte/tests/hydration/samples/raw/_before.html
deleted file mode 100644
index be89227a9b..0000000000
--- a/packages/svelte/tests/hydration/samples/raw/_before.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!--ssr:0-->
-<!--ssr:1--><p>this is some html</p>
-<p>and so is this</p><!--ssr:1-->
-<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/repairs-apparent-static-content/_after.html b/packages/svelte/tests/hydration/samples/repairs-apparent-static-content/_after.html
deleted file mode 100644
index d20b3ed496..0000000000
--- a/packages/svelte/tests/hydration/samples/repairs-apparent-static-content/_after.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><h1>Hello client!</h1><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/repairs-apparent-static-content/_before.html b/packages/svelte/tests/hydration/samples/repairs-apparent-static-content/_before.html
deleted file mode 100644
index f97ad9726b..0000000000
--- a/packages/svelte/tests/hydration/samples/repairs-apparent-static-content/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><h1>Hello world!</h1><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/text-empty/_before.html b/packages/svelte/tests/hydration/samples/text-empty/_before.html
deleted file mode 100644
index a8cad39ae7..0000000000
--- a/packages/svelte/tests/hydration/samples/text-empty/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><!--ssr:0-->
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/text-empty/_config.js b/packages/svelte/tests/hydration/samples/text-empty/_config.js
index f47bee71df..4067b68b04 100644
--- a/packages/svelte/tests/hydration/samples/text-empty/_config.js
+++ b/packages/svelte/tests/hydration/samples/text-empty/_config.js
@@ -1,3 +1,11 @@
 import { test } from '../../test';
 
-export default test({});
+export default test({
+	server_props: {
+		x: ''
+	},
+
+	props: {
+		x: 'x'
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/text-empty/_after.html b/packages/svelte/tests/hydration/samples/text-empty/_expected.html
similarity index 100%
rename from packages/svelte/tests/hydration/samples/text-empty/_after.html
rename to packages/svelte/tests/hydration/samples/text-empty/_expected.html
diff --git a/packages/svelte/tests/hydration/samples/text-empty/main.svelte b/packages/svelte/tests/hydration/samples/text-empty/main.svelte
index d88ec4833c..90451138d3 100644
--- a/packages/svelte/tests/hydration/samples/text-empty/main.svelte
+++ b/packages/svelte/tests/hydration/samples/text-empty/main.svelte
@@ -1,5 +1,5 @@
 <script>
-    let x = typeof window === 'undefined' ? '' : 'x'
+	let { x } = $props();
 </script>
 
 {x}
diff --git a/packages/svelte/tests/hydration/samples/text-fallback/_before.html b/packages/svelte/tests/hydration/samples/text-fallback/_before.html
deleted file mode 100644
index d5d3925b3b..0000000000
--- a/packages/svelte/tests/hydration/samples/text-fallback/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0--><!--ssr:1--><div><!--ssr:2--><div slot="foo">foo override</div><!--ssr:2--> <!--ssr:3-->default<!--ssr:3--></div><!--ssr:1--><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/top-level-text/_before.html b/packages/svelte/tests/hydration/samples/top-level-text/_before.html
deleted file mode 100644
index 8f4d4886d4..0000000000
--- a/packages/svelte/tests/hydration/samples/top-level-text/_before.html
+++ /dev/null
@@ -1 +0,0 @@
-<!--ssr:0-->Text<!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/test.ts b/packages/svelte/tests/hydration/test.ts
index c9db5d7e6f..460d589695 100644
--- a/packages/svelte/tests/hydration/test.ts
+++ b/packages/svelte/tests/hydration/test.ts
@@ -4,14 +4,14 @@ import * as fs from 'node:fs';
 import { assert } from 'vitest';
 import { compile_directory, should_update_expected } from '../helpers.js';
 import { assert_html_equal } from '../html_equal.js';
-import { suite, assert_ok } from '../suite.js';
+import { suite, assert_ok, type BaseTest } from '../suite.js';
 import { createClassComponent } from 'svelte/legacy';
+import { render } from 'svelte/server';
 import type { CompileOptions } from '#compiler';
 
-interface HydrationTest {
-	solo?: boolean;
-	skip?: boolean;
+interface HydrationTest extends BaseTest {
 	load_compiled?: boolean;
+	server_props?: Record<string, any>;
 	props?: Record<string, any>;
 	compileOptions?: Partial<CompileOptions>;
 	/**
@@ -53,14 +53,16 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 	const target = window.document.body;
 	const head = window.document.head;
 
-	target.innerHTML = read_html(`${cwd}/_before.html`);
+	const rendered = render((await import(`${cwd}/_output/server/main.svelte.js`)).default, {
+		props: config.server_props ?? config.props ?? {}
+	});
 
-	let before_head;
-	try {
-		before_head = read_html(`${cwd}/_before_head.html`);
-		head.innerHTML = before_head;
-	} catch (err) {
-		// continue regardless of error
+	fs.writeFileSync(`${cwd}/_output/body.html`, rendered.html + '\n');
+	target.innerHTML = rendered.html;
+
+	if (rendered.head) {
+		fs.writeFileSync(`${cwd}/_output/head.html`, rendered.head + '\n');
+		head.innerHTML = rendered.head;
 	}
 
 	config.before_test?.();
@@ -95,29 +97,16 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 			assert.ok(!got_hydration_error, 'Unexpected hydration error');
 		}
 
-		try {
-			assert_html_equal(target.innerHTML, read_html(`${cwd}/_after.html`, `${cwd}/_before.html`));
-		} catch (error) {
-			if (should_update_expected()) {
-				fs.writeFileSync(`${cwd}/_after.html`, target.innerHTML);
-				console.log(`Updated ${cwd}/_after.html.`);
-			} else {
-				throw error;
-			}
-		}
+		const expected = fs.existsSync(`${cwd}/_expected.html`)
+			? read_html(`${cwd}/_expected.html`)
+			: rendered.html;
+		assert_html_equal(target.innerHTML, expected);
 
-		if (before_head) {
-			try {
-				const after_head = read_html(`${cwd}/_after_head.html`, `${cwd}/_before_head.html`);
-				assert_html_equal(head.innerHTML, after_head);
-			} catch (error) {
-				if (should_update_expected()) {
-					fs.writeFileSync(`${cwd}/_after_head.html`, head.innerHTML);
-					console.log(`Updated ${cwd}/_after_head.html.`);
-				} else {
-					throw error;
-				}
-			}
+		if (rendered.head) {
+			const expected = fs.existsSync(`${cwd}/_expected_head.html`)
+				? read_html(`${cwd}/_expected_head.html`)
+				: rendered.head;
+			assert_html_equal(head.innerHTML, expected);
 		}
 
 		if (config.snapshot) {