diff --git a/.changeset/long-readers-shine.md b/.changeset/long-readers-shine.md new file mode 100644 index 0000000000..fc0c5a2c5d --- /dev/null +++ b/.changeset/long-readers-shine.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: hydrate if blocks correctly diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js index f2b1cf80a5..44f5fdd1bc 100644 --- a/packages/svelte/src/internal/client/dom/blocks/if.js +++ b/packages/svelte/src/internal/client/dom/blocks/if.js @@ -6,7 +6,8 @@ import { read_hydration_instruction, skip_nodes, set_hydrate_node, - set_hydrating + set_hydrating, + hydrate_node } from '../hydration.js'; import { block } from '../../reactivity/effects.js'; import { BranchManager } from './branches.js'; @@ -19,7 +20,10 @@ import { HYDRATION_START, HYDRATION_START_ELSE } from '../../../../constants.js' * @returns {void} */ export function if_block(node, fn, elseif = false) { + /** @type {TemplateNode | undefined} */ + var marker; if (hydrating) { + marker = hydrate_node; hydrate_next(); } @@ -32,8 +36,7 @@ export function if_block(node, fn, elseif = false) { */ function update_branch(key, fn) { if (hydrating) { - const data = read_hydration_instruction(node); - + var data = read_hydration_instruction(/** @type {TemplateNode} */ (marker)); /** * @type {number | false} * "[" = branch 0, "[1" = branch 1, "[2" = branch 2, ..., "[!" = else (false) diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-else/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if-else/_config.js new file mode 100644 index 0000000000..0a9c74fe65 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-if-else/_config.js @@ -0,0 +1,17 @@ +import { tick } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['hydrate'], + + async test({ assert, target }) { + const e = target.querySelector('#else-branch'); + + assert.equal(e?.isConnected, true); + + await tick(); + + assert.equal(e?.isConnected, true); + assert.htmlEqual(target.innerHTML, '

else branch

'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-else/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-else/main.svelte new file mode 100644 index 0000000000..e91cdd2a10 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-if-else/main.svelte @@ -0,0 +1,5 @@ +{#if await false} +

if branch

+{:else} +

{await 'else branch'}

+{/if}