fix: use is_inlinable_expression

Author: paoloricciuti

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

@@ -1,5 +1,5 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, Pattern, PrivateIdentifier, Statement } from 'estree' */
-/** @import { Binding, SvelteNode } from '#compiler' */
+/** @import { AST, Binding, SvelteNode } from '#compiler' */
 /** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
 /** @import { Scope } from '../../scope.js' */
@@ -326,3 +326,27 @@ export function can_inline_variable(binding) {
 		binding.initial?.type === 'Literal'
 	);
 }
+
+/**
+ * @param {(AST.Text | AST.ExpressionTag)[]} nodes
+ * @param {import('./types.js').ComponentClientTransformState} state
+ */
+export function is_inlinable_expression(nodes, state) {
+	let has_expression_tag = 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)) {
+					return false;
+				}
+			} else {
+				return false;
+			}
+			has_expression_tag = true;
+		}
+	}
+	return has_expression_tag;
+}

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

@@ -19,7 +19,12 @@ import {
 import * as b from '../../../../utils/builders.js';
 import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { build_getter, can_inline_variable, create_derived } from '../utils.js';
+import {
+	build_getter,
+	can_inline_variable,
+	create_derived,
+	is_inlinable_expression
+} from '../utils.js';
 import {
 	get_attribute_name,
 	build_attribute_value,
@@ -605,30 +610,6 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 	}
 }
 
-/**
- * @param {(AST.Text | AST.ExpressionTag)[]} nodes
- * @param {import('../types.js').ComponentClientTransformState} state
- */
-function is_inlinable_expression(nodes, state) {
-	let has_expression_tag = 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)) {
-					return false;
-				}
-			} else {
-				return false;
-			}
-			has_expression_tag = true;
-		}
-	}
-	return has_expression_tag;
-}
-
 /**
  * Like `build_element_attribute_update_assignment` but without any special attribute treatment.
  * @param {Identifier}	node_id

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

@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../../types' */
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { can_inline_variable } from '../../utils.js';
+import { can_inline_variable, is_inlinable_expression } from '../../utils.js';
 import { build_template_literal, build_update } from './utils.js';
 
 /**
@@ -98,7 +98,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 			let child_state = state;
 
-			if (is_static_element(node, state.scope)) {
+			if (is_static_element(node, state)) {
 				skipped += 1;
 			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
 				node.metadata.is_controlled = true;
@@ -125,9 +125,9 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 /**
  * @param {SvelteNode} node
- * @param {ComponentContext["state"]["scope"]} scope
+ * @param {ComponentContext["state"]} state
  */
-function is_static_element(node, scope) {
+function is_static_element(node, state) {
 	if (node.type !== 'RegularElement') return false;
 	if (node.fragment.metadata.dynamic) return false;
 
@@ -141,19 +141,12 @@ function is_static_element(node, scope) {
 		}
 
 		if (attribute.value !== true && !is_text_attribute(attribute)) {
-			// in this situation we are already inlining the binding in the template
-			// so even if it's not a text attribute we can consider the element static
-			if (
-				typeof attribute.value !== 'boolean' &&
-				!Array.isArray(attribute.value) &&
-				attribute.value.expression.type === 'Identifier'
-			) {
-				const binding = scope.get(attribute.value.expression.name);
-				if (binding) {
-					return can_inline_variable(binding);
-				}
-			}
-			return false;
+			// if it's not a text attribute but it's an inlinable expression
+			// we will inline it in the template so we can still consider it static
+			return is_inlinable_expression(
+				Array.isArray(attribute.value) ? attribute.value : [attribute.value],
+				state
+			);
 		}
 
 		if (attribute.name === 'autofocus' || attribute.name === 'muted') {