Fix false negatives for template literal in vue/custom-event-name-casing, vue/no-restricted-custom-event, and vue/require-explicit-emits rules (#1937)

Author: ota-meshi

lib/rules/custom-event-name-casing.js

@@ -24,23 +24,27 @@ const { toRegExp } = require('../utils/regexp')
 const ALLOWED_CASE_OPTIONS = ['kebab-case', 'camelCase']
 const DEFAULT_CASE = 'camelCase'
 
+/**
+ * @typedef {object} NameWithLoc
+ * @property {string} name
+ * @property {SourceLocation} loc
+ */
 /**
  * Get the name param node from the given CallExpression
  * @param {CallExpression} node CallExpression
- * @returns { Literal & { value: string } | null }
+ * @returns { NameWithLoc | null }
  */
 function getNameParamNode(node) {
   const nameLiteralNode = node.arguments[0]
-  if (
-    !nameLiteralNode ||
-    nameLiteralNode.type !== 'Literal' ||
-    typeof nameLiteralNode.value !== 'string'
-  ) {
-    // cannot check
-    return null
+  if (nameLiteralNode && utils.isStringLiteral(nameLiteralNode)) {
+    const name = utils.getStringLiteralValue(nameLiteralNode)
+    if (name != null) {
+      return { name, loc: nameLiteralNode.loc }
+    }
   }
 
-  return /** @type {Literal & { value: string }} */ (nameLiteralNode)
+  // cannot check
+  return null
 }
 /**
  * Get the callee member node from the given CallExpression
@@ -130,15 +134,15 @@ module.exports = {
     }
 
     /**
-     * @param { Literal & { value: string } } nameLiteralNode
+     * @param { NameWithLoc } nameWithLoc
      */
-    function verify(nameLiteralNode) {
-      const name = nameLiteralNode.value
+    function verify(nameWithLoc) {
+      const name = nameWithLoc.name
       if (isValidEventName(name) || ignores.some((re) => re.test(name))) {
         return
       }
       context.report({
-        node: nameLiteralNode,
+        loc: nameWithLoc.loc,
         messageId: 'unexpected',
         data: {
           name,
@@ -155,8 +159,8 @@ module.exports = {
        * @param {VueObjectData} [info]
        */
       CallExpression(node, info) {
-        const nameLiteralNode = getNameParamNode(node)
-        if (!nameLiteralNode) {
+        const nameWithLoc = getNameParamNode(node)
+        if (!nameWithLoc) {
           // cannot check
           return
         }
@@ -170,7 +174,7 @@ module.exports = {
             emitReferenceIds.has(node.callee)
           ) {
             // verify setup(props,{emit}) {emit()}
-            verify(nameLiteralNode)
+            verify(nameWithLoc)
           } else {
             const emit = getCalleeMemberNode(node)
             if (
@@ -180,7 +184,7 @@ module.exports = {
               contextReferenceIds.has(emit.member.object)
             ) {
               // verify setup(props,context) {context.emit()}
-              verify(nameLiteralNode)
+              verify(nameWithLoc)
             }
           }
         }
@@ -192,13 +196,13 @@ module.exports = {
       {
         CallExpression(node) {
           const callee = node.callee
-          const nameLiteralNode = getNameParamNode(node)
-          if (!nameLiteralNode) {
+          const nameWithLoc = getNameParamNode(node)
+          if (!nameWithLoc) {
             // cannot check
             return
           }
           if (callee.type === 'Identifier' && callee.name === '$emit') {
-            verify(nameLiteralNode)
+            verify(nameWithLoc)
           }
         }
       },

lib/rules/no-restricted-custom-event.js

@@ -56,23 +56,28 @@ function parseOption(option) {
   return parsed
 }
 
+/**
+ * @typedef {object} NameWithLoc
+ * @property {string} name
+ * @property {SourceLocation} loc
+ * @property {Range} range
+ */
 /**
  * Get the name param node from the given CallExpression
  * @param {CallExpression} node CallExpression
- * @returns { Literal & { value: string } | null }
+ * @returns { NameWithLoc | null }
  */
 function getNameParamNode(node) {
   const nameLiteralNode = node.arguments[0]
-  if (
-    !nameLiteralNode ||
-    nameLiteralNode.type !== 'Literal' ||
-    typeof nameLiteralNode.value !== 'string'
-  ) {
-    // cannot check
-    return null
+  if (nameLiteralNode && utils.isStringLiteral(nameLiteralNode)) {
+    const name = utils.getStringLiteralValue(nameLiteralNode)
+    if (name != null) {
+      return { name, loc: nameLiteralNode.loc, range: nameLiteralNode.range }
+    }
   }
 
-  return /** @type {Literal & { value: string }} */ (nameLiteralNode)
+  // cannot check
+  return null
 }
 /**
  * Get the callee member node from the given CallExpression
@@ -134,32 +139,32 @@ module.exports = {
     const options = context.options.map(parseOption)
 
     /**
-     * @param { Literal & { value: string } } nameLiteralNode
+     * @param { NameWithLoc } nameWithLoc
      */
-    function verify(nameLiteralNode) {
-      const name = nameLiteralNode.value
+    function verify(nameWithLoc) {
+      const name = nameWithLoc.name
 
       for (const option of options) {
         if (option.test(name)) {
           const message =
             option.message || `Using \`${name}\` event is not allowed.`
           context.report({
-            node: nameLiteralNode,
+            loc: nameWithLoc.loc,
             messageId: 'restrictedEvent',
             data: { message },
             suggest: option.suggest
               ? [
                   {
                     fix(fixer) {
                       const sourceCode = context.getSourceCode()
-                      return fixer.replaceText(
-                        nameLiteralNode,
+                      return fixer.replaceTextRange(
+                        nameWithLoc.range,
                         `${
-                          sourceCode.text[nameLiteralNode.range[0]]
+                          sourceCode.text[nameWithLoc.range[0]]
                         }${JSON.stringify(option.suggest)
                           .slice(1, -1)
                           .replace(/'/gu, "\\'")}${
-                          sourceCode.text[nameLiteralNode.range[1] - 1]
+                          sourceCode.text[nameWithLoc.range[1] - 1]
                         }`
                       )
                     },
@@ -179,13 +184,13 @@ module.exports = {
       {
         CallExpression(node) {
           const callee = node.callee
-          const nameLiteralNode = getNameParamNode(node)
-          if (!nameLiteralNode) {
+          const nameWithLoc = getNameParamNode(node)
+          if (!nameWithLoc) {
             // cannot check
             return
           }
           if (callee.type === 'Identifier' && callee.name === '$emit') {
-            verify(nameLiteralNode)
+            verify(nameWithLoc)
           }
         }
       },
@@ -239,8 +244,8 @@ module.exports = {
             })
           },
           CallExpression(node, { node: vueNode }) {
-            const nameLiteralNode = getNameParamNode(node)
-            if (!nameLiteralNode) {
+            const nameWithLoc = getNameParamNode(node)
+            if (!nameWithLoc) {
               // cannot check
               return
             }
@@ -254,7 +259,7 @@ module.exports = {
                 emitReferenceIds.has(node.callee)
               ) {
                 // verify setup(props,{emit}) {emit()}
-                verify(nameLiteralNode)
+                verify(nameWithLoc)
               } else {
                 const emit = getCalleeMemberNode(node)
                 if (
@@ -264,7 +269,7 @@ module.exports = {
                   contextReferenceIds.has(emit.member.object)
                 ) {
                   // verify setup(props,context) {context.emit()}
-                  verify(nameLiteralNode)
+                  verify(nameWithLoc)
                 }
               }
             }
@@ -275,16 +280,16 @@ module.exports = {
         }),
         {
           CallExpression(node) {
-            const nameLiteralNode = getNameParamNode(node)
-            if (!nameLiteralNode) {
+            const nameWithLoc = getNameParamNode(node)
+            if (!nameWithLoc) {
               // cannot check
               return
             }
             const emit = getCalleeMemberNode(node)
             // verify $emit
             if (emit && emit.name === '$emit') {
               // verify this.$emit()
-              verify(nameLiteralNode)
+              verify(nameWithLoc)
             }
           }
         }