feat: improve props type (#569)

ota-meshi · web-flow · commit 3119299bb662 · 2024-10-13T16:13:29.000+09:00
diff --git a/.changeset/early-lobsters-repeat.md b/.changeset/early-lobsters-repeat.md
@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: improve props type
diff --git a/src/parser/converts/attr.ts b/src/parser/converts/attr.ts
@@ -293,7 +293,7 @@ function buildAttributeType(
     return null;
   }
   const elementName = ctx.elements.get(element)!.name;
-  const componentPropsType = `import('svelte').ComponentProps<${elementName}>`;
+  const componentPropsType = `import('svelte').ComponentProps<typeof ${elementName}>`;
   return conditional({
     check: `'${attrName}'`,
     extends: `infer PROP`,
diff --git a/tests/fixtures/parser/ast/svelte5/ts-event06-type-output.svelte b/tests/fixtures/parser/ast/svelte5/ts-event06-type-output.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import Component from './ts-event03-input.svelte'; // Component: __sveltets_2_IsomorphicComponent<$$ComponentProps, { [evt: string]: CustomEvent<any>; }, {}, Record<string, any>, string>
+    import Component from './ts-event03-input.svelte'; // Component: Component<$$ComponentProps, {}, "">
 </script>
 
-<Component onfoo="{e=>{ // Component: __sveltets_2_IsomorphicComponent<$$ComponentProps, { [evt: string]: CustomEvent<any>; }, {}, Record<string, any>, string>, e: { detail: number; }
+<Component onfoo="{e=>{ // Component: Component<$$ComponentProps, {}, "">, e: { detail: number; }
     // e.detail is number
     e.detail; // e.detail: number
 }}" />

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte-eslint-parser": minor
 +---
++
 +feat: improve props type
Original file line number	Diff line number	Diff line change
`@@ -293,7 +293,7 @@ function buildAttributeType(`
`293`	`293`	`return null;`
`294`	`294`	`}`
`295`	`295`	`const elementName = ctx.elements.get(element)!.name;`
`296`		- const componentPropsType = `import('svelte').ComponentProps<${elementName}>`;
	`296`	+ const componentPropsType = `import('svelte').ComponentProps<typeof ${elementName}>`;
`297`	`297`	`return conditional({`
`298`	`298`	check: `'${attrName}'`,
`299`	`299`	extends: `infer PROP`,