Merge branch 'master' into feat/add-auto-fix

Author: waynzh

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,
+    "htmlElementCaseSensitive": 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`, 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`
 
@@ -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)

lib/rules/define-macros-order.js

@@ -53,6 +53,7 @@ function isUseStrictStatement(node) {
 function getTargetStatementPosition(scriptSetup, program) {
   const skipStatements = new Set([
     'ImportDeclaration',
+    'TSModuleDeclaration',
     'TSInterfaceDeclaration',
     'TSTypeAliasDeclaration',
     'DebuggerStatement',

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)}
@@ -61,14 +48,14 @@ function canVerify(node) {
 }
 
 /**
- * @param {string} name
- * @returns {string}
+ * @template T
+ * @param {Set<T>} set
+ * @param {Iterable<T>} iterable
  */
-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'
+function addAll(set, iterable) {
+  for (const element of iterable) {
+    set.add(element)
+  }
 }
 
 module.exports = {
@@ -90,6 +77,9 @@ module.exports = {
           },
           disallowVue3BuiltInComponents: {
             type: 'boolean'
+          },
+          htmlElementCaseSensitive: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -109,6 +99,23 @@ module.exports = {
       options.disallowVueBuiltInComponents === true
     const disallowVue3BuiltInComponents =
       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, [
+        ...deprecatedHtmlElements.map(casing.capitalize),
+        ...kebabCaseElements.map(casing.pascalCase),
+        ...svgElements.filter(isLowercase).map(casing.capitalize)
+      ])
+    }
 
     const reservedNames = new Set([
       ...RESERVED_NAMES_IN_HTML,
@@ -117,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
      */

lib/rules/no-unused-emit-declarations.js

@@ -56,18 +56,6 @@ function hasReferenceId(value, setupContext) {
   )
 }
 
-/**
- * Check if the given name matches emitReferenceIds variable name
- * @param {string} name
- * @param {Set<Identifier>} emitReferenceIds
- * @returns {boolean}
- */
-function isEmitVariableName(name, emitReferenceIds) {
-  if (emitReferenceIds.size === 0) return false
-  const emitVariable = emitReferenceIds.values().next().value.name
-  return emitVariable === name
-}
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -91,6 +79,7 @@ module.exports = {
     /** @type {Map<ObjectExpression | Program, SetupContext>} */
     const setupContexts = new Map()
     const programNode = context.getSourceCode().ast
+    let emitParamName = ''
 
     /**
      * @param {CallExpression} node
@@ -204,14 +193,6 @@ module.exports = {
 
           const { contextReferenceIds, emitReferenceIds } = setupContext
 
-          // verify defineEmits variable in template
-          if (
-            callee.type === 'Identifier' &&
-            isEmitVariableName(callee.name, emitReferenceIds)
-          ) {
-            addEmitCall(node)
-          }
-
           // verify setup(props,{emit}) {emit()}
           addEmitCallByReference(callee, emitReferenceIds, node)
           if (emit && emit.name === 'emit') {
@@ -229,8 +210,11 @@ module.exports = {
           }
         }
 
-        // verify $emit() in template
-        if (callee.type === 'Identifier' && callee.name === '$emit') {
+        // verify $emit() and defineEmits variable in template
+        if (
+          callee.type === 'Identifier' &&
+          (callee.name === '$emit' || callee.name === emitParamName)
+        ) {
           addEmitCall(node)
         }
       }
@@ -316,10 +300,15 @@ module.exports = {
           }
 
           const emitParam = node.parent.id
-          const variable =
-            emitParam.type === 'Identifier'
-              ? findVariable(utils.getScope(context, emitParam), emitParam)
-              : null
+          if (emitParam.type !== 'Identifier') {
+            return
+          }
+
+          emitParamName = emitParam.name
+          const variable = findVariable(
+            utils.getScope(context, emitParam),
+            emitParam
+          )
           if (!variable) {
             return
           }

lib/rules/require-explicit-emits.js

@@ -71,22 +71,6 @@ function getNameParamNode(node) {
   return null
 }
 
-/**
- * Check if the given name matches defineEmitsNode variable name
- * @param {string} name
- * @param {CallExpression | undefined} defineEmitsNode
- * @returns {boolean}
- */
-function isEmitVariableName(name, defineEmitsNode) {
-  const node = defineEmitsNode?.parent
-
-  if (node?.type === 'VariableDeclarator' && node.id.type === 'Identifier') {
-    return name === node.id.name
-  }
-
-  return false
-}
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -128,6 +112,7 @@ module.exports = {
     const vueEmitsDeclarations = new Map()
     /** @type {Map<ObjectExpression | Program, ComponentProp[]>} */
     const vuePropsDeclarations = new Map()
+    let emitParamName = ''
 
     /**
      * @typedef {object} VueTemplateDefineData
@@ -271,11 +256,7 @@ module.exports = {
           // e.g. $emit() / emit() in template
           if (
             callee.type === 'Identifier' &&
-            (callee.name === '$emit' ||
-              isEmitVariableName(
-                callee.name,
-                vueTemplateDefineData.defineEmits
-              ))
+            (callee.name === '$emit' || callee.name === emitParamName)
           ) {
             verifyEmit(
               vueTemplateDefineData.emits,
@@ -308,10 +289,15 @@ module.exports = {
             }
 
             const emitParam = node.parent.id
-            const variable =
-              emitParam.type === 'Identifier'
-                ? findVariable(utils.getScope(context, emitParam), emitParam)
-                : null
+            if (emitParam.type !== 'Identifier') {
+              return
+            }
+
+            emitParamName = emitParam.name
+            const variable = findVariable(
+              utils.getScope(context, emitParam),
+              emitParam
+            )
             if (!variable) {
               return
             }

lib/rules/require-explicit-slots.js

@@ -35,6 +35,21 @@ function getSlotsName(node) {
   return null
 }
 
+/**
+ * @param {VElement} node
+ * @return {VAttribute | VDirective | undefined}
+ */
+function getSlotNameNode(node) {
+  return node.startTag.attributes.find(
+    (node) =>
+      (!node.directive && node.key.name === 'name') ||
+      (node.directive &&
+        node.key.name.name === 'bind' &&
+        node.key.argument?.type === 'VIdentifier' &&
+        node.key.argument?.name === 'name')
+  )
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -68,6 +83,19 @@ module.exports = {
     }
     const slotsDefined = new Set()
 
+    /**
+     * @param {VElement} node
+     * @param {string | undefined} slotName
+     */
+    function reportMissingSlot(node, slotName) {
+      if (!slotsDefined.has(slotName)) {
+        context.report({
+          node,
+          messageId: 'requireExplicitSlots'
+        })
+      }
+    }
+
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefineSlotsEnter(node) {
@@ -137,20 +165,27 @@ module.exports = {
         }
       }),
       utils.defineTemplateBodyVisitor(context, {
+        /** @param {VElement} node */
         "VElement[name='slot']"(node) {
-          let slotName = 'default'
-
-          const slotNameAttr = utils.getAttribute(node, 'name')
+          const nameNode = getSlotNameNode(node)
 
-          if (slotNameAttr?.value) {
-            slotName = slotNameAttr.value.value
+          // if no slot name is declared, default to 'default'
+          if (!nameNode) {
+            reportMissingSlot(node, 'default')
+            return
           }
 
-          if (!slotsDefined.has(slotName)) {
-            context.report({
-              node,
-              messageId: 'requireExplicitSlots'
-            })
+          if (nameNode.directive) {
+            const expression = nameNode.value?.expression
+            // ignore attribute binding except string literal
+            if (!expression || !utils.isStringLiteral(expression)) {
+              return
+            }
+
+            const name = utils.getStringLiteralValue(expression) || undefined
+            reportMissingSlot(node, name)
+          } else {
+            reportMissingSlot(node, nameNode.value?.value)
           }
         }
       })

tests/lib/rules/define-macros-order.js

@@ -126,6 +126,8 @@ tester.run('define-macros-order', rule, {
       code: `
         <script setup lang="ts">
           import { bar } from 'foo'
+          declare global {}
+          declare namespace Namespace {}
           export interface Props {
             msg?: string
             labels?: string[]