feat(ui): plugin locales

Author: Guillaume Chau

docs/plugin-dev-ui.md

@@ -10,6 +10,7 @@ This guide will walk you through the development of cli-ui specific features for
 - [Shared data](#shared-data)
 - [Plugin actions](#plugin-actions)
 - [Inter-process communication (IPC)](#inter-process-communication-ipc)
+- [Localization](#localization)
 - [Hooks](#hooks)
 - [Public static files](#public-static-files)
 
@@ -350,11 +351,19 @@ ClientAddonApi.component('vue-webpack-dashboard', WebpackDashboard)
 ClientAddonApi.addRoutes('vue-webpack', [
   { path: '', name: 'test-webpack-route', component: TestView }
 ])
+
+// You can translate your plugin components
+// Load the locale files (uses vue-i18n)
+const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
+locales.keys().forEach(key => {
+  const locale = key.match(/([a-z0-9]+)\./i)[1]
+  ClientAddonApi.addLocalization(locale, locales(key))
+})
 ```
 
 The cli-ui registers `Vue` and `ClientAddonApi` as global variables in the `window` scope.
 
-In your components, you can use all the components and the CSS classes of [@vue/ui](https://github.com/vuejs/ui) and [@vue/cli-ui](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-ui/src/components) in order to keep the look and feel consistent.
+In your components, you can use all the components and the CSS classes of [@vue/ui](https://github.com/vuejs/ui) and [@vue/cli-ui](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-ui/src/components) in order to keep the look and feel consistent. You can also translate the strings with [vue-i18n](https://github.com/kazupon/vue-i18n) which is included.
 #### Register the client addon
 
 Back to the `ui.js` file, use the `api.addClientAddon` method with a require query to the built folder:
@@ -632,6 +641,43 @@ api.ipcSend({
 })
 ```
 
+### Localization
+
+You can put locale files compatible with [vue-i18n](https://github.com/kazupon/vue-i18n) in a `locales` folder at the root of your plugin. They will be automatically loaded into the client when the project is opened. You can then use `$t` to translate strings in your components and other vue-i18n helpers. Also, the strings used in the UI API (like `describeTask`) will go through vue-i18n as well to you can localize them.
+
+Example `locales` folder:
+
+```
+vue-cli-plugin/locales/en.json
+vue-cli-plugin/locales/fr.json
+```
+
+Example usage in API:
+
+```js
+api.describeConfig({
+  // vue-i18n path
+  description: 'my-plugin.config.foo'
+})
+```
+
+Example usage in components:
+
+```html
+<VueButton>{{ $t('my-plugin.actions.bar') }}</VueButton>
+```
+
+You can also load the locale files in a client addon if you prefer, using the `ClientAddonApi`:
+
+```js
+// Load the locale files (uses vue-i18n)
+const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
+locales.keys().forEach(key => {
+  const locale = key.match(/([a-z0-9]+)\./i)[1]
+  ClientAddonApi.addLocalization(locale, locales(key))
+})
+```
+
 ### Hooks
 
 Hooks allows to react to certain cli-ui events.

packages/@vue/cli-plugin-eslint/locales/en.json

@@ -0,0 +1,13 @@
+{
+  "eslint": {
+    "config": {
+      "eslint": {
+        "description": "Error checking & Code quality",
+        "groups": {
+          "strongly-recommended": "Strongly recommended",
+          "recommended": "Recommended"
+        }
+      }
+    }
+  }
+}

packages/@vue/cli-plugin-eslint/locales/fr.json

@@ -0,0 +1,13 @@
+{
+  "eslint": {
+    "config": {
+      "eslint": {
+        "description": "Vérification des erreurs & Qualité du code",
+        "groups": {
+          "strongly-recommended": "Fortement recommandé",
+          "recommended": "Recommandé"
+        }
+      }
+    }
+  }
+}

packages/@vue/cli-plugin-eslint/ui.js

@@ -5,7 +5,7 @@ module.exports = api => {
   api.describeConfig({
     id: 'eslintrc',
     name: 'ESLint configuration',
-    description: 'Error checking & Code quality',
+    description: 'eslint.config.eslint.description',
     link: 'https://eslint.org',
     icon: '.eslintrc.json',
     files: {
@@ -19,7 +19,7 @@ module.exports = api => {
           name: 'vue/attribute-hyphenation',
           type: 'list',
           message: 'Attribute hyphenation',
-          group: 'Strongly recommended',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
           description: 'Enforce attribute naming style in template (`my-prop` or `myProp`)',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attribute-hyphenation.md',
           default: JSON.stringify('off'),
@@ -43,7 +43,7 @@ module.exports = api => {
           name: 'vue/html-end-tags',
           type: 'confirm',
           message: 'Template end tags style',
-          group: 'Strongly recommended',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
           description: 'End tag on Void elements, end tags and self-closing opening tags',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-end-tags.md',
           default: false,
@@ -55,7 +55,7 @@ module.exports = api => {
           name: 'vue/html-indent',
           type: 'list',
           message: 'Template indentation',
-          group: 'Strongly recommended',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
           description: 'Enforce indentation in template',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-indent.md',
           default: JSON.stringify('off'),
@@ -87,7 +87,7 @@ module.exports = api => {
           name: 'vue/html-self-closing',
           type: 'confirm',
           message: 'Template tag self-closing style',
-          group: 'Strongly recommended',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
           description: 'Self-close any component or non-Void element tags',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md',
           default: false,
@@ -99,7 +99,7 @@ module.exports = api => {
           name: 'vue/require-default-prop',
           type: 'confirm',
           message: 'Require default in required props',
-          group: 'Strongly recommended',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
           description: 'This rule requires default value to be set for each props that are not marked as `required`',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-default-prop.md',
           default: false,
@@ -111,7 +111,7 @@ module.exports = api => {
           name: 'vue/require-prop-types',
           type: 'confirm',
           message: 'Require types for props',
-          group: 'Strongly recommended',
+          group: 'eslint.config.eslint.groups.strongly-recommended',
           description: 'In committed code, prop definitions should always be as detailed as possible, specifying at least type(s)',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-prop-types.md',
           default: false,
@@ -123,7 +123,7 @@ module.exports = api => {
           name: 'vue/attributes-order',
           type: 'confirm',
           message: 'Attribute order',
-          group: 'Recommended',
+          group: 'eslint.config.eslint.groups.recommended',
           description: 'This rule aims to enforce ordering of component attributes (the default order is specified in the Vue style guide)',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attributes-order.md',
           default: false,
@@ -135,7 +135,7 @@ module.exports = api => {
           name: 'vue/html-quotes',
           type: 'list',
           message: 'Attribute quote style',
-          group: 'Recommended',
+          group: 'eslint.config.eslint.groups.recommended',
           description: 'Enforce style of the attribute quotes in templates',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-quotes.md',
           default: JSON.stringify('off'),
@@ -159,7 +159,7 @@ module.exports = api => {
           name: 'vue/order-in-components',
           type: 'confirm',
           message: 'Component options order',
-          group: 'Recommended',
+          group: 'eslint.config.eslint.groups.recommended',
           description: 'This rule aims to enforce ordering of component options (the default order is specified in the Vue style guide)',
           link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md',
           default: false,

packages/@vue/cli-service/locales/en.json

@@ -0,0 +1,18 @@
+{
+  "vue-webpack": {
+    "dashboard": {
+      "title": "Dashboard"
+    },
+    "analyzer": {
+      "title": "Analyzer"
+    },
+    "tasks": {
+      "serve": {
+        "description": "Compiles and hot-reloads for development"
+      },
+      "build": {
+        "description": "Compiles and minifies for production"
+      }
+    }
+  }
+}

packages/@vue/cli-service/locales/fr.json

@@ -0,0 +1,18 @@
+{
+  "vue-webpack": {
+    "dashboard": {
+      "title": "Tableau de bord"
+    },
+    "analyzer": {
+      "title": "Analyseur"
+    },
+    "tasks": {
+      "serve": {
+        "description": "Compile et recharge à chaud pour le développement"
+      },
+      "build": {
+        "description": "Compile et minifie pour la production"
+      }
+    }
+  }
+}

packages/@vue/cli-service/ui.js

@@ -34,13 +34,13 @@ module.exports = api => {
     views: [
       {
         id: 'vue-webpack-dashboard',
-        label: 'Dashboard',
+        label: 'vue-webpack.dashboard.title',
         icon: 'dashboard',
         component: 'vue-webpack-dashboard'
       },
       {
         id: 'vue-webpack-analyzer',
-        label: 'Analyzer',
+        label: 'vue-webpack.analyzer.title',
         icon: 'donut_large',
         component: 'vue-webpack-analyzer'
       }
@@ -49,7 +49,7 @@ module.exports = api => {
   }
   api.describeTask({
     match: /vue-cli-service serve/,
-    description: 'Compiles and hot-reloads for development',
+    description: 'vue-webpack.tasks.serve.description',
     link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#serve',
     prompts: [
       {
@@ -121,7 +121,7 @@ module.exports = api => {
   })
   api.describeTask({
     match: /vue-cli-service build/,
-    description: 'Compiles and minifies for production',
+    description: 'vue-webpack.tasks.build.description',
     link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#build',
     prompts: [
       {

packages/@vue/cli-ui-addon-webpack/src/components/AssetList.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="asset-list list-block">
     <div class="content">
-      <div class="title">Assets</div>
+      <div class="title">
+        {{ $t('vue-webpack.dashboard.asset-list.title') }}
+      </div>
 
       <VueIcon
         v-if="!assetsSorted.length"

packages/@vue/cli-ui-addon-webpack/src/components/AssetListItem.vue

@@ -17,7 +17,7 @@
           v-if="!asset.secondary && asset.big"
           icon="warning"
           class="icon"
-          v-tooltip="'This asset is big, consider using Code splitting to create smaller assets.'"
+          v-tooltip="$t('vue-webpack.dashboard.asset-list.size-warning')"
         />
       </div>
     </div>

packages/@vue/cli-ui-addon-webpack/src/components/BuildStatus.vue

@@ -2,33 +2,49 @@
   <div class="build-status">
     <div class="content">
       <div class="info-block status">
-        <div class="label">Status</div>
-        <div class="value">{{ status || 'Idle' }}</div>
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.status') }}
+        </div>
+        <div class="value">{{ $t(`vue-webpack.dashboard.webpack-status.${status || 'Idle'}`) }}</div>
       </div>
       <div class="info-block errors">
-        <div class="label">Errors</div>
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.errors') }}
+        </div>
         <div class="value">{{ errors.length }}</div>
       </div>
       <div class="info-block warnings">
-        <div class="label">Warnings</div>
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.warnings') }}
+        </div>
         <div class="value">{{ warnings.length }}</div>
       </div>
       <div class="info-block assets">
-        <div class="label">Assets</div>
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.assets') }}
+        </div>
         <div class="value">
           {{ assetsTotalSize | size('B') }}
-          <span class="secondary">({{ sizeField }})</span>
+          <span class="secondary">
+            ({{ $t(`vue-webpack.sizes.${sizeField}`) }})
+          </span>
         </div>
       </div>
       <div class="info-block modules">
-        <div class="label">Modules</div>
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.modules') }}
+        </div>
         <div class="value">
           {{ modulesTotalSize | size('B') }}
-          <span class="secondary">({{ sizeField }})</span>
+          <span class="secondary">
+            ({{ $t(`vue-webpack.sizes.${sizeField}`) }})
+          </span>
         </div>
       </div>
       <div class="info-block dep-modules">
-        <div class="label">Dependencies</div>
+        <div class="label">
+          {{ $t('vue-webpack.dashboard.build-status.labels.deps') }}
+        </div>
         <div class="value">
           {{ depModulesTotalSize | size('B') }}
           <span class="secondary">