Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Snippet doesn't satisfy the Snippet type, apparently #13759

Open
webJose opened this issue Oct 21, 2024 · 3 comments
Open

Snippet doesn't satisfy the Snippet type, apparently #13759

webJose opened this issue Oct 21, 2024 · 3 comments

Comments

@webJose
Copy link
Contributor

webJose commented Oct 21, 2024

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
Copy link
Member

Maybe related to language tools

@webJose
Copy link
Contributor Author

webJose commented Oct 24, 2024

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
Copy link

AnsonH commented Jan 4, 2025

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;
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants