perf: inline default imports into template

benmccann · benmccann · commit 84d1cfb2b278 · 2024-09-13T18:00:32.000-07:00
diff --git a/.changeset/seven-shrimps-explode.md b/.changeset/seven-shrimps-explode.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+perf: inline default imports into template
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -314,15 +314,12 @@ export function create_derived(state, arg) {
 
 /**
  * Whether a variable can be referenced directly from template string.
- * @param {import('#compiler').Binding | undefined} binding
+ * @param {import('#compiler').Binding} binding
  * @returns {boolean}
  */
 export function can_inline_variable(binding) {
 	return (
-		!!binding &&
 		// in a `<script module>` block
-		!binding.scope.parent &&
-		// to prevent the need for escaping
-		binding.initial?.type === 'Literal'
+		!binding.scope.parent
 	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -631,7 +631,9 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 	} else {
 		if (inlinable_expression) {
 			context.state.template.push_quasi(` ${name}="`);
-			context.state.template.push_expression(value);
+			context.state.template.push_expression(
+				inlinable_expression.need_to_escape ? b.call('$.escape', value) : value
+			);
 			context.state.template.push_quasi('"');
 		} else {
 			state.init.push(update);
@@ -646,22 +648,24 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
  */
 function is_inlinable_expression(nodes, state) {
 	let has_expression_tag = false;
+	let need_to_escape = false;
 	for (let value of nodes) {
 		if (value.type === 'ExpressionTag') {
 			if (value.expression.type === 'Identifier') {
 				const binding = state.scope
 					.owner(value.expression.name)
 					?.declarations.get(value.expression.name);
-				if (!can_inline_variable(binding)) {
+				if (!binding || !can_inline_variable(binding)) {
 					return false;
 				}
+				need_to_escape = need_to_escape || binding.initial?.type !== 'Literal';
 			} else {
 				return false;
 			}
 			has_expression_tag = true;
 		}
 	}
-	return has_expression_tag;
+	return { need_to_escape };
 }
 
 /**
diff --git a/packages/svelte/src/compiler/utils/sanitize_template_string.js b/packages/svelte/src/compiler/utils/sanitize_template_string.js
@@ -1,4 +1,5 @@
 /**
+ * Escape special characters like ` $ { \
  * @param {string} str
  * @returns {string}
  */
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
@@ -1,19 +1,27 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import __IMPORTED_ASSET_0__ from "./foo.svg";
+import { counter } from "./some.js";
 
 const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
 const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-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>`);
+var root = $.template(`<div></div> <img src="${$.escape(__IMPORTED_ASSET_0__)}" alt="default imports are not live bindings so can be inlined"> <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>`, 1);
 
 export default function Inline_module_vars($$anchor) {
-	var picture = root();
+	var fragment = root();
+	var div = $.first_child(fragment);
+
+	div.textContent = `${counter ?? ""} named exports are live bindings so cannot be inlined`;
+
+	var img = $.sibling(div, 2);
+	var picture = $.sibling(img, 2);
 	var source = $.child(picture);
 	var source_1 = $.sibling(source, 2);
 	var source_2 = $.sibling(source_1, 2);
-	var img = $.sibling(source_2, 2);
+	var img_1 = $.sibling(source_2, 2);
 
 	$.reset(picture);
-	$.append($$anchor, picture);
-}
+	$.append($$anchor, fragment);
+}
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
@@ -1,10 +1,12 @@
 import * as $ from "svelte/internal/server";
+import __IMPORTED_ASSET_0__ from "./foo.svg";
+import { counter } from "./some.js";
 
 const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
 const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
 
 export default function Inline_module_vars($$payload) {
-	$$payload.out += `<picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test" width="1440" height="1440"></picture>`;
+	$$payload.out += `<div>${$.escape(counter)} named exports are live bindings so cannot be inlined</div> <img${$.attr("src", __IMPORTED_ASSET_0__)} alt="default imports are not live bindings so can be inlined"> <picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test" width="1440" height="1440"></picture>`;
 }
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
@@ -1,12 +1,18 @@
 <svelte:options runes={true} />
 
 <script module>
+	import __IMPORTED_ASSET_0__ from "./foo.svg";
+	import { counter } from "./some.js";
 	const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
 	const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 	const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 	const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
 </script>
 
+<div>{counter} named exports are live bindings so cannot be inlined</div>
+
+<img src={__IMPORTED_ASSET_0__} alt="default imports are not live bindings so can be inlined" />
+
 <picture>
 	<source srcset={__DECLARED_ASSET_0__} type="image/avif" />
 	<source srcset={__DECLARED_ASSET_1__} type="image/webp" />

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +perf: inline default imports into template
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`/**`
	`2`	+ * Escape special characters like ` $ { \
`2`	`3`	`* @param {string} str`
`3`	`4`	`* @returns {string}`
`4`	`5`	`*/`