improve i18n instance management (#111)

Author: kazupon

src/core/context.ts

@@ -26,13 +26,6 @@ import {
   NumberFormats as NumberFormatsType
 } from './types'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
-  k: infer I
-) => void
-  ? I
-  : never
-
 export type Locale = string
 
 export type FallbackLocale =
@@ -57,8 +50,6 @@ export type LocaleMessages<Message = string> = Record<
   LocaleMessageDictionary<Message>
 >
 
-type NestedPath<T> = { [K in keyof T]: T[K] }
-
 export type RuntimeMissingType = 'translate' | 'datetime' | 'number'
 export type RuntimeMissingHandler<Message = string> = (
   context: RuntimeCommonContext<Message>,

src/i18n.ts

@@ -35,6 +35,7 @@ declare module '@vue/runtime-core' {
   // eslint-disable-next-line
   interface App<HostElement = any> {
     __VUE_I18N__?: I18n & I18nInternal
+    __VUE_I18N_SYMBOL__?: InjectionKey<I18n>
   }
 }
 
@@ -145,12 +146,6 @@ export interface ComposerAdditionalOptions {
   useScope?: I18nScope
 }
 
-/**
- * I18n instance injectin key
- * @internal
- */
-export const I18nSymbol: InjectionKey<I18n> = Symbol.for('vue-i18n')
-
 /**
  * I18n factory function
  *
@@ -250,6 +245,7 @@ export function createI18n<
   const __global = __legacyMode
     ? createVueI18n(options)
     : createComposer(options)
+  const symbol: InjectionKey<I18n> = Symbol(__DEV__ ? 'vue-i18n' : '')
 
   const i18n = {
     // mode
@@ -261,6 +257,7 @@ export function createI18n<
       if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
         app.__VUE_I18N__ = i18n as I18n & I18nInternal
       }
+      app.__VUE_I18N_SYMBOL__ = symbol
       apply<Messages, DateTimeFormats, NumberFormats>(app, i18n, ...options)
       if (__legacyMode) {
         app.mixin(
@@ -384,7 +381,13 @@ export function useI18n<
   Options['datetimeFormats'],
   Options['numberFormats']
 > {
-  const i18n = inject(I18nSymbol) as I18n<
+  const instance = getCurrentInstance()
+  /* istanbul ignore if */
+  if (instance == null || !instance.appContext.app.__VUE_I18N_SYMBOL__) {
+    throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
+  }
+
+  const i18n = inject(instance.appContext.app.__VUE_I18N_SYMBOL__) as I18n<
     Messages,
     DateTimeFormats,
     NumberFormats
@@ -406,12 +409,6 @@ export function useI18n<
     return global
   }
 
-  const instance = getCurrentInstance()
-  /* istanbul ignore if */
-  if (instance == null) {
-    throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
-  }
-
   if (scope === 'parent') {
     let composer = getComposer(i18n, instance)
     if (composer == null) {

src/plugin.ts

@@ -1,7 +1,8 @@
 import { App, Component } from 'vue'
-import { I18nSymbol, I18n } from './i18n'
+import { I18n } from './i18n'
 import { Translation, NumberFormat, DatetimeFormat } from './components'
 import { vTDirective } from './directive'
+import { I18nErrorCodes, createI18nError } from './errors'
 import { I18nWarnCodes, getWarnMessage } from './warnings'
 import { isPlainObject, warn, isBoolean } from './utils'
 
@@ -54,5 +55,8 @@ export function apply<Messages, DateTimeFormats, NumberFormats>(
   )
 
   // setup global provider
-  app.provide(I18nSymbol, i18n)
+  if (!app.__VUE_I18N_SYMBOL__) {
+    throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
+  }
+  app.provide(app.__VUE_I18N_SYMBOL__, i18n)
 }

test/i18n.test.ts

@@ -191,12 +191,6 @@ describe('useI18n', () => {
     expect(composer.locale.value).toEqual('ja')
   })
 
-  test(errorMessages[I18nErrorCodes.NOT_INSLALLED], () => {
-    expect(() => {
-      useI18n()
-    }).toThrowError(errorMessages[I18nErrorCodes.NOT_INSLALLED])
-  })
-
   test(errorMessages[I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE], async () => {
     const i18n = createI18n({
       legacy: true,
@@ -423,3 +417,42 @@ describe('slot reactivity', () => {
     expect(html()).toMatchSnapshot('en')
   })
 })
+
+test('multi instance', async () => {
+  const i18n1 = createI18n({
+    locale: 'ja',
+    messages: {
+      en: {
+        hello: 'hello!'
+      }
+    }
+  })
+  const i18n2 = createI18n({
+    locale: 'en',
+    messages: {
+      ja: {
+        hello: 'こんにちは！'
+      }
+    }
+  })
+
+  const App = defineComponent({
+    setup() {
+      const i18n = useI18n({
+        locale: 'en',
+        messages: {
+          en: {
+            hello: 'hello!'
+          }
+        }
+      })
+      return { ...i18n }
+    },
+    template: `<p>foo</p>`
+  })
+  const { app: app1 } = await mount(App, i18n1)
+  const { app: app2 } = await mount(App, i18n2)
+
+  expect(app1.__VUE_I18N_SYMBOL__ !== app2.__VUE_I18N_SYMBOL__).toEqual(true)
+  expect(i18n1.global).not.toEqual(i18n2.global)
+})

test/plugin.test.ts

@@ -21,6 +21,7 @@ describe('useI18nComponentName option', () => {
     mockWarn.mockImplementation(() => {})
 
     const app = createApp({})
+    app.__VUE_I18N_SYMBOL__ = Symbol()
     const i18n = {} as I18n & I18nInternal
 
     apply(app, i18n)
@@ -32,6 +33,7 @@ describe('useI18nComponentName option', () => {
     mockWarn.mockImplementation(() => {})
 
     const app = createApp({})
+    app.__VUE_I18N_SYMBOL__ = Symbol()
     const i18n = {} as I18n & I18nInternal
 
     apply(app, i18n, { useI18nComponentName: true })
@@ -47,6 +49,7 @@ describe('useI18nComponentName option', () => {
 describe('globalInstall option', () => {
   test('default', () => {
     const app = createApp({})
+    app.__VUE_I18N_SYMBOL__ = Symbol()
     const i18n = {} as I18n & I18nInternal
     const spy = jest.spyOn(app, 'component')
 
@@ -56,6 +59,7 @@ describe('globalInstall option', () => {
 
   test('false', () => {
     const app = createApp({})
+    app.__VUE_I18N_SYMBOL__ = Symbol()
     const i18n = {} as I18n & I18nInternal
     const spy = jest.spyOn(app, 'component')