update forked component-name-in-template-casing rule with upstream to also work with script setup

Author: rashfael

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

@@ -19,19 +19,14 @@ const { toRegExp } = require('eslint-plugin-vue/lib/utils/regexp')
 const allowedCaseOptions = ['PascalCase', 'kebab-case']
 const defaultCase = 'PascalCase'
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description:
         'enforce specific casing for the component naming style in template',
       categories: undefined,
-      url: 'https://eslint.vuejs.org/rules/component-name-in-template-casing.html',
-      dropIn: true
+      url: 'https://eslint-plugin-vue-pug.rash.codes/rules/component-name-in-template-casing.html'
     },
     fixable: 'code',
     schema: [
@@ -41,6 +36,11 @@ module.exports = {
       {
         type: 'object',
         properties: {
+          globals: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true
+          },
           ignores: {
             type: 'array',
             items: { type: 'string' },
@@ -59,18 +59,34 @@ module.exports = {
   create(context) {
     const caseOption = context.options[0]
     const options = context.options[1] || {}
-    const caseType =
-      allowedCaseOptions.indexOf(caseOption) !== -1 ? caseOption : defaultCase
+    const caseType = allowedCaseOptions.includes(caseOption)
+      ? caseOption
+      : defaultCase
     /** @type {RegExp[]} */
     const ignores = (options.ignores || []).map(toRegExp)
+    /** @type {string[]} */
+    const globals = (options.globals || []).map(casing.pascalCase)
     const registeredComponentsOnly = options.registeredComponentsOnly !== false
     const tokens =
       context.parserServices.getTemplateBodyTokenStore &&
       context.parserServices.getTemplateBodyTokenStore()
 
-    /** @type { string[] } */
-    const registeredComponents = []
+    /** @type { Set<string> } */
+    const registeredComponents = new Set(globals)
 
+    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
@@ -82,30 +98,21 @@ module.exports = {
         return false
       }
 
-      if (!registeredComponentsOnly) {
-        // If the user specifies registeredComponentsOnly as false, it checks all component tags.
-        if (
-          (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
-          utils.isHtmlWellKnownElementName(node.rawName) ||
-          utils.isSvgWellKnownElementName(node.rawName)
-        ) {
-          return false
-        }
-        return true
-      }
-      // We only verify the components registered in the component.
       if (
-        registeredComponents
-          .filter((name) => casing.isPascalCase(name)) // When defining a component with PascalCase, you can use either case
-          .some(
-            (name) =>
-              node.rawName === name || casing.pascalCase(node.rawName) === name
-          )
+        (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+        utils.isHtmlWellKnownElementName(node.rawName) ||
+        utils.isSvgWellKnownElementName(node.rawName)
       ) {
+        return false
+      }
+
+      if (!registeredComponentsOnly) {
+        // If the user specifies registeredComponentsOnly as false, it checks all component tags.
         return true
       }
 
-      return false
+      // We only verify the registered components.
+      return registeredComponents.has(casing.pascalCase(node.rawName))
     }
 
     let hasInvalidEOF = false
@@ -148,9 +155,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/rules/component-name-in-template-casing.js

@@ -628,6 +628,27 @@ KeepAlive
         'Component name "client-only" is not PascalCase.',
         'Component name "keep-alive" is not PascalCase.'
       ]
+    },
+    {
+      code: `
+<script setup="" lang="ts">
+import TheComponent from './TheComponent.vue'
+</script>
+<template lang="pug">
+the-component
+</template>
+      `,
+      filename: 'test.vue',
+      output: `
+<script setup="" lang="ts">
+import TheComponent from './TheComponent.vue'
+</script>
+<template lang="pug">
+TheComponent
+</template>
+      `,
+      options: ['PascalCase'],
+      errors: ['Component name "the-component" is not PascalCase.']
     }
   ]
 })