Fix false positives for keys linked in no-unused-keys rule (#76)

Author: ota-meshi

lib/rules/no-unused-keys.js

@@ -7,6 +7,7 @@ const { extname } = require('path')
 const jsonDiffPatch = require('jsondiffpatch').create({})
 const flatten = require('flat')
 const collectKeys = require('../utils/collect-keys')
+const collectLinkedKeys = require('../utils/collect-linked-keys')
 const {
   UNEXPECTED_ERROR_LOCATION,
   getLocaleMessages,
@@ -19,26 +20,34 @@ const debug = require('debug')('eslint-plugin-vue-i18n:no-unused-keys')
  * @typedef {import('../utils/locale-messages').LocaleMessage} LocaleMessage
  */
 
+/** @type {string[] | null} */
 let usedLocaleMessageKeys = null // used locale message keys
 
 /**
  * @param {RuleContext} context
  * @param {LocaleMessage} targetLocaleMessage
  * @param {string} json
- * @param {object} usedkeys
+ * @param {string[]} usedkeys
  */
 function getUnusedKeys (context, targetLocaleMessage, json, usedkeys) {
   let unusedKeys = []
 
   try {
-    let compareKeys = { ...usedkeys }
+    const jsonValue = JSON.parse(json)
+
+    let compareKeys = [
+      ...usedkeys,
+      ...collectLinkedKeys(jsonValue)
+    ].reduce((values, current) => {
+      values[current] = true
+      return values
+    }, {})
     if (targetLocaleMessage.localeKey === 'key') {
       compareKeys = targetLocaleMessage.locales.reduce((keys, locale) => {
-        keys[locale] = usedkeys
+        keys[locale] = compareKeys
         return keys
       }, {})
     }
-    const jsonValue = JSON.parse(json)
     const diffValue = jsonDiffPatch.diff(
       flatten(compareKeys, { safe: true }),
       flatten(jsonValue, { safe: true })

lib/utils/collect-keys.js

@@ -86,6 +86,10 @@ function processText (text, config, filename, linter) {
   ).filter(e => e)
 }
 
+/**
+ * Collect the used keys.
+ * @returns {string[]}
+ */
 function collectKeys (files, extensions) {
   debug('collectKeys', files, extensions)
 
@@ -107,22 +111,22 @@ function collectKeys (files, extensions) {
   linter.defineParser('vue-eslint-parser', require(require.resolve(config.parser)))
   linter.defineRule(INTERNAL_RULE_KEY, { create })
 
+  const results = new Set()
+
   // detect used lodalization keys with linter
-  const fileList = listFilesToProcess(files, config)
-  const results = fileList.map(fileInfo => {
-    const { filename, ignored } = fileInfo
+  for (const { filename, ignored } of listFilesToProcess(files, config)) {
     debug(`Processing file ... ${filename}`)
 
-    if (ignored) { return {} }
+    if (ignored) { continue }
 
     const text = readFileSync(resolve(filename), 'utf8')
-    return processText(text, config, filename, linter)
-  }).reduce((values, current) => values.concat(current), [])
 
-  return results.reduce((values, current) => {
-    values[current] = true
-    return values
-  }, {})
+    for (const usedKey of processText(text, config, filename, linter)) {
+      results.add(usedKey)
+    }
+  }
+
+  return [...results]
 }
 
 module.exports = collectKeys

lib/utils/collect-linked-keys.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Collect the keys used by the linked messages.
+ * @author Yosuke Ota
+ */
+'use strict'
+
+// Note: If vue-i18n@next parser is separated from vue plugin, change it to use that.
+
+const linkKeyMatcher = /(?:@(?:\.[a-z]+)?:(?:[\w\-_|.]+|\([\w\-_|.]+\)))/g
+const linkKeyPrefixMatcher = /^@(?:\.([a-z]+))?:/
+const bracketsMatcher = /[()]/g
+
+/**
+ * Extract the keys used by the linked messages.
+ * @param {any} object
+ * @returns {IterableIterator<string>}
+ */
+function * extractUsedKeysFromLinks (object) {
+  for (const value of Object.values(object)) {
+    if (!value) {
+      continue
+    }
+    if (typeof value === 'object') {
+      yield * extractUsedKeysFromLinks(value)
+    } else if (typeof value === 'string') {
+      if (value.indexOf('@:') >= 0 || value.indexOf('@.') >= 0) {
+        // see https://github.com/kazupon/vue-i18n/blob/c07d1914dcac186291b658a8b9627732010f6848/src/index.js#L435
+        const matches = value.match(linkKeyMatcher)
+        for (const idx in matches) {
+          const link = matches[idx]
+          const linkKeyPrefixMatches = link.match(linkKeyPrefixMatcher)
+          const [linkPrefix] = linkKeyPrefixMatches
+
+          // Remove the leading @:, @.case: and the brackets
+          const linkPlaceholder = link
+            .replace(linkPrefix, '')
+            .replace(bracketsMatcher, '')
+          yield linkPlaceholder
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Collect the keys used by the linked messages.
+ * @param {any} object
+ * @returns {string[]}
+ */
+module.exports = function collectLinkedKeys (object) {
+  return [...new Set(extractUsedKeysFromLinks(object))]
+}

tests/fixtures/no-unused-keys/valid/constructor-option-format/locales/index.json

@@ -2,15 +2,17 @@
   "en": {
     "hello": "hello world",
     "messages": {
-      "hello": "hi DIO!"
+      "hello": "hi DIO!",
+      "link": "@:messages.hello"
     },
     "hello_dio": "hello underscore DIO!",
     "hello {name}": "hello {name}!"
   },
   "ja": {
     "hello": "ハローワールド",
     "messages": {
-      "hello": "こんにちは、DIO！"
+      "hello": "こんにちは、DIO！",
+      "link": "@:messages.hello"
     },
     "hello_dio": "こんにちは、アンダースコア DIO！",
     "hello {name}": "こんにちは、{name}！"

tests/fixtures/no-unused-keys/valid/constructor-option-format/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <p v-t="'hello_dio'">{{ $t('messages.hello') }}</p>
+    <p v-t="'hello_dio'">{{ $t('messages.link') }}</p>
   </div>
 </template>
 

tests/fixtures/no-unused-keys/valid/vue-cli-format/locales/en.json

@@ -1,7 +1,8 @@
 {
   "hello": "hello world",
   "messages": {
-    "hello": "hi DIO!"
+    "hello": "hi DIO!",
+    "link": "@:messages.hello"
   },
   "hello_dio": "hello underscore DIO!",
   "hello {name}": "hello {name}!"

tests/fixtures/no-unused-keys/valid/vue-cli-format/locales/ja.json

@@ -1,8 +1,9 @@
 {
   "hello": "ハローワールド",
   "messages": {
-    "hello": "こんにちは、DIO！"
+    "hello": "こんにちは、DIO！",
+    "link": "@:messages.hello"
   },
   "hello_dio": "こんにちは、アンダースコア DIO！",
   "hello {name}": "こんにちは、{name}！"
-}
+}

tests/fixtures/no-unused-keys/valid/vue-cli-format/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <p v-t="'hello_dio'">{{ $t('messages.hello') }}</p>
+    <p v-t="'hello_dio'">{{ $t('messages.link') }}</p>
   </div>
 </template>
 

tests/lib/utils/collect-linked-keys.js

@@ -0,0 +1,77 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const assert = require('assert')
+const collectLinkedKeys = require('../../../lib/utils/collect-linked-keys')
+
+describe('collectLinkedKeys', () => {
+  it('should be get the keys used in the plain linked message.', () => {
+    const object = {
+      message: {
+        the_world: 'the world',
+        dio: 'DIO:',
+        linked: '@:message.dio @:message.the_world !!!!'
+      }
+    }
+
+    const expected = ['message.dio', 'message.the_world']
+    assert.deepStrictEqual(collectLinkedKeys(object), expected)
+  })
+  it('should be get the keys used in the formatting linked message.', () => {
+    const object = {
+      message: {
+        homeAddress: 'Home address',
+        missingHomeAddress: 'Please provide @.lower:message.homeAddress'
+      }
+    }
+
+    const expected = ['message.homeAddress']
+    assert.deepStrictEqual(collectLinkedKeys(object), expected)
+  })
+  it('should be get the keys used in the linked message with brackets.', () => {
+    const object = {
+      message: {
+        dio: 'DIO',
+        linked: 'There\'s a reason, you lost, @:(message.dio).'
+      }
+    }
+
+    const expected = ['message.dio']
+    assert.deepStrictEqual(collectLinkedKeys(object), expected)
+  })
+
+  it('should be get the keys used in the linked message.', () => {
+    const object = {
+      foo: {
+        a: 'Hi',
+        b: '@:foo.a lorem ipsum @:bar.a !!!!',
+        c: {
+          a: '@:(bar.a) @:bar.b.a'
+        },
+        d: 'Hello'
+      },
+      bar: {
+        a: 'Yes',
+        b: {
+          a: '@.lower:foo.d',
+          // invaid values
+          b: null,
+          c: 123,
+          e: /reg/,
+          f: () => {},
+          g: [true, false]
+        }
+      }
+    }
+
+    const expected = [
+      'foo.a',
+      'bar.a',
+      'bar.b.a',
+      'foo.d'
+    ]
+    assert.deepStrictEqual(collectLinkedKeys(object), expected)
+  })
+})