Snippet export - compiler treats $page as local declaration

[notramo]

Describe the bug

There is only a <script module> and no <script> in the component, but the snippet can not be exported, because the compiler treats the $page subscription as if it were local. If I remove the $ from $page, it can be exported.

Reproduction

<script module>
import { page } from '$app/stores';
export { exampleSnippet }; // type checker error: exampleSnippet not found (undefined export)
</script>

{#snippet exampleSnippet()}
  {JSON.stringify($page.data)}
{/snippet}

Logs

No response

System Info

-

Severity

annoyance

[trueadm]

I don't believe this can work, as the template needs to create a subscription to the store and the only way we can do that is by using the component's effect to dispose of it. So in this case, you can't reference a store from within a snippet that needs to be exported using the $ prefix.

[Thiagolino8]

The auto subscription with the $ prefix is tied to the component lifecycle

[Leonidaz]

as a workaround, maybe just have the snippet take page as a parameter and pass $page when you're doing {@render exampleSnippet($page)}

<script module>
  import { page } from '$app/stores';
  export { exampleSnippet }; 
</script>

{#snippet exampleSnippet(page)}
  {JSON.stringify(page.data)}
{/snippet}

I think this should work with the page from the proposed $app/states sveltejs/kit#13140 that uses signals instead of stores.

[notramo]

@Leonidaz, indeed, passing page to the snippet works, even with the $app/stores version.