Fix false positives for circular references in <script setup> in vue/no-undef-components (#2073)

Co-authored-by: Mr.Hope <mister-hope@outlook.com>

Author: ota-meshi

lib/rules/no-undef-components.js

@@ -4,6 +4,7 @@
  */
 'use strict'
 
+const path = require('path')
 const utils = require('../utils')
 const casing = require('../utils/casing')
 
@@ -17,6 +18,93 @@ function camelize(str) {
   return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
 }
 
+class DefinedInSetupComponents {
+  constructor() {
+    /**
+     * Component names
+     * @type {Set<string>}
+     */
+    this.names = new Set()
+  }
+
+  /**
+   * @param {string[]} names
+   */
+  addName(...names) {
+    for (const name of names) {
+      this.names.add(name)
+    }
+  }
+
+  /**
+   * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L334
+   * @param {string} rawName
+   */
+  isDefinedComponent(rawName) {
+    if (this.names.has(rawName)) {
+      return true
+    }
+    const camelName = camelize(rawName)
+    if (this.names.has(camelName)) {
+      return true
+    }
+    const pascalName = casing.capitalize(camelName)
+    if (this.names.has(pascalName)) {
+      return true
+    }
+    // Check namespace
+    // https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L305
+    const dotIndex = rawName.indexOf('.')
+    if (dotIndex > 0 && this.isDefinedComponent(rawName.slice(0, dotIndex))) {
+      return true
+    }
+    return false
+  }
+}
+
+class DefinedInOptionComponents {
+  constructor() {
+    /**
+     * Component names
+     * @type {Set<string>}
+     */
+    this.names = new Set()
+    /**
+     * Component names, transformed to kebab-case
+     * @type {Set<string>}
+     */
+    this.kebabCaseNames = new Set()
+  }
+
+  /**
+   * @param {string[]} names
+   */
+  addName(...names) {
+    for (const name of names) {
+      this.names.add(name)
+      this.kebabCaseNames.add(casing.kebabCase(name))
+    }
+  }
+
+  /**
+   * @param {string} rawName
+   */
+  isDefinedComponent(rawName) {
+    if (this.names.has(rawName)) {
+      return true
+    }
+    const kebabCaseName = casing.kebabCase(rawName)
+    if (
+      this.kebabCaseNames.has(kebabCaseName) &&
+      !casing.isPascalCase(rawName)
+    ) {
+      // Component registered as `foo-bar` cannot be used as `FooBar`
+      return true
+    }
+    return false
+  }
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -109,13 +197,15 @@ module.exports = {
 
     if (utils.isScriptSetup(context)) {
       // For <script setup>
+      const definedInSetupComponents = new DefinedInSetupComponents()
+      const definedInOptionComponents = new DefinedInOptionComponents()
+
       /** @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) {
-          scriptVariableNames.add(variable.name)
+          definedInSetupComponents.addName(variable.name)
         }
         const moduleScope = globalScope.childScopes.find(
           (scope) => scope.type === 'module'
@@ -146,39 +236,37 @@ module.exports = {
           ) {
             scriptTypeOnlyNames.add(variable.name)
           } else {
-            scriptVariableNames.add(variable.name)
+            definedInSetupComponents.addName(variable.name)
           }
         }
       }
-      /**
-       * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L334
-       * @param {string} name
-       */
-      const existsSetupReference = (name) => {
-        if (scriptVariableNames.has(name)) {
-          return true
-        }
-        const camelName = camelize(name)
-        if (scriptVariableNames.has(camelName)) {
-          return true
-        }
-        const pascalName = casing.capitalize(camelName)
-        if (scriptVariableNames.has(pascalName)) {
-          return true
+
+      // For circular references
+      const fileName = context.getFilename()
+      const selfComponentName = path.basename(fileName, path.extname(fileName))
+      definedInSetupComponents.addName(selfComponentName)
+      scriptVisitor = utils.defineVueVisitor(context, {
+        onVueObjectEnter(node, { type }) {
+          if (type !== 'export') return
+          const nameProperty = utils.findProperty(node, 'name')
+
+          if (nameProperty && utils.isStringLiteral(nameProperty.value)) {
+            const name = utils.getStringLiteralValue(nameProperty.value)
+            if (name) {
+              definedInOptionComponents.addName(name)
+            }
+          }
         }
-        return false
-      }
+      })
+
       verifyName = (rawName, reportNode) => {
         if (!isVerifyTargetComponent(rawName)) {
           return
         }
-        if (existsSetupReference(rawName)) {
+        if (definedInSetupComponents.isDefinedComponent(rawName)) {
           return
         }
-        // Check namespace
-        // https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L305
-        const dotIndex = rawName.indexOf('.')
-        if (dotIndex > 0 && existsSetupReference(rawName.slice(0, dotIndex))) {
+        if (definedInOptionComponents.isDefinedComponent(rawName)) {
           return
         }
 
@@ -192,26 +280,10 @@ module.exports = {
       }
     } else {
       // For Options API
-
-      /**
-       * All registered components
-       * @type {string[]}
-       */
-      const registeredComponentNames = []
-      /**
-       * All registered components, transformed to kebab-case
-       * @type {string[]}
-       */
-      const registeredComponentKebabCaseNames = []
-
-      /**
-       * All registered components using kebab-case syntax
-       * @type {string[]}
-       */
-      const componentsRegisteredAsKebabCase = []
+      const definedInOptionComponents = new DefinedInOptionComponents()
 
       scriptVisitor = utils.executeOnVue(context, (obj) => {
-        registeredComponentNames.push(
+        definedInOptionComponents.addName(
           ...utils.getRegisteredComponents(obj).map(({ name }) => name)
         )
 
@@ -220,33 +292,16 @@ module.exports = {
         if (nameProperty && utils.isStringLiteral(nameProperty.value)) {
           const name = utils.getStringLiteralValue(nameProperty.value)
           if (name) {
-            registeredComponentNames.push(name)
+            definedInOptionComponents.addName(name)
           }
         }
-
-        registeredComponentKebabCaseNames.push(
-          ...registeredComponentNames.map((name) => casing.kebabCase(name))
-        )
-        componentsRegisteredAsKebabCase.push(
-          ...registeredComponentNames.filter(
-            (name) => name === casing.kebabCase(name)
-          )
-        )
       })
 
       verifyName = (rawName, reportNode) => {
         if (!isVerifyTargetComponent(rawName)) {
           return
         }
-        if (registeredComponentNames.includes(rawName)) {
-          return
-        }
-        const kebabCaseName = casing.kebabCase(rawName)
-        if (
-          registeredComponentKebabCaseNames.includes(kebabCaseName) &&
-          !casing.isPascalCase(rawName)
-        ) {
-          // Component registered as `foo-bar` cannot be used as `FooBar`
+        if (definedInOptionComponents.isDefinedComponent(rawName)) {
           return
         }
 

tests/lib/rules/no-undef-components.js

@@ -108,6 +108,49 @@ tester.run('no-undef-components', rule, {
         }
       ]
     },
+    // circular references
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      </script>
+
+      <template>
+        <test />
+      </template>
+      `
+    },
+    {
+      filename: 'FooBar.vue',
+      code: `
+      <script setup>
+      </script>
+
+      <template>
+        <FooBar />
+        <foo-bar />
+      </template>
+      `
+    },
+    {
+      filename: 'FooBar.vue',
+      code: `
+      <script>
+      export default {
+        name: 'BarFoo'
+      }
+      </script>
+      <script setup>
+      </script>
+
+      <template>
+        <FooBar />
+        <foo-bar />
+        <BarFoo />
+        <bar-foo />
+      </template>
+      `
+    },
 
     // options API
     {