extend support for TemplateLiteral with no interpolation

vuejs · Nov 12, 2018 · 5ec4ff0 · 5ec4ff0
1 parent 6eea288
commit 5ec4ff0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/lib/rules/component-definition-name-casing.js b/lib/rules/component-definition-name-casing.js
@@ -36,20 +36,39 @@ module.exports = {
     // ----------------------------------------------------------------------
 
     function convertName (node) {
-      const value = casing.getConverter(caseType)(node.value)
-      if (value !== node.value) {
+      let nodeValue
+      let range
+      if (node.type === 'TemplateLiteral') {
+        const quasis = node.quasis[0]
+        nodeValue = quasis.value.cooked
+        range = quasis.range
+      } else {
+        nodeValue = node.value
+        range = node.range
+      }
+
+      const value = casing.getConverter(caseType)(nodeValue)
+      if (value !== nodeValue) {
         context.report({
           node: node,
           message: 'Property name "{{value}}" is not {{caseType}}.',
           data: {
-            value: node.value,
+            value: nodeValue,
             caseType: caseType
           },
-          fix: fixer => fixer.replaceText(node, node.raw.replace(node.value, value))
+          fix: fixer => fixer.replaceTextRange([range[0] + 1, range[1] - 1], value)
         })
       }
     }
 
+    function canConvert (node) {
+      return node.type === 'Literal' || (
+        node.type === 'TemplateLiteral' &&
+        node.expressions.length === 0 &&
+        node.quasis.length === 1
+      )
+    }
+
     return Object.assign({},
       {
         "CallExpression > MemberExpression > Identifier[name='component']" (node) {
@@ -59,7 +78,7 @@ module.exports = {
           if (calleeObject.type === 'Identifier' && calleeObject.name === 'Vue') {
             if (parent.arguments && parent.arguments.length === 2) {
               const argument = parent.arguments[0]
-              if (argument.type === 'Literal') {
+              if (canConvert(argument)) {
                 convertName(argument)
               }
             }
@@ -71,7 +90,7 @@ module.exports = {
           .find(item => (
             item.type === 'Property' &&
             item.key.name === 'name' &&
-            item.value.type === 'Literal'
+            canConvert(item.value)
           ))
 
         if (!node) return

diff --git a/tests/lib/rules/component-definition-name-casing.js b/tests/lib/rules/component-definition-name-casing.js
@@ -130,6 +130,12 @@ ruleTester.run('component-definition-name-casing', rule, {
       filename: 'test.vue',
       code: `foo('foo-bar', {})`,
       parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `Vue.component(\`fooBar\${foo}\`, component)`,
+      options: ['kebab-case'],
+      parserOptions
     }
   ],
 
@@ -326,6 +332,18 @@ ruleTester.run('component-definition-name-casing', rule, {
         type: 'Literal',
         line: 1
       }]
+    },
+    {
+      filename: 'test.vue',
+      code: `Vue.component(\`foo_bar\`, {})`,
+      output: `Vue.component(\`foo-bar\`, {})`,
+      options: ['kebab-case'],
+      parserOptions,
+      errors: [{
+        message: 'Property name "foo_bar" is not kebab-case.',
+        type: 'TemplateLiteral',
+        line: 1
+      }]
     }
   ]
 })