feat: improve component event handler type (#314)

* feat: improve component event handler type * fix: test * fix: test * chore: refactor
sveltejs · Apr 26, 2023 · 96a72a5 · 96a72a5
1 parent f13e307
commit 96a72a5
Show file tree

Hide file tree

Showing 33 changed files with 10,578 additions and 206 deletions.
diff --git a/.changeset/clean-taxis-rule.md b/.changeset/clean-taxis-rule.md
@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: improve component event handler type
diff --git a/package.json b/package.json
@@ -98,7 +98,9 @@
     "semver": "^7.3.5",
     "string-replace-loader": "^3.0.3",
     "svelte": "^3.57.0",
+    "svelte2tsx": "^0.6.11",
     "typescript": "~5.0.0",
+    "typescript-eslint-parser-for-extra-files": "^0.3.0",
     "vue-eslint-parser": "^9.0.0"
   },
   "publishConfig": {

diff --git a/src/parser/converts/attr.ts b/src/parser/converts/attr.ts
@@ -346,52 +346,81 @@ function buildEventHandlerType(
   elementName: string,
   eventName: string
 ) {
-  const nativeEventHandlerType = [
-    `(e:`,
-    /**/ `'${eventName}' extends infer EVT`,
-    /**/ /**/ `?EVT extends keyof HTMLElementEventMap`,
-    /**/ /**/ /**/ `?HTMLElementEventMap[EVT]`,
-    /**/ /**/ /**/ `:CustomEvent<any>`,
-    /**/ /**/ `:never`,
-    `)=>void`,
-  ].join("");
+  const nativeEventHandlerType = `(e:${conditional({
+    check: `'${eventName}'`,
+    extends: `infer EVT`,
+    true: conditional({
+      check: `EVT`,
+      extends: `keyof HTMLElementEventMap`,
+      true: `HTMLElementEventMap[EVT]`,
+      false: `CustomEvent<any>`,
+    }),
+    false: `never`,
+  })})=>void`;
   if (element.type !== "SvelteElement") {
     return nativeEventHandlerType;
   }
   if (element.kind === "component") {
-    // `@typescript-eslint/parser` currently cannot parse `*.svelte` import types correctly.
-    // So if we try to do a correct type parsing, it's argument type will be `any`.
-    // A workaround is to inject the type directly, as `CustomEvent<any>` is better than `any`.
-
-    // const componentEvents = `import('svelte').ComponentEvents<${elementName}>`;
-    // return `(e:'${eventName}' extends keyof ${componentEvents}?${componentEvents}['${eventName}']:CustomEvent<any>)=>void`;
-
-    return `(e:CustomEvent<any>)=>void`;
+    const componentEventsType = `import('svelte').ComponentEvents<${elementName}>`;
+    return `(e:${conditional({
+      check: `0`,
+      extends: `(1 & ${componentEventsType})`,
+      // `componentEventsType` is `any`
+      //   `@typescript-eslint/parser` currently cannot parse `*.svelte` import types correctly.
+      //   So if we try to do a correct type parsing, it's argument type will be `any`.
+      //   A workaround is to inject the type directly, as `CustomEvent<any>` is better than `any`.
+      true: `CustomEvent<any>`,
+      // `componentEventsType` has an exact type.
+      false: conditional({
+        check: `'${eventName}'`,
+        extends: `infer EVT`,
+        true: conditional({
+          check: `EVT`,
+          extends: `keyof ${componentEventsType}`,
+          true: `${componentEventsType}[EVT]`,
+          false: `CustomEvent<any>`,
+        }),
+        false: `never`,
+      }),
+    })})=>void`;
   }
   if (element.kind === "special") {
     if (elementName === "svelte:component") return `(e:CustomEvent<any>)=>void`;
     return nativeEventHandlerType;
   }
   const attrName = `on:${eventName}`;
-  const importSvelteHTMLElements =
-    "import('svelte/elements').SvelteHTMLElements";
-  return [
-    `'${elementName}' extends infer EL`,
-    /**/ `?(`,
-    /**/ /**/ `EL extends keyof ${importSvelteHTMLElements}`,
-    /**/ /**/ `?(`,
-    /**/ /**/ /**/ `'${attrName}' extends infer ATTR`,
-    /**/ /**/ /**/ `?(`,
-    /**/ /**/ /**/ /**/ `ATTR extends keyof ${importSvelteHTMLElements}[EL]`,
-    /**/ /**/ /**/ /**/ /**/ `?${importSvelteHTMLElements}[EL][ATTR]`,
-    /**/ /**/ /**/ /**/ /**/ `:${nativeEventHandlerType}`,
-    /**/ /**/ /**/ `)`,
-    /**/ /**/ /**/ `:never`,
-    /**/ /**/ `)`,
-    /**/ /**/ `:${nativeEventHandlerType}`,
-    /**/ `)`,
-    /**/ `:never`,
-  ].join("");
+  const svelteHTMLElementsType = "import('svelte/elements').SvelteHTMLElements";
+  return conditional({
+    check: `'${elementName}'`,
+    extends: "infer EL",
+    true: conditional({
+      check: `EL`,
+      extends: `keyof ${svelteHTMLElementsType}`,
+      true: conditional({
+        check: `'${attrName}'`,
+        extends: "infer ATTR",
+        true: conditional({
+          check: `ATTR`,
+          extends: `keyof ${svelteHTMLElementsType}[EL]`,
+          true: `${svelteHTMLElementsType}[EL][ATTR]`,
+          false: nativeEventHandlerType,
+        }),
+        false: `never`,
+      }),
+      false: nativeEventHandlerType,
+    }),
+    false: `never`,
+  });
+
+  /** Generate `C extends E ? T : F` type. */
+  function conditional(types: {
+    check: string;
+    extends: string;
+    true: string;
+    false: string;
+  }) {
+    return `${types.check} extends ${types.extends}?(${types.true}):(${types.false})`;
+  }
 }
 
 /** Convert for Class Directive */

diff --git a/tests/fixtures/integrations/parser-object-tests/ts-multiple-parser-setup.ts b/tests/fixtures/integrations/parser-object-tests/ts-multiple-parser-setup.ts
@@ -1,14 +1,11 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import * as ts from "@typescript-eslint/parser";
 
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: {
-      ...BASIC_PARSER_OPTIONS,
-      parser: { ts },
-    },
+    parserOptions: generateParserOptions({ parser: { ts } }),
     env: {
       browser: true,
       es2021: true,

diff --git a/tests/fixtures/integrations/parser-object-tests/ts-single-parser-setup.ts b/tests/fixtures/integrations/parser-object-tests/ts-single-parser-setup.ts
@@ -1,14 +1,11 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import * as parser from "@typescript-eslint/parser";
 
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: {
-      ...BASIC_PARSER_OPTIONS,
-      parser,
-    },
+    parserOptions: generateParserOptions({ parser }),
     env: {
       browser: true,
       es2021: true,

diff --git a/tests/fixtures/integrations/type-info-tests/await-setup.ts b/tests/fixtures/integrations/type-info-tests/await-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -12,7 +12,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-unsafe-call": "error",
     },

diff --git a/tests/fixtures/integrations/type-info-tests/i18n-setup.ts b/tests/fixtures/integrations/type-info-tests/i18n-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -12,7 +12,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-unsafe-call": "error",
     },

diff --git a/tests/fixtures/integrations/type-info-tests/issue226-setup.ts b/tests/fixtures/integrations/type-info-tests/issue226-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -12,7 +12,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-unsafe-argument": "error",
     },

diff --git a/tests/fixtures/integrations/type-info-tests/no-unnecessary-condition01-setup.ts b/tests/fixtures/integrations/type-info-tests/no-unnecessary-condition01-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -12,7 +12,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-unnecessary-condition": "error",
     },

diff --git a/tests/fixtures/integrations/type-info-tests/plugin-issue254-setup.ts b/tests/fixtures/integrations/type-info-tests/plugin-issue254-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -12,7 +12,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-unnecessary-condition": "error",
     },

diff --git a/tests/fixtures/integrations/type-info-tests/reactive-setup.ts b/tests/fixtures/integrations/type-info-tests/reactive-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -28,7 +28,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-unsafe-argument": "error",
       "@typescript-eslint/no-unsafe-assignment": "error",

diff --git a/tests/fixtures/integrations/type-info-tests/reactive2-setup.ts b/tests/fixtures/integrations/type-info-tests/reactive2-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -16,7 +16,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-unsafe-assignment": "error",
       "@typescript-eslint/no-unsafe-member-access": "error",

diff --git a/tests/fixtures/integrations/type-info-tests/ts-newline-setup.ts b/tests/fixtures/integrations/type-info-tests/ts-newline-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -16,7 +16,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-confusing-void-expression": "error",
       "@typescript-eslint/explicit-function-return-type": "error",

diff --git a/tests/fixtures/integrations/type-info-tests/ts-no-misused-promises-setup.ts b/tests/fixtures/integrations/type-info-tests/ts-no-misused-promises-setup.ts
@@ -1,6 +1,6 @@
 /* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
 import type { Linter } from "eslint";
-import { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils";
 import { rules } from "@typescript-eslint/eslint-plugin";
 export function setupLinter(linter: Linter) {
   linter.defineRule(
@@ -12,7 +12,7 @@ export function setupLinter(linter: Linter) {
 export function getConfig() {
   return {
     parser: "svelte-eslint-parser",
-    parserOptions: BASIC_PARSER_OPTIONS,
+    parserOptions: generateParserOptions(),
     rules: {
       "@typescript-eslint/no-misused-promises": "error",
     },

diff --git a/tests/fixtures/parser/ast/ts-event05-input.svelte b/tests/fixtures/parser/ast/ts-event05-input.svelte
@@ -3,6 +3,9 @@
 </script>
 
 <Component on:foo="{e=>{
-    // TODO: e.detail is number
+    // e.detail is number
+    //   `@typescript-eslint/parser` doesn't get the correct types.
+    //   Using `typescript-eslint-parser-for-extra-files` will give we the correct types.
+    //   See `ts-event06-input.svelte` test case
     e.detail;
 }}" />
diff --git a/tests/fixtures/parser/ast/ts-event05-no-unused-expressions-result.json b/tests/fixtures/parser/ast/ts-event05-no-unused-expressions-result.json
@@ -2,7 +2,7 @@
   {
     "ruleId": "no-unused-expressions",
     "code": "e.detail;",
-    "line": 7,
+    "line": 10,
     "column": 5
   }
 ]