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 index c1806b5128..d46b7e6080 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js @@ -290,7 +290,8 @@ export function RegularElement(node, context) { const { value, has_state } = build_attribute_value( attribute.value, context, - (value, metadata) => (metadata.has_call ? get_expression_id(context.state, value) : value) + (value, metadata) => + metadata.has_call ? get_expression_id(context.state.expressions, value) : value ); const update = build_element_attribute_update(node, node_id, name, value, attributes); @@ -482,10 +483,11 @@ function setup_select_synchronization(value_binding, context) { /** * @param {AST.ClassDirective[]} class_directives + * @param {Expression[]} expressions * @param {ComponentContext} context * @return {ObjectExpression | Identifier} */ -export function build_class_directives_object(class_directives, context) { +export function build_class_directives_object(class_directives, expressions, context) { let properties = []; let has_call_or_state = false; @@ -497,15 +499,16 @@ export function build_class_directives_object(class_directives, context) { const directives = b.object(properties); - return has_call_or_state ? get_expression_id(context.state, directives) : directives; + return has_call_or_state ? get_expression_id(expressions, directives) : directives; } /** * @param {AST.StyleDirective[]} style_directives + * @param {Expression[]} expressions * @param {ComponentContext} context * @return {ObjectExpression | ArrayExpression}} */ -export function build_style_directives_object(style_directives, context) { +export function build_style_directives_object(style_directives, expressions, context) { let normal_properties = []; let important_properties = []; @@ -514,7 +517,7 @@ export function build_style_directives_object(style_directives, context) { directive.value === true ? build_getter({ name: directive.name, type: 'Identifier' }, context.state) : build_attribute_value(directive.value, context, (value, metadata) => - metadata.has_call ? get_expression_id(context.state, value) : value + metadata.has_call ? get_expression_id(expressions, value) : value ).value; const property = b.init(directive.name, expression); @@ -653,7 +656,7 @@ function build_element_special_value_attribute(element, node_id, attribute, cont ? // if is a select with value we will also invoke `init_select` which need a reference before the template effect so we memoize separately is_select_with_value ? memoize_expression(state, value) - : get_expression_id(state, value) + : get_expression_id(state.expressions, value) // TODO i think this will break in spread, needs to be `expressions` : value ); diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js index 7ed941efb7..595feca562 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js @@ -71,7 +71,7 @@ export function build_set_attributes( b.prop( 'init', b.array([b.id('$.CLASS')]), - build_class_directives_object(class_directives, context) + build_class_directives_object(class_directives, expressions, context) ) ); } @@ -81,7 +81,7 @@ export function build_set_attributes( b.prop( 'init', b.array([b.id('$.STYLE')]), - build_style_directives_object(style_directives, context) + build_style_directives_object(style_directives, expressions, context) ) ); } @@ -160,7 +160,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c value = b.call('$.clsx', value); } - return metadata.has_call ? get_expression_id(context.state, value) : value; + return metadata.has_call ? get_expression_id(context.state.expressions, value) : value; }); /** @type {Identifier | undefined} */ @@ -173,7 +173,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c let next; if (class_directives.length) { - next = build_class_directives_object(class_directives, context); + next = build_class_directives_object(class_directives, context.state.expressions, context); has_state ||= class_directives.some((d) => d.metadata.expression.has_state); if (has_state) { @@ -228,7 +228,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c */ export function build_set_style(node_id, attribute, style_directives, context) { let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) => - metadata.has_call ? get_expression_id(context.state, value) : value + metadata.has_call ? get_expression_id(context.state.expressions, value) : value ); /** @type {Identifier | undefined} */ @@ -241,7 +241,7 @@ export function build_set_style(node_id, attribute, style_directives, context) { let next; if (style_directives.length) { - next = build_style_directives_object(style_directives, context); + next = build_style_directives_object(style_directives, context.state.expressions, context); has_state ||= style_directives.some((d) => d.metadata.expression.has_state); if (has_state) { diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js index 80b472ac37..8d2f62735f 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js @@ -22,11 +22,11 @@ export function memoize_expression(state, value) { /** * - * @param {ComponentClientTransformState} state + * @param {Expression[]} expressions * @param {Expression} value */ -export function get_expression_id(state, value) { - return b.id(`$${state.expressions.push(value) - 1}`); +export function get_expression_id(expressions, value) { + return b.id(`$${expressions.push(value) - 1}`); } /** @@ -40,7 +40,8 @@ export function build_template_chunk( values, visit, state, - memoize = (value, metadata) => (metadata.has_call ? get_expression_id(state, value) : value) + memoize = (value, metadata) => + metadata.has_call ? get_expression_id(state.expressions, value) : value ) { /** @type {Expression[]} */ const expressions = [];