Skip to content

Commit 1a0b822

Browse files
authored
fix: always run if block code the first time (#14597)
* fix: always run `if` block code the first time * fix
1 parent 08e2cf2 commit 1a0b822

File tree

7 files changed

+40
-5
lines changed

7 files changed

+40
-5
lines changed

.changeset/rare-cheetahs-laugh.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: always run `if` block code the first time

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
set_hydrating
1010
} from '../hydration.js';
1111
import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
12-
import { HYDRATION_START_ELSE } from '../../../../constants.js';
12+
import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
1313

1414
/**
1515
* @param {TemplateNode} node
@@ -30,8 +30,8 @@ export function if_block(node, fn, elseif = false) {
3030
/** @type {Effect | null} */
3131
var alternate_effect = null;
3232

33-
/** @type {boolean | null} */
34-
var condition = null;
33+
/** @type {UNINITIALIZED | boolean | null} */
34+
var condition = UNINITIALIZED;
3535

3636
var flags = elseif ? EFFECT_TRANSPARENT : 0;
3737

@@ -54,7 +54,7 @@ export function if_block(node, fn, elseif = false) {
5454
if (hydrating) {
5555
const is_else = /** @type {Comment} */ (anchor).data === HYDRATION_START_ELSE;
5656

57-
if (condition === is_else) {
57+
if (!!condition === is_else) {
5858
// Hydration mismatch: remove everything inside the anchor and start fresh.
5959
// This could happen with `{#if browser}...{/if}`, for example
6060
anchor = remove_nodes();
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { test } from '../../test';
2+
3+
// even {#if true} or {#if false} should be kept as an if block, because it could be {#if browser} originally,
4+
// which is then different between client and server.
5+
export default test({
6+
server_props: {
7+
condition: true
8+
},
9+
10+
props: {
11+
condition: false
12+
},
13+
14+
trim_whitespace: false
15+
});
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!--[--><!--[--><!--]--> <div><!----><!----></div> hello<!--]-->
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
let { condition } = $props();
3+
</script>
4+
5+
{#if condition}
6+
<slot />
7+
{/if}
8+
9+
<div>
10+
<slot />
11+
</div>
12+
13+
hello
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!--[--><!--[!--><p>foo</p><!--]--><!--]-->

packages/svelte/tests/hydration/samples/if-block-mismatch/main.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
let { condition } = $props();
33
</script>
44

5-
{#if true}
5+
{#if condition}
66
<p>foo</p>
77
{:else}
88
<p>bar</p>

0 commit comments

Comments
 (0)