Report type-only imports in no-undef-components (#1967)

Co-authored-by: lihongda03 <lihongda03@kuaishou.com>
vuejs · Sep 13, 2022 · 6173b91 · 6173b91
1 parent 8828bbb
commit 6173b91
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 4 deletions.
diff --git a/lib/rules/no-undef-components.js b/lib/rules/no-undef-components.js
@@ -50,7 +50,9 @@ module.exports = {
       }
     ],
     messages: {
-      undef: "The '<{{name}}>' component has been used, but not defined."
+      undef: "The '<{{name}}>' component has been used, but not defined.",
+      typeOnly:
+        "The '<{{name}}>' component has been used, but '{{name}}' only refers to a type."
     }
   },
   /** @param {RuleContext} context */
@@ -121,6 +123,7 @@ module.exports = {
       // For <script setup>
       /** @type {Set<string>} */
       const scriptVariableNames = new Set()
+      const scriptTypeOnlyNames = new Set()
       const globalScope = context.getSourceCode().scopeManager.globalScope
       if (globalScope) {
         for (const variable of globalScope.variables) {
@@ -130,7 +133,11 @@ module.exports = {
           (scope) => scope.type === 'module'
         )
         for (const variable of (moduleScope && moduleScope.variables) || []) {
-          scriptVariableNames.add(variable.name)
+          if (variable.isTypeVariable) {
+            scriptTypeOnlyNames.add(variable.name)
+          } else {
+            scriptVariableNames.add(variable.name)
+          }
         }
       }
       /**
@@ -167,7 +174,7 @@ module.exports = {
 
         context.report({
           node: reportNode,
-          messageId: 'undef',
+          messageId: scriptTypeOnlyNames.has(rawName) ? 'typeOnly' : 'undef',
           data: {
             name: rawName
           }

diff --git a/tests/lib/rules/no-undef-components.js b/tests/lib/rules/no-undef-components.js
@@ -661,6 +661,66 @@ tester.run('no-undef-components', rule, {
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+        import type Foo from './Foo.vue'
+        import type {HelloWorld1} from './components/HelloWorld'
+        import { type HelloWorld2 } from './components/HelloWorld2'
+        import type {HelloWorld as HelloWorld3} from './components/HelloWorld3'
+        import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+        import { type default as HelloWorld5 } from './components/HelloWorld5';
+      </script>
+
+      <template>
+        <Foo />
+        <HelloWorld1 />
+        <HelloWorld2 />
+        <HelloWorld3 />
+        <HelloWorld4 />
+        <HelloWorld5 />
+      </template>
+      `,
+      parserOptions: {
+        ecmaVersion: 6,
+        sourceType: 'module',
+        parser: require.resolve('@typescript-eslint/parser')
+      },
+      parser: require.resolve('vue-eslint-parser'),
+      errors: [
+        {
+          message:
+            "The '<Foo>' component has been used, but 'Foo' only refers to a type.",
+          line: 12
+        },
+        {
+          message:
+            "The '<HelloWorld1>' component has been used, but 'HelloWorld1' only refers to a type.",
+          line: 13
+        },
+        {
+          message:
+            "The '<HelloWorld2>' component has been used, but 'HelloWorld2' only refers to a type.",
+          line: 14
+        },
+        {
+          message:
+            "The '<HelloWorld3>' component has been used, but 'HelloWorld3' only refers to a type.",
+          line: 15
+        },
+        {
+          message:
+            "The '<HelloWorld4>' component has been used, but 'HelloWorld4' only refers to a type.",
+          line: 16
+        },
+        {
+          message:
+            "The '<HelloWorld5>' component has been used, but 'HelloWorld5' only refers to a type.",
+          line: 17
+        }
+      ]
+    },
 
     // options API
     {

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2019",
     "module": "commonjs",
     "lib": ["es2020"],
     "allowJs": true,

diff --git a/typings/eslint-plugin-vue/util-types/ast/es-ast.ts b/typings/eslint-plugin-vue/util-types/ast/es-ast.ts
@@ -268,6 +268,7 @@ export interface ImportDeclaration extends HasParentNode {
     | ImportNamespaceSpecifier
   )[]
   source: Literal & { value: string }
+  importKind?: 'type' | 'value'
 }
 export interface ImportSpecifier extends HasParentNode {
   type: 'ImportSpecifier'

diff --git a/typings/eslint/index.d.ts b/typings/eslint/index.d.ts
@@ -54,6 +54,9 @@ export namespace Scope {
     eslintExplicitGlobal?: boolean | undefined
     eslintExplicitGlobalComments?: Comment[] | undefined
     eslintImplicitGlobalSetting?: 'readonly' | 'writable' | undefined
+
+    isTypeVariable?: boolean
+    isValueVariable?: boolean
   }
   interface Reference {
     identifier: VAST.Identifier