Exporting stateful snippets

[garraflavatra]

I've just ported an entire project from Svelte 4 to 5 and the idea of snippets is great! The project is an online insurance sales funnel with multiple "pages", steps in the checkout process (insured interest config, personal details, company details etc.), each being a Svelte component which communicates with an API. One page is displayed at a time.

The documentation on snippets mentions that it is possible to export them from a <script module>. This appeared useful when building a global stepper, which is in the root funnel component (as opposed to in the single page components) in order to retain animations and prevent code duplication:

This, however, posed a challenge: the "next step" buttons are dependent on the context of the current page. They may be disabled, have another label or onclick handler, or there may even be some content next to them, all depending on the "page" the user is looking at.

So I went about placing these buttons in snippets in the page components, hoping I could export them as such. But as the docs mention: they must not reference any declarations in a non-module script. In this case, it would however be useful to be able to export them while referencing state variables in the non-module script.

What is the reason for not supporting referencing non-module script declarations? Is there a better way to implement this?

---

In spite of this limitation, I managed to work around this:

<script>
  import { onMount } from 'svelte';

  let { someSnippet } = $props();
  onMount(() => someSnippet = _someSnippet);
</script>

{#snippet _someSnippet()} ... {/snippet}

The parent can now bind them to a $state variable and {@render} it anyway (or even have another child component handle that).

It somehow throws a (non-fatal) error sometimes:

Uncaught TypeError: Cannot read properties of null (reading 'nodes_start')
    at assign_nodes (chunk-CYR4ZDDI.js?v=ac61b474:118:14)
    at Module.comment (chunk-CYR4ZDDI.js?v=ac61b474:280:3)
    at index.svelte:41:58

// svelte: internal/client/dom/template.js
function assign_nodes(start, end) {
  var effect = (
    /** @type {Effect} */
    active_effect
  );
  if (effect.nodes_start === null) {
    effect.nodes_start = start;
    effect.nodes_end = end;
  }
}

[brunnerh]

What is the reason for not supporting referencing non-module script declarations?

It would be impossible to tell which instance of the component is supposed to be referenced. At the time of export there also is no component.

Is there a better way to implement this?

Hard to tell without more specifics, but usually the answer is: Just use a regular component.

[garraflavatra]

Thanks for the quick reply. Wouldn't that be possible when the snippet would be exported through a normal property, as in my example?

It's indeed possible to use a regular component, but I think it's less clutter / less prop drilling when using snippets.

[brunnerh]

If you are using properties, you are not really exporting in the regular sense. Props are coupled to the instance so that works.

Prop drilling can usually be avoided to some degree by using contexts, though I don't know if this applies here.