Svelte 5: Reactivity bug with spread operator

[abdel-17]

Describe the bug

Spreading an object with reactive props doesn't work as expected.

<script>
	let pressed = $state(false);

	const props = {
		get "aria-pressed"() {
			return pressed;
		},
		onclick: () => {
			pressed = !pressed;
		}
	}
</script>

<!-- "aria-pressed" is not reactive -->
<button {...props}>
	{pressed ? "On" : "Off"}
</button>

Reproduction

REPL

Logs

No response

System Info

Macbook Pro 2020 Intel i5, macOS 14.2

Severity

annoyance

[brunnerh]

Looks like the compiler does not generate a $.render_effect block for the spread if the spread object is not signal-based. This causes the signal emitted from the getter to not trigger an update.

Spreading this on the other hand would work:

const props = $derived({
	"aria-pressed": pressed,
	onclick() { pressed = !pressed },
});

[abdel-17]

Is this fine-grained or does the entire object get revalidated?

[brunnerh]

This would recreate the object on change.

What is the use case for doing this, though?
Instead of creating an object and spreading it, the properties just could be set directly in markup.

[abdel-17]

I was migrating some melt-ui code to runes. Props are spread into elements react-aria style.

<script>
  const { elements: { root } } = createLabel();
</script>

<!-- In the migrated code, `root` is an object rather than a store -->
<label use:root {...$root} />

[HighFunctioningSociopathSH]

This would recreate the object on change.

What is the use case for doing this, though? Instead of creating an object and spreading it, the properties just could be set directly in markup.

Could you please take a look at this issue (#10007) revolving around the same problem? I made the issue about a week ago but didn't get any answers and I think it's kind of important as it can cause serious performance issues and unexpected behaviors.

[abdel-17]

This would recreate the object on change.

What is the use case for doing this, though? Instead of creating an object and spreading it, the properties just could be set directly in markup.

Could you please take a look at this issue (#10007) revolving around the same problem? I made the issue about a week ago but didn't get any answers and I think it's kind of important as it can cause serious performance issues and unexpected behaviors.

I think this is expected, though. $derived is just a cached function call. If you want the individual properties to be reactive, you need to use getters.

const x = $derived(x_expression);
const y = $derived(y_expression);
return {
  get x() { return x },
  get y() { return y }
}

[brunnerh]

Let's not discuss separate issues here.

As for the lack of responses: Most maintainers are probably still on holiday, and I am not a maintainer, I just meddle 😅. Also, Svelte 5 is not even officially released yet and there are quite a few issues that still need to be ironed out - there is no need to be impatient.