#snippet param partially loses reactivity

[errmayank]

Describe the bug

If i pass a state (from a store) as a param to a snippet and then go on to pass a value of that param to a component with $bindable prop it loses it's reactivity partially, it still reacts to state updates from outside but not if the state is updated from within the snippet

Is there a way to still keep it reactive? this doesn't happen when i do it inline without using snippet

Here's a screen recording of how the same piece of logic behaves but one uses snippet and the other is inline

402278497-f159926f-5cfe-4fda-b91d-6c6109d4bc19.mov

Reproduction

Here's a reproduction link

Logs

No response

System Info

NA

Severity

annoyance

[brunnerh]

There is some compiler magic that associates the task variable with the store it comes from and makes sure to invalidate the store on change, so in the no-snippet case, this setter is generated for the progress binding:

set progress($$value) {
	(
		$.get(task).progress = $$value,
		$.invalidate_store($$stores, "$tasks") // <- invalidation causing updates
	);
}

With the snippet, there currently is no such association; only the task object is handed over. It would probably be possible to add the store association as metadata to snippets but given that rune-based reactivity is recommended over using stores (which does not have this issue), I don't know if this will be fixed...

[errmayank]

ah i see, thanks for the explanation @brunnerh. i'll just use runes then

[Leonidaz]

just for posterity, yeah as per @brunnerh the store itself needs to be referenced for binding

repl

{#snippet TaskCard(task, i)}
	<div>
		<span>{task.id}</span>
		<span> - </span>
		<span>{task.title}</span>
		<span> - </span>
		<span>{task.progress.times} / {task.progress.completed}</span>
		<span> - </span>
		<CompleteButton bind:progress={$tasks.today[i].progress} />
	</div>
{/snippet}

key line: <CompleteButton bind:progress={$tasks.today[i].progress} />