+ ): void {
+ if (_composer.value) {
+ _composer.value.mergeLocaleMessage(locale, message)
+ }
+ }
+
+ function getDateTimeFormat(locale: Locale): DateTimeFormat {
+ return _composer.value ? _composer.value.getDateTimeFormat(locale) : {}
+ }
+
+ function setDateTimeFormat(locale: Locale, format: DateTimeFormat): void {
+ if (_composer.value) {
+ _composer.value.setDateTimeFormat(locale, format)
+ _datetimeFormats.value[locale] = format
+ }
+ }
+
+ function mergeDateTimeFormat(locale: Locale, format: DateTimeFormat): void {
+ if (_composer.value) {
+ _composer.value.mergeDateTimeFormat(locale, format)
+ }
+ }
+
+ function getNumberFormat(locale: Locale): NumberFormat {
+ return _composer.value ? _composer.value.getNumberFormat(locale) : {}
+ }
+
+ function setNumberFormat(locale: Locale, format: NumberFormat): void {
+ if (_composer.value) {
+ _composer.value.setNumberFormat(locale, format)
+ _numberFormats.value[locale] = format
+ }
+ }
+
+ function mergeNumberFormat(locale: Locale, format: NumberFormat): void {
+ if (_composer.value) {
+ _composer.value.mergeNumberFormat(locale, format)
+ }
+ }
+
+ const wrapper = {
+ get id(): number {
+ return _composer.value ? _composer.value.id : -1
+ },
+ locale,
+ fallbackLocale,
+ messages,
+ datetimeFormats,
+ numberFormats,
+ get inheritLocale(): boolean {
+ return _composer.value ? _composer.value.inheritLocale : _inheritLocale
+ },
+ set inheritLocale(val: boolean) {
+ if (_composer.value) {
+ _composer.value.inheritLocale = val
+ }
+ },
+ get availableLocales(): Locale[] {
+ return _composer.value
+ ? _composer.value.availableLocales
+ : Object.keys(_messages.value)
+ },
+ get modifiers(): LinkedModifiers {
+ return (
+ _composer.value ? _composer.value.modifiers : _modifiers
+ ) as LinkedModifiers
+ },
+ get pluralRules(): PluralizationRules {
+ return (
+ _composer.value ? _composer.value.pluralRules : _pluralRules
+ ) as PluralizationRules
+ },
+ get isGlobal(): boolean {
+ return _composer.value ? _composer.value.isGlobal : false
+ },
+ get missingWarn(): boolean | RegExp {
+ return _composer.value ? _composer.value.missingWarn : _missingWarn
+ },
+ set missingWarn(val: boolean | RegExp) {
+ if (_composer.value) {
+ _composer.value.missingWarn = val
+ }
+ },
+ get fallbackWarn(): boolean | RegExp {
+ return _composer.value ? _composer.value.fallbackWarn : _fallbackWarn
+ },
+ set fallbackWarn(val: boolean | RegExp) {
+ if (_composer.value) {
+ _composer.value.missingWarn = val
+ }
+ },
+ get fallbackRoot(): boolean {
+ return _composer.value ? _composer.value.fallbackRoot : _fallbackRoot
+ },
+ set fallbackRoot(val: boolean) {
+ if (_composer.value) {
+ _composer.value.fallbackRoot = val
+ }
+ },
+ get fallbackFormat(): boolean {
+ return _composer.value ? _composer.value.fallbackFormat : _fallbackFormat
+ },
+ set fallbackFormat(val: boolean) {
+ if (_composer.value) {
+ _composer.value.fallbackFormat = val
+ }
+ },
+ get warnHtmlMessage(): boolean {
+ return _composer.value
+ ? _composer.value.warnHtmlMessage
+ : _warnHtmlMessage
+ },
+ set warnHtmlMessage(val: boolean) {
+ if (_composer.value) {
+ _composer.value.warnHtmlMessage = val
+ }
+ },
+ get escapeParameter(): boolean {
+ return _composer.value
+ ? _composer.value.escapeParameter
+ : _escapeParameter
+ },
+ set escapeParameter(val: boolean) {
+ if (_composer.value) {
+ _composer.value.escapeParameter = val
+ }
+ },
+ t,
+ getPostTranslationHandler,
+ setPostTranslationHandler,
+ getMissingHandler,
+ setMissingHandler,
+ rt,
+ d,
+ n,
+ tm,
+ te,
+ getLocaleMessage,
+ setLocaleMessage,
+ mergeLocaleMessage,
+ getDateTimeFormat,
+ setDateTimeFormat,
+ mergeDateTimeFormat,
+ getNumberFormat,
+ setNumberFormat,
+ mergeNumberFormat
+ }
+
+ function sync(composer: Composer): void {
+ composer.locale.value = _locale.value
+ composer.fallbackLocale.value = _fallbackLocale.value
+ Object.keys(_messages.value).forEach(locale => {
+ composer.mergeLocaleMessage(locale, _messages.value[locale])
+ })
+ Object.keys(_datetimeFormats.value).forEach(locale => {
+ composer.mergeDateTimeFormat(locale, _datetimeFormats.value[locale])
+ })
+ Object.keys(_numberFormats.value).forEach(locale => {
+ composer.mergeNumberFormat(locale, _numberFormats.value[locale])
+ })
+ composer.escapeParameter = _escapeParameter
+ composer.fallbackFormat = _fallbackFormat
+ composer.fallbackRoot = _fallbackRoot
+ composer.fallbackWarn = _fallbackWarn
+ composer.missingWarn = _missingWarn
+ composer.warnHtmlMessage = _warnHtmlMessage
+ }
+
+ onBeforeMount(() => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const composer = (_composer.value = (instance.proxy?.$i18n as any)
+ .__composer as Composer)
+ if (scope === 'global') {
+ _locale.value = composer.locale.value
+ _fallbackLocale.value = composer.fallbackLocale.value
+ _messages.value = composer.messages.value
+ _datetimeFormats.value = composer.datetimeFormats.value
+ _numberFormats.value = composer.numberFormats.value
+ } else if (isLocale) {
+ sync(composer)
+ }
+ })
+
+ return wrapper as unknown as Composer
+}
+
/**
* Exported global composer instance
*
diff --git a/packages/vue-i18n-core/test/i18n.test.ts b/packages/vue-i18n-core/test/i18n.test.ts
index 207ce93b6..36c71567c 100644
--- a/packages/vue-i18n-core/test/i18n.test.ts
+++ b/packages/vue-i18n-core/test/i18n.test.ts
@@ -93,6 +93,41 @@ describe('createI18n with flat json messages', () => {
})
})
+describe('allowComposition option', () => {
+ describe('legacy mode', () => {
+ test('default', () => {
+ const i18n = createI18n({})
+ expect(i18n.allowComposition).toEqual(false)
+ })
+
+ test('specify `true`', () => {
+ const i18n = createI18n({
+ allowComposition: true
+ })
+
+ expect(i18n.allowComposition).toEqual(true)
+ })
+ })
+
+ describe('composition mode', () => {
+ test('default', () => {
+ const i18n = createI18n({
+ legacy: false
+ })
+ expect(i18n.allowComposition).toEqual(true)
+ })
+
+ test('specify `false`', () => {
+ const i18n = createI18n({
+ legacy: false,
+ allowComposition: false
+ })
+
+ expect(i18n.allowComposition).toEqual(true)
+ })
+ })
+})
+
describe('useI18n', () => {
let org: any // eslint-disable-line @typescript-eslint/no-explicit-any
let spy: any // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -343,22 +378,155 @@ describe('useI18n', () => {
expect(error).toEqual(errorMessages[I18nErrorCodes.NOT_INSLALLED])
})
- test(errorMessages[I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE], async () => {
- const i18n = createI18n({
- legacy: true,
- locale: 'ja',
- messages: {
- en: {
- hello: 'hello!'
+ describe('On legacy', () => {
+ describe('default', () => {
+ test(
+ errorMessages[I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE],
+ async () => {
+ const i18n = createI18n({
+ legacy: true,
+ locale: 'ja',
+ messages: {
+ en: {
+ hello: 'hello!'
+ }
+ }
+ })
+
+ let error = ''
+ const App = defineComponent({
+ setup() {
+ try {
+ useI18n({
+ locale: 'en',
+ messages: {
+ en: {
+ hello: 'hello!'
+ }
+ }
+ })
+ } catch (e) {
+ error = e.message
+ }
+ return {}
+ },
+ template: `foo
`
+ })
+ await mount(App, i18n)
+ expect(error).toEqual(
+ errorMessages[I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE]
+ )
}
- }
+ )
})
- let error = ''
- const App = defineComponent({
- setup() {
- try {
- useI18n({
+ describe('enable', () => {
+ describe('t', () => {
+ test('translation & locale changing', async () => {
+ const i18n = createI18n({
+ allowComposition: true,
+ locale: 'ja',
+ messages: {
+ en: {
+ hello: 'hello!'
+ },
+ ja: {
+ hello: 'こんにちは！'
+ }
+ }
+ })
+
+ const App = defineComponent({
+ setup() {
+ const { locale, t } = useI18n()
+ return { locale, t }
+ },
+ template: `{{ t('hello') }}
`
+ })
+ const { html } = await mount(App, i18n)
+ expect(html()).toEqual('こんにちは！
')
+
+ i18n.global.locale = 'en'
+ await nextTick()
+ expect(html()).toEqual('hello!
')
+ })
+
+ test('local scope', async () => {
+ const i18n = createI18n({
+ allowComposition: true,
+ locale: 'en',
+ messages: {
+ en: {
+ hello: 'hello!'
+ },
+ ja: {}
+ }
+ })
+
+ const App = defineComponent({
+ setup() {
+ const { locale, t } = useI18n({
+ useScope: 'local',
+ messages: {
+ en: {
+ world: 'world!'
+ },
+ ja: {
+ world: '世界！'
+ }
+ }
+ })
+ return { locale, t }
+ },
+ i18n: {},
+ template: `{{ locale }}:{{ t('world') }}
`
+ })
+ const { html } = await mount(App, i18n)
+ expect(html()).toEqual('en:world!
')
+
+ i18n.global.locale = 'ja'
+ await nextTick()
+ expect(html()).toEqual('ja:世界！
')
+ })
+
+ test('use i18n option', async () => {
+ const i18n = createI18n({
+ allowComposition: true,
+ locale: 'en',
+ messages: {
+ en: {
+ hello: 'hello!'
+ },
+ ja: {}
+ }
+ })
+
+ const App = defineComponent({
+ setup() {
+ const { locale, t } = useI18n({
+ useScope: 'local'
+ })
+ return { locale, t }
+ },
+ i18n: {
+ messages: {
+ en: {
+ world: 'world!'
+ },
+ ja: {
+ world: '世界！'
+ }
+ }
+ },
+ template: `{{ locale }}:{{ t('world') }}
`
+ })
+ const { html } = await mount(App, i18n)
+ expect(html()).toEqual('en:world!
')
+ })
+
+ test('not defined i18n option in local scope', async () => {
+ const i18n = createI18n({
+ allowComposition: true,
locale: 'en',
messages: {
en: {
@@ -366,17 +534,127 @@ describe('useI18n', () => {
}
}
})
- } catch (e) {
- error = e.message
- }
- return {}
- },
- template: `foo
`
+
+ let error = ''
+ const App = defineComponent({
+ setup() {
+ try {
+ useI18n({ useScope: 'local' })
+ } catch (e) {
+ error = e.message
+ }
+ return {}
+ }
+ })
+ await mount(App, i18n)
+ expect(error).toEqual(
+ errorMessages[
+ I18nErrorCodes.MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION
+ ]
+ )
+ })
+ })
+ })
+
+ describe('d', () => {
+ test('datetime formatting', async () => {
+ const i18n = createI18n({
+ allowComposition: true,
+ locale: 'en-US',
+ fallbackLocale: ['ja-JP'],
+ datetimeFormats: {
+ 'en-US': {
+ short: {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ timeZone: 'America/New_York'
+ }
+ },
+ 'ja-JP': {
+ long: {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ timeZone: 'Asia/Tokyo'
+ },
+ short: {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ timeZone: 'Asia/Tokyo'
+ }
+ }
+ }
+ })
+
+ const App = defineComponent({
+ setup() {
+ const { d } = useI18n()
+ const dt = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))
+ return { d, dt }
+ },
+ template: `{{ d(dt, 'long') }}
`
+ })
+ const { html } = await mount(App, i18n)
+ expect(html()).toEqual('2012/12/20 12:00:00
')
+ })
+ })
+
+ describe('n', () => {
+ test('number formatting', async () => {
+ const i18n = createI18n({
+ allowComposition: true,
+ locale: 'en-US',
+ fallbackLocale: ['ja-JP'],
+ numberFormats: {
+ 'en-US': {
+ currency: {
+ style: 'currency',
+ currency: 'USD',
+ currencyDisplay: 'symbol'
+ },
+ decimal: {
+ style: 'decimal',
+ useGrouping: false
+ }
+ },
+ 'ja-JP': {
+ currency: {
+ style: 'currency',
+ currency: 'JPY' /*, currencyDisplay: 'symbol'*/
+ },
+ numeric: {
+ style: 'decimal',
+ useGrouping: false
+ },
+ percent: {
+ style: 'percent',
+ useGrouping: false
+ }
+ }
+ }
+ })
+
+ const App = defineComponent({
+ setup() {
+ const { n } = useI18n()
+ const value = 0.99
+ return { n, value }
+ },
+ template: `{{ n(value, { key: 'percent' }) }}
`
+ })
+ const { html } = await mount(App, i18n)
+ expect(html()).toEqual('99%
')
+ })
})
- await mount(App, i18n)
- expect(error).toEqual(
- errorMessages[I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE]
- )
})
test(errorMessages[I18nErrorCodes.NOT_INSLALLED_WITH_PROVIDE], async () => {