feat(no-reserved-component-names): add case sensitive option

Author: waynzh

lib/rules/no-reserved-component-names.js

@@ -34,19 +34,6 @@ function isLowercase(word) {
   return /^[a-z]*$/.test(word)
 }
 
-const RESERVED_NAMES_IN_HTML = new Set([
-  ...htmlElements,
-  ...htmlElements.map(casing.capitalize)
-])
-const RESERVED_NAMES_IN_OTHERS = new Set([
-  ...deprecatedHtmlElements,
-  ...deprecatedHtmlElements.map(casing.capitalize),
-  ...kebabCaseElements,
-  ...kebabCaseElements.map(casing.pascalCase),
-  ...svgElements,
-  ...svgElements.filter(isLowercase).map(casing.capitalize)
-])
-
 /**
  * @param {Expression | SpreadElement} node
  * @returns {node is (Literal | TemplateLiteral)}
@@ -60,17 +47,6 @@ function canVerify(node) {
   )
 }
 
-/**
- * @param {string} name
- * @returns {string}
- */
-function getMessageId(name) {
-  if (RESERVED_NAMES_IN_HTML.has(name)) return 'reservedInHtml'
-  if (RESERVED_NAMES_IN_VUE.has(name)) return 'reservedInVue'
-  if (RESERVED_NAMES_IN_VUE3.has(name)) return 'reservedInVue3'
-  return 'reserved'
-}
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -90,6 +66,9 @@ module.exports = {
           },
           disallowVue3BuiltInComponents: {
             type: 'boolean'
+          },
+          htmlElementCaseSensitive: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -109,6 +88,26 @@ module.exports = {
       options.disallowVueBuiltInComponents === true
     const disallowVue3BuiltInComponents =
       options.disallowVue3BuiltInComponents === true
+    const htmlElementCaseSensitive = options.htmlElementCaseSensitive === true
+
+    const RESERVED_NAMES_IN_HTML = new Set([
+      ...htmlElements,
+      ...(htmlElementCaseSensitive ? [] : htmlElements.map(casing.capitalize))
+    ])
+    const RESERVED_NAMES_IN_OTHERS = new Set([
+      ...deprecatedHtmlElements,
+      ...(htmlElementCaseSensitive
+        ? []
+        : deprecatedHtmlElements.map(casing.capitalize)),
+      ...kebabCaseElements,
+      ...(htmlElementCaseSensitive
+        ? []
+        : kebabCaseElements.map(casing.pascalCase)),
+      ...svgElements,
+      ...(htmlElementCaseSensitive
+        ? []
+        : svgElements.filter(isLowercase).map(casing.capitalize))
+    ])
 
     const reservedNames = new Set([
       ...RESERVED_NAMES_IN_HTML,
@@ -133,6 +132,17 @@ module.exports = {
       }
     }
 
+    /**
+     * @param {string} name
+     * @returns {string}
+     */
+    function getMessageId(name) {
+      if (RESERVED_NAMES_IN_HTML.has(name)) return 'reservedInHtml'
+      if (RESERVED_NAMES_IN_VUE.has(name)) return 'reservedInVue'
+      if (RESERVED_NAMES_IN_VUE3.has(name)) return 'reservedInVue3'
+      return 'reserved'
+    }
+
     /**
      * @param {ESNode} node
      * @param {string} name

tests/lib/rules/no-reserved-component-names.js

@@ -410,6 +410,12 @@ const invalidElements = [
   'xmp',
   'Xmp'
 ]
+const invalidLowerCaseElements = invalidElements.filter(
+  (element) => element === element.toLowerCase()
+)
+const invalidUpperCaseElements = invalidElements.filter(
+  (element) => element === element.toUpperCase()
+)
 
 const vue2BuiltInComponents = [
   'component',
@@ -559,6 +565,16 @@ ruleTester.run('no-reserved-component-names', rule, {
       languageOptions,
       options: [{ disallowVueBuiltInComponents: true }]
     })),
+    ...invalidUpperCaseElements.map((name) => ({
+      filename: `${name}.vue`,
+      code: `
+          export default {
+            name: '${name}'
+          }
+        `,
+      languageOptions,
+      options: [{ htmlElementCaseSensitive: true }]
+    })),
     {
       filename: 'test.vue',
       code: `<script setup> defineOptions({}) </script>`,
@@ -701,6 +717,24 @@ ruleTester.run('no-reserved-component-names', rule, {
         }
       ]
     })),
+    ...invalidLowerCaseElements.map((name) => ({
+      filename: `${name}.vue`,
+      code: `<script setup> defineOptions({name: '${name}'}) </script>`,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      options: [{ htmlElementCaseSensitive: true }],
+      errors: [
+        {
+          messageId: RESERVED_NAMES_IN_HTML.has(name)
+            ? 'reservedInHtml'
+            : 'reserved',
+          data: { name },
+          line: 1
+        }
+      ]
+    })),
     ...vue2BuiltInComponents.map((name) => ({
       filename: `${name}.vue`,
       code: `