fix: revert splitting templates and generate deriveds instead

Author: paoloricciuti

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

@@ -212,9 +212,7 @@ export function RegularElement(node, context) {
 			node,
 			node_id,
 			// If value binding exists, that one takes care of calling $.init_select
-			value_binding === null && node.name === 'select',
-			class_directives.some((cd) => cd.metadata.expression.has_call) ||
-				style_directives.some((sd) => sd.metadata.expression.has_call)
+			value_binding === null && node.name === 'select'
 		);
 		is_attributes_reactive = true;
 	} else {
@@ -456,9 +454,10 @@ function build_element_spread_attributes(
 	context,
 	element,
 	element_id,
-	needs_select_handling,
-	needs_isolation = false
+	needs_select_handling
 ) {
+	let needs_isolation = false;
+
 	/** @type {ObjectExpression['properties']} */
 	const values = [];
 

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

@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../../types' */
 import { normalize_attribute } from '../../../../../../utils.js';
 import * as b from '../../../../../utils/builders.js';
-import { build_getter } from '../../utils.js';
+import { build_getter, create_derived } from '../../utils.js';
 import { build_template_literal, build_update } from './utils.js';
 
 /**
@@ -29,21 +29,29 @@ export function build_style_directives(
 			directive.value === true
 				? build_getter({ name: directive.name, type: 'Identifier' }, context.state)
 				: build_attribute_value(directive.value, context).value;
+		const { has_state, has_call } = directive.metadata.expression;
+
+		let final_value = value;
+
+		if (has_call) {
+			const id = b.id(state.scope.generate('style_directive'));
+
+			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
+			final_value = b.call('$.get', id);
+		}
 
 		const update = b.stmt(
 			b.call(
 				'$.set_style',
 				element_id,
 				b.literal(directive.name),
-				value,
+				final_value,
 				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined),
 				force_check ? b.true : undefined
 			)
 		);
 
-		const { has_state, has_call } = directive.metadata.expression;
-
-		if (!is_attributes_reactive || has_call) {
+		if (!is_attributes_reactive && has_call) {
 			state.init.push(build_update(update));
 		} else if (is_attributes_reactive || has_state || has_call) {
 			state.update.push(update);
@@ -70,11 +78,22 @@ export function build_class_directives(
 	const state = context.state;
 	for (const directive of class_directives) {
 		const value = /** @type {Expression} */ (context.visit(directive.expression));
-		const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));
-
 		const { has_state, has_call } = directive.metadata.expression;
 
-		if (!is_attributes_reactive || has_call) {
+		let final_value = value;
+
+		if (has_call) {
+			const id = b.id(state.scope.generate('class_directive'));
+
+			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
+			final_value = b.call('$.get', id);
+		}
+
+		const update = b.stmt(
+			b.call('$.toggle_class', element_id, b.literal(directive.name), final_value)
+		);
+
+		if (!is_attributes_reactive && has_call) {
 			state.init.push(build_update(update));
 		} else if (is_attributes_reactive || has_state || has_call) {
 			state.update.push(update);