Passing reactive variables to external stores

[vjpr]

What is the right approach to extract some code from a component into a another module (.svelte.ts)?

Ideally I would want to write the following but it loses reactivity...

<script lang="ts">

let {item} = $props()

const query = createQuery(item)

</script>

---

Some options...

a.

let query = $derived(createQuery(item))

b.

const query = createQuery()
$effect(() => {
  query.item = item
})

c.

const itemBox = $derived({get value() { return item } })
const query = createQuery(itemBox)

[brunnerh]

There is no real right or wrong answer, as long as it works.

If you just need to pass read-only reactivity, I would use a regular function. You also don't need $derived unless the object itself needs to be recreated, which it probably does not.

const query = createQuery(() => item);

(See also the docs on passing state to functions.)

[brunnerh]

It has to call the getter in a reactive context, that usually entails an $effect (simple playground example).

This is reactive because it is a reference to a reactive variable. When the getter is called, the signal associated with item will be triggered, creating a dependency on it.

[brunnerh]

You might also want to look at createSubscriber, though that is probably more useful when propagating data outward from your query object.

[vjpr]

Thanks for the playground example. Makes sense.

I still find it very clunky and unintuitive. I have to remind myself of this pattern very often. I think its too much mental load really.

I think maybe another cosmetic rune would help with this. Like instead of the getter...$param(item) for reactive params.

The same way $derived(x) is basically $derived(() => x).

[brunnerh]

That does not work because it would require the module to compile to something else depending on the usage site, which could be different everywhere. (Or potentially the other way around; in any case, modules could no longer compile independently.)

[vjpr]

Yeh I agree that modules compiling independently is a huge win and therefore makes the workarounds tolerable.