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

Author: Rich-Harris

.changeset/serious-gorillas-eat.md

@@ -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) {

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

@@ -0,0 +1 @@
+<!--ssr:0--><input> <p>Hello world!</p><!--ssr:0-->

packages/svelte/tests/hydration/samples/basic/_before.html

@@ -1,6 +1,10 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {
+		name: 'world'
+	},
+
 	props: {
 		name: 'everybody'
 	},

packages/svelte/tests/hydration/samples/binding-input/_before.html

@@ -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: []
+	}
+});

packages/svelte/tests/hydration/samples/binding-input/_expected.html

@@ -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}

packages/svelte/tests/hydration/samples/claim-comment/_before.html

@@ -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);

packages/svelte/tests/hydration/samples/claim-static/_before.html

@@ -1,5 +1,5 @@
 <script>
-	let items = $state(typeof window !== 'undefined' ? [{name: 'a'}]: [{name: 'a'}, {name: 'b'}]);
+	let { items } = $props();
 </script>
 
 <ul>

packages/svelte/tests/hydration/samples/claim-text/_before.html

@@ -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);

packages/svelte/tests/hydration/samples/component-in-element/_before.html

@@ -1,5 +1,5 @@
 <script>
-	let items = $state(typeof window === 'undefined' ? [{name: 'x'}]: [{name: 'a'}, {name: 'b'}]);
+	let { items } = $props();
 </script>
 
 <ul>

packages/svelte/tests/hydration/samples/component/_before.html

@@ -1,6 +1,8 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {},
+
 	props: {
 		className: 'bar'
 	},

packages/svelte/tests/hydration/samples/dynamic-text-changed/_before.html

@@ -1,6 +1,10 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {
+		className: 'foo'
+	},
+
 	props: {
 		className: 'bar'
 	},

packages/svelte/tests/hydration/samples/dynamic-text-changed/_config.js

@@ -1,6 +1,10 @@
 import { test } from '../../test';
 
 export default test({
+	server_props: {
+		id: 'foo'
+	},
+
 	snapshot(target) {
 		const div = target.querySelector('div');
 

packages/svelte/tests/hydration/samples/dynamic-text-changed/_after.html renamed to packages/svelte/tests/hydration/samples/dynamic-text-changed/_expected.html

@@ -1,3 +1,11 @@
 import { test } from '../../test';
 
-export default test({});
+export default test({
+	server_props: {
+		foo: ''
+	},
+
+	props: {
+		foo: 'x'
+	}
+});

packages/svelte/tests/hydration/samples/dynamic-text-nil/_before.html

@@ -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
 });

packages/svelte/tests/hydration/samples/dynamic-text/_before.html

@@ -1,3 +1,7 @@
+<script>
+	let { condition } = $props();
+</script>
+
 {#if true}
 	<p>foo</p>
 {:else}

packages/svelte/tests/hydration/samples/each-block-arg-clash/_before.html

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

packages/svelte/tests/hydration/samples/each-block-fallback-mismatch/_before.html

@@ -1,5 +1,5 @@
 <script>
-	let browser = typeof window !== 'undefined';
+	let { browser } = $props();
 </script>
 
 <a href={browser ? '/foo': '/bar'}>foo</a>