What's the best practise to type snippets automatically?

[CNSeniorious000]

In Svelte 4, if we inject something to a slot, it is automatically typed.

For example, if I have a UseCopy.svelte like this:

<script lang="ts">
  async function copy(content: string) {
    await navigator.clipboard.writeText(content)
    toast("Successfully copied!")
  }
</script>

<slot {copy} />

In Svelte 5, it seems I have to manually claim its type like this:

<script lang="ts">
  import type { Snippet } from "svelte";

  async function copy(content: string) {
    await navigator.clipboard.writeText(content)
    toast("Successfully copied!")
  }

  const { children }: { children: Snippet<[{ copy: typeof copy }]> } = $props()
</script>

{@render children({ copy })}

BTW, the markup where I uses it became much lines longer too

From

<UseCopy let:copy>
  <button on:click={() => copy(content)} />
</UseCopy>

To

<UseCopy>
  {#snippet children({ copy })}
    <button on:click={() => copy(content)}></button>
  {/snippet}
</UseCopy>

How to avoid this? Are there some best practises for these usages?

[brunnerh]

To my knowledge there is currently no way around this if you use snippet arguments.

[CNSeniorious000]

Thanks! So can I consider this a downside of Svelte 5? 🤔

[brunnerh]

Well, the language tools could potentially generate types based on usage, so you could e.g. have something like:

const { otherProp, children }: { otherProp: string } & $Snippets = $props();

[CNSeniorious000]

Currently it can't, right?

Cannot find name '$Snippets'.ts(2304)

type $Snippets = /*unresolved*/ any

[brunnerh]

Yes, this does not exist. You could open an issue in language-tools to suggest this idea.

I don't know how feasible/complicated it would be to implement, though. It also would be limited to snippets that are used in @render locally; any snippets that are passed on to child components would still need to be typed manually since components are processed in isolation.