From aa5c4421cf48cfbd261d99dddfc8ae9312871419 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sun, 18 Aug 2024 18:15:45 +0100
Subject: [PATCH] fix: ensure nullish expressions render empty text (#12898)

---
 .changeset/unlucky-points-clap.md                         | 5 +++++
 .../phases/3-transform/client/visitors/shared/utils.js    | 8 +++++++-
 .../samples/text-multiple-nullish-expression/_config.js   | 5 +++++
 .../samples/text-multiple-nullish-expression/main.svelte  | 4 ++++
 4 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/unlucky-points-clap.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/main.svelte

diff --git a/.changeset/unlucky-points-clap.md b/.changeset/unlucky-points-clap.md
new file mode 100644
index 0000000000..c53d5cbb80
--- /dev/null
+++ b/.changeset/unlucky-points-clap.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure nullish expressions render empty text
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index bd43075e6f..b7ec27f6e3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -59,7 +59,13 @@ export function build_template_literal(values, visit, state) {
 						id,
 						create_derived(
 							state,
-							b.thunk(/** @type {Expression} */ (visit(node.expression, state)))
+							b.thunk(
+								b.logical(
+									'??',
+									/** @type {Expression} */ (visit(node.expression, state)),
+									b.literal('')
+								)
+							)
 						)
 					)
 				);
diff --git a/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/_config.js
new file mode 100644
index 0000000000..04d463d117
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<li></li>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/main.svelte
new file mode 100644
index 0000000000..ea67d3e7eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	function fn() {}
+</script>
+<li>{fn()}{null && fn()}</li>