update how class/style directives are handled

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

@@ -6,7 +6,7 @@ import { is_ignored } from '../../../../../state.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_getter, create_derived } from '../../utils.js';
-import { build_template_chunk } from './utils.js';
+import { build_template_chunk, get_expression_id } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -104,20 +104,13 @@ export function build_style_directives(
 	const state = context.state;
 
 	for (const directive of style_directives) {
-		const { has_state, has_call } = directive.metadata.expression;
+		const { has_state } = directive.metadata.expression;
 
 		let value =
 			directive.value === true
 				? build_getter({ name: directive.name, type: 'Identifier' }, context.state)
 				: build_attribute_value(directive.value, context);
 
-		if (has_call) {
-			const id = b.id(state.scope.generate('style_directive'));
-
-			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-			value = b.call('$.get', id);
-		}
-
 		const update = b.stmt(
 			b.call(
 				'$.set_style',
@@ -156,10 +149,7 @@ export function build_class_directives(
 		let value = /** @type {Expression} */ (context.visit(directive.expression));
 
 		if (has_call) {
-			const id = b.id(state.scope.generate('class_directive'));
-
-			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-			value = b.call('$.get', id);
+			value = get_expression_id(state, value);
 		}
 
 		const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));

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

@@ -14,7 +14,7 @@ import { locator } from '../../../../../state.js';
  * @param {ComponentClientTransformState} state
  * @param {Expression} value
  */
-function get_expression_id(state, value) {
+export function get_expression_id(state, value) {
 	for (let i = 0; i < state.expressions.length; i += 1) {
 		if (compare_expressions(state.expressions[i], value)) {
 			return b.id(`$${i}`);

packages/svelte/tests/runtime-runes/samples/dynamic-attribute-and-attribute-directive-2/_config.js

@@ -7,8 +7,8 @@ export default test({
 		const button = target.querySelector('button');
 
 		assert.deepEqual(logs, [
-			'updated class attribute',
 			'updated class directive',
+			'updated class attribute',
 			'updated style attribute',
 			'updated style directive'
 		]);
@@ -21,8 +21,8 @@ export default test({
 		flushSync(() => button?.click());
 
 		assert.deepEqual(logs, [
-			'updated class attribute',
 			'updated class directive',
+			'updated class attribute',
 			'updated style attribute',
 			'updated style directive',
 			'updated class attribute',