⭐ new(config): custom message formatter (#57) by @jvmccarthy

Allow for register a custom message formatter function with `Vue.config.i18nFormatter` for more flexibility in formatting messages.

Author: jvmccarthy

gitbook/api.md

@@ -46,6 +46,23 @@
   }
   ```
 
+### i18nFormatter
+
+- **Type:** `Function`
+
+- **Default:** `null`
+
+- **Usage:**
+
+  Assign a customer message formatter.
+
+  ```javascript
+  Vue.config.i18nFormatter = function(string, ...arguments) {
+    //...
+    //return formattedString;
+  }
+  ```
+
 
 ## Global Methods
 

gitbook/formatting.md

@@ -104,3 +104,14 @@ Output the following:
 ```html
 <p>hello world</p>
 ```
+
+## Registering a custom formatter
+
+If the provided formatter doesn't meet your needs, you can also register a custom formatter,
+
+```javascript
+Vue.config.i18nFormatter = function(string, ...arguments) {
+  //...
+  //return formattedString;
+}
+```

src/config.js

@@ -2,6 +2,7 @@ import { getWatcher, getDep } from './observer'
 
 let fallback // fallback lang
 let missingHandler = null // missing handler
+let i18nFormatter = null
 
 export default function (Vue, langVM, lang) {
   const { bind } = Vue.util
@@ -44,4 +45,12 @@ export default function (Vue, langVM, lang) {
     get: () => { return missingHandler },
     set: val => { missingHandler = val }
   })
+
+  // define Vue.config.i18Formatter configration
+  Object.defineProperty(Vue.config, 'i18nFormatter', {
+    enumerable: true,
+    configurable: true,
+    get: () => { return i18nFormatter },
+    set: val => { i18nFormatter = val }
+  })
 }

src/extend.js

@@ -60,7 +60,10 @@ export default function (Vue) {
       }
     }
 
-    return args ? format(val, args) : val
+    if (!args) {
+      return val
+    }    
+    return Vue.config.i18nFormatter ? Vue.config.i18nFormatter.apply(null, [val].concat(args)) : format(val, args)
   }
 
   function translate (getter, lang, fallback, key, params) {

test/specs/fixture/locales.js

@@ -29,10 +29,10 @@ export default {
     errors: [
       'this is 0 error code message',
       {
-         internal1: 'this is internal 1 error message'
+        internal1: 'this is internal 1 error message'
       },
       [
-         'this is nested array error 1'
+        'this is nested array error 1'
       ]
     ]
   },
@@ -58,10 +58,10 @@ export default {
     errors: [
       'これはエラーコード0のエラーメッセージです。',
       {
-         internal1: 'これは内部エラーコード1のエラーメッセージです。'
+        internal1: 'これは内部エラーコード1のエラーメッセージです。'
       },
       [
-         'これはネストされた配列のエラー1です。'
+        'これはネストされた配列のエラー1です。'
       ]
     ]
   }

test/specs/format_custom.js

@@ -0,0 +1,47 @@
+import assert from 'power-assert'
+import Vue from 'vue'
+import locales from './fixture/locales'
+
+describe('custom formatter', () => {
+  before(done => {
+    Object.keys(locales).forEach(lang => {
+      Vue.locale(lang, locales[lang])
+    })
+    Vue.config.lang = 'en'
+    Vue.nextTick(done)
+  })
+
+  after(done => {
+    Vue.config.i18nFormatter = null
+    Vue.nextTick(done)
+  })
+
+  describe('global', () => {
+    it('allows for specifying a custom formatter', done => {
+      Vue.config.i18nFormatter = (string, ...args) => {
+        assert.equal('the world', string)
+        assert.equal(1, args[0])
+        assert.equal('two', args[1])
+        assert.deepEqual({ name: 'joe' }, args[2])
+        done()
+      }
+
+      Vue.t('message.hello', 1, 'two', { name: 'joe' })
+    })
+  })
+
+  describe('instance', () => {
+    it('allows for specifying a custom formatter', done => {
+      const vm = new Vue()
+      Vue.config.i18nFormatter = (string, ...args) => {
+        assert.equal('the world', string)
+        assert.equal(1, args[0])
+        assert.equal(2, args[1])
+        assert.equal(3, args[2])
+        done()
+      }
+
+      vm.$t('message.hello', [1, 2, 3])
+    })
+  })
+})

test/specs/index.js

@@ -11,4 +11,5 @@ require('./i18n')
 require('./asset')
 require('./component')
 require('./missing')
+require('./format_custom')
 require('./issues')