Skip to content

Commit

Permalink
⭐ new(config): custom message formatter
Browse files Browse the repository at this point in the history
Allow for register a custom message formatter function with `Vue.config.i18nFormatter` for more flexibility in formatting messages.
  • Loading branch information
John V McCarthy committed Sep 23, 2016
1 parent 9586f71 commit 39e8fcd
Show file tree
Hide file tree
Showing 7 changed files with 93 additions and 5 deletions.
17 changes: 17 additions & 0 deletions gitbook/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
11 changes: 11 additions & 0 deletions gitbook/formatting.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
```
9 changes: 9 additions & 0 deletions src/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 }
})
}
5 changes: 4 additions & 1 deletion src/extend.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
8 changes: 4 additions & 4 deletions test/specs/fixture/locales.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
]
]
},
Expand All @@ -58,10 +58,10 @@ export default {
errors: [
'これはエラーコード0のエラーメッセージです。',
{
internal1: 'これは内部エラーコード1のエラーメッセージです。'
internal1: 'これは内部エラーコード1のエラーメッセージです。'
},
[
'これはネストされた配列のエラー1です。'
'これはネストされた配列のエラー1です。'
]
]
}
Expand Down
47 changes: 47 additions & 0 deletions test/specs/format_custom.js
Original file line number Diff line number Diff line change
@@ -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])
})
})
})
1 change: 1 addition & 0 deletions test/specs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@ require('./i18n')
require('./asset')
require('./component')
require('./missing')
require('./format_custom')
require('./issues')

0 comments on commit 39e8fcd

Please sign in to comment.