simplify

Author: Rich-Harris

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

@@ -14,7 +14,7 @@ import { dev, is_ignored, locator } from '../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
 import { is_custom_element_node } from '../../../nodes.js';
-import { is_inlinable_attribute, is_inlinable_sequence } from '../../../utils.js';
+import { is_inlinable_attribute } from '../../../utils.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_getter, create_derived } from '../utils.js';
 import {
@@ -361,9 +361,10 @@ export function RegularElement(node, context) {
 		get_states_and_calls(trimmed);
 
 	if (states_and_calls && states_and_calls.states === 0) {
-		let { value } = build_template_literal(trimmed, context.visit, child_state);
+		let { value, can_inline } = build_template_literal(trimmed, context.visit, child_state);
+
 		// if the expression is inlinable we just push it to the template
-		if (is_inlinable_sequence(trimmed)) {
+		if (can_inline) {
 			state.template.push(escape_inline_expression(value));
 		} else {
 			// else we programmatically set the value

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

@@ -1,9 +1,9 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
+import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { is_inlinable_attribute, is_inlinable_sequence } from '../../../../utils.js';
+import { is_inlinable_attribute } from '../../../../utils.js';
 import { build_template_literal, build_update, escape_inline_expression } from './utils.js';
 
 /**
@@ -61,17 +61,21 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	 * @param {Sequence} sequence
 	 */
 	function flush_sequence(sequence) {
-		// TODO this should be folded into the `is_inlinable_sequence` block below,
+		// TODO this should be folded into the `if (can_inline)` block below,
 		// but it currently causes the script-style-non-top-level test to fail
 		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
 			state.template.push(sequence.map((node) => node.raw).join(''));
 			return;
 		}
 
-		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
+		const { has_state, has_call, value, can_inline } = build_template_literal(
+			sequence,
+			visit,
+			state
+		);
 
-		if (is_inlinable_sequence(sequence)) {
+		if (can_inline) {
 			skipped += 1;
 			state.template.push(escape_inline_expression(value));
 			return;

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

@@ -61,7 +61,7 @@ export function escape_inline_expression(node, is_attr) {
  * @param {Array<AST.Text | AST.ExpressionTag>} values
  * @param {(node: SvelteNode, state: any) => any} visit
  * @param {ComponentClientTransformState} state
- * @returns {{ value: Expression, has_state: boolean, has_call: boolean }}
+ * @returns {{ value: Expression, has_state: boolean, has_call: boolean, can_inline: boolean }}
  */
 export function build_template_literal(values, visit, state) {
 	/** @type {Expression[]} */
@@ -75,6 +75,7 @@ export function build_template_literal(values, visit, state) {
 	let has_call = calls > 0;
 	let has_state = states > 0;
 	let contains_multiple_call_expression = calls > 1;
+	let can_inline = true;
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
@@ -86,6 +87,10 @@ export function build_template_literal(values, visit, state) {
 				quasi.value.cooked += node.expression.value + '';
 			}
 		} else {
+			if (!node.metadata.expression.can_inline) {
+				can_inline = false;
+			}
+
 			if (contains_multiple_call_expression) {
 				const id = b.id(state.scope.generate('stringified_text'));
 				state.init.push(
@@ -107,7 +112,7 @@ export function build_template_literal(values, visit, state) {
 			} 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 };
+				return { value: visit(node.expression, state), has_state, has_call, can_inline };
 			} else {
 				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
 			}
@@ -123,7 +128,7 @@ export function build_template_literal(values, visit, state) {
 
 	const value = b.template(quasis, expressions);
 
-	return { value, has_state, has_call };
+	return { value, has_state, has_call, can_inline };
 }
 
 /**

packages/svelte/src/compiler/phases/utils.js

@@ -9,19 +9,8 @@ export function is_inlinable_attribute(attribute) {
 	if (attribute.value === true) return false;
 	if (is_boolean_attribute(attribute.name.toLowerCase())) return false;
 
-	if (Array.isArray(attribute.value)) {
-		return is_inlinable_sequence(attribute.value);
-	}
-
-	return attribute.value.metadata.expression.can_inline;
-}
-
-/**
- * @param {Array<AST.Text | AST.ExpressionTag>} nodes
- */
-export function is_inlinable_sequence(nodes) {
-	for (let value of nodes) {
-		if (value.type === 'ExpressionTag' && !value.metadata.expression.can_inline) {
+	for (const node of Array.isArray(attribute.value) ? attribute.value : [attribute.value]) {
+		if (node.type === 'ExpressionTag' && !node.metadata.expression.can_inline) {
 			return false;
 		}
 	}