fix: hydrate if blocks correctly

We were not using the correct node to analyze the if block marker

Fixes #17751
if-block-hydration-fix
Simon Holthausen 1 day ago
parent c98ce6945d
commit a3963f2780

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: hydrate if blocks correctly

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

@ -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, '<p id="else-branch">else branch</p>');
}
});

@ -0,0 +1,5 @@
{#if await false}
<p id="if-branch">if branch</p>
{:else}
<p id="else-branch">{await 'else branch'}</p>
{/if}
Loading…
Cancel
Save