Cannot bind to stores from within a snippet

[pauldemarco]

Describe the bug

I am getting this error when trying to access a store passed in via snippet parameter:

Cannot subscribe to stores that are not declared at the top level of the component

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA42QS2rDMBCGrzKoBdtg7K6T2PRxjLqLxJ4QEVkSo3FLEbp7keQ40G661Oh_zHxenKVCJ3bvXujjjGInXqwVteBvGx_uExWjqIUzC41xcnAjScv9oAeWszXE8LowGw1nMjMUTZufTbYW-0Ef2rtHH1a10aOS47XzZQVdD0eFxGXxFmc4AV8QTklYVCF1-QenpbXIMF6kmgh1acnYKsTPgVMY-Mc4SyPfrvoQF8ilvajFbCZ5ljiJHdOCod7uzpL_nq6QwW-r1NA0Tax2EKCDtIUrq_2gV0Qevkjy8aQQwgoq57eODSVKt9TRLJqRoNss5VP1G2JmA_5WuzJ6JtQT0h3RGlYlCNnUD_ovho_wA4i41NgKAgAA

Logs

No response

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
    Memory: 48.88 GB / 62.54 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.6.0 - ~/.nvm/versions/node/v22.6.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v22.6.0/bin/npm
    pnpm: 9.1.4 - ~/.local/share/pnpm/pnpm
    bun: 1.0.0 - /usr/local/bin/bun
  Browsers:
    Brave Browser: 110.1.48.171
    Chrome: 128.0.6613.84
  npmPackages:
    svelte: ^5.0.0-next.241 => 5.0.0-next.241

Severity

blocking an upgrade

[trueadm]

Rather than passing arounds store, you should be passing in the value from the store into the snippet. This is because we can't create subscriptions inside the snippet – which is required when you reference a store with $ prefix.

[pauldemarco]

Rather than passing arounds store, you should be passing in the value from the store into the snippet. This is because we can't create subscriptions inside the snippet – which is required when you reference a store with $ prefix.

This might be a problem since the component that is calling the snippet is generic and only knows that it is a store and unaware of the shape of the data.

I am recreating Superforms "componentization": https://superforms.rocks/components

I have a component called SimpleForm that acts as a wrapper to handle all the shared superform logic and must be passed the inner input elements through the children slot. The issue is that these inner elemenets need to bind to the different properties of the superform $form data (which is created and only available in SimpleForm).

[trueadm]

Rather than passing arounds store, you should be passing in the value from the store into the snippet. This is because we can't create subscriptions inside the snippet – which is required when you reference a store with $ prefix.

This might be a problem since the component that is calling the snippet is generic and only knows that it is a store and unaware of the shape of the data.

I am recreating Superforms "componentization": https://superforms.rocks/components

I have a component called SimpleForm that acts as a wrapper to handle all the shared superform logic and must be passed the inner input elements through the children slot. The issue is that these inner elemenets need to bind to the different properties of the superform $form data (which is created and only available in SimpleForm).

I mean this is already the case with Svelte 4 slots, you cannot subscribe to a store inside the slot either. How did you do this before with Svelte 4?

[pauldemarco]

This is true. After I made this issue I attempted to do this in Svelte 4 and reached the same issue.
The solution presented by Superforms is to make another component TextField that actually does the subscribing at the top level.
I left this open to hopefully learn about why this isn't possible, and if it maybe can be done without this workaround using snippets.

Side note: I attempted to convert the $form store within SimpleForm to a rune with fromStore and pass that instead, but it seems to lack deep reactivity since I cannot bind to the nested data, e.g. <input bind:value={formRune.current.firstName} />

[trueadm]

fromStore only converts the subscription into a signal, it doesn't apply deep state to them – by design.

[pauldemarco]

fromStore only converts the subscription into a signal, it doesn't apply deep state to them – by design.

Interesting, it seems the only solution then is to pass the superform through the snippet --> into an inner component, and subscribe from there.
It would be incredibly helpful, (and may be a great test of the API), if this superforms componentization project was converted to Svelte 5:
https://www.sveltelab.dev/?provider=github&owner=ciscoheat&repo=superforms-examples&branch=components-zod

[trueadm]

What about doing this?

[pauldemarco]

What about doing this?

It almost worked! But broke once I tried to target a nested property: Try here

[trueadm]

What about doing this?

It almost worked! But broke once I tried to target a nested property: Try here

That's because the nested property isn't reactive? You need to use $state to make it deeply reactive.

[pauldemarco]

Yep, by design, as you stated.

What is the reason for this difference?

// title is reactive
let data = $state({title: “hello”})

vs.

let dataStore = writable({title: “hello”})

// title is NOT reactive
let data = fromStore(dataStore)

[trueadm]

@pauldemarco I mean you can put state into a store, that's what I was demonstrating – to make the store deeply reactive.

[pauldemarco]

The goal at this point is to convert it into a deeply reactive rune so that I could bind to it within the snippet.