fix: always run if block code the first time

Author: Rich-Harris

.changeset/rare-cheetahs-laugh.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always run `if` block code the first time

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

@@ -9,7 +9,7 @@ import {
 	set_hydrating
 } from '../hydration.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
-import { HYDRATION_START_ELSE } from '../../../../constants.js';
+import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
 
 /**
  * @param {TemplateNode} node
@@ -30,8 +30,8 @@ export function if_block(node, fn, elseif = false) {
 	/** @type {Effect | null} */
 	var alternate_effect = null;
 
-	/** @type {boolean | null} */
-	var condition = null;
+	/** @type {UNINITIALIZED | boolean | null} */
+	var condition = UNINITIALIZED;
 
 	var flags = elseif ? EFFECT_TRANSPARENT : 0;
 
@@ -54,7 +54,7 @@ export function if_block(node, fn, elseif = false) {
 		if (hydrating) {
 			const is_else = /** @type {Comment} */ (anchor).data === HYDRATION_START_ELSE;
 
-			if (condition === is_else) {
+			if (!!condition === is_else) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.
 				// This could happen with `{#if browser}...{/if}`, for example
 				anchor = remove_nodes();

packages/svelte/tests/hydration/samples/if-block-mismatch-2/_config.js

@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+// even {#if true} or {#if false} should be kept as an if block, because it could be {#if browser} originally,
+// which is then different between client and server.
+export default test({
+	server_props: {
+		condition: true
+	},
+
+	props: {
+		condition: false
+	},
+
+	trim_whitespace: false
+});

packages/svelte/tests/hydration/samples/if-block-mismatch-2/_expected.html

@@ -0,0 +1 @@
+<!--[--><!--[!--><!----><!--]--> <div><!----><!----></div> hello<!--]-->

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

@@ -0,0 +1,13 @@
+<script>
+	let { condition } = $props();
+</script>
+
+{#if condition}
+	<slot />
+{/if}
+
+<div>
+	<slot />
+</div>
+
+hello

packages/svelte/tests/hydration/samples/if-block-mismatch/_expected.html

@@ -0,0 +1 @@
+<!--[--><!--[!--><p>foo</p><!--]--><!--]-->

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

@@ -2,7 +2,7 @@
 	let { condition } = $props();
 </script>
 
-{#if true}
+{#if condition}
 	<p>foo</p>
 {:else}
 	<p>bar</p>