⭐ new(rule): support no-raw-text rule

closes #2

Author: kazupon

docs/rules/README.md

@@ -16,5 +16,6 @@
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue-i18n/<wbr>no-dynamic-keys](./no-dynamic-keys.html) | disallow localization dynamic keys at localization methods |  |
+| [vue-i18n/<wbr>no-raw-text](./no-raw-text.html) | disallow to string literal in template or JSX |  |
 | [vue-i18n/<wbr>no-unused-keys](./no-unused-keys.html) | disallow unused localization keys |  |
 

docs/rules/no-raw-text.md

@@ -59,7 +59,7 @@ export default {
 ```js
 export default {
   // ✓ GOOD
-  render: h => (<p>this.$t('hello')</p>)
+  render: h => (<p>{this.$t('hello')}</p>)
   // ...
 }
 ```

lib/rules.js

@@ -5,6 +5,7 @@ module.exports = {
   'no-dynamic-keys': require('./rules/no-dynamic-keys'),
   'no-html-messages': require('./rules/no-html-messages'),
   'no-missing-keys': require('./rules/no-missing-keys'),
+  'no-raw-text': require('./rules/no-raw-text'),
   'no-unused-keys': require('./rules/no-unused-keys'),
   'no-v-html': require('./rules/no-v-html')
 }

lib/rules/no-raw-text.js

@@ -0,0 +1,90 @@
+/**
+ * @author kazuya kawaguchi (a.k.a. kazupon)
+ */
+'use strict'
+
+const { parse, AST } = require('vue-eslint-parser')
+const { defineTemplateBodyVisitor } = require('../utils/index')
+
+const hasOnlyLineBreak = value => /^[\r\n\t\f\v]+$/.test(value.replace(/ /g, ''))
+
+function checkRawText (context, value, loc) {
+  if (typeof value !== 'string' || hasOnlyLineBreak(value)) { return }
+
+  context.report({
+    loc,
+    message: `raw text '${value}' is used`
+  })
+}
+
+function findVariable (variables, name) {
+  return variables.find(variable => variable.name === name)
+}
+
+function getComponentTemplateValueNode (context, node) {
+  const templateNode = node.properties
+    .find(p =>
+      p.type === 'Property' &&
+      p.key.type === 'Identifier' &&
+      p.key.name === 'template'
+    )
+
+  if (templateNode) {
+    if (templateNode.value.type === 'Literal') {
+      return templateNode.value
+    } else if (templateNode.value.type === 'Identifier') {
+      const templateVariable = findVariable(context.getScope().variables, templateNode.value.name)
+      const varDeclNode = templateVariable.defs[0].node
+      if (varDeclNode.init && varDeclNode.init.type === 'Literal') {
+        return varDeclNode.init
+      }
+    }
+  }
+
+  return null
+}
+
+function getComponentTemplateNode (value) {
+  return parse(`<template>${value}</template>`).templateBody
+}
+
+function create (context) {
+  return defineTemplateBodyVisitor(context, { // template block
+    VText (node) {
+      checkRawText(context, node.value, node.loc)
+    }
+  }, { // script block or scripts
+    ObjectExpression (node) {
+      const valueNode = getComponentTemplateValueNode(context, node)
+      if (!valueNode) { return }
+
+      const templateNode = getComponentTemplateNode(valueNode.value)
+      AST.traverseNodes(templateNode, {
+        enterNode (node) {
+          if (node.type === 'VText') {
+            checkRawText(context, node.value, valueNode.loc)
+          }
+        },
+        leaveNode () {}
+      })
+    },
+
+    JSXText (node) {
+      checkRawText(context, node.value, node.loc)
+    }
+  })
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow to string literal in template or JSX',
+      category: 'Best Practices',
+      recommended: false
+    },
+    fixable: null,
+    schema: []
+  },
+  create
+}

lib/utils/index.js

@@ -26,6 +26,82 @@ function defineTemplateBodyVisitor (context, templateBodyVisitor, scriptVisitor)
   return context.parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor)
 }
 
+function unwrapTypes (node) {
+  return node.type === 'TSAsExpression' ? node.expression : node
+}
+
+function isVueFile (path) {
+  return path.endsWith('.vue') || path.endsWith('.jsx')
+}
+
+function isVueComponentFile (node, path) {
+  return isVueFile(path) &&
+    node.type === 'ExportDefaultDeclaration' &&
+    node.declaration.type === 'ObjectExpression'
+}
+
+function isVueComponent (node) {
+  if (node.type === 'CallExpression') {
+    const callee = node.callee
+
+    if (callee.type === 'MemberExpression') {
+      const calleeObject = unwrapTypes(callee.object)
+
+      const isFullVueComponent = calleeObject.type === 'Identifier' &&
+        calleeObject.name === 'Vue' &&
+        callee.property.type === 'Identifier' &&
+        ['component', 'mixin', 'extend'].indexOf(callee.property.name) > -1 &&
+        node.arguments.length >= 1 &&
+        node.arguments.slice(-1)[0].type === 'ObjectExpression'
+
+      return isFullVueComponent
+    }
+
+    if (callee.type === 'Identifier') {
+      const isDestructedVueComponent = callee.name === 'component' &&
+        node.arguments.length >= 1 &&
+        node.arguments.slice(-1)[0].type === 'ObjectExpression'
+
+      return isDestructedVueComponent
+    }
+  }
+
+  return false
+}
+
+function executeOnVueComponent (context, cb) {
+  const filePath = context.getFilename()
+  const sourceCode = context.getSourceCode()
+  const componentComments = sourceCode.getAllComments().filter(comment => /@vue\/component/g.test(comment.value))
+  const foundNodes = []
+
+  const isDuplicateNode = node => {
+    if (foundNodes.some(el => el.loc.start.line === node.loc.start.line)) { return true }
+    foundNodes.push(node)
+    return false
+  }
+
+  return {
+    'ObjectExpression:exit' (node) {
+      console.log('ObjectExpression', filePath, node)
+      if (!componentComments.some(el => el.loc.end.line === node.loc.start.line - 1) || isDuplicateNode(node)) { return }
+      cb(node)
+    },
+    'ExportDefaultDeclaration:exit' (node) {
+      console.log('ExportDefaultDeclaration', filePath, node)
+      // export default {} in .vue || .js(x)
+      if (isDuplicateNode(node.declaration)) { return }
+      cb(node.declaration)
+    },
+    'CallExpression:exit' (node) {
+      console.log('CallExpression:exit')
+      // Vue.component('xxx', {}) || component('xxx', {})
+      if (!isVueComponent(node) || isDuplicateNode(node.arguments.slice(-1)[0])) { return }
+      cb(node.arguments.slice(-1)[0])
+    }
+  }
+}
+
 function findExistLocaleMessage (fullpath, localeMessages) {
   return localeMessages.find(message => message.fullpath === fullpath)
 }
@@ -109,6 +185,7 @@ function generateJsonAst (context, json, filename) {
 module.exports = {
   UNEXPECTED_ERROR_LOCATION,
   defineTemplateBodyVisitor,
+  executeOnVueComponent,
   getLocaleMessages,
   findMissingsFromLocaleMessages,
   findExistLocaleMessage,

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

@@ -0,0 +1,124 @@
+/**
+ * @author kazuya kawaguchi (a.k.a. kazupon)
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-raw-text')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2015,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
+
+tester.run('no-raw-text', rule, {
+  valid: [{
+    code: `<template>
+      <div class="app">
+        <p class="a1">{{ $t('hello') }}</p>
+        <p class="inner">{{ $t('click') }}<a href="/foo">{{ $t('here') }}</a>{{ $t('terminal') }}</p>
+      </div>
+    </template>`
+  }, {
+    filename: 'test.vue',
+    code: `
+      export default {
+        template: '<p>{{ $t('hello') }}</p>'
+      }
+    `
+  }, {
+    code: `
+      export default {
+        render: function (h) {
+          return (<p>{this.$t('hello')}</p>)
+        }
+      }
+    `
+  }],
+
+  invalid: [{
+    // simple template
+    code: `<template><p>hello</p></template>`,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 1
+    }]
+  }, {
+    // included newline or tab or space in simple template
+    code: `
+      <template>
+        <p>hello</p>
+      </template>
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 3
+    }]
+  }, {
+    // child elements in template
+    code: `
+      <template>
+        <div class="app">
+          <p class="a1">hello</p>
+          <p class="inner">click<a href="/foo">here</a>!</p>
+        </div>
+      </template>
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 4
+    }, {
+      message: `raw text 'click' is used`, line: 5
+    }, {
+      message: `raw text 'here' is used`, line: 5
+    }, {
+      message: `raw text '!' is used`, line: 5
+    }]
+  }, {
+    // directly specify string literal to `template` component option at export default object
+    code: `
+      export default {
+        template: '<p>hello</p>'
+      }
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 3
+    }]
+  }, {
+    // directly specify string literal to `template` component option at variable
+    code: `
+      const Component = {
+        template: '<p>hello</p>'
+      }
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 3
+    }]
+  }, {
+    // 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
+    }]
+  }, {
+    // directly specify string literal to JSX with `render`
+    code: `
+      const Component = {
+        render () {
+          return (<p>hello</p>)
+        }
+      }
+    `,
+    errors: [{
+      message: `raw text 'hello' is used`, line: 4
+    }]
+  }]
+})