fix: repair each block length even without an else (#12098)

* fix: repair each block length even without an else

* chore: add changeset

* simplify

---------

Co-authored-by: Rich Harris <[email protected]>

Author: paoloricciuti

.changeset/happy-lobsters-lick.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: repair each block length even without an else

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

@@ -151,7 +151,7 @@ export function each(anchor, flags, get_collection, get_key, render_fn, fallback
 		if (hydrating) {
 			var is_else = /** @type {Comment} */ (anchor).data === HYDRATION_END_ELSE;
 
-			if (is_else !== (length === 0)) {
+			if (is_else !== (length === 0) || hydrate_start === undefined) {
 				// hydration mismatch — remove the server-rendered DOM and start over
 				remove(hydrate_nodes);
 				set_hydrating(false);

packages/svelte/tests/hydration/samples/each-block-0-on-server-more-on-client/_config.js

@@ -0,0 +1,20 @@
+import { assert_ok, test } from '../../test';
+
+export default test({
+	server_props: {
+		items: []
+	},
+
+	props: {
+		items: [{ name: 'a' }]
+	},
+
+	snapshot(target) {
+		const ul = target.querySelector('ul');
+		assert_ok(ul);
+
+		return {
+			ul
+		};
+	}
+});

packages/svelte/tests/hydration/samples/each-block-0-on-server-more-on-client/_expected.html

@@ -0,0 +1,9 @@
+<!--ssr:0--><ul><!--ssr:1--><!--ssr:7--><li>a</li><!--ssr:7--><!--ssr:1--></ul>
+<ul><!--ssr:2--><!--ssr:9--><li>a</li><!--ssr:9--><!--ssr:2--></ul>
+<ul><!--ssr:3--><!--ssr:11--><li>a</li><!--ssr:11--><!--ssr:3--></ul>
+<!--ssr:4--><!--ssr:13--><li>a</li>
+<li>a</li><!--ssr:13--><!--ssr:4-->
+<!--ssr:5--><!--ssr:15--><li>a</li>
+<li>a</li><!--ssr:15--><!--ssr:5-->
+<!--ssr:6--><!--ssr:17--><li>a</li>
+<li>a</li><!--ssr:17--><!--ssr:6--><!--ssr:0--></div>

packages/svelte/tests/hydration/samples/each-block-0-on-server-more-on-client/main.svelte

@@ -0,0 +1,32 @@
+<script>
+	let { items } = $props();
+</script>
+
+<ul>
+	{#each items as item}
+		<li>{item.name}</li>
+	{/each}
+</ul>
+<ul>
+	{#each items as item (item)}
+		<li>{item.name}</li>
+	{/each}
+</ul>
+<ul>
+	{#each items as item (item.name)}
+		<li>{item.name}</li>
+	{/each}
+</ul>
+
+{#each items as item}
+	<li>{item.name}</li>
+	<li>{item.name}</li>
+{/each}
+{#each items as item (item)}
+	<li>{item.name}</li>
+	<li>{item.name}</li>
+{/each}
+{#each items as item (item.name)}
+	<li>{item.name}</li>
+	<li>{item.name}</li>
+{/each}