From b91728d97ae787e56feb773b6e72a0fc081b6f26 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Sun, 3 Nov 2024 01:26:13 +0800
Subject: [PATCH 1/7] feat(no-reserved-component-names): add case sensitive
 option

---
 lib/rules/no-reserved-component-names.js      | 58 +++++++++++--------
 .../lib/rules/no-reserved-component-names.js  | 34 +++++++++++
 2 files changed, 68 insertions(+), 24 deletions(-)

diff --git a/lib/rules/no-reserved-component-names.js b/lib/rules/no-reserved-component-names.js
index 90e53604f..9b492c372 100644
--- a/lib/rules/no-reserved-component-names.js
+++ b/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
diff --git a/tests/lib/rules/no-reserved-component-names.js b/tests/lib/rules/no-reserved-component-names.js
index 41cddcfd5..289e04880 100644
--- a/tests/lib/rules/no-reserved-component-names.js
+++ b/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: `

From e7c45c349950debed802b520e5e8320a69175460 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Sun, 3 Nov 2024 01:26:28 +0800
Subject: [PATCH 2/7] feat: update docs

---
 docs/rules/no-reserved-component-names.md | 32 ++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/docs/rules/no-reserved-component-names.md b/docs/rules/no-reserved-component-names.md
index a5d85cde8..480c1c0da 100644
--- a/docs/rules/no-reserved-component-names.md
+++ b/docs/rules/no-reserved-component-names.md
@@ -35,13 +35,15 @@ export default {
 {
   "vue/no-reserved-component-names": ["error", {
     "disallowVueBuiltInComponents": false,
-    "disallowVue3BuiltInComponents": false
+    "disallowVue3BuiltInComponents": false,
+    "caseSensitive": false,
   }]
 }
 ```
 
 - `disallowVueBuiltInComponents` (`boolean`) ... If `true`, disallow Vue.js 2.x built-in component names. Default is `false`.
 - `disallowVue3BuiltInComponents` (`boolean`) ... If `true`, disallow Vue.js 3.x built-in component names. Default is `false`.
+- `htmlElementCaseSensitive` (`boolean`) ... If `true`, become case-sensitive when comparing component names with HTML reserved elements. Default is `false`. This means that a component name must exactly match the case of an HTML element to be considered conflicting.
 
 ### `"disallowVueBuiltInComponents": true`
 
@@ -73,6 +75,34 @@ export default {
 
 </eslint-code-block>
 
+### `"htmlElementCaseSensitive": true`
+
+<eslint-code-block :rules="{'vue/no-reserved-component-names': ['error', {htmlElementCaseSensitive: true}]}">
+
+```vue
+<script>
+/* ✗ GOOD */
+export default {
+  name: 'Button'
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-reserved-component-names': ['error', {htmlElementCaseSensitive: true}]}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default {
+  name: 'button'
+}
+</script>
+```
+
+</eslint-code-block>
+
 ## :couple: Related Rules
 
 - [vue/multi-word-component-names](./multi-word-component-names.md)

From f3c4dd2c51f12ceb27a1e378444440bf72f70c49 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Sun, 3 Nov 2024 01:30:17 +0800
Subject: [PATCH 3/7] feat: update docs

---
 docs/rules/no-reserved-component-names.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/no-reserved-component-names.md b/docs/rules/no-reserved-component-names.md
index 480c1c0da..074b91d68 100644
--- a/docs/rules/no-reserved-component-names.md
+++ b/docs/rules/no-reserved-component-names.md
@@ -36,7 +36,7 @@ export default {
   "vue/no-reserved-component-names": ["error", {
     "disallowVueBuiltInComponents": false,
     "disallowVue3BuiltInComponents": false,
-    "caseSensitive": false,
+    "htmlElementCaseSensitive": false,
   }]
 }
 ```

From 837ead4339b0298b2c8101736c02c6e2f3bbb2bf Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Sun, 3 Nov 2024 01:34:05 +0800
Subject: [PATCH 4/7] feat: update docs

---
 docs/rules/no-reserved-component-names.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/no-reserved-component-names.md b/docs/rules/no-reserved-component-names.md
index 074b91d68..6859cac72 100644
--- a/docs/rules/no-reserved-component-names.md
+++ b/docs/rules/no-reserved-component-names.md
@@ -81,7 +81,7 @@ export default {
 
 ```vue
 <script>
-/* ✗ GOOD */
+/* ✓ GOOD */
 export default {
   name: 'Button'
 }

From f340ead2e48f5eedd841d83d69f31e7710cc0c62 Mon Sep 17 00:00:00 2001
From: Wayne Zhang <zhanghaowei19W@gmail.com>
Date: Tue, 5 Nov 2024 19:54:56 +0800
Subject: [PATCH 5/7] Update docs/rules/no-reserved-component-names.md

Co-authored-by: Flo Edelmann <git@flo-edelmann.de>
---
 docs/rules/no-reserved-component-names.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/no-reserved-component-names.md b/docs/rules/no-reserved-component-names.md
index 6859cac72..31b74ab06 100644
--- a/docs/rules/no-reserved-component-names.md
+++ b/docs/rules/no-reserved-component-names.md
@@ -43,7 +43,7 @@ export default {
 
 - `disallowVueBuiltInComponents` (`boolean`) ... If `true`, disallow Vue.js 2.x built-in component names. Default is `false`.
 - `disallowVue3BuiltInComponents` (`boolean`) ... If `true`, disallow Vue.js 3.x built-in component names. Default is `false`.
-- `htmlElementCaseSensitive` (`boolean`) ... If `true`, become case-sensitive when comparing component names with HTML reserved elements. Default is `false`. This means that a component name must exactly match the case of an HTML element to be considered conflicting.
+- `htmlElementCaseSensitive` (`boolean`) ... If `true`, component names must exactly match the case of an HTML element to be considered conflicting. Default is `false` (i.e. case-insensitve comparison).
 
 ### `"disallowVueBuiltInComponents": true`
 

From e1c075b39842e4be43c1d7f97500714d8b58e3e2 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Tue, 5 Nov 2024 20:13:05 +0800
Subject: [PATCH 6/7] refactor

---
 lib/rules/no-reserved-component-names.js | 50 +++++++++++++++---------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/lib/rules/no-reserved-component-names.js b/lib/rules/no-reserved-component-names.js
index 9b492c372..70bccf80c 100644
--- a/lib/rules/no-reserved-component-names.js
+++ b/lib/rules/no-reserved-component-names.js
@@ -34,6 +34,19 @@ 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)}
@@ -47,6 +60,17 @@ function canVerify(node) {
   )
 }
 
+/**
+ * @template T
+ * @param {Set<T>} set
+ * @param {Iterable<T>} iterable
+ */
+function addAll(set, iterable) {
+  for (const element of iterable) {
+    set.add(element)
+  }
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -90,24 +114,14 @@ module.exports = {
       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))
-    ])
+    if (!htmlElementCaseSensitive) {
+      addAll(RESERVED_NAMES_IN_HTML, htmlElements.map(casing.capitalize))
+      addAll(RESERVED_NAMES_IN_OTHERS, [
+        ...deprecatedHtmlElements.map(casing.capitalize),
+        ...kebabCaseElements.map(casing.pascalCase),
+        ...svgElements.filter(isLowercase).map(casing.capitalize)
+      ])
+    }
 
     const reservedNames = new Set([
       ...RESERVED_NAMES_IN_HTML,

From fb75b548bfd783fff37ac9a61548cbc67c6bb26d Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Tue, 5 Nov 2024 20:52:19 +0800
Subject: [PATCH 7/7] refactor

---
 lib/rules/no-reserved-component-names.js      | 42 ++++++++-----------
 .../lib/rules/no-reserved-component-names.js  | 16 ++++---
 2 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/lib/rules/no-reserved-component-names.js b/lib/rules/no-reserved-component-names.js
index 70bccf80c..56621b424 100644
--- a/lib/rules/no-reserved-component-names.js
+++ b/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)}
@@ -114,6 +101,13 @@ module.exports = {
       options.disallowVue3BuiltInComponents === true
     const htmlElementCaseSensitive = options.htmlElementCaseSensitive === true
 
+    const RESERVED_NAMES_IN_HTML = new Set(htmlElements)
+    const RESERVED_NAMES_IN_OTHERS = new Set([
+      ...deprecatedHtmlElements,
+      ...kebabCaseElements,
+      ...svgElements
+    ])
+
     if (!htmlElementCaseSensitive) {
       addAll(RESERVED_NAMES_IN_HTML, htmlElements.map(casing.capitalize))
       addAll(RESERVED_NAMES_IN_OTHERS, [
@@ -130,6 +124,17 @@ module.exports = {
       ...RESERVED_NAMES_IN_OTHERS
     ])
 
+    /**
+     * @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 {Literal | TemplateLiteral} node
      */
@@ -146,17 +151,6 @@ 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
diff --git a/tests/lib/rules/no-reserved-component-names.js b/tests/lib/rules/no-reserved-component-names.js
index 289e04880..231e1f98d 100644
--- a/tests/lib/rules/no-reserved-component-names.js
+++ b/tests/lib/rules/no-reserved-component-names.js
@@ -410,12 +410,16 @@ const invalidElements = [
   'xmp',
   'Xmp'
 ]
-const invalidLowerCaseElements = invalidElements.filter(
-  (element) => element === element.toLowerCase()
-)
-const invalidUpperCaseElements = invalidElements.filter(
-  (element) => element === element.toUpperCase()
-)
+const invalidLowerCaseElements = []
+const invalidUpperCaseElements = []
+
+for (const element of invalidElements) {
+  if (element[0] === element[0].toLowerCase()) {
+    invalidLowerCaseElements.push(element)
+  } else {
+    invalidUpperCaseElements.push(element)
+  }
+}
 
 const vue2BuiltInComponents = [
   'component',