⭐ new: hot reloading (#71) by @gglnx

* Add support for hot reloading

* Add missing langVM

* Update hot reload doc

* Add testing for hot reloading

Author: gglnx

gitbook/SUMMARY.md

@@ -11,4 +11,5 @@ Internationalization plugin of Vue.js
 * [Fallback Translation](fallback.md)
 * [Component Locale](component.md)
 * [Dynamic Locale](dynamic.md)
+* [Hot reload](hot-reload.md)
 * [API References](api.md)

gitbook/hot-reload.md

@@ -0,0 +1,13 @@
+# Hot reload
+
+You can watch for changes in translation files and hot reload changes into your application.
+
+```javascript
+// Support hot updates
+if (module.hot) {
+  module.hot.accept(['./en', './ja'], () => {
+    Vue.locale('en', require('./en').default);
+    Vue.locale('ja', require('./ja').default);
+  });
+}
+```

src/asset.js

@@ -1,9 +1,6 @@
 import warn from './warn'
 
-const locales = Object.create(null) // locales store
-
-
-export default function (Vue) {
+export default function (Vue, langVM) {
   /**
    * Register or retrieve a global locale definition.
    *
@@ -14,15 +11,15 @@ export default function (Vue) {
 
   Vue.locale = (id, definition, cb) => {
     if (definition === undefined) { // gettter
-      return locales[id]
+      return langVM.locales[id]
     } else { // setter
       if (definition === null) {
-        locales[id] = undefined
-        delete locales[id]
+        langVM.locales[id] = undefined
+        delete langVM.locales[id]
       } else {
         setLocale(id, definition, locale => {
           if (locale) {
-            locales[id] = locale
+            langVM.locales[id] = locale
           } else {
             warn('failed set `' + id + '` locale')
           }

src/index.js

@@ -32,7 +32,7 @@ function plugin (Vue, opts = {}) {
   const lang = 'en'
   setupLangVM(Vue, lang)
 
-  Asset(Vue)
+  Asset(Vue, langVM)
   Override(Vue, langVM, version)
   Config(Vue, langVM, lang)
   Extend(Vue)
@@ -42,7 +42,7 @@ function setupLangVM (Vue, lang) {
   const silent = Vue.config.silent
   Vue.config.silent = true
   if (!langVM) {
-    langVM = new Vue({ data: { lang } })
+    langVM = new Vue({ data: { lang, locales: {} } })
   }
   Vue.config.silent = silent
 }

src/override.js

@@ -17,8 +17,10 @@ export default function (Vue, langVM, version) {
 
     if (!this.$parent) { // root
       this.$lang = langVM
-      this._langUnwatch = this.$lang.$watch('lang', (a, b) => {
+      this._langUnwatch = this.$lang.$watch('$data', (a, b) => {
         update(this)
+      }, {
+        deep: true
       })
     }
   }

test/specs/fixture/locales-updated.js

@@ -0,0 +1,5 @@
+import locales from './locales'
+
+locales.en.message.hello = 'the world updated'
+
+export default locales

test/specs/i18n.js

@@ -1,6 +1,7 @@
 import assert from 'power-assert'
 import Vue from 'vue'
 import locales from './fixture/locales'
+import updatedLocales from './fixture/locales-updated'
 
 
 describe('i18n', () => {
@@ -519,6 +520,48 @@ describe('i18n', () => {
   })
 
 
+  describe('hot reload', () => {
+    let el
+    beforeEach(() => {
+      el = document.createElement('div')
+      document.body.appendChild(el)
+    })
+
+    it('should translate', done => {
+      const options = {
+        el,
+        data () {
+          return { lang: 'en' }
+        }
+      }
+
+      if (version >= 2) {
+        options.render = function (h) {
+          return h('p', {}, [this.$t('message.hello', this.lang)])
+        }
+      } else {
+        options.template = '<p>{{ $t("message.hello", lang) }}</p>'
+      }
+
+      const vm = new Vue(options)
+
+      Vue.nextTick(() => {
+        assert.equal(vm.$el.textContent, locales.en.message.hello)
+
+        // Update translation
+        Object.keys(updatedLocales).forEach(lang => {
+          Vue.locale(lang, updatedLocales[lang])
+        })
+
+        Vue.nextTick(() => {
+          assert.equal(vm.$el.textContent, updatedLocales.en.message.hello)
+          done()
+        })
+      })
+    })
+  })
+
+
   describe('translate component', () => {
     let el
     beforeEach(() => {