feat(directives): introduce waitForDirective

docs/guide/directive.md

@@ -1,4 +1,6 @@
-# Directive
+# Directives
+
+## v-t
 
 Full Featured properties:
 
@@ -33,3 +35,30 @@ Vue.component("app", {
   template: `<p ref="text" v-t="{ path: 'helloWithName', language: 'en', args: { name: 'Hans' } }"></p>`
 });
 ```
+
+
+## v-waitForT
+
+Wait for the i18next fot be initialized. If not initialized it sets the element to `hidden = true` and wait 
+for i18next to be initialized.
+
+```javascript
+const locales = {
+  en: {
+    hello: "Hello"
+  }
+};
+
+i18next.init({
+  lng: "en",
+  resources: {
+    en: { translation: locales.en }
+  }
+});
+
+const i18n = new VueI18next(i18next);
+
+Vue.component("app", {
+  template: `<p v-waitForT>$t("hello")</p>`
+});
+```

examples/app.js

@@ -31,28 +31,32 @@ const i18n = new VueI18next(i18next);
 
 Vue.component('app', {
   template: `
+  <div>
     <div>
-      <div>
         <h3>Translation</h3>
         <language-changer></language-changer><load-bundle></load-bundle>
         <p>$t: {{ $t("message.hello") }}</p>
-      </div>
-      <div>
-        <h3>Interpolation</h3>
-        <i18next path="term" tag="label" for="tos">
-          <a href="#" target="_blank">{{ $t("tos") }}</a>
-          <strong>a</strong>
-        </i18next>
-      </div>
-      <div>
-        <h3>Prefix</h3>
-        <key-prefix></key-prefix>
-      </div>
-      <div>
-        <h3>Interpolation</h3>
-        <inline-translations></inline-translations>
-      </div>
-    </div>`,
+    </div>
+    <div>
+      <h3>Interpolation</h3>
+      <i18next path="term" tag="label" for="tos">
+        <a href="#" target="_blank">{{ $t("tos") }}</a>
+        <strong>a</strong>
+      </i18next>
+    </div>
+    <div>
+      <h3>Prefix</h3>
+      <key-prefix></key-prefix>
+    </div>
+    <div>
+      <h3>Inline translations</h3>
+      <inline-translations></inline-translations>
+    </div>
+    <div>
+      <h3>Directive</h3>
+      <with-directive></with-directive>
+    </div>
+  </div>`,
 });
 
 Vue.component('language-changer', {
@@ -113,6 +117,11 @@ Vue.component('inline-translations', {
     </div>`,
 });
 
+Vue.component('with-directive', {
+  template: `
+    <div v-t="{path:'message.hello'}"></div>`,
+});
+
 new Vue({
   i18n,
 }).$mount('#app');

src/directive.js

@@ -86,3 +86,8 @@ export function update(el, binding, vnode, oldVNode) {
 
   t(el, binding, vnode);
 }
+
+export default {
+  bind,
+  update,
+};

src/install.js

@@ -1,7 +1,8 @@
 /* eslint-disable import/no-mutable-exports */
 import deepmerge from 'deepmerge';
 import component from './component';
-import { bind, update } from './directive';
+import directive from './directive';
+import waitDirective from './wait';
 
 export let Vue;
 
@@ -134,5 +135,6 @@ export function install(_Vue) {
   };
 
   Vue.component(component.name, component);
-  Vue.directive('t', { bind, update });
+  Vue.directive('t', directive);
+  Vue.directive('waitForT', waitDirective);
 }

src/wait.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-param-reassign, no-unused-vars */
+
+import { warn } from './utils';
+
+function assert(vnode) {
+  const vm = vnode.context;
+
+  if (!vm.$i18n) {
+    warn('No VueI18Next instance found in the Vue instance');
+    return false;
+  }
+
+  return true;
+}
+
+function waitForIt(el, vnode) {
+  if (vnode.context.$i18n.i18next.isInitialized) {
+    el.hidden = false;
+  } else {
+    el.hidden = true;
+    const initialized = () => {
+      vnode.context.$forceUpdate();
+      // due to emitter removing issue in i18next we need to delay remove
+      setTimeout(() => {
+        if (vnode.context && vnode.context.$i18n) {
+          vnode.context.$i18n.i18next.off('initialized', initialized);
+        }
+      }, 1000);
+    };
+    vnode.context.$i18n.i18next.on('initialized', initialized);
+  }
+}
+
+export function bind(el, binding, vnode) {
+  if (!assert(vnode)) {
+    return;
+  }
+
+  waitForIt(el, vnode);
+}
+
+export function update(el, binding, vnode, oldVNode) {
+  if (vnode.context.$i18n.i18next.isInitialized) {
+    el.hidden = false;
+  }
+}
+
+export default {
+  bind,
+  update,
+};

test/unit/component.test.js

@@ -311,6 +311,15 @@ describe('Components with backend', () => {
 
       expect(root.textContent).to.equal('dev__common__test');
     });
+
+    it('should wait for translation to be ready', async () => {
+      const root = vm.$refs.hello;
+      expect(root.textContent).to.equal('key1');
+      backend.flush();
+      await nextTick();
+
+      expect(root.textContent).to.equal('dev__common__test');
+    });
   });
 
   describe('Nested namespaces', () => {