From f21970cfef022ecba1b8e09ababf69f01bdb539b Mon Sep 17 00:00:00 2001
From: ota <y.ohta.z3@future.co.jp>
Date: Thu, 4 Jun 2020 14:42:06 +0900
Subject: [PATCH] Add `vue/no-bare-strings-in-template` rule

---
 docs/rules/README.md                          |   1 +
 docs/rules/no-bare-strings-in-template.md     |  88 ++++++
 lib/index.js                                  |   1 +
 lib/rules/no-bare-strings-in-template.js      | 279 +++++++++++++++++
 lib/utils/regexp.js                           |  14 +-
 package.json                                  |   2 +
 .../lib/rules/no-bare-strings-in-template.js  | 290 ++++++++++++++++++
 7 files changed, 673 insertions(+), 2 deletions(-)
 create mode 100644 docs/rules/no-bare-strings-in-template.md
 create mode 100644 lib/rules/no-bare-strings-in-template.js
 create mode 100644 tests/lib/rules/no-bare-strings-in-template.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 8d3e9fb32..68d161be0 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -278,6 +278,7 @@ For example:
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
+| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
 | [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property |  |
diff --git a/docs/rules/no-bare-strings-in-template.md b/docs/rules/no-bare-strings-in-template.md
new file mode 100644
index 000000000..40041119c
--- /dev/null
+++ b/docs/rules/no-bare-strings-in-template.md
@@ -0,0 +1,88 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-bare-strings-in-template
+description: disallow the use of bare strings in `<template>`
+---
+# vue/no-bare-strings-in-template
+> disallow the use of bare strings in `<template>`
+
+## :book: Rule Details
+
+This rule disallows the use of bare strings in `<template>`.  
+In order to be able to internationalize your application, you will need to avoid using plain strings in your templates. Instead, you would need to use a template helper specializing in translation.  
+
+This rule was inspired by [no-bare-strings rule in ember-template-lint](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-bare-strings.md).
+
+
+<eslint-code-block :rules="{'vue/no-bare-strings-in-template': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <h1>{{ $t('foo.bar') }}</h1>
+  <h1>{{ foo }}</h1>
+  <h1 v-t="'foo.bar'"></h1>
+
+  <!-- ✗ BAD -->
+  <h1>Lorem ipsum</h1>
+  <div
+    title="Lorem ipsum"
+    aria-label="Lorem ipsum"
+    aria-placeholder="Lorem ipsum"
+    aria-roledescription="Lorem ipsum"
+    aria-valuetext="Lorem ipsum"
+  />
+  <img alt="Lorem ipsum">
+  <input placeholder="Lorem ipsum">
+  <h1 v-text="'Lorem ipsum'" />
+
+  <!-- Does not check -->
+  <h1>{{ 'Lorem ipsum' }}</h1>
+  <div
+    v-bind:title="'Lorem ipsum'"
+  />
+</template>
+```
+
+</eslint-code-block>
+
+:::tip
+This rule does not check for string literals, in bindings and mustaches interpolation. This is because it looks like a conscious decision.  
+If you want to report these string literals, enable the [vue/no-useless-v-bind] and [vue/no-useless-mustaches] rules and fix the useless string literals.
+:::
+
+## :wrench: Options
+
+```js
+{
+  "vue/no-bare-strings-in-template": ["error", {
+    "whitelist": [
+      "(", ")", ",", ".", "&", "+", "-", "=", "*", "/", "#", "%", "!", "?", ":", "[", "]", "{", "}", "<", ">", "\u00b7", "\u2022", "\u2010", "\u2013", "\u2014", "\u2212", "|"
+    ],
+    "attributes": {
+      "/.+/": ["title", "aria-label", "aria-placeholder", "aria-roledescription", "aria-valuetext"],
+      "input": ["placeholder"],
+      "img": ["alt"]
+    },
+    "directives": ["v-text"]
+  }]
+}
+```
+
+- `whitelist` ... An array of whitelisted strings.
+- `attributes` ... An object whose keys are tag name or patterns and value is an array of attributes to check for that tag name.
+- `directives` ... An array of directive names to check literal value.
+
+## :couple: Related rules
+
+- [vue/no-useless-v-bind]
+- [vue/no-useless-mustaches]
+
+[vue/no-useless-v-bind]: ./no-useless-v-bind.md
+[vue/no-useless-mustaches]: ./no-useless-mustaches.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-bare-strings-in-template.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-bare-strings-in-template.js)
diff --git a/lib/index.js b/lib/index.js
index d5fc21229..8c8e501a0 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -45,6 +45,7 @@ module.exports = {
     'name-property-casing': require('./rules/name-property-casing'),
     'no-arrow-functions-in-watch': require('./rules/no-arrow-functions-in-watch'),
     'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
+    'no-bare-strings-in-template': require('./rules/no-bare-strings-in-template'),
     'no-boolean-default': require('./rules/no-boolean-default'),
     'no-confusing-v-for-v-if': require('./rules/no-confusing-v-for-v-if'),
     'no-custom-modifiers-on-v-model': require('./rules/no-custom-modifiers-on-v-model'),
diff --git a/lib/rules/no-bare-strings-in-template.js b/lib/rules/no-bare-strings-in-template.js
new file mode 100644
index 000000000..8fea1625c
--- /dev/null
+++ b/lib/rules/no-bare-strings-in-template.js
@@ -0,0 +1,279 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const regexp = require('../utils/regexp')
+const casing = require('../utils/casing')
+
+/**
+ * @typedef {import('vue-eslint-parser').AST.VAttribute} VAttribute
+ * @typedef {import('vue-eslint-parser').AST.VDirective} VDirective
+ * @typedef {import('vue-eslint-parser').AST.VElement} VElement
+ * @typedef {import('vue-eslint-parser').AST.VIdentifier} VIdentifier
+ * @typedef {import('vue-eslint-parser').AST.VExpressionContainer} VExpressionContainer
+ * @typedef {import('vue-eslint-parser').AST.VText} VText
+ */
+
+/**
+ * @typedef { { names: { [tagName in string]: Set<string> }, regexps: { name: RegExp, attrs: Set<string> }[], cache: { [tagName in string]: Set<string> } } } TargetAttrs
+ * @typedef { { upper: ElementStack, name: string, attrs: Set<string> } } ElementStack
+ */
+
+// ------------------------------------------------------------------------------
+// Constants
+// ------------------------------------------------------------------------------
+
+// https://dev.w3.org/html5/html-author/charref
+const DEFAULT_WHITELIST = [
+  '(',
+  ')',
+  ',',
+  '.',
+  '&',
+  '+',
+  '-',
+  '=',
+  '*',
+  '/',
+  '#',
+  '%',
+  '!',
+  '?',
+  ':',
+  '[',
+  ']',
+  '{',
+  '}',
+  '<',
+  '>',
+  '\u00b7', // "·"
+  '\u2022', // "•"
+  '\u2010', // "‐"
+  '\u2013', // "–"
+  '\u2014', // "—"
+  '\u2212', // "−"
+  '|'
+]
+
+const DEFAULT_ATTRIBUTES = {
+  '/.+/': [
+    'title',
+    'aria-label',
+    'aria-placeholder',
+    'aria-roledescription',
+    'aria-valuetext'
+  ],
+  input: ['placeholder'],
+  img: ['alt']
+}
+
+const DEFAULT_DIRECTIVES = ['v-text']
+
+// --------------------------------------------------------------------------
+// Helpers
+// --------------------------------------------------------------------------
+
+/**
+ * Parse attributes option
+ * @returns {TargetAttrs}
+ */
+function parseTargetAttrs(options) {
+  /** @type {TargetAttrs} */
+  const result = { names: {}, regexps: [], cache: {} }
+  for (const tagName of Object.keys(options)) {
+    /** @type { Set<string> } */
+    const attrs = new Set(options[tagName])
+    if (regexp.isRegExp(tagName)) {
+      result.regexps.push({
+        name: regexp.toRegExp(tagName),
+        attrs
+      })
+    } else {
+      result.names[tagName] = attrs
+    }
+  }
+  return result
+}
+
+/**
+ * Get a string from given expression container node
+ * @param {VExpressionContainer} node
+ * @returns { string | null }
+ */
+function getStringValue(value) {
+  const expression = value.expression
+  if (!expression) {
+    return null
+  }
+  if (expression.type !== 'Literal') {
+    return null
+  }
+  if (typeof expression.value === 'string') {
+    return expression.value
+  }
+  return null
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow the use of bare strings in `<template>`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-bare-strings-in-template.html'
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          whitelist: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true
+          },
+          attributes: {
+            type: 'object',
+            patternProperties: {
+              '^(?:\\S+|/.*/[a-z]*)$': {
+                type: 'array',
+                items: { type: 'string' },
+                uniqueItems: true
+              }
+            },
+            additionalProperties: false
+          },
+          directives: {
+            type: 'array',
+            items: { type: 'string', pattern: '^v-' },
+            uniqueItems: true
+          }
+        }
+      }
+    ],
+    messages: {
+      unexpected: 'Unexpected non-translated string used.',
+      unexpectedInAttr: 'Unexpected non-translated string used in `{{attr}}`.'
+    }
+  },
+  create(context) {
+    const opts = context.options[0] || {}
+    const whitelist = opts.whitelist || DEFAULT_WHITELIST
+    const attributes = parseTargetAttrs(opts.attributes || DEFAULT_ATTRIBUTES)
+    const directives = opts.directives || DEFAULT_DIRECTIVES
+
+    const whitelistRe = new RegExp(
+      whitelist.map((w) => regexp.escape(w)).join('|'),
+      'gu'
+    )
+
+    /** @type {ElementStack | null} */
+    let elementStack = null
+    /**
+     * Gets the bare string from given string
+     * @param {string} str
+     */
+    function getBareString(str) {
+      return str.trim().replace(whitelistRe, '').trim()
+    }
+
+    /**
+     * Get the attribute to be verified from the element name.
+     * @param {string} tagName
+     * @returns {Set<string>}
+     */
+    function getTargetAttrs(tagName) {
+      if (attributes.cache[tagName]) {
+        return attributes.cache[tagName]
+      }
+      /** @type {string[]} */
+      const result = []
+      if (attributes.names[tagName]) {
+        result.push(...attributes.names[tagName])
+      }
+      for (const { name, attrs } of attributes.regexps) {
+        name.lastIndex = 0
+        if (name.test(tagName)) {
+          result.push(...attrs)
+        }
+      }
+      if (casing.isKebabCase(tagName)) {
+        result.push(...getTargetAttrs(casing.pascalCase(tagName)))
+      }
+
+      return (attributes.cache[tagName] = new Set(result))
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VText} node */
+      VText(node) {
+        if (getBareString(node.value)) {
+          context.report({
+            node,
+            messageId: 'unexpected'
+          })
+        }
+      },
+      /**
+       * @param {VElement} node
+       */
+      VElement(node) {
+        elementStack = {
+          upper: elementStack,
+          name: node.rawName,
+          attrs: getTargetAttrs(node.rawName)
+        }
+      },
+      'VElement:exit'() {
+        elementStack = elementStack.upper
+      },
+      /** @param {VAttribute|VDirective} node */
+      VAttribute(node) {
+        if (!node.value) {
+          return
+        }
+        if (node.directive === false) {
+          const attrs = elementStack.attrs
+          if (!attrs.has(node.key.rawName)) {
+            return
+          }
+
+          if (getBareString(node.value.value)) {
+            context.report({
+              node: node.value,
+              messageId: 'unexpectedInAttr',
+              data: {
+                attr: node.key.rawName
+              }
+            })
+          }
+        } else {
+          const directive = `v-${node.key.name.name}`
+          if (!directives.includes(directive)) {
+            return
+          }
+          const str = getStringValue(node.value)
+          if (str && getBareString(str)) {
+            context.report({
+              node: node.value,
+              messageId: 'unexpectedInAttr',
+              data: {
+                attr: directive
+              }
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/lib/utils/regexp.js b/lib/utils/regexp.js
index cdb4c3af5..073a99f80 100644
--- a/lib/utils/regexp.js
+++ b/lib/utils/regexp.js
@@ -22,7 +22,7 @@ function escape(string) {
  * Strings like `"/^foo/i"` are converted to `/^foo/i` of `RegExp`.
  *
  * @param {string} string The string to convert.
- * @returns {string} Returns the `RegExp`.
+ * @returns {RegExp} Returns the `RegExp`.
  */
 function toRegExp(string) {
   const parts = RE_REGEXP_STR.exec(string)
@@ -32,7 +32,17 @@ function toRegExp(string) {
   return new RegExp(`^${escape(string)}$`)
 }
 
+/**
+ * Checks whether given string is regexp string
+ * @param {string} string
+ * @returns {boolean}
+ */
+function isRegExp(string) {
+  return Boolean(RE_REGEXP_STR.exec(string))
+}
+
 module.exports = {
   escape,
-  toRegExp
+  toRegExp,
+  isRegExp
 }
diff --git a/package.json b/package.json
index 1c6347af1..18b2c8932 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "test:base": "mocha \"tests/lib/**/*.js\" --reporter dot",
     "test": "nyc npm run test:base -- \"tests/integrations/*.js\" --timeout 60000",
     "debug": "mocha --inspect-brk \"tests/lib/**/*.js\" --reporter dot --timeout 60000",
+    "cover": "npm run cover:test && npm run cover:report",
+    "cover:test": "nyc npm run test:base -- --timeout 60000",
     "cover:report": "nyc report --reporter=html",
     "lint": "eslint . --rulesdir eslint-internal-rules",
     "lint:fix": "eslint . --rulesdir eslint-internal-rules --fix",
diff --git a/tests/lib/rules/no-bare-strings-in-template.js b/tests/lib/rules/no-bare-strings-in-template.js
new file mode 100644
index 000000000..3fc4a432d
--- /dev/null
+++ b/tests/lib/rules/no-bare-strings-in-template.js
@@ -0,0 +1,290 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-bare-strings-in-template')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+})
+
+tester.run('no-bare-strings-in-template', rule, {
+  valid: [
+    `
+    <template>
+      <h1>{{ $t('foo.bar') }}</h1>
+      <h1>{{ foo }}</h1>
+      <h1 v-t="'foo.bar'"></h1>
+    </template>
+    `,
+    `
+    <template>
+      <h1 v-text="'Lorem ipsum' + foo" />
+      <h1 v-text="foo" />
+      <h1 v-text="1" />
+      <h1 v-text="true" />
+      <h1 v-text />
+      <h1 v-text="" />
+    </template>
+    `,
+    `
+    <template>
+      <h1>#</h1>
+      <div title="#" />
+    </template>
+    `,
+    `
+    <template>
+      <div>(</div>
+      <div>)</div>
+      <div>,</div>
+      <div>.</div>
+      <div>&</div>
+      <div>+</div>
+      <div>-</div>
+      <div>=</div>
+      <div>*</div>
+      <div>/</div>
+      <div>#</div>
+      <div>%</div>
+      <div>!</div>
+      <div>?</div>
+      <div>:</div>
+      <div>[</div>
+      <div>]</div>
+      <div>{</div>
+      <div>}</div>
+      <div title="<"></div>
+      <div title=">"></div>
+      <div>•</div>
+      <div>—</div>
+      <div> </div>
+      <div>|</div>
+      <div>&lpar;</div>
+      <div>&rpar;</div>
+      <div>&comma;</div>
+      <div>&period;</div>
+      <div>&amp;</div>
+      <div>&AMP;</div>
+      <div>&plus;</div>
+      <div>&minus;</div>
+      <div>&equals;</div>
+      <div>&ast;</div>
+      <div>&midast;</div>
+      <div>&sol;</div>
+      <div>&num;</div>
+      <div>&percnt;</div>
+      <div>&excl;</div>
+      <div>&quest;</div>
+      <div>&colon;</div>
+      <div>&lsqb;</div>
+      <div>&lbrack;</div>
+      <div>&rsqb;</div>
+      <div>&rbrack;</div>
+      <div>&lcub;</div>
+      <div>&lbrace;</div>
+      <div>&rcub;</div>
+      <div>&rbrace;</div>
+      <div>&lt;</div>
+      <div>&LT;</div>
+      <div>&gt;</div>
+      <div>&GT;</div>
+      <div>&bull;</div>
+      <div>&bullet;</div>
+      <div>&mdash;</div>
+      <div>&ndash;</div>
+      <div>&nbsp;</div>
+      <div>&Tab;</div>
+      <div>&NewLine;</div>
+      <div>&verbar;</div>
+      <div>&vert;</div>
+      <div>&VerticalLine;</div>
+
+      <div>
+        ( ) , . & + - = * / # % ! ? : [ ] { }   • —   | &lpar; &rpar; &comma; &period; &amp; &AMP; &plus; &minus; &equals; &ast; &midast; &sol; &num; &percnt; &excl; &quest; &colon; &lsqb; &lbrack; &rsqb; &rbrack; &lcub; &lbrace; &rcub; &rbrace; &lt; &LT; &gt; &GT; &bull; &bullet; &mdash; &ndash; &nbsp; &Tab; &NewLine; &verbar; &vert; &VerticalLine;
+      </div>
+
+      <div
+        title="( ) , . & + - = * / # % ! ? : [ ] { } < > • —   | &lpar; &rpar; &comma; &period; &amp; &AMP; &plus; &minus; &equals; &ast; &midast; &sol; &num; &percnt; &excl; &quest; &colon; &lsqb; &lbrack; &rsqb; &rbrack; &lcub; &lbrace; &rcub; &rbrace; &lt; &LT; &gt; &GT; &bull; &bullet; &mdash; &ndash; &nbsp; &Tab; &NewLine; &verbar; &vert; &VerticalLine;"
+      />
+    </template>
+    `
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+        <h1>Lorem ipsum</h1>
+        <div
+          title="Lorem ipsum"
+          aria-label="Lorem ipsum"
+          aria-placeholder="Lorem ipsum"
+          aria-roledescription="Lorem ipsum"
+          aria-valuetext="Lorem ipsum"
+        />
+        <img alt="Lorem ipsum">
+        <input placeholder="Lorem ipsum">
+        <h1 v-text="'Lorem ipsum'" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected non-translated string used.',
+          line: 3,
+          column: 13,
+          endLine: 3,
+          endColumn: 24
+        },
+        {
+          message: 'Unexpected non-translated string used in `title`.',
+          line: 5,
+          column: 17,
+          endLine: 5,
+          endColumn: 30
+        },
+        {
+          message: 'Unexpected non-translated string used in `aria-label`.',
+          line: 6,
+          column: 22,
+          endLine: 6,
+          endColumn: 35
+        },
+        {
+          message:
+            'Unexpected non-translated string used in `aria-placeholder`.',
+          line: 7,
+          column: 28,
+          endLine: 7,
+          endColumn: 41
+        },
+        {
+          message:
+            'Unexpected non-translated string used in `aria-roledescription`.',
+          line: 8,
+          column: 32,
+          endLine: 8,
+          endColumn: 45
+        },
+        {
+          message: 'Unexpected non-translated string used in `aria-valuetext`.',
+          line: 9,
+          column: 26,
+          endLine: 9,
+          endColumn: 39
+        },
+        {
+          message: 'Unexpected non-translated string used in `alt`.',
+          line: 11,
+          column: 18,
+          endLine: 11,
+          endColumn: 31
+        },
+        {
+          message: 'Unexpected non-translated string used in `placeholder`.',
+          line: 12,
+          column: 28,
+          endLine: 12,
+          endColumn: 41
+        },
+        {
+          message: 'Unexpected non-translated string used in `v-text`.',
+          line: 13,
+          column: 20,
+          endLine: 13,
+          endColumn: 35
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <h1>Lorem</h1>
+        <h1>Lorem ipsum</h1>
+        <h1>ipsum</h1>
+      </template>
+      `,
+      options: [{ whitelist: ['Lorem'] }],
+      errors: [
+        {
+          line: 4,
+          column: 13,
+          messageId: 'unexpected',
+          endLine: 4,
+          endColumn: 24
+        },
+        {
+          line: 5,
+          column: 13,
+          messageId: 'unexpected',
+          endLine: 5,
+          endColumn: 18
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <h1 foo="Lorem ipsum" />
+        <h1 bar="Lorem ipsum" />
+        <h2 foo="Lorem ipsum" />
+        <h2 bar="Lorem ipsum" />
+        <div foo="Lorem ipsum" />
+        <div bar="Lorem ipsum" />
+      </template>
+      `,
+      options: [{ attributes: { '/^h\\d$/': ['foo'], h1: ['bar'] } }],
+      errors: [
+        {
+          message: 'Unexpected non-translated string used in `foo`.',
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 30
+        },
+        {
+          message: 'Unexpected non-translated string used in `bar`.',
+          line: 4,
+          column: 17,
+          endLine: 4,
+          endColumn: 30
+        },
+        {
+          message: 'Unexpected non-translated string used in `foo`.',
+          line: 5,
+          column: 17,
+          endLine: 5,
+          endColumn: 30
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <h1 v-foo="'Lorem ipsum'" />
+        <h1 v-bar="'Lorem ipsum'" />
+      </template>
+      `,
+      options: [{ directives: ['v-foo'] }],
+      errors: [
+        {
+          message: 'Unexpected non-translated string used in `v-foo`.',
+          line: 3,
+          column: 19,
+          endLine: 3,
+          endColumn: 34
+        }
+      ]
+    }
+  ]
+})