small tweaks

Author: Rich-Harris

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

@@ -25,27 +25,26 @@ export function build_style_directives(
 	const state = context.state;
 
 	for (const directive of style_directives) {
+		const { has_state, has_call } = directive.metadata.expression;
+
 		let value =
 			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);
+			value = b.call('$.get', id);
 		}
 
 		const update = b.stmt(
 			b.call(
 				'$.set_style',
 				element_id,
 				b.literal(directive.name),
-				final_value,
+				value,
 				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined),
 				force_check ? b.true : undefined
 			)
@@ -77,21 +76,17 @@ export function build_class_directives(
 ) {
 	const state = context.state;
 	for (const directive of class_directives) {
-		const value = /** @type {Expression} */ (context.visit(directive.expression));
 		const { has_state, has_call } = directive.metadata.expression;
-
-		let final_value = value;
+		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))));
-			final_value = b.call('$.get', id);
+			value = b.call('$.get', id);
 		}
 
-		const update = b.stmt(
-			b.call('$.toggle_class', element_id, b.literal(directive.name), final_value)
-		);
+		const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));
 
 		if (!is_attributes_reactive && has_call) {
 			state.init.push(build_update(update));

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

@@ -1,12 +1,10 @@
 import { flushSync } from 'svelte';
-import { ok, test } from '../../test';
+import { test } from '../../test';
 
 export default test({
 	test({ target, logs, assert }) {
 		const [div, div2] = target.querySelectorAll('div');
-
 		const button = target.querySelector('button');
-		ok(button);
 
 		assert.deepEqual(logs, ['called', 'called']);
 
@@ -15,9 +13,7 @@ export default test({
 		assert.equal(div.classList.contains('dark'), false);
 		assert.equal(div2.style.color, 'red');
 
-		flushSync(() => {
-			button.click();
-		});
+		flushSync(() => button?.click());
 		assert.deepEqual(logs, ['called', 'called']);
 	}
 });

packages/svelte/tests/runtime-runes/samples/dynamic-attribute-and-attribute-directive/main.svelte

@@ -1,7 +1,6 @@
 <script>
-
 	let value = $state(0);
-	
+
 	function dark(){
 		console.log('called')
 		return false;
@@ -23,4 +22,4 @@
 
 <div class:dark={dark()} class={get_class()}></div>
 <div style:color={color()} style={get_style()}></div>
-<button onclick={()=> value++}>{value}</button>
+<button onclick={()=> value++}>{value}</button>