Snippet doesn't satisfy the Snippet type, apparently

[webJose]

Describe the bug

In a class, I have the following overload:

    show(content: string | Snippet): void;

This is a SvelteKit project that produces an NPM library package. When the project is built, the dist folder contains:

    show(content: string | Snippet): void;

Great so far. Now the class is imported in a Vite + Svelte project by importing it from the built NPM package. The importer declares the following snippet:

{#snippet overlay()}
    <Spinner text="Loading..." variant="primary" />
{/snippet}

Then, this snippet is used in a call to show():

        systemOverlay.show(overlay);

TypeScript is now unhappy. The word "overlay" has the squiggly red line and the error says:

Overload 1 of 3, '(content: string | Snippet<[]>): void', gave the following error.
Argument of type '() => ReturnType<import("svelte").Snippet>' is not assignable to parameter of type 'string | Snippet<[]>'.
Type '() => ReturnType<import("svelte").Snippet>' is not assignable to type 'Snippet<[]>'.

So the snippet overlay is typed as a function whose return type is the return type of the Snippet type from svelte, instead of just being a snippet.

Reproduction

Hopefully the above information is enough to reproduce? Do let me know, though.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 16.62 GB / 39.73 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.0.5 => 5.0.5

Severity

blocking an upgrade

[dummdidumm]

Maybe related to language tools

[webJose]

This problem seems to affect components that receive optional snippets (perhaps the "optional" part is not required for reproduction):

<script lang="ts">
  import Other from './Other.svelte'; // This one contains the label snippet in its Props too.
  type Props = {
    label?: Snippet;
  };

  let props = {
    label,
  }: Props = $props();

  let noLabel = $derived(<some logic>);
</script>

<Other label={noLabel ? undefined : label} />

Here, I cannot use // @ts-expect-error so svelte-check jumps on it.

[AnsonH]

For me it's caused by the snippet prop's name clashing with HTMLAttributes.

Here's my example:

// DraggableWindow.svelte
<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLAttributes } from 'svelte/elements';
  
  type Props = HTMLAtttributes<HTMLDivElement> & {
    /** Title of the window */
    title?: Snippet;
  }
  // ...
</script>

// SettingsWindow.svelte
<script lang="ts>
  import DraggableWindow from '../DraggableWindow.svelte';
</script>

{#snippet title()}
  <h2>Settings</h2>
{/snippet}

// ❌ Type '() => ReturnType<import("svelte").Snippet>' is not assignable to type 'string & Snippet<[]>'.
<DraggableWindow {title}>...</DraggableWindow>

This is because HTMLAttributes<HTMLDivElement> also has a title attribute:

title?: string | undefined | null;

So the solution is to omit title from HTMLAttributes:

- type Props = HTMLAtttributes<HTMLDivElement> & {
+ type Props = Omit<HTMLAtttributes<HTMLDivElement>, "title"> & {
    /** Title of the window */
    title?: Snippet;
  }

[paoloricciuti]

I'm trying to reproduce but failing to do so

Can you give me more guidance?

[webJose]

Hello. I did not need anything else but what's in here to reproduce, but that was 3 months ago, and many updates to tooling have been rolled out. I'll verify if the validity of this claim remains current as soon as I finish breakfast.

[webJose]

@paoloricciuti I am currently unable to reproduce my sample myself, even with the back-then dependency versions. I think this may have been a tooling issue that is no longer present. I will double-check with the project at work (a component library for Bootstrap); the repro I have in my personal PC is no longer exhibiting the problem.

It appears that my only problem with the Snippet type ATM is: sveltejs/language-tools#2653

[webJose]

This problem seems to affect components that receive optional snippets (perhaps the "optional" part is not required for reproduction):

<script lang="ts">
  import Other from './Other.svelte'; // This one contains the label snippet in its Props too.
  type Props = {
    label?: Snippet;
  };

  let props = {
    label,
  }: Props = $props();

  let noLabel = $derived(<some logic>);
</script>

<Other label={noLabel ? undefined : label} />
Here, I cannot use // @ts-expect-error so svelte-check jumps on it.

This one also doesn't reproduce anymore.