From e872fde715b98bcef7ecdb4c3e1e5de4e60b6ec3 Mon Sep 17 00:00:00 2001 From: Sebastian Wasser Date: Fri, 9 Mar 2018 13:06:38 +0000 Subject: [PATCH 1/4] Correct small typo --- gitbook/en/directive.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gitbook/en/directive.md b/gitbook/en/directive.md index 8785b4aaf..0404e96cf 100644 --- a/gitbook/en/directive.md +++ b/gitbook/en/directive.md @@ -100,7 +100,7 @@ You can **flexibly** use mustash syntax `{{}}` in templates and also computed pr `v-t` is a custom directive. It has the following pros and cons: #### Pros -`v-t` has **better performance** than the `$t` method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by [`vue-i18n-extentions`](https://github.com/kazupon/vue-i18n-extensions). Therefore it's possible to make **more performance optimizations**. +`v-t` has **better performance** than the `$t` method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by [`vue-i18n-extensions`](https://github.com/kazupon/vue-i18n-extensions). Therefore it's possible to make **more performance optimizations**. #### Cons `v-t` can not be flexibly used like `$t`, it's rather **complex**. The translated content with `v-t` is inserted into the `textContent` of the element. Also, when you use server-side rendering, you need to set the [custom directive](https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side) to `directives` option of the `createRenderer` function. From fd872a8020e76f59b13cfe8dd296041f97c51490 Mon Sep 17 00:00:00 2001 From: Sebastian Wasser Date: Fri, 9 Mar 2018 14:18:48 +0000 Subject: [PATCH 2/4] Submit formatting values to missing handler --- src/index.js | 10 +++++----- test/unit/missing.test.js | 24 ++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 49b0f9ee7..595c0f8ac 100644 --- a/src/index.js +++ b/src/index.js @@ -169,10 +169,10 @@ export default class VueI18n { _getDateTimeFormats (): DateTimeFormats { return this._vm.dateTimeFormats } _getNumberFormats (): NumberFormats { return this._vm.numberFormats } - _warnDefault (locale: Locale, key: Path, result: ?any, vm: ?any): ?string { + _warnDefault (locale: Locale, key: Path, result: ?any, vm: ?any, values: any): ?string { if (!isNull(result)) { return result } if (this._missing) { - this._missing.apply(null, [locale, key, vm]) + this._missing.apply(null, [locale, key, vm, values]) } else { if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) { warn( @@ -277,7 +277,7 @@ export default class VueI18n { linkPlaceholder, host, interpolateMode, values ) } - translated = this._warnDefault(locale, linkPlaceholder, translated, host) + translated = this._warnDefault(locale, linkPlaceholder, translated, host, ...values) // Replace the link with the translated ret = !translated ? ret : ret.replace(link, translated) @@ -335,7 +335,7 @@ export default class VueI18n { if (!this._root) { throw Error('unexpected error') } return this._root.t(key, ...values) } else { - return this._warnDefault(locale, key, ret, host) + return this._warnDefault(locale, key, ret, host, ...values) } } @@ -353,7 +353,7 @@ export default class VueI18n { if (!this._root) { throw Error('unexpected error') } return this._root.i(key, locale, values) } else { - return this._warnDefault(locale, key, ret, host) + return this._warnDefault(locale, key, ret, host, ...values) } } diff --git a/test/unit/missing.test.js b/test/unit/missing.test.js index e3dcd2a7f..47df69a05 100644 --- a/test/unit/missing.test.js +++ b/test/unit/missing.test.js @@ -50,4 +50,28 @@ describe('missing', () => { i18n.t('foo.bar.buz') }) }) + + describe('i18n missing values', () => { + it('should receive the values for interpolation', done => { + const testValues = { + foo: 'bar', + num: 1234 + } + + const missing = (locale, key, vm, values) => { + assert.equal('en', locale) + assert.equal('cannot.find', key) + assert.equal('bar', values.foo) + assert.equal(1234, values.num) + done() + } + + const i18n = new VueI18n({ + locale: 'en', + missing + }) + + i18n.t('cannot.find', testValues) + }) + }) }) From 9a5dff57ae768845d1b8afa4a298fad05363baa3 Mon Sep 17 00:00:00 2001 From: Sebastian Wasser Date: Sat, 10 Mar 2018 15:52:22 +0000 Subject: [PATCH 3/4] Remove unnecessary & harmful spread operators --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 595c0f8ac..869266087 100644 --- a/src/index.js +++ b/src/index.js @@ -277,7 +277,7 @@ export default class VueI18n { linkPlaceholder, host, interpolateMode, values ) } - translated = this._warnDefault(locale, linkPlaceholder, translated, host, ...values) + translated = this._warnDefault(locale, linkPlaceholder, translated, host, values) // Replace the link with the translated ret = !translated ? ret : ret.replace(link, translated) @@ -335,7 +335,7 @@ export default class VueI18n { if (!this._root) { throw Error('unexpected error') } return this._root.t(key, ...values) } else { - return this._warnDefault(locale, key, ret, host, ...values) + return this._warnDefault(locale, key, ret, host, values) } } @@ -353,7 +353,7 @@ export default class VueI18n { if (!this._root) { throw Error('unexpected error') } return this._root.i(key, locale, values) } else { - return this._warnDefault(locale, key, ret, host, ...values) + return this._warnDefault(locale, key, ret, host, values) } } From 12743c405cc0dfd90fa02d3202da89a050e127f2 Mon Sep 17 00:00:00 2001 From: Sebastian Wasser Date: Sat, 10 Mar 2018 16:14:29 +0000 Subject: [PATCH 4/4] Normalize values to be array, adapt test --- src/index.js | 7 +++++-- test/unit/missing.test.js | 5 +++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 869266087..3afe15309 100644 --- a/src/index.js +++ b/src/index.js @@ -277,7 +277,10 @@ export default class VueI18n { linkPlaceholder, host, interpolateMode, values ) } - translated = this._warnDefault(locale, linkPlaceholder, translated, host, values) + translated = this._warnDefault( + locale, linkPlaceholder, translated, host, + Array.isArray(values) ? values : [values] + ) // Replace the link with the translated ret = !translated ? ret : ret.replace(link, translated) @@ -353,7 +356,7 @@ export default class VueI18n { if (!this._root) { throw Error('unexpected error') } return this._root.i(key, locale, values) } else { - return this._warnDefault(locale, key, ret, host, values) + return this._warnDefault(locale, key, ret, host, [values]) } } diff --git a/test/unit/missing.test.js b/test/unit/missing.test.js index 47df69a05..f7c98e648 100644 --- a/test/unit/missing.test.js +++ b/test/unit/missing.test.js @@ -61,8 +61,9 @@ describe('missing', () => { const missing = (locale, key, vm, values) => { assert.equal('en', locale) assert.equal('cannot.find', key) - assert.equal('bar', values.foo) - assert.equal(1234, values.num) + // `values` is normalized to be an array. + assert.equal('bar', values[0].foo) + assert.equal(1234, values[0].num) done() }