better inlining

Author: Rich-Harris

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

@@ -1,5 +1,6 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
+/** @import { Scope } from '../../../../scope.js' */
 /** @import { ComponentContext } from '../../types' */
 import { escape_html } from '../../../../../../escaping.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
@@ -67,7 +68,7 @@ export function process_children(nodes, initial, element, { visit, state }) {
 		if (can_inline) {
 			skipped += 1;
 			const raw = element?.name === 'script' || element?.name === 'style';
-			state.template.push(raw ? value : escape_inline_expression(value));
+			state.template.push(raw ? value : escape_inline_expression(value, state.scope));
 			return;
 		}
 
@@ -165,24 +166,39 @@ function is_static_element(node) {
 
 /**
  * @param {Expression} node
- * @param {boolean} [is_attr]
+ * @param {Scope} scope
  * @returns {Expression}
  */
-function escape_inline_expression(node, is_attr) {
+function escape_inline_expression(node, scope) {
 	if (node.type === 'Literal') {
 		if (typeof node.value === 'string') {
-			return b.literal(escape_html(node.value, is_attr));
+			return b.literal(escape_html(node.value));
 		}
 
 		return node;
 	}
 
 	if (node.type === 'TemplateLiteral') {
 		return b.template(
-			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked, is_attr))),
-			node.expressions.map((expression) => escape_inline_expression(expression, is_attr))
+			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked))),
+			node.expressions.map((expression) => escape_inline_expression(expression, scope))
 		);
 	}
 
-	return b.call('$.escape', node, is_attr && b.true);
+	/**
+	 * If we can't determine the range of possible values statically, wrap in
+	 * `$.escape(...)`. TODO expand this to cover more cases
+	 */
+	let needs_escape = true;
+
+	if (node.type === 'Identifier') {
+		const binding = scope.get(node.name);
+
+		// TODO handle more cases
+		if (binding?.initial?.type === 'Literal' && !binding.reassigned) {
+			needs_escape = escape_html(binding.initial.value) !== String(binding.initial.value);
+		}
+	}
+
+	return needs_escape ? b.call('$.escape', node) : node;
 }

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

@@ -51,26 +51,43 @@ export function build_template_chunk(values, visit, state) {
 		if (node.type === 'Text') {
 			quasi.value.cooked += node.data;
 		} else {
-			if (node.expression.type === 'Literal') {
-				if (node.expression.value != null) {
-					quasi.value.cooked += node.expression.value + '';
+			const expression = /** @type {Expression} */ (visit(node.expression, state));
+
+			if (expression.type === 'Literal') {
+				if (expression.value != null) {
+					quasi.value.cooked += expression.value + '';
 				}
 			} else {
+				let value = expression;
+
+				// if we don't know the value, we need to add `?? ''` to replace
+				// `null` and `undefined` with the empty string
+				let needs_fallback = true;
+
+				if (value.type === 'Identifier') {
+					const binding = state.scope.get(value.name);
+
+					if (binding && binding.initial?.type === 'Literal' && !binding.reassigned) {
+						needs_fallback = binding.initial.value === null;
+					}
+				}
+
+				if (needs_fallback) {
+					value = b.logical('??', expression, b.literal(''));
+				}
+
 				if (contains_multiple_call_expression) {
 					const id = b.id(state.scope.generate('stringified_text'));
-					const expression = /** @type {Expression} */ (visit(node.expression, state));
 
-					state.init.push(
-						b.const(id, create_derived(state, b.thunk(b.logical('??', expression, b.literal('')))))
-					);
+					state.init.push(b.const(id, create_derived(state, b.thunk(value))));
 
 					expressions.push(b.call('$.get', id));
 				} else if (values.length === 1) {
 					// If we have a single expression, then pass that in directly to possibly avoid doing
 					// extra work in the template_effect (instead we do the work in set_text).
 					return { value: visit(node.expression, state), has_state, has_call, can_inline };
 				} else {
-					expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
+					expressions.push(value);
 				}
 
 				quasi = b.quasi('', i + 1 === values.length);

packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js

@@ -7,7 +7,7 @@ const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
 const a = 1;
 const b = 2;
-var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture> <p>${$.escape(a ?? "")} + ${$.escape(b ?? "")} = ${$.escape(a + b ?? "")}</p>`, 1);
+var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture> <p>${a} + ${b} = ${$.escape(a + b ?? "")}</p>`, 1);
 
 export default function Inline_module_vars($$anchor) {
 	var fragment = root();