Types for snippets broken in @5.0.0-next.42

[OllieJT]

Describe the bug

Previously I was able to create a type in the script block, and pass it to a {#snippet} block. The syntax highlighting was not working - however the types worked as expected.

Now, I am unable to pass types to a snippet declaration without type errors.

What's confusing is when recreating a minimal repro - it worked... however when reducing my example to the same core components - the error persisted.

Reproduction

This is the minimal repro that works.

<script lang="ts">
	type ExampleProps = {
		name: string;
		hometown: string;
	};
</script>

{#snippet profile(user:ExampleProps)}
	My name is {user.name} and I am from {user.hometown}
{/snippet}

{@render profile({
	name: 'Ollie',
	hometown: 'Windsor',
})}

This is my code reduced to the same core elements as the minimal repro - which does not work.

<script lang="ts">
	type MenuLink = {
		label: string;
		href: string;
	};
</script>

{#snippet menulink(props:MenuLink)}
	The {props.label} link goes to {props.href}
{/snippet}

{@render menulink({
	label: '123',
	href: '456',
})}

Logs

Furthermore - both examples cause errors when running svelte-check - though I'm not sure if that's just Svelte 5 beta related.

No errors in the browser - these only seem to be typescript errors.

> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --output human

14:16:37 [vite-plugin-svelte] Your are using Svelte 5.0.0-next.48. Svelte 5 support is experimental, breaking changes can occur in any release until this notice is removed.
work in progress:
 - svelte-inspector is disabled until dev mode implements node to code mapping
 - hmr for .svelte files is disabled until hmr api is implemented

/Users/olliejt/Developer/designthen.dev/src/components/deleteme copy.svelte:9:7
Error: Cannot find name 'props'. Did you mean '$props'? (ts)

/Users/olliejt/Developer/designthen.dev/src/components/deleteme copy.svelte:9:34
Error: Cannot find name 'props'. Did you mean '$props'? (ts)

/Users/olliejt/Developer/designthen.dev/src/components/deleteme copy.svelte:12:19
Error: Expected 0 arguments, but got 1. (ts)

/Users/olliejt/Developer/designthen.dev/src/components/deleteme.svelte:9:14
Error: Cannot find name 'user'. (ts)

/Users/olliejt/Developer/designthen.dev/src/components/deleteme.svelte:9:40
Error: Cannot find name 'user'. (ts)

/Users/olliejt/Developer/designthen.dev/src/components/deleteme.svelte:12:18
Error: Expected 0 arguments, but got 1. (ts)

====================================
svelte-check found 6 errors and 0 warnings in 2 files
 ELIFECYCLE  Command failed with exit code 1.

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.18 GB / 32.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 8.15.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 121.0.6167.139
    Safari: 17.2.1

Severity

blocking an upgrade

[OllieJT]

Correction - after restarting my language server - both reproductions cause type errors. Which makes sense considering the svelte-check logs.

[leandrohsilveira]

Facing the same or a similar issue. It seems to be a side effect of sveltejs/svelte#9988.

After updating to latest svelte version, saw that Snippet interface changed requiring to update the generic argument as an array:

So Snippet<string> should be Snippet<[string]>.

But after updating all components snippets types, the svelte-check (and VSCode extension) is showing an error: Error: Cannot find name 'title'. (title is the variable name of header snippet {#snippet header(title)}).

Example:

src/lib/layout.svelte

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

    type LayoutProps = {
        title: string
        header?: Snippet<[string]>
        children: Snippet
    }

    let { title, header, children } = $props<LayoutProps>()
</script>

{#if header}
    {@render header(title)}
{:else}
    <h1>{title}</h1>
{/if}

{@render children()}

src/routes/+page.svelte

<script lang="ts">
    import Layout from '$lib/layout.svelte'
</script>

<Layout title="My page">
    {#snippet header(title)}
        <header>
            <h3>{title}</h3>
        </header>
    {/snippet}

    <main>
        The page content
    </main>
</Layout>

After downgrading to svelte@5.0.0-next.41 and reverting the Snippet type changes, the error is gone.

Is there something I am missing?