vue-i18n - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

component.json

 {
   "name": "vue-i18n",
   "repo": "kazupon/vue-i18n",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Internationalization plugin of Vue.js",
@@ -13,6 +13,6 @@ "license": "MIT",
   ],
-  "dependencies": {
+  "dependencies": {},
+  "development": {
     "yyx990803/vue": "~0.10.4"
   },
-  "development": {},
   "scripts": [
@@ -19,0 +19,0 @@ "index.js"

example/index.js

@@ -1,6 +0,6 @@
-var Vue = require('vue');
-var i18n = require('vue-i18n');
+var Vue = require('vue')
+var i18n = require('vue-i18n')
 
-// ready translated resources
-var resources = {
+// ready translated locales
+var locales = {
   en: {
@@ -16,3 +16,3 @@ message: {
   }
-};
+}
 
@@ -22,4 +22,4 @@ // set plugin
   lang: 'ja',
-  resources: resources 
-});
+  locales: locales
+})
 
@@ -29,2 +29,2 @@ // create instance
   el: '#test-i18n'
-});
+})

HISTORY.md

@@ -0,1 +1,5 @@
+# v0.1.1 / 2014-10-06
+
+* Add `Vue.t` function
+
 # v0.1.0 / 2014-05-06
@@ -2,0 +6,0 @@

index.js

@@ -5,5 +5,3 @@ /**
 
-var Vue = require('vue');
 
-
 /**
@@ -13,32 +11,33 @@ * exports(s)
 
-exports.install = function (Vue, opts) {
-  opts = opts || {};
-  var lang = opts.lang || 'en';
-  var resources = opts.resources || {};
+module.exports = function (Vue, opts) {
+  opts = opts || {}
+  var lang = opts.lang || 'en'
+  var locales = opts.locales || opts.resources || {}
 
+  Vue.t = function (key) {
+    var ret = key
+    var locale = locales[lang]
+    if (key && locale) {
+      var namespaces = key.split('.')
+      for (var i = 0; i < namespaces.length; i++) {
+        locale = locale[namespaces[i]]
+        if (!locale) {
+          ret = key;
+          break
+        } else {
+          ret = locale
+        }
+      }
+    }
+    return ret
+  }
+
   Vue.directive('t', {
     isLiteral: true,
     bind: function () {
-      if (this.el.nodeType !== 1) { return; }
+      if (this.el.nodeType !== 1) { return }
 
-      if (this.key === '') {
-        this.el.textContent = '';
-        return;
-      }
-
-      var res = resources[lang];
-      if (!res) {
-        this.el.textContent = this.key;
-        return;
-      }
-
-      var namespaces = this.key.split('.');
-      for (var i = 0; i < namespaces.length; i++) {
-        res = res[namespaces[i]];
-        if (res === undefined) { break; }
-      }
-
-      this.el.textContent = (res === undefined ? this.key : res);
+      this.el.textContent = Vue.t(this.key)
     }
-  });
-};
+  })
+}

package.json

 {
   "name": "vue-i18n",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Internationalization plugin of Vue.js",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # vue-i18n
 
-[![Build Status](https://travis-ci.org/kazupon/vue-i18n.svg?branch=master)](https://travis-ci.org/kazupon/vue-i18n) [![Coverage Status](https://coveralls.io/repos/kazupon/vue-i18n/badge.png)](https://coveralls.io/r/kazupon/vue-i18n) [![NPM version](https://badge.fury.io/js/vue-i18n.svg)](http://badge.fury.io/js/vue-i18n) [![Dependency Status](https://david-dm.org/kazupon/vue-i18n.svg)](https://david-dm.org/kazupon/vue-i18n) 
+[![Build Status](https://travis-ci.org/kazupon/vue-i18n.svg?branch=master)](https://travis-ci.org/kazupon/vue-i18n)
+[![Coverage Status](https://img.shields.io/coveralls/kazupon/vue-i18n.svg)](https://coveralls.io/r/kazupon/vue-i18n?branch=master)
+[![NPM version](https://badge.fury.io/js/vue-i18n.svg)](http://badge.fury.io/js/vue-i18n)
+[![Dependency Status](https://david-dm.org/kazupon/vue-i18n.svg)](https://david-dm.org/kazupon/vue-i18n) 
 
@@ -17,8 +20,10 @@ Internationalization plugin of Vue.js
 
+## v-t directive
+
 ```js
-var Vue = require('vue');
-var i18n = require('vue-i18n');
+var Vue = require('vue')
+var i18n = require('vue-i18n')
 
-// ready translated resources
-var resources = {
+// ready translated locales
+var locales = {
   en: {
@@ -34,3 +39,3 @@ message: {
   }
-};
+}
 
@@ -40,4 +45,4 @@ // set plugin
   lang: 'ja',
-  resources: resources 
-});
+  locales: locales // NOTE: 'resources' is deprecated
+})
 
@@ -47,3 +52,3 @@ // create instance
   el: '#test-i18n'
-});
+})
 ```
@@ -67,3 +72,32 @@
 
+## Vue.t function
 
+```js
+var Vue = require('vue')
+var i18n = require('vue-i18n')
+
+// ready translated locales
+var locales = {
+  en: {
+    message: {
+      hello: 'the world'
+    }
+  },
+  ja: {
+    message: {
+      hello: 'ザ・ワールド'
+    }
+  }
+}
+
+// set plugin
+Vue.use(i18n, {
+  lang: 'en',
+  locales: locales
+})
+
+console.log(Vue.t('message.hello')) // output the 'the wolrd'
+```
+
+
 # Testing
@@ -70,0 +104,0 @@

test/prepare.js

 function mock (id, html, attrs) {
-  var el = document.createElement('div');
-  el.id = id;
-  el.innerHTML = html;
+  var el = document.createElement('div')
+  el.id = id
+  el.innerHTML = html
   if (attrs) {
     for (var attr in attrs) {
-      el.setAttribute(attr, attrs[attr]);
+      el.setAttribute(attr, attrs[attr])
     }
   }
-  document.getElementById('test').appendChild(el);
-  return el;
+  document.getElementById('test').appendChild(el)
+  return el
 }
 
 function mockHTMLEvent (type) {
-  var e = document.createEvent('HTMLEvents');
-  e.initEvent(type, true, true);
-  return e;
+  var e = document.createEvent('HTMLEvents')
+  e.initEvent(type, true, true)
+  return e
 }
 
 function mockKeyEvent (type) {
-  var e = document.createEvent('KeyboardEvent');
+  var e = document.createEvent('KeyboardEvent')
   var initMethod = e.initKeyboardEvent
     ? 'initKeyboardEvent'
-    : 'initKeyEvent';
-  e[initMethod](type, true, true, null, false, false, false, false, 9, 0);
-  return e;
+    : 'initKeyEvent'
+  e[initMethod](type, true, true, null, false, false, false, false, 9, 0)
+  return e
 }
 
 function mockMouseEvent (type) {
-  var e = document.createEvent('MouseEvent');
-  e.initMouseEvent(type, true, true, null, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
-  return e;
+  var e = document.createEvent('MouseEvent')
+  e.initMouseEvent(type, true, true, null, 1, 0, 0, 0, 0, false, false, false, false, 0, null)
+  return e
 }
 
 
-var testDiv = document.createElement('div');
-testDiv.id = 'test';
-testDiv.style.display = 'none';
-document.body.appendChild(testDiv);
+var testDiv = document.createElement('div')
+testDiv.id = 'test'
+testDiv.style.display = 'none'
+document.body.appendChild(testDiv)

test/specs/index.js

@@ -5,8 +5,8 @@ /**
 
-var i18n = require('vue-i18n');
-var Vue = require('vue');
+var i18n = require('vue-i18n')
+var Vue = require('vue')
 
 
 describe('i18n', function () {
-  var resources = {
+  var locales = {
     en: {
@@ -24,170 +24,190 @@ message: {
     }
-  };
+  }
 
-  describe('basic', function () {
+
+  describe('Vue.t', function () {
     describe('en', function () {
       it('should translate an english', function () {
-        mock('translate-en', '<p v-t="message.hello"></p>');
-
         Vue.use(i18n, {
           lang: 'en',
-          resources: resources
-        });
+          locales: locales
+        })
 
-        new Vue({
-          el: '#translate-en'
-        });
+        expect(Vue.t('message.hello')).to.be.eql(locales.en.message.hello)
+      })
+    })
 
-        var el = document.querySelector('#translate-en');
-        expect(el.textContent).to.be.eql(resources.en.message.hello);
-      });
-    });
-
     describe('ja', function () {
       it('should translate a japanese', function () {
-        mock('translate-ja', '<p v-t="message.hello"></p>');
-
         Vue.use(i18n, {
           lang: 'ja',
-          resources: resources
-        });
+          resources: locales
+        })
 
-        new Vue({
-          el: '#translate-ja'
-        });
+        expect(Vue.t('message.hello')).to.be.eql(locales.ja.message.hello)
+      })
+    })
+  })
 
-        var el = document.querySelector('#translate-ja');
-        expect(el.textContent).to.be.eql(resources.ja.message.hello);
-      });
-    });
-  });
 
-  describe('lang resource not found', function () {
-    it('should not translate', function () {
-      mock('translate-it', '<p v-t="message.hello"></p>');
+  describe('v-t', function () {
+    describe('basic', function () {
+      describe('en', function () {
+        it('should translate an english', function () {
+          mock('translate-en', '<p v-t="message.hello"></p>')
 
-      Vue.use(i18n, {
-        lang: 'it',
-        resources: resources
-      });
+          Vue.use(i18n, {
+            lang: 'en',
+            locales: locales
+          })
 
-      new Vue({
-        el: '#translate-it'
-      });
+          new Vue({ el: '#translate-en' })
 
-      var el = document.querySelector('#translate-it');
-      expect(el.textContent).to.be.eql('message.hello');
-    });
-  });
+          var el = document.querySelector('#translate-en')
+          expect(el.textContent).to.be.eql(locales.en.message.hello)
+        })
+      })
 
-  describe('resource key not found', function () {
-    it('should not translate', function () {
-      mock('translate-en-key-nothing', '<p v-t="message.foo"></p>');
+      describe('ja', function () {
+        it('should translate a japanese', function () {
+          mock('translate-ja', '<p v-t="message.hello"></p>')
 
-      Vue.use(i18n, {
-        lang: 'en',
-        resources: resources
-      });
+          Vue.use(i18n, {
+            lang: 'ja',
+            resources: locales
+          })
 
-      new Vue({
-        el: '#translate-en-key-nothing'
-      });
+          new Vue({ el: '#translate-ja' })
 
-      var el = document.querySelector('#translate-en-key-nothing');
-      expect(el.textContent).to.be.eql('message.foo');
-    });
-  });
+          var el = document.querySelector('#translate-ja')
+          expect(el.textContent).to.be.eql(locales.ja.message.hello)
+        })
+      })
+    })
 
-  describe('resource key empty', function () {
-    it('should not translate', function () {
-      mock('translate-key-empty', '<p v-t=""></p>');
+    describe('lang resource not found', function () {
+      it('should not translate', function () {
+        mock('translate-it', '<p v-t="message.hello"></p>');
 
-      Vue.use(i18n, {
-        lang: 'en',
-        resources: resources
-      });
+        Vue.use(i18n, {
+          lang: 'it',
+          locales: locales
+        })
 
-      new Vue({
-        el: '#translate-key-empty'
-      });
+        new Vue({ el: '#translate-it' })
 
-      var el = document.querySelector('#translate-key-empty');
-      expect(el.textContent).to.be.eql('');
-    });
-  });
+        var el = document.querySelector('#translate-it')
+        expect(el.textContent).to.be.eql('message.hello')
+      })
+    })
 
-  /*
-  describe('specify default value', function () {
-    it('should translate with default value', function () {
-      mock(
-        'translate-default-value',
-        '<p v-t="message.hello: {{hello}}"></p>'
-      );
+    describe('resource key not found', function () {
+      it('should not translate', function () {
+        mock('translate-en-key-nothing', '<p v-t="message.foo"></p>')
 
-      Vue.use(i18n, {
-        lang: 'en',
-        resources: resources
-      });
+        Vue.use(i18n, {
+          lang: 'en',
+          locales: locales
+        })
 
-      new Vue({
-        el: '#translate-default-value',
-        data: {
-          hello: 'スタープラチナ ザ・ワールド'
-        }
-      });
+        new Vue({ el: '#translate-en-key-nothing' })
 
-      var el = document.querySelector('#translate-default-value');
-      expect(el.textContent).to.be.eql('スタープラチナ ザ・ワールド');
-    });
-  });
-  */
+        var el = document.querySelector('#translate-en-key-nothing')
+        expect(el.textContent).to.be.eql('message.foo')
+      })
+    })
 
-  describe('translate component module', function () {
-      mock(
-        'translate-parent',
-        '<div><p v-t="message.hello"></p><div v-component="hoge"></div></div>'
-      );
+    describe('resource key empty', function () {
+      it('should not translate', function () {
+        mock('translate-key-empty', '<p v-t=""></p>')
 
-      Vue.use(i18n, {
-        lang: 'en',
-        resources: resources
-      });
+        Vue.use(i18n, {
+          lang: 'en',
+          locales: locales
+        })
 
-      new Vue({
-        el: '#translate-parent',
-        components: {
-          hoge: Vue.extend({
-            template: '<p id="translate-child" v-t="message.hoge"></p>'
-          })
-        }
-      });
+        new Vue({ el: '#translate-key-empty' })
 
-      var child_el = document.querySelector('#translate-child');
-      expect(child_el.textContent).to.be.eql(resources.en.message.hoge);
+        var el = document.querySelector('#translate-key-empty')
+        expect(el.textContent).to.be.eql('')
+      })
+    })
 
-      var parent_el = document.querySelector('#translate-parent p');
-      expect(parent_el.textContent).to.be.eql(resources.en.message.hello);
-  });
+    /*
+    describe('specify default value', function () {
+      it('should translate with default value', function () {
+        mock(
+          'translate-default-value',
+          '<p v-t="message.hello: {{hello}}"></p>'
+        );
 
-  // NOTE: Don't use `v-text` directive !!
-  describe('v-text', function () {
-    it('should not translate', function () {
-      mock('translate-use-text', '<p v-t="message.hello" v-text="hello"></p>');
+        Vue.use(i18n, {
+          lang: 'en',
+          locales: locales
+        });
 
-      Vue.use(i18n, {
-        lang: 'en',
-        resources: resources
-      });
+        new Vue({
+          el: '#translate-default-value',
+          data: {
+            hello: 'スタープラチナ ザ・ワールド'
+          }
+        });
 
-      new Vue({
-        el: '#translate-use-text',
-        data: {
-          hello: 'world'
-        }
+        var el = document.querySelector('#translate-default-value');
+        expect(el.textContent).to.be.eql('スタープラチナ ザ・ワールド');
       });
+    });
+    */
 
-      var el = document.querySelector('#translate-use-text');
-      expect(el.textContent).to.be.eql('world');
-    });
-  });
-});
+    describe('translate component module', function () {
+      it('should translate', function () {
+        mock(
+          'translate-parent',
+          '<div><p v-t="message.hello"></p><div v-component="hoge"></div></div>'
+        )
+
+        Vue.use(i18n, {
+          lang: 'en',
+          locales: locales
+        })
+
+        new Vue({
+          el: '#translate-parent',
+          components: {
+            hoge: Vue.extend({
+              template: '<p id="translate-child" v-t="message.hoge"></p>'
+            })
+          }
+        })
+
+        var child_el = document.querySelector('#translate-child')
+        expect(child_el.textContent).to.be.eql(locales.en.message.hoge)
+
+        var parent_el = document.querySelector('#translate-parent p')
+        expect(parent_el.textContent).to.be.eql(locales.en.message.hello)
+      })
+    })
+
+    // NOTE: Don't use `v-text` directive !!
+    describe('v-text', function () {
+      it('should not translate', function () {
+        mock('translate-use-text', '<p v-t="message.hello" v-text="hello"></p>')
+
+        Vue.use(i18n, {
+          lang: 'en',
+          locales: locales
+        })
+
+        new Vue({
+          el: '#translate-use-text',
+          data: {
+            hello: 'world'
+          }
+        })
+
+        var el = document.querySelector('#translate-use-text')
+        expect(el.textContent).to.be.eql('world')
+      })
+    })
+  })
+})

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

142244

increased by0.81%

Lines of code

5324

increased by0.3%

Number of lines in readme file

113

increased by43.04%

No dependency changes