Skip to content

Commit 834b7d4

Browse files
kazuponkazupon
authored
fix: locale changing for legacy mode (#190)
* fix: locale changing for legacy mode * fix: textlint errors * update docs
1 parent ad0d372 commit 834b7d4

File tree

8 files changed

+114
-72
lines changed

8 files changed

+114
-72
lines changed

‎.textlintrc.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ module.exports = {
2626
'YAML',
2727
'JSON5',
2828
'HTTP',
29-
'CLI'
29+
'CLI',
30+
'SFC'
3031
]
3132
},
3233
'abbr-within-parentheses': true,

‎docs/advanced/composition.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Composition API
22

3-
The introduction of `setup` and Vue's [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) open up new possibilities. But to be able to get the full potential out of Vue I18n, we will need to use a few new functions to replace access to `this`.
3+
The introduction of `setup` and Vue’s [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) open up new possibilities. But to be able to get the full potential out of Vue I18n, we will need to use a few new functions to replace access to `this`.

‎docs/essentials/started.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ The following sections will be explained using the Legacy API.
8888

8989
## Have you already used Vue I18n ?
9090

91-
If you've used Vue I18n before, you'll want to use the API offered for Compostion API to support i18n, but some new features are supported in Vue I18n v9 and later.
91+
If you`ve used Vue I18n before, you’ll want to use the API offered for Compostion API to support i18n, but some new features are supported in Vue I18n v9 and later.
9292

9393
So recommended that you read through the basics at least once.
9494

‎src/composer.ts‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -318,16 +318,14 @@ function defineRuntimeMissingHandler<Message = VueMessageType>(
318318
}) as RuntimeMissingHandler<Message>
319319
}
320320

321-
// TODO: maybe, we need to improve type definitions
322-
function getLocaleMessages<
323-
Messages extends LocaleMessages<Message>,
324-
DateTimeFormats extends DateTimeFormatsType,
325-
NumberFormats extends NumberFormatsType,
326-
Message = VueMessageType
327-
>(
328-
options: ComposerOptions<Message> &
329-
ComposerInternalOptions<Messages, DateTimeFormats, NumberFormats, Message>,
330-
locale: Locale
321+
type GetLocaleMessagesOptions<Message = VueMessageType> = {
322+
messages?: LocaleMessages<Message>
323+
__i18n?: CustomBlocks<Message>
324+
}
325+
326+
export function getLocaleMessages<Message = VueMessageType>(
327+
locale: Locale,
328+
options: GetLocaleMessagesOptions<Message>
331329
): LocaleMessages<Message> {
332330
const { messages, __i18n } = options
333331

@@ -472,10 +470,7 @@ export function createComposer<
472470
)
473471

474472
const _messages = ref<LocaleMessages<Message>>(
475-
getLocaleMessages<Messages, DateTimeFormats, NumberFormats, Message>(
476-
options,
477-
_locale.value
478-
)
473+
getLocaleMessages<Message>(_locale.value, options)
479474
)
480475

481476
const _datetimeFormats = ref<DateTimeFormatsType>(

‎src/i18n.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -657,12 +657,12 @@ function setupLifeCycle<Messages, DateTimeFormats, NumberFormats>(
657657
}
658658

659659
/**
660-
* Exported composer interface
660+
* Exported global composer interface
661661
*
662662
* @remarks
663663
* This interface is the {@link I18n.global | global composer } that is provided interface that is injected into each component with `app.config.globalProperties`.
664664
*/
665-
export interface ExportedComposer {
665+
export interface ExportedGlobalComposer {
666666
/**
667667
* Locale
668668
*

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export {
4646
I18nScope,
4747
ComposerAdditionalOptions,
4848
UseI18nOptions,
49-
ExportedComposer
49+
ExportedGlobalComposer
5050
} from './i18n'
5151
export {
5252
Translation,

‎src/mixin.ts‎

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { ComponentOptions, getCurrentInstance } from 'vue'
22
import { Path } from './path'
33
import { Locale, LocaleMessageValue } from './core/context'
4-
import { Composer, ComposerInternalOptions, VueMessageType } from './composer'
4+
import {
5+
Composer,
6+
ComposerInternalOptions,
7+
VueMessageType,
8+
getLocaleMessages
9+
} from './composer'
510
import {
611
VueI18n,
712
VueI18nInternal,
@@ -44,39 +49,81 @@ export function defineMixin<Messages, DateTimeFormats, NumberFormats>(
4449
optionsI18n.__i18n = options.__i18n
4550
}
4651
optionsI18n.__root = composer
47-
this.$i18n = createVueI18n(optionsI18n)
48-
legacy.__onComponentInstanceCreated(this.$i18n)
49-
50-
i18n.__setInstance<
51-
Messages,
52-
DateTimeFormats,
53-
NumberFormats,
54-
VueI18n<Messages, DateTimeFormats, NumberFormats>
55-
>(
56-
instance,
57-
this.$i18n as VueI18n<Messages, DateTimeFormats, NumberFormats>
58-
)
52+
if (this === this.$root) {
53+
const rootLegacy = (legacy as unknown) as VueI18n<
54+
Messages,
55+
DateTimeFormats,
56+
NumberFormats
57+
>
58+
rootLegacy.locale = optionsI18n.locale || rootLegacy.locale
59+
rootLegacy.fallbackLocale =
60+
optionsI18n.fallbackLocale || rootLegacy.fallbackLocale
61+
rootLegacy.missing = optionsI18n.missing || rootLegacy.missing
62+
rootLegacy.silentTranslationWarn =
63+
optionsI18n.silentTranslationWarn || rootLegacy.silentFallbackWarn
64+
rootLegacy.silentFallbackWarn =
65+
optionsI18n.silentFallbackWarn || rootLegacy.silentFallbackWarn
66+
rootLegacy.formatFallbackMessages =
67+
optionsI18n.formatFallbackMessages ||
68+
rootLegacy.formatFallbackMessages
69+
rootLegacy.postTranslation =
70+
optionsI18n.postTranslation || rootLegacy.postTranslation
71+
rootLegacy.warnHtmlInMessage =
72+
optionsI18n.warnHtmlInMessage || rootLegacy.warnHtmlInMessage
73+
rootLegacy.escapeParameterHtml =
74+
optionsI18n.escapeParameterHtml || rootLegacy.escapeParameterHtml
75+
rootLegacy.sync = optionsI18n.sync || rootLegacy.sync
76+
const messages = getLocaleMessages<VueMessageType>(
77+
rootLegacy.locale,
78+
{
79+
messages: optionsI18n.messages,
80+
__i18n: optionsI18n.__i18n
81+
}
82+
)
83+
Object.keys(messages).forEach(locale =>
84+
rootLegacy.mergeLocaleMessage(locale, messages[locale])
85+
)
86+
if (optionsI18n.datetimeFormats) {
87+
Object.keys(optionsI18n.datetimeFormats).forEach(locale =>
88+
rootLegacy.mergeDateTimeFormat(
89+
locale,
90+
optionsI18n.datetimeFormats![locale]
91+
)
92+
)
93+
}
94+
if (optionsI18n.numberFormats) {
95+
Object.keys(optionsI18n.numberFormats).forEach(locale =>
96+
rootLegacy.mergeNumberFormat(
97+
locale,
98+
optionsI18n.numberFormats![locale]
99+
)
100+
)
101+
}
102+
this.$i18n = legacy
103+
} else {
104+
this.$i18n = createVueI18n(optionsI18n)
105+
}
59106
} else if (options.__i18n) {
60107
this.$i18n = createVueI18n({
61108
__i18n: (options as ComposerInternalOptions<Messages>).__i18n,
62109
__root: composer
63110
} as VueI18nOptions)
64-
legacy.__onComponentInstanceCreated(this.$i18n)
65-
66-
i18n.__setInstance<
67-
Messages,
68-
DateTimeFormats,
69-
NumberFormats,
70-
VueI18n<Messages, DateTimeFormats, NumberFormats>
71-
>(
72-
instance,
73-
this.$i18n as VueI18n<Messages, DateTimeFormats, NumberFormats>
74-
)
75111
} else {
76112
// set global
77113
this.$i18n = legacy
78114
}
79115

116+
legacy.__onComponentInstanceCreated(this.$i18n)
117+
i18n.__setInstance<
118+
Messages,
119+
DateTimeFormats,
120+
NumberFormats,
121+
VueI18n<Messages, DateTimeFormats, NumberFormats>
122+
>(
123+
instance,
124+
this.$i18n as VueI18n<Messages, DateTimeFormats, NumberFormats>
125+
)
126+
80127
// defines vue-i18n legacy APIs
81128
this.$t = (...args: unknown[]): TranslateResult => this.$i18n.t(...args)
82129
this.$tc = (...args: unknown[]): TranslateResult => this.$i18n.tc(...args)

‎src/vue.d.ts‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
DateTimeFormatResult,
1111
NumberFormatResult
1212
} from './legacy'
13-
import { ExportedComposer } from './i18n'
13+
import { ExportedGlobalComposer } from './i18n'
1414

1515
declare module '@vue/runtime-core' {
1616
export interface ComponentCustomOptions {
@@ -30,24 +30,23 @@ declare module '@vue/runtime-core' {
3030

3131
export interface ComponentCustomProperties {
3232
/**
33-
* Global composer instance, or a instance that are compatible with [email protected] VueI18n interface
33+
* Exported Global Composer instance, or global VueI18n instance.
3434
*
3535
* @remarks
36-
* You can get the {@link I18n.global | global composer} created during the execution of {@link createI18n}.
37-
* This instance is global property injected into for each components by `app.config.globalProperties`.
38-
*
39-
* If you have specified `legacy: true` in options at `createI18n`, that is in legacy mode, {@link VueI18n} instance is set to for each the components.
40-
* Otherwise, you will be able get root VueI18n instance.
36+
* You can get the {@link ExportedGlobalComposer | exported composer instance} which are exported from global {@link Composer | composer instance} created with {@link createI18n}, or global {@link VueI18n | VueI18n instance}.
37+
* You can get the exported composer instance in {@link I18nMode | compostion mode}, or the Vuei18n instance in {@link I18nMode | legacy mode}, which is the instance you can refer to with this property.
38+
* The locales, locale messages, and other resources managed by the instance referenced by this property are valid as global scope.
39+
* If the `i18n` component option is not specified, it's the same as the VueI18n instance that can be referenced by the {@link I18n.global | global} property of the i18n instance.
4140
*/
42-
$i18n: VueI18n | ExportedComposer
41+
$i18n: VueI18n | ExportedGlobalComposer
4342
/**
44-
* translation method
43+
* Translation function
4544
*
4645
* @remarks
47-
* In composition mode, In the case of composition mode, the method (property) is injected by `app.config.globalProperties`.
48-
* the input / output is the same as for `Composer`, and it's **global**. About that details, see {@link Composer.t | `Composer#t` }.
46+
* In {@link I18nMode | compostion mode}, the `$t` is injected by `app.config.globalProperties`.
47+
* the input / output is the same as for Composer, and it work on **global scope**. About that details, see {@link Composer.t | `Composer#t` }.
4948
*
50-
* In legacy mode, the input / output is the same as for `VueI18n` of [email protected]. About that details, see {@link VueI18n.t | `VueI18n#t`}.
49+
* In {@link I18nMode | legacy mode}, the input / output is the same as for VueI18n instance. About that details, see {@link VueI18n.t | `VueI18n#t`}.
5150
*/
5251
$t(key: Path): TranslateResult
5352
$t(key: Path, locale: Locale): TranslateResult
@@ -69,10 +68,10 @@ declare module '@vue/runtime-core' {
6968
$t(key: Path, named: NamedValue, defaultMsg: string): string
7069
$t(key: Path, named: NamedValue, options: TranslateOptions): string
7170
/**
72-
* pluralization method
71+
* Pluralization function
7372
*
7473
* @remarks
75-
* The input / output is the same as for `VueI18n` of [email protected]. About that details, see {@link VueI18n.tc | `VueI18n#tc` }.
74+
* The input / output is the same as for VueI18n instance. About that details, see {@link VueI18n.tc | `VueI18n#tc` }.
7675
*
7776
* This property is supported for legacy mode only
7877
*/
@@ -89,22 +88,22 @@ declare module '@vue/runtime-core' {
8988
named: Record<string, unknown>
9089
): TranslateResult
9190
/**
92-
* translation exist method
91+
* Translation exist function
9392
*
9493
* @remarks
95-
* The input / output is the same as for `VueI18n` of [email protected]. About that details, see {@link VueI18n.te | `VueI18n.#te` }.
94+
* The input / output is the same as for VueI18n instance. About that details, see {@link VueI18n.te | `VueI18n.#te` }.
9695
*
9796
* This property is supported for legacy mode only
9897
*/
9998
$te(key: Path, locale?: Locale): boolean
10099
/**
101-
* datetime method
100+
* Datetime localization function
102101
*
103102
* @remarks
104-
* In composition mode, In the case of composition mode, the method (property) is injected by `app.config.globalProperties`.
105-
* the input / output is the same as for `Composer`, and it's **global**. About that details, see {@link Composer.d | `Composer#d` }.
103+
* In {@link I18nMode | compostion mode}, the `$d` is injected by `app.config.globalProperties`.
104+
* the input / output is the same as for Composer instance, and it work on **global scope**. About that details, see {@link Composer.d | `Composer#d` }.
106105
*
107-
* In legacy mode, the input / output is the same as for `VueI18n` of [email protected]. About that details, see {@link VueI18n.d | `VueI18n#d` }.
106+
* In {@link I18nMode | legacy mode}, the input / output is the same as for VueI18n instance. About that details, see {@link VueI18n.d | `VueI18n#d` }.
108107
*/
109108
$d(value: number | Date): DateTimeFormatResult
110109
$d(value: number | Date, key: string): DateTimeFormatResult
@@ -118,13 +117,13 @@ declare module '@vue/runtime-core' {
118117
$d(value: number | Date, key: string, locale: Locale): string
119118
$d(value: number | Date, options: DateTimeOptions): string
120119
/**
121-
* number method
120+
* Number localization function
122121
*
123122
* @remarks
124-
* In composition mode, In the case of composition mode, the method (property) is injected by `app.config.globalProperties`.
125-
* the input / output is the same as for `Composer`, and it's **global**. About that details, see {@link Composer.n | `Composer.n` }.
123+
* In {@link I18nMode | compostion mode}, the `$n` is injected by `app.config.globalProperties`.
124+
* the input / output is the same as for Composer instance, and it work on **global scope**. About that details, see {@link Composer.n | `Composer.n` }.
126125
*
127-
* In legacy mode, the input / output is the same as for `VueI18n` of [email protected]. About that details, see {@link VueI18n.n | `VueI18n.n` }.
126+
* In {@link I18nMode | legacy mode}, the input / output is the same as for VueI18n instance. About that details, see {@link VueI18n.n | `VueI18n.n` }.
128127
*/
129128
$n(value: number): NumberFormatResult
130129
$n(value: number, key: string): NumberFormatResult
@@ -135,13 +134,13 @@ declare module '@vue/runtime-core' {
135134
$n(value: number, key: string, locale: Locale): string
136135
$n(value: number, options: NumberOptions): string
137136
/**
138-
* translation messages method
137+
* Translation locale messages function
139138
*
140139
* @remarks
141-
* In composition mode, In the case of composition mode, the method (property) is injected by `app.config.globalProperties`.
142-
* the input / output is the same as for `Composer`, and it's **global**. About that details, see {@link Composer.tm | `Composer.tm` }.
140+
* In {@link I18nMode | compostion mode}, the `$tm` is injected by `app.config.globalProperties`.
141+
* the input / output is the same as for Composer instance, and it work on **global scope**. About that details, see {@link Composer.tm | `Composer.tm` }.
143142
*
144-
* In legacy mode, the input / output is the same as for `VueI18n` of [email protected]. About that details, see {@link VueI18n.tm | `VueI18n#tm` }.
143+
* In {@link I18nMode | legacy mode}, the input / output is the same as for VueI18n instance. About that details, see {@link VueI18n.tm | `VueI18n#tm` }.
145144
*/
146145
$tm(key: Path): LocaleMessageValue<VueMessageType> | {}
147146
}

0 commit comments

Comments
 (0)