diff --git a/CHANGELOG.md b/CHANGELOG.md index f6af419913d6..25c0aa209326 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Expose compiler version in dev events ([#4047](https://github.com/sveltejs/svelte/issues/4047)) * Don't run actions before their element is in the document ([#4166](https://github.com/sveltejs/svelte/issues/4166)) * Fix reactive assignments with destructuring and stores where the destructured value should be undefined ([#4170](https://github.com/sveltejs/svelte/issues/4170)) +* Fix hydrating `{:else}` in `{#each}` ([#4202](https://github.com/sveltejs/svelte/issues/4202)) * Do not automatically declare variables in reactive declarations when assigning to a member expression ([#4212](https://github.com/sveltejs/svelte/issues/4212)) ## 3.16.7 diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index 5b13b486e61d..4928b5a38cd4 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -264,10 +264,23 @@ export default class EachBlockWrapper extends Wrapper { block.chunks.init.push(b` if (!${this.vars.data_length}) { ${each_block_else} = ${this.else.block.name}(#ctx); + } + `); + + block.chunks.create.push(b` + if (${each_block_else}) { ${each_block_else}.c(); } `); + if (this.renderer.options.hydratable) { + block.chunks.claim.push(b` + if (${each_block_else}) { + ${each_block_else}.l(${parent_nodes}); + } + `); + } + block.chunks.mount.push(b` if (${each_block_else}) { ${each_block_else}.m(${initial_mount_node}, ${initial_anchor_node}); diff --git a/test/hydration/samples/each-else/_after.html b/test/hydration/samples/each-else/_after.html new file mode 100644 index 000000000000..7920500ec3fe --- /dev/null +++ b/test/hydration/samples/each-else/_after.html @@ -0,0 +1,4 @@ +
+ weird +
\ No newline at end of file diff --git a/test/hydration/samples/each-else/_before.html b/test/hydration/samples/each-else/_before.html new file mode 100644 index 000000000000..7920500ec3fe --- /dev/null +++ b/test/hydration/samples/each-else/_before.html @@ -0,0 +1,4 @@ ++ weird +
\ No newline at end of file diff --git a/test/hydration/samples/each-else/main.svelte b/test/hydration/samples/each-else/main.svelte new file mode 100644 index 000000000000..64d3a37c5878 --- /dev/null +++ b/test/hydration/samples/each-else/main.svelte @@ -0,0 +1,15 @@ + + ++ item +
+{:else} ++ weird +
+{/each}