Merge pull request #27 from panter/features/directive

feat(directive): introduce a t directive

Author: claudiocro

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "javascript.implicitProjectConfig.experimentalDecorators": true
-}
+  "javascript.implicitProjectConfig.experimentalDecorators": true,
+  "eslint.autoFixOnSave": true
+}

README.md

@@ -160,6 +160,42 @@ Vue.component("app", {
 });
 ```
 
+### Directive
+
+Full Featured properties:
+
+* `path`: string
+* `language`: language, optional
+* `args`: object
+
+```javascript
+const locales = {
+  en: {
+    hello: "Hello",
+    helloWithName: "Hello {{name}}"
+  }
+};
+
+i18next.init({
+  lng: "en",
+  resources: {
+    en: { translation: locales.en }
+  }
+});
+
+const i18n = new VueI18next(i18next);
+
+// simple usage
+Vue.component("app", {
+  template: `<p v-t="hello"></p>`
+});
+
+// full featured
+Vue.component("app", {
+  template: `<p ref="text" v-t="{ path: 'helloWithName', language: 'en', args: { name: 'Hans' } }"></p>`
+});
+```
+
 ### i18nOptions
 
 The namespace will be loaded with (loadNamespaces)[http://i18next.com/docs/api/#load-namespaces],so one can lazy load namespaces for components.

src/directive.js

@@ -0,0 +1,83 @@
+/* eslint-disable no-param-reassign, no-console, no-unused-vars */
+
+function equalLanguage(el, vnode) {
+  const vm = vnode.context;
+  return el._i18nLanguage === vm.$i18n.i18next.language;
+}
+
+function equalValue(value, oldValue) {
+  if (value === oldValue) {
+    return true;
+  } else if (value && oldValue) {
+    return (
+      value.path === oldValue.path &&
+      value.language === oldValue.language &&
+      value.args === oldValue.args
+    );
+  }
+}
+
+function assert(vnode) {
+  const vm = vnode.context;
+
+  if (!vm.$i18n) {
+    console.log('No VueI18Next instance found in the Vue instance');
+    return false;
+  }
+
+  return true;
+}
+
+function parseValue(value) {
+  let path;
+  let language;
+  let args;
+
+  if (typeof value === 'string') {
+    path = value;
+  } else if (toString.call(value) === '[object Object]') {
+    path = value.path;
+    language = value.language;
+    args = value.args;
+  }
+
+  return { path, language, args };
+}
+
+function t(el, binding, vnode) {
+  const value = binding.value;
+
+  const { path, language, args } = parseValue(value);
+  if (!path && !language && !args) {
+    console.log('v-t: invalid value');
+    return;
+  }
+
+  if (!path) {
+    console.log('v-t: `path` is required');
+    return;
+  }
+
+  const vm = vnode.context;
+  el.textContent = language
+    ? vm.$i18n.i18next.getFixedT(language)(path, args)
+    : vm.$i18n.i18next.t(path, args);
+
+  el._i18nLanguage = vm.$i18n.i18next.language;
+}
+
+export function bind(el, binding, vnode) {
+  if (!assert(vnode)) {
+    return;
+  }
+
+  t(el, binding, vnode);
+}
+
+export function update(el, binding, vnode, oldVNode) {
+  if (equalLanguage(el, vnode) && equalValue(binding.value, binding.oldValue)) {
+    return;
+  }
+
+  t(el, binding, vnode);
+}

src/install.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-mutable-exports */
 import deepmerge from 'deepmerge';
 import component from './component';
+import { bind, update } from './directive';
 
 export let Vue;
 
@@ -13,7 +14,11 @@ export function install(_Vue) {
   Vue = _Vue;
 
   const getByKey = (i18nOptions, i18nextOptions) => (key) => {
-    if (i18nOptions && i18nOptions.keyPrefix && !key.includes(i18nextOptions.nsSeparator)) {
+    if (
+      i18nOptions &&
+      i18nOptions.keyPrefix &&
+      !key.includes(i18nextOptions.nsSeparator)
+    ) {
       return `${i18nOptions.keyPrefix}.${key}`;
     }
     return key;
@@ -36,13 +41,17 @@ export function install(_Vue) {
   Vue.mixin({
     computed: {
       $t() {
-        const getKey = getByKey(this._i18nOptions, this.$i18n ? this.$i18n.i18next.options : {});
+        const getKey = getByKey(
+          this._i18nOptions,
+          this.$i18n ? this.$i18n.i18next.options : {},
+        );
 
         if (this._i18nOptions && this._i18nOptions.namespaces) {
           const { lng, namespaces } = this._i18nOptions;
 
           const fixedT = this.$i18n.i18next.getFixedT(lng, namespaces);
-          return (key, options) => fixedT(getKey(key), options, this.$i18n.i18nLoadedAt);
+          return (key, options) =>
+            fixedT(getKey(key), options, this.$i18n.i18nLoadedAt);
         }
 
         return (key, options) =>
@@ -60,17 +69,25 @@ export function install(_Vue) {
       let inlineTranslations = {};
 
       if (this.$i18n) {
-        const getNamespace = this.$i18n.options.getComponentNamespace || getComponentNamespace;
+        const getNamespace =
+          this.$i18n.options.getComponentNamespace || getComponentNamespace;
         const { namespace, loadNamespace } = getNamespace(this);
 
         if (options.__i18n) {
           options.__i18n.forEach((resource) => {
-            inlineTranslations = deepmerge(inlineTranslations, JSON.parse(resource));
+            inlineTranslations = deepmerge(
+              inlineTranslations,
+              JSON.parse(resource),
+            );
           });
         }
 
         if (options.i18nOptions) {
-          const { lng = null, keyPrefix = null, messages } = this.$options.i18nOptions;
+          const {
+            lng = null,
+            keyPrefix = null,
+            messages,
+          } = this.$options.i18nOptions;
           let { namespaces } = this.$options.i18nOptions;
           namespaces = namespaces || this.$i18n.i18next.options.defaultNS;
 
@@ -85,7 +102,10 @@ export function install(_Vue) {
           this.$i18n.i18next.loadNamespaces(namespaces);
         } else if (options.parent && options.parent._i18nOptions) {
           this._i18nOptions = { ...options.parent._i18nOptions };
-          this._i18nOptions.namespaces = [namespace, ...this._i18nOptions.namespaces];
+          this._i18nOptions.namespaces = [
+            namespace,
+            ...this._i18nOptions.namespaces,
+          ];
         } else if (options.__i18n) {
           this._i18nOptions = { namespaces: [namespace] };
         }
@@ -109,4 +129,5 @@ export function install(_Vue) {
   });
 
   Vue.component(component.name, component);
+  Vue.directive('t', { bind, update });
 }