🐛 bug(rule): fix cannot detect raw text of template syntax expression

closes #23

Author: kazupon

lib/rules/no-raw-text.js

@@ -7,6 +7,48 @@ const { parse, AST } = require('vue-eslint-parser')
 const { defineTemplateBodyVisitor } = require('../utils/index')
 
 const hasOnlyLineBreak = value => /^[\r\n\t\f\v]+$/.test(value.replace(/ /g, ''))
+const INNER_START_OFFSET = '<template>'.length
+
+function calculateLoc (node, base = null) {
+  return !base
+    ? node.loc
+    : {
+      start: {
+        line: base.loc.start.line,
+        column: base.loc.start.column + (node.loc.start.column - INNER_START_OFFSET)
+      },
+      end: {
+        line: base.loc.end.line,
+        column: base.loc.end.column + (node.loc.end.column - INNER_START_OFFSET)
+      }
+    }
+}
+
+function checkVExpressionContainerText (context, node, baseNode = null) {
+  if (!node.expression) { return }
+
+  if (node.expression.type === 'Literal') {
+    const literalNode = node.expression
+    const loc = calculateLoc(literalNode, baseNode)
+    context.report({
+      loc,
+      message: `raw text '${literalNode.value}' is used`
+    })
+  } else if (node.expression.type === 'ConditionalExpression') {
+    const targets = [node.expression.consequent, node.expression.alternate]
+    targets.forEach(target => {
+      if (target.type === 'Literal') {
+        const loc = calculateLoc(target, baseNode)
+        context.report({
+          loc,
+          message: `raw text '${target.value}' is used`
+        })
+      }
+    })
+  } else if ((node.parent && node.parent.type === 'VAttribute' && node.parent.directive) &&
+    (node.parent.key && node.parent.key.type === 'VDirectiveKey')) {
+  }
+}
 
 function checkRawText (context, value, loc) {
   if (typeof value !== 'string' || hasOnlyLineBreak(value)) { return }
@@ -52,6 +94,10 @@ function getComponentTemplateNode (value) {
 
 function create (context) {
   return defineTemplateBodyVisitor(context, { // template block
+    VExpressionContainer (node) {
+      checkVExpressionContainerText(context, node)
+    },
+
     VText (node) {
       checkRawText(context, node.value, node.loc)
     }
@@ -65,6 +111,8 @@ function create (context) {
         enterNode (node) {
           if (node.type === 'VText') {
             checkRawText(context, node.value, valueNode.loc)
+          } else if (node.type === 'VExpressionContainer') {
+            checkVExpressionContainerText(context, node, valueNode)
           }
         },
         leaveNode () {}

tests/lib/rules/no-raw-text.js

@@ -25,6 +25,12 @@ tester.run('no-raw-text', rule, {
         <p class="inner">{{ $t('click') }}<a href="/foo">{{ $t('here') }}</a>{{ $t('terminal') }}</p>
       </div>
     </template>`
+  }, {
+    code: `
+    <template>
+      <p>{{ hello }}</p>
+    </template>
+    `
   }, {
     filename: 'test.vue',
     code: `
@@ -85,6 +91,38 @@ tester.run('no-raw-text', rule, {
     }, {
       message: `raw text '!' is used`, line: 5
     }]
+  }, {
+    // directly specify string literal in mustache
+    code: `
+      <template>
+        <p>{{ 'hello' }}</p>
+      </template>
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 3
+    }]
+  }, {
+    // javascript expression specify string literal in mustache
+    code: `
+      <template>
+        <p>{{ ok ? 'hello' : 'world' }}</p>
+      </template>
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 3
+    }, {
+      message: `raw text 'world' is used`, line: 3
+    }]
+  }, {
+    // directly specify string literal in v-text
+    code: `
+      <template>
+        <p v-text="'hello'"></p>
+      </template>
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 3
+    }]
   }, {
     // directly specify string literal to `template` component option at export default object
     code: `
@@ -116,6 +154,30 @@ tester.run('no-raw-text', rule, {
     errors: [{
       message: `raw text 'hello' is used`, line: 2
     }]
+  }, {
+    // directly specify string literal to `template` variable
+    code: `
+      const template = '<p>{{ "hello" }}</p>'
+      const Component = {
+        template
+      }
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 2, column: 30
+    }]
+  }, {
+    // javascript expression specify string literal to `template` variable in mustache
+    code: `
+      const template = '<p>{{ ok ? "hello" : "world" }}</p>'
+      const Component = {
+        template
+      }
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 2, column: 35
+    }, {
+      message: `raw text 'world' is used`, line: 2, column: 45
+    }]
   }, {
     // directly specify string literal to JSX with `render`
     code: `