Missing "ownership_invalid_mutation" when using snippets ?

[dm-de]

Describe the bug

I'm not sure... is this by design or not?

My example: LINK

I have a component, where I modify a received property.
One time it's directly inside component.
and another time it's inside snipped (which is also used in Component)

It has basically the same onclick - It will modify received data inside Component.
But only gray button produce a warning (missing ownership_invalid_mutation).
This do not happen, if I click snipped button (colored).

As I understand, we should not mutate received data.
Instead, we should use callback functions.
Right?

But... wow, I wish, we could officialy use such code... how beautiful is that to avoid callbacks?

We need clarity here... Perhaps quick response.
Otherwise, I don't know how to write right code now...

same code, but with callbacks:
LINK

Reproduction

see above

Logs

No response

System Info

Svelte 5.1.9

Severity

annoyance

[Leonidaz]

Just make the passed in data to the Component bound with $bindable() declaration on the component's property and you'd be good to go. Svelte just wants us to be explicit so it's easier to reason about the code, especially when it comes to child changing parent's data - the "opposite" flow.

Working with bind: and $bindable()

docs on $bindable: https://svelte.dev/docs/svelte/$bindable

[dm-de]

Thank you, that's not what I meant.
I mean the different behavior of Svelte of nearly same code inside Component and injected from snippet,
which should give same warning.
As you can see, Snippets don't use any variable from App.svelte. Snippets grab data from Component.

The warning routine is "dumb" and think, that I am manipulating data in App. But this is not the case.
I inject snippets into Component and manipulate inside Component.

[Leonidaz]

Svelte tracks where the data is coming from, because the child is still accessing it from the parent by reference. You're still mutating the parent's data.

Since the snippets are defined in the parent and therefore, it seems, svelte is ok with them mutating the data in the same component.

if you moved the snippets to the child component, you will get a warning on both buttons now, since now the snippets are defined on the child and are mutating the parent's data: both warn

In the example where you're using a "callback" function, the function is still defined in the parent component and is still mutating the data from the same component, so no warning.

So, based on the reasons above, the runtime warning is valid and consistent. $bindable() and bind: resolve it by indicating that the parent is allowing this mutation.

I don't think the warning shows up in production builds but I'd say it's a good practice to indicate it for code readability if nothing else.

[dummdidumm]

Thank you @Leonidaz for the throrough explanation - closing as this works as designed.