fix: distinct memoizer on style/class directives (#18466)

Fix #18465

The style and classe directives are generated using an unique memoizer for all the class/style directive, which means if you have multiple of the same time on one element you have overly broad invalidation/reruns. This fixes it by having one memoizer call per directive instead of collecting them.

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

.changeset/lemon-bikes-marry.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: distinct memoizer on style/class directives

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

@@ -4,7 +4,6 @@
 /** @import { Scope } from '../../../scope' */
 import {
 	cannot_be_set_statically,
-	is_boolean_attribute,
 	is_dom_property,
 	is_load_error_element
 } from '../../../../../utils.js';
@@ -13,7 +12,6 @@ import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js'
 import * as b from '#compiler/builders';
 import {
 	create_attribute,
-	ExpressionMetadata,
 	is_custom_element_node,
 	is_customizable_select_element
 } from '../../../nodes.js';
@@ -528,18 +526,12 @@ export function build_class_directives_object(
 ) {
 	let properties = [];
 
-	const metadata = new ExpressionMetadata();
-
 	for (const d of class_directives) {
-		metadata.merge(d.metadata.expression);
-
 		const expression = /** @type Expression */ (context.visit(d.expression));
-		properties.push(b.init(d.name, expression));
+		properties.push(b.init(d.name, memoizer.add(expression, d.metadata.expression)));
 	}
 
-	const directives = b.object(properties);
+	return b.object(properties);
-
-	return memoizer.add(directives, metadata);
 }
 
 /**
@@ -555,23 +547,17 @@ export function build_style_directives_object(
 	const normal = b.object([]);
 	const important = b.object([]);
 
-	const metadata = new ExpressionMetadata();
-
 	for (const d of style_directives) {
-		metadata.merge(d.metadata.expression);
-
 		const expression =
 			d.value === true
 				? build_getter(b.id(d.name), context.state)
 				: build_attribute_value(d.value, context).value;
 
 		const object = d.modifiers.includes('important') ? important : normal;
-		object.properties.push(b.init(d.name, expression));
+		object.properties.push(b.init(d.name, memoizer.add(expression, d.metadata.expression)));
 	}
 
-	const directives = important.properties.length ? b.array([normal, important]) : normal;
+	return important.properties.length ? b.array([normal, important]) : normal;
-
-	return memoizer.add(directives, metadata);
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/class-directive-memoize/_config.js

@@ -0,0 +1,37 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// This test counts mutations on hydration
+// set_style() should not mutate style on hydration, except if mismatch
+export default test({
+	mode: ['server', 'hydrate', 'client'],
+
+	ssrHtml: `
+		<button>click</button>
+		<div class="red"></div>
+	`,
+
+	html: `
+		<button>click</button>
+		<div class="red"></div>
+	`,
+
+	test({ target, assert, logs }) {
+		flushSync();
+
+		assert.deepEqual(logs, ['is_red()']);
+
+		const btn = target.querySelector('button');
+		const div = target.querySelector('div');
+
+		assert.equal(div?.className, 'red');
+
+		btn?.click();
+
+		flushSync();
+
+		assert.equal(div?.className, 'red active');
+		// only one call here
+		assert.deepEqual(logs, ['is_red()']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/class-directive-memoize/main.svelte

@@ -0,0 +1,10 @@
+<script>
+    function is_red() {
+        console.log("is_red()");
+        return "red";
+    }
+
+    let active = $state(false);
+</script>
+<button onclick={() => active = true}>click</button>
+<div class:red={is_red()} class:active></div>

packages/svelte/tests/runtime-runes/samples/style-directive-memoize/_config.js

@@ -0,0 +1,42 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// This test counts mutations on hydration
+// set_style() should not mutate style on hydration, except if mismatch
+export default test({
+	mode: ['server', 'hydrate', 'client'],
+
+	ssrHtml: `
+		<button>click</button>
+		<div style="background-color: red; font-size: 1em;"></div>
+	`,
+
+	html: `
+		<button>click</button>
+		<div style="background-color: red; font-size: 1em;"></div>
+	`,
+
+	test({ target, assert, logs }) {
+		flushSync();
+
+		assert.deepEqual(logs, ['makeColor()']);
+
+		const btn = target.querySelector('button');
+		const div = target.querySelector('div');
+
+		// Note : we cannot compare HTML because set_style() use dom.style.cssText
+		// which can alter the format of the attribute...
+
+		assert.equal(div?.style.backgroundColor, 'red');
+		assert.equal(div?.style.fontSize, '1em');
+
+		btn?.click();
+
+		flushSync();
+
+		assert.equal(div?.style.backgroundColor, 'red');
+		assert.equal(div?.style.fontSize, '2em');
+		// only one call here
+		assert.deepEqual(logs, ['makeColor()']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/style-directive-memoize/main.svelte

@@ -0,0 +1,10 @@
+<script>
+    function makeColor() {
+        console.log("makeColor()");
+        return "red";
+    }
+
+    let size = $state('1em');
+</script>
+<button onclick={() => size = '2em'}>click</button>
+<div style:background-color={makeColor()} style:font-size={size}></div>