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 <rich.harris@vercel.com>
pull/12106/head
Paolo Ricciuti 2 weeks ago committed by GitHub
parent 6a3e293207
commit be9b0a275a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

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

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

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

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

@ -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}
Loading…
Cancel
Save