Useless mutations with class: directive

[adiguba]

Describe the bug

The class:directive can produce multiple mutations on DOM.

Example with this code :

<script>
	let { className, bar, baz } = $props();
</script>

<div class={className} class:bar class:baz>...</div>

Currently we got the following code :

	$.template_effect(() => {
		$.set_class(div, $.clsx($$props.className));
		$.toggle_class(div, 'bar', $$props.bar);
		$.toggle_class(div, 'baz', $$props.baz);
	});

With the props { className: "foo", bar: true, baz: true } :

• The SSR will generate <div class="foo bar baz">...</div> ✅
• But on client site (with hydration or not) :
  • set_class() will set the class to "foo"
  • toggle_class('bar') will add the class bar, so he class will be "foo bar"
  • toggle_class('baz') will add the class baz, so he class will be "foo bar bar"

It would be nice to define the class once (except for the reactivity after that of course)

Reproduction

Need to watch the DOM, or add a MutationObserver on the page...

Logs

-

System Info

-

Severity

annoyance