fix(component-name-in-template-casing): update rule to support <script setup> (#1934)

Author: BJ0815

lib/rules/component-name-in-template-casing.js

@@ -68,9 +68,22 @@ module.exports = {
       context.parserServices.getTemplateBodyTokenStore &&
       context.parserServices.getTemplateBodyTokenStore()
 
-    /** @type { string[] } */
-    const registeredComponents = []
+    /** @type { Set<string> } */
+    const registeredComponents = new Set()
 
+    if (utils.isScriptSetup(context)) {
+      // For <script setup>
+      const globalScope = context.getSourceCode().scopeManager.globalScope
+      if (globalScope) {
+        // Only check find the import module
+        const moduleScope = globalScope.childScopes.find(
+          (scope) => scope.type === 'module'
+        )
+        for (const variable of (moduleScope && moduleScope.variables) || []) {
+          registeredComponents.add(variable.name)
+        }
+      }
+    }
     /**
      * Checks whether the given node is the verification target node.
      * @param {VElement} node element node
@@ -95,7 +108,7 @@ module.exports = {
       }
       // We only verify the components registered in the component.
       if (
-        registeredComponents
+        [...registeredComponents]
           .filter((name) => casing.isPascalCase(name)) // When defining a component with PascalCase, you can use either case
           .some(
             (name) =>
@@ -153,9 +166,9 @@ module.exports = {
         },
         ...(registeredComponentsOnly
           ? utils.executeOnVue(context, (obj) => {
-              registeredComponents.push(
-                ...utils.getRegisteredComponents(obj).map((n) => n.name)
-              )
+              for (const n of utils.getRegisteredComponents(obj)) {
+                registeredComponents.add(n.name)
+              }
             })
           : {})
       }

tests/lib/rules/component-name-in-template-casing.js

@@ -814,6 +814,46 @@ tester.run('component-name-in-template-casing', rule, {
         'Component name "client-only" is not PascalCase.',
         'Component name "keep-alive" is not PascalCase.'
       ]
+    },
+    {
+      code: `
+        <template>
+          <the-component />
+        </template>
+        <script setup>
+          import TheComponent from '@/components/theComponent.vue'
+        </script>
+      `,
+      options: ['PascalCase'],
+      output: `
+        <template>
+          <TheComponent />
+        </template>
+        <script setup>
+          import TheComponent from '@/components/theComponent.vue'
+        </script>
+      `,
+      errors: ['Component name "the-component" is not PascalCase.']
+    },
+    {
+      code: `
+        <template>
+          <TheComponent />
+        </template>
+        <script setup>
+          import TheComponent from '@/components/theComponent.vue'
+        </script>
+      `,
+      options: ['kebab-case'],
+      output: `
+        <template>
+          <the-component />
+        </template>
+        <script setup>
+          import TheComponent from '@/components/theComponent.vue'
+        </script>
+      `,
+      errors: ['Component name "TheComponent" is not kebab-case.']
     }
   ]
 })