fix: optimise || expressions in template (#15092)

.changeset/large-islands-cover.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: optimise || expressions in template

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

@@ -118,22 +118,22 @@ export function build_template_chunk(
 				// extra work in the template_effect (instead we do the work in set_text).
 				return { value, has_state };
 			} else {
-				let expression = value;
+				// add `?? ''` where necessary (TODO optimise more cases)
-				// only add nullish coallescence if it hasn't been added already
+				if (
-				if (value.type === 'LogicalExpression' && value.operator === '??') {
+					value.type === 'LogicalExpression' &&
-					const { right } = value;
+					value.right.type === 'Literal' &&
-					// `undefined` isn't a Literal (due to pre-ES5 shenanigans), so the only nullish literal is `null`
+					(value.operator === '??' || value.operator === '||')
-					// however, you _can_ make a variable called `undefined` in a Svelte component, so we can't just treat it the same way
+				) {
-					if (right.type !== 'Literal') {
+					// `foo ?? null` -=> `foo ?? ''`
-						expression = b.logical('??', value, b.literal(''));
+					// otherwise leave the expression untouched
-					} else if (right.value === null) {
+					if (value.right.value === null) {
-						// if they do something weird like `stuff ?? null`, replace `null` with empty string
+						value = { ...value, right: b.literal('') };
-						value.right = b.literal('');
 					}
 				} else {
-					expression = b.logical('??', value, b.literal(''));
+					value = b.logical('??', value, b.literal(''));
 				}
-				expressions.push(expression);
+
+				expressions.push(value);
 			}
 
 			quasi = b.quasi('', i + 1 === values.length);