From 142f60044ec81915550e9fe6f2ec02fa84cc286b Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 26 Nov 2024 10:16:05 +0100
Subject: [PATCH] fix: show `:then` block for `null` value

fixes #14439

This bug was introduced in #13642 because setting the input to `null` means the equality check ("is the input different") fails if you set the value to `null`
---
 .changeset/breezy-insects-live.md             |  5 ++++
 .../src/internal/client/dom/blocks/await.js   |  7 +++---
 .../samples/await-non-promise/_config.js      | 23 +++++++++++++++++--
 .../samples/await-non-promise/main.svelte     | 17 +++++++++-----
 4 files changed, 41 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/breezy-insects-live.md

diff --git a/.changeset/breezy-insects-live.md b/.changeset/breezy-insects-live.md
new file mode 100644
index 0000000000..a65f9c0616
--- /dev/null
+++ b/.changeset/breezy-insects-live.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: show `:then` block for `null` value
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 29ef15452f..334020812b 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -14,6 +14,7 @@ import {
 } from '../../runtime.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 import { queue_micro_task } from '../task.js';
+import { UNINITIALIZED } from '../../../../constants.js';
 
 const PENDING = 0;
 const THEN = 1;
@@ -40,7 +41,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 	/** @type {any} */
 	var component_function = DEV ? component_context?.function : null;
 
-	/** @type {V | Promise<V> | null} */
+	/** @type {V | Promise<V> | typeof UNINITIALIZED} */
 	var input;
 
 	/** @type {Effect | null} */
@@ -156,8 +157,8 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			update(THEN, false);
 		}
 
-		// Set the input to null, in order to disable the promise callbacks
-		return () => (input = null);
+		// Set the input to something else, in order to disable the promise callbacks
+		return () => (input = UNINITIALIZED);
 	});
 
 	if (hydrating) {
diff --git a/packages/svelte/tests/runtime-runes/samples/await-non-promise/_config.js b/packages/svelte/tests/runtime-runes/samples/await-non-promise/_config.js
index 14dac30350..7a4cd3540b 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-non-promise/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/await-non-promise/_config.js
@@ -1,9 +1,28 @@
 import { flushSync } from 'svelte';
-import { test } from '../../test';
+import { ok, test } from '../../test';
 
 export default test({
+	solo: true,
 	compileOptions: {
 		dev: true
 	},
-	test() {}
+	test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const p = target.querySelector('p');
+		ok(p);
+
+		assert.htmlEqual(p.outerHTML, `<p>0</p>`);
+
+		btn1.click();
+		flushSync();
+		assert.htmlEqual(p.outerHTML, `<p>1</p>`);
+
+		btn2.click();
+		flushSync();
+		assert.htmlEqual(p.outerHTML, `<p></p>`);
+
+		btn1.click();
+		flushSync();
+		assert.htmlEqual(p.outerHTML, `<p>1</p>`);
+	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/await-non-promise/main.svelte b/packages/svelte/tests/runtime-runes/samples/await-non-promise/main.svelte
index 62881ba666..2c5c7ee6cb 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-non-promise/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/await-non-promise/main.svelte
@@ -1,9 +1,14 @@
 <script>
-	let count = $state(43);
+	let count = $state(0);
 </script>
 
-{#await count}
-	loading
-{:then count}
-	{count}
-{/await}
\ No newline at end of file
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => count = null}>nullify</button>
+
+<p>
+	{#await count}
+		loading
+	{:then count}
+		{count}
+	{/await}
+</p>