refactor(ui): locales system improvements

Author: Guillaume Chau

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

@@ -1,6 +1,6 @@
 <template>
   <div class="test-view">
-    <h1>I'm a custom view</h1>
+    <h1>{{ $t('vue-webpack.test-view') }}</h1>
     <p>A vue-cli plugin created me! I am a dynamically loaded component paired with a custom route.</p>
     <div>
       <VueButton @click="testPluginAction()">Test plugin action</VueButton>

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

@@ -1,45 +1,5 @@
 {
   "vue-webpack": {
-    "dashboard": {
-      "open-app": "Open app",
-      "webpack-status": {
-        "Success": "Success",
-        "Failed": "Failed",
-        "Compiling": "Compiling",
-        "Invalidated": "Invalidated",
-        "Idle": "Idle"
-      },
-      "build-status": {
-        "labels": {
-          "status": "Status",
-          "errors": "Errors",
-          "warnings": "Warnings",
-          "assets": "Assets",
-          "modules": "Modules",
-          "deps": "Dependencies"
-        }
-      },
-      "speed-stats": {
-        "title": "Speed stats"
-      },
-      "module-list": {
-        "title": "Dependencies"
-      },
-      "asset-list": {
-        "title": "Assets",
-        "size-warning": "This asset is big, consider using Code splitting to create smaller assets."
-      }
-    },
-    "analyzer": {
-      "go-up": "Go up",
-      "go-home": "Go to home",
-      "chunk": "Chunk"
-    },
-    "sizes": {
-      "stats": "Stats",
-      "parsed": "Parsed",
-      "gzip": "Gzip",
-      "help": "<b>Stats:</b> size from webpack stats data.<br><b>Parsed:</b> size from extracted source (after minification plugins). More accurate.<br><b>Gzip:</b> size of gzipped extracted source."
-    }
+    "test-view": "I'm a custom view"
   }
 }

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

@@ -1,8 +1,9 @@
 <template>
   <div id="app" class="app">
-    <div class="content">
+    <div v-if="ready" class="content">
       <router-view/>
     </div>
+    <VueLoadingIndicator v-else class="overlay big accent"/>
 
     <StatusBar/>
     <ClientAddonLoader/>
@@ -11,9 +12,17 @@
 </template>
 
 <script>
+import i18n from './i18n'
+
 export default {
   metaInfo: {
     titleTemplate: chunk => chunk ? `[Beta] ${chunk} - Vue CLI` : '[Beta] Vue CLI'
+  },
+
+  computed: {
+    ready () {
+      return Object.keys(i18n.getLocaleMessage('en')).length
+    }
   }
 }
 </script>

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

@@ -18,7 +18,7 @@
 
       <ListItemInfo
         :name="task.name"
-        :description="(task.status === 'idle' && task.description) || status"
+        :description="(task.status === 'idle' && $t(task.description)) || status"
         :selected="selected"
       />
     </div>

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

@@ -1,7 +1,17 @@
+const path = require('path')
+const fs = require('fs')
+const globby = require('globby')
+// Connectors
+const cwd = require('./cwd')
 // Subs
 const channels = require('../channels')
+// Context
+const getContext = require('../context')
+// Utils
+const { resolveModule } = require('@vue/cli/lib/util/module')
+const { resolveModuleRoot } = require('../utils/resolve-path')
 
-let locales = []
+let locales
 
 function list (context) {
   return locales
@@ -15,12 +25,29 @@ function add ({ lang, strings }, context) {
   })
 }
 
-function clear (context) {
+function reset (context) {
   locales = []
+  // Load builtin locales
+  const modulePath = resolveModule('@vue/cli/bin/vue', cwd.get())
+  const folder = resolveModuleRoot(modulePath, '@vue/cli')
+  loadFolder(folder, context)
 }
 
+function loadFolder (root, context) {
+  const paths = globby.sync([path.join(root, './locales/*.json')])
+  paths.forEach(file => {
+    const basename = path.basename(file)
+    const lang = basename.substr(0, basename.indexOf('.'))
+    const strings = JSON.parse(fs.readFileSync(file, { encoding: 'utf8' }))
+    add({ lang, strings }, context)
+  })
+}
+
+reset(getContext())
+
 module.exports = {
   list,
   add,
-  clear
+  reset,
+  loadFolder
 }

packages/@vue/cli-ui-addon-webpack/src/locales/en.json

@@ -17,7 +17,6 @@ const {
 } = require('@vue/cli/lib/util/installDeps')
 const invoke = require('@vue/cli/lib/invoke')
 const notifier = require('node-notifier')
-const globby = require('globby')
 // Subs
 const channels = require('../channels')
 // Connectors
@@ -127,13 +126,7 @@ function runPluginApi (id, context, fileName = 'ui') {
   // Locales
   try {
     const folder = fs.existsSync(id) ? id : getPath(id)
-    const paths = globby.sync([path.join(folder, './locales/*.json')])
-    paths.forEach(file => {
-      const basename = path.basename(file)
-      const lang = basename.substr(0, basename.indexOf('.'))
-      const strings = JSON.parse(fs.readFileSync(file, { encoding: 'utf8' }))
-      locales.add({ lang, strings }, context)
-    })
+    locales.loadFolder(folder, context)
   } catch (e) {}
 }
 

packages/@vue/cli-ui-addon-webpack/src/locales/fr.json

@@ -318,7 +318,7 @@ async function open (id, context) {
   currentProject = project
   cwd.set(project.path, context)
   // Reset locales
-  locales.clear()
+  locales.reset(context)
   // Load plugins
   plugins.list(project.path, context)
 

packages/@vue/cli-ui/src/App.vue

@@ -4,16 +4,6 @@ import deepmerge from 'deepmerge'
 
 Vue.use(VueI18n)
 
-function loadLocaleMessages () {
-  const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
-  const messages = {}
-  locales.keys().forEach(key => {
-    const locale = key.match(/([a-z0-9]+)\./i)[1]
-    messages[locale] = locales(key)
-  })
-  return messages
-}
-
 function detectLanguage () {
   try {
     const lang = (window.navigator.languages && window.navigator.languages[0]) ||
@@ -25,12 +15,40 @@ function detectLanguage () {
   }
 }
 
+async function autoInstallLocale (lang) {
+  try {
+    let response = await fetch(`https://unpkg.com/vue-cli-locale-${lang}`)
+    if (response.ok) {
+      // Redirect
+      const location = response.headers.get('location')
+      if (location) {
+        response = await fetch(`https://unpkg.com${location}`)
+      }
+      const data = await response.json()
+      mergeLocale(lang, data)
+    }
+  } catch (e) {}
+}
+
+async function autoDetect () {
+  const lang = detectLanguage()
+  if (lang !== 'en') {
+    await autoInstallLocale(lang)
+    i18n.locale = lang
+  }
+}
+
 const i18n = new VueI18n({
-  locale: detectLanguage() || 'en',
+  locale: 'en',
   fallbackLocale: 'en',
-  messages: loadLocaleMessages()
+  messages: {
+    en: {}
+  },
+  silentTranslationWarn: process.env.NODE_ENV !== 'production'
 })
 
+autoDetect()
+
 export function mergeLocale (lang, messages) {
   const newData = deepmerge(i18n.getLocaleMessage(lang), messages)
   i18n.setLocaleMessage(lang, newData)