-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
Describe the bug
I have dealt with this issue for a long time now, and just found out the issue happens only when using SvelteHTMLElements type.
Reproduction
Let's say we have the following simple component
<script lang="ts" generics="ElementTag extends keyof HTMLElementTagNameMap">
import type { SvelteHTMLElements } from "svelte/elements";
type Props = SvelteHTMLElements[ElementTag] & {
element: ElementTag;
};
const { element, ...restProps }: Props = $props();
</script>
First of all, the component error says "Type '{}' is not assignable to type 'Props | undefined'" instead of "Property 'element' is missing in type '{}' but required in type '{ element: keyof HTMLElementTagNameMap; }'"
The language server seems to handle only this small type; If it becomes any more complicated, especially if the main "SvelteHTMLElements[ElementTag]" is wrapped in other Typescript utility types such as "Omit", like below =>
<script lang="ts" generics="ElementTag extends keyof HTMLElementTagNameMap">
import type { SvelteHTMLElements } from "svelte/elements";
type Props = Omit<SvelteHTMLElements[ElementTag], "children"> & {
element: ElementTag;
};
const { element, ...restProps }: Props = $props();
</script>
Then you get hit with "Expression produces a union type that is too complex to represent.ts(2590)" everywhere, especially where you render the component (Make sure to restart Svelte language server after you make changes, because if you don't, the language server takes a while to show the error).
Since I knew keyof SvelteHTMLElements
doesn't work because the type contains [name: string]: { [name: string]: any };
at the end of it, I thought maybe this is the cause of it so I extracted the properties from "SvelteHTMLElements" that doesn't include the Svelte's own elements such as "svelte:boundary" and the last [name: string]: { [name: string]: any };
and used that instead, but the errors didn't go away.
Now, why did I say "SvelteHTMLElements" is causing this? Because if I swap it out with HTMLAttributes, the problem goes away =>
<script lang="ts" generics="ElementTag extends keyof HTMLElementTagNameMap">
import type { HTMLAttributes } from "svelte/elements";
type Props = Omit<HTMLAttributes<HTMLElementTagNameMap[ElementTag], "children"> & {
element: ElementTag;
};
const { element, ...restProps }: Props = $props();
</script>
But if I use "HTMLAttributes" instead, I lose the extra properties that are element-specific and exist inside "SvelteHTMLElements".
Can someone please confirm that I'm not the only one running into this issue? I'm using the latest VSCode extension, and my TS version is "^5.9.2"
Logs
System Info
System:
OS: Windows 11 10.0.26100
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
Memory: 6.42 GB / 15.63 GB
Binaries:
Node: 24.6.0 - C:\nvm4w\nodejs\node.EXE
npm: 11.5.1 - C:\nvm4w\nodejs\npm.CMD
Browsers:
Edge: Chromium (139.0.3405.125)
Internet Explorer: 11.0.26100.1882
npmPackages:
svelte: ^5.39.4 => 5.39.4
Severity
annoyance