⭐ new(command): i18n reporting command (experimental)

Author: kazupon

.gitignore

@@ -1,4 +1,8 @@
+__snapshots__
 node_modules
+tests/e2e/projects/vue-i18n-js/
+tests/e2e/projects/vue-i18n-ts/
+tests/output.json
 .DS_Store
 *.log
 *.swp

README.md

@@ -13,6 +13,7 @@ Vue CLI 3 plugin to add vue-i18n to your Vue Project
 ## :star: Features
 - [vue-i18n](https://github.com/kazupon/vue-i18n) basic scaffolding
 - Locale messages in Single File components with [vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader)
+- Locale messages missing & unused reporting (experimental)
 - Env Variables
 
 ## :rocket: Getting Started
@@ -29,6 +30,14 @@ cd my-vue-app
 vue add i18n
 ```
 
+## :hammer: Injected Commands
+- **`vue-cli-service i18n:report`** (experimental)
+
+  Report the missing locale message keys and unused keys.
+
+> NOTE: limitation
+> `vue-cli-service i18n:report` cannot detect missing and unused keys from local messages of i18n custom blocks.
+
 ## :clipboard: Env variables
 When vue-i18n code files had been scaffolded into your project, the following env variables generate into `.env`:
 

generator/index.js

@@ -25,6 +25,9 @@ module.exports = (api, options, rootOptions) => {
      */
 
     const pkg = {
+      scripts: {
+        'i18n:report': `vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales '${`./src/${localeDir}/**/*.json`}'`
+      },
       dependencies: {
         'vue-i18n': '^8.0.0'
       },

index.js

@@ -18,4 +18,7 @@ module.exports = (api, options) => {
           .end()
     }
   })
+
+  const report = require('./report')
+  api.registerCommand('i18n:report', report.options, args => report.service(args, api))
 }

package.json

@@ -17,7 +17,7 @@
     "rimraf": "^2.6.3",
     "vue": "^2.5.16",
     "vue-i18n": "^8.0.0",
-    "vue-i18n-extract": "^0.4.11"
+    "vue-i18n-extract": "^0.4.13"
   },
   "devDependencies": {
     "@vue/cli": "^3.4.1",

report.js

@@ -0,0 +1,59 @@
+const { chalk } = require(require.resolve('@vue/cli-shared-utils'))
+const { resolve } = require('path')
+const i18nExtract = require('vue-i18n-extract').default
+
+const EXTRACT_MISSING = 1
+const EXTRACT_UNUSED = 2
+const EXTRACT_ALL = 3
+
+const options = {
+  description: 'vue-i18n report',
+  usage: 'vue-cli-service i18n:report [options]',
+  options: {
+    locales: 'target locale files path, required',
+    src: 'target source codes path, required',
+    type: 'reporting type, default `missing` and `unused` all, optional',
+    output: 'create a json file out of report, optional'
+  }
+}
+
+function resolveReportType (args) {
+  let type = EXTRACT_ALL
+  if (args.type === 'missing') {
+    type = EXTRACT_MISSING
+  } else if (args.type === 'unused') {
+    type = EXTRACT_UNUSED
+  }
+  return type
+}
+
+async function service (args = {}, api) {
+  if (!args.src) {
+    console.log(chalk.red(`not specified 'src' argument.`))
+    return
+  }
+
+  if (!args.locales) {
+    console.log(chalk.red(`not specified 'locales' argument.`))
+    return
+  }
+
+  const currentDir = process.cwd()
+  const srcFiles = resolve(currentDir, args.src)
+  const localeFiles = resolve(currentDir, args.locales)
+  const extractType = resolveReportType(args)
+
+  const i18nReport = i18nExtract.createI18NReport(srcFiles, localeFiles, extractType)
+  i18nExtract.logI18NReport(i18nReport)
+
+  if (args.output) {
+    await i18nExtract.writeReportToFile(i18nReport, args.output)
+  }
+
+  return i18nReport
+}
+
+module.exports = {
+  service,
+  options
+}

tests/fixture/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <div id="app">main app</div>
+</template>

tests/fixture/components/component1.vue

@@ -0,0 +1,12 @@
+<template>
+  <p>{{ $t('messages.foo') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'component1',
+  created () {
+    console.log(this.$t('messages.buz'))
+  }
+}
+</script>

tests/fixture/components/component2.vue

@@ -0,0 +1,14 @@
+<template>
+  <p>{{ $t('messages.bar') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'component2',
+  created () {
+    console.log(this.$t('messages.hoge'))
+    console.log(this.$t('messages.fuga.foo'))
+  }
+}
+</script>
+

tests/fixture/locales/cn.js

@@ -0,0 +1,5 @@
+export default {
+  messages: {
+    foo: 'foo'
+  }
+}