feat: compatible Vue3 vapor mode (#2299)

* feat: support Vue3 vapor mode

* fix: extend GenericComponentInstance interface

* fix: composer instance keeping

* fix: forgot type annotions

Author: kazupon

package.json

@@ -162,7 +162,7 @@
   "pnpm": {
     "overrides": {
       "vite": "^6.0.0",
-      "vue": "3.5.22"
+      "vue": "3.6.0-alpha.2"
     },
     "onlyBuiltDependencies": [
       "@parcel/watcher",

packages/vue-i18n-core/src/composer.ts

@@ -37,7 +37,7 @@ import {
   isString,
   warn
 } from '@intlify/shared'
-import { computed, getCurrentInstance, ref, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
 import { I18nErrorCodes, createI18nError } from './errors'
 import { VERSION } from './misc'
 import {
@@ -49,7 +49,13 @@ import {
   SetPluralRulesSymbol,
   TranslateVNodeSymbol
 } from './symbols'
-import { createTextNode, getComponentOptions, getLocaleMessages, handleFlatJson } from './utils'
+import {
+  createTextNode,
+  getComponentOptions,
+  getCurrentInstance,
+  getLocaleMessages,
+  handleFlatJson
+} from './utils'
 import { I18nWarnCodes, getWarnMessage } from './warnings'
 
 import type {
@@ -104,6 +110,7 @@ import type { VueDevToolsEmitter } from '@intlify/devtools-types'
 import type {
   ComponentInternalInstance,
   ComputedRef,
+  GenericComponentInstance,
   VNode,
   VNodeArrayChildren,
   WritableComputedRef
@@ -221,7 +228,7 @@ export type DefaultNumberFormatSchema<
 export type MissingHandler = (
   locale: Locale,
   key: Path,
-  instance?: ComponentInternalInstance,
+  instance?: ComponentInternalInstance | GenericComponentInstance,
   type?: string
 ) => string | void
 

packages/vue-i18n-core/src/devtools.ts

@@ -16,7 +16,7 @@ import type {
   Hooks,
   InspectedComponentData
 } from '@vue/devtools-api'
-import type { App, ComponentInternalInstance } from 'vue'
+import type { App, ComponentInternalInstance, GenericComponentInstance } from 'vue'
 import type { Composer } from './composer'
 import type { I18n, I18nInternal } from './i18n'
 
@@ -61,12 +61,8 @@ export async function enableDevTools(app: App, i18n: _I18n): Promise<boolean> {
           })
 
           api.on.inspectComponent(({ componentInstance, instanceData }) => {
-            if (
-              componentInstance.vnode.el &&
-              componentInstance.vnode.el.__VUE_I18N__ &&
-              instanceData
-            ) {
-              inspectComposer(instanceData, componentInstance.vnode.el.__VUE_I18N__ as Composer)
+            if (componentInstance.__VUE_I18N__ && instanceData) {
+              inspectComposer(instanceData, componentInstance.__VUE_I18N__ as Composer)
             }
           })
 
@@ -83,7 +79,7 @@ export async function enableDevTools(app: App, i18n: _I18n): Promise<boolean> {
             }
           })
 
-          const roots = new Map<App, ComponentInternalInstance>()
+          const roots = new Map<App, ComponentInternalInstance | GenericComponentInstance>()
           api.on.getInspectorState(async payload => {
             if (payload.app === app && payload.inspectorId === 'vue-i18n-resource-inspector') {
               api.unhighlightElement()
@@ -138,9 +134,9 @@ function updateComponentTreeTags(
 ): void {
   // prettier-ignore
   const global = i18n.global
-  if (instance && instance.vnode.el && instance.vnode.el.__VUE_I18N__) {
+  if (instance && instance.__VUE_I18N__) {
     // add custom tags local scope only
-    if (instance.vnode.el.__VUE_I18N__ !== global) {
+    if (instance.__VUE_I18N__ !== global) {
       const tag = {
         label: `i18n (${getI18nScopeLable(instance)} Scope)`,
         textColor: 0x000000,
@@ -263,8 +259,11 @@ function registerScope(payload: HookPayloads[Hooks.GET_INSPECTOR_TREE], i18n: _I
   }
 }
 
-function getComponentInstance(nodeId: string, i18n: _I18n): ComponentInternalInstance | null {
-  let instance: ComponentInternalInstance | null = null
+function getComponentInstance(
+  nodeId: string,
+  i18n: _I18n
+): ComponentInternalInstance | GenericComponentInstance | null {
+  let instance: ComponentInternalInstance | GenericComponentInstance | null = null
 
   if (nodeId !== 'global') {
     for (const [component, composer] of i18n.__instances.entries()) {

packages/vue-i18n-core/src/i18n.ts

@@ -7,18 +7,24 @@ import {
   makeSymbol,
   warn
 } from '@intlify/shared'
-import { effectScope, getCurrentInstance, inject, isRef, onMounted, onUnmounted } from 'vue'
+import { effectScope, inject, isRef, onMounted, onUnmounted } from 'vue'
 import { createComposer } from './composer'
 import { addTimelineEvent, enableDevTools } from './devtools'
 import { I18nErrorCodes, createI18nError } from './errors'
 import { apply as applyPlugin } from './plugin/next'
 import { DisableEmitter, DisposeSymbol, EnableEmitter } from './symbols'
-import { adjustI18nResources, getComponentOptions } from './utils'
+import { adjustI18nResources, getComponentOptions, getCurrentInstance } from './utils'
 import { I18nWarnCodes, getWarnMessage } from './warnings'
 
 import type { FallbackLocale, Locale, LocaleParams, SchemaParams } from '@intlify/core-base'
 import type { VueDevToolsEmitter, VueDevToolsEmitterEvents } from '@intlify/devtools-types'
-import type { App, ComponentInternalInstance, EffectScope, InjectionKey } from 'vue'
+import type {
+  App,
+  ComponentInternalInstance,
+  EffectScope,
+  GenericComponentInstance,
+  InjectionKey
+} from 'vue'
 import type {
   Composer,
   ComposerInternalOptions,
@@ -136,17 +142,17 @@ export interface I18nInternal<
   OptionLocale = Locale
 > {
   __instances: Map<
-    ComponentInternalInstance,
+    ComponentInternalInstance | GenericComponentInstance,
     Composer<Messages, DateTimeFormats, NumberFormats, OptionLocale>
   >
   __getInstance<Instance extends Composer<Messages, DateTimeFormats, NumberFormats, OptionLocale>>(
-    component: ComponentInternalInstance
+    component: ComponentInternalInstance | GenericComponentInstance
   ): Instance | null
   __setInstance<Instance extends Composer<Messages, DateTimeFormats, NumberFormats, OptionLocale>>(
-    component: ComponentInternalInstance,
+    component: ComponentInternalInstance | GenericComponentInstance,
     instance: Instance
   ): void
-  __deleteInstance(component: ComponentInternalInstance): void
+  __deleteInstance(component: ComponentInternalInstance | GenericComponentInstance): void
   __composerExtend?: ComposerExtender
 }
 
@@ -314,17 +320,22 @@ export function createI18n(options: any = {}): any {
   const __globalInjection = isBoolean(options.globalInjection)
     ? options.globalInjection
     : true
-  const __instances = new Map<ComponentInternalInstance, Composer>()
+  const __instances = new Map<ComponentInternalInstance | GenericComponentInstance, Composer>()
   const [globalScope, __global] = createGlobal(options)
   const symbol: InjectionKey<I18n> | string = /* #__PURE__*/ makeSymbol(__DEV__ ? 'vue-i18n' : '')
 
-  function __getInstance(component: ComponentInternalInstance): Composer | null {
+  function __getInstance(
+    component: ComponentInternalInstance | GenericComponentInstance
+  ): Composer | null {
     return __instances.get(component) || null
   }
-  function __setInstance(component: ComponentInternalInstance, instance: Composer): void {
+  function __setInstance(
+    component: ComponentInternalInstance | GenericComponentInstance,
+    instance: Composer
+  ): void {
     __instances.set(component, instance)
   }
-  function __deleteInstance(component: ComponentInternalInstance): void {
+  function __deleteInstance(component: ComponentInternalInstance | GenericComponentInstance): void {
     __instances.delete(component)
   }
 
@@ -556,7 +567,7 @@ function createGlobal(options: I18nOptions): [EffectScope, Composer] {
   return [scope, obj]
 }
 
-function getI18nInstance(instance: ComponentInternalInstance): I18n {
+function getI18nInstance(instance: ComponentInternalInstance | GenericComponentInstance): I18n {
   const i18n = inject(
     !instance.isCE ? instance.appContext.app.__VUE_I18N_SYMBOL__! : I18nInjectionKey
   )
@@ -588,12 +599,13 @@ function getGlobalComposer(i18n: I18n): Composer {
 
 function getComposer(
   i18n: I18n,
-  target: ComponentInternalInstance,
+  target: ComponentInternalInstance | GenericComponentInstance,
   useComponent = false
 ): Composer | null {
   let composer: Composer | null = null
   const root = target.root
-  let current: ComponentInternalInstance | null = getParentComponentInstance(target, useComponent)
+  let current: ComponentInternalInstance | GenericComponentInstance | null =
+    getParentComponentInstance(target, useComponent)
   while (current != null) {
     const i18nInternal = i18n as unknown as I18nInternal
     composer = i18nInternal.__getInstance(current)
@@ -610,7 +622,7 @@ function getComposer(
 }
 
 function getParentComponentInstance(
-  target: ComponentInternalInstance | null,
+  target: ComponentInternalInstance | GenericComponentInstance | null,
   useComponent = false
 ) {
   if (target == null) {
@@ -622,16 +634,16 @@ function getParentComponentInstance(
 
 function setupLifeCycle(
   i18n: I18nInternal,
-  target: ComponentInternalInstance,
+  target: ComponentInternalInstance | GenericComponentInstance,
   composer: Composer
 ): void {
   let emitter: VueDevToolsEmitter | null = null
 
   // eslint-disable-next-line vue-composable/lifecycle-placement -- NOTE(kazupon): not Vue component
   onMounted(() => {
     // inject composer instance to DOM for intlify-devtools
-    if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__ && target.vnode.el) {
-      target.vnode.el.__VUE_I18N__ = composer
+    if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__) {
+      target.__VUE_I18N__ = composer
       emitter = createEmitter<VueDevToolsEmitterEvents>()
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const _composer = composer as any
@@ -646,15 +658,10 @@ function setupLifeCycle(
     const _composer = composer as any
 
     // remove composer instance from DOM for intlify-devtools
-    if (
-      (__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) &&
-      !__NODE_JS__ &&
-      target.vnode.el &&
-      target.vnode.el.__VUE_I18N__
-    ) {
+    if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__ && target.__VUE_I18N__) {
       emitter && emitter.off('*', addTimelineEvent)
       _composer[DisableEmitter] && _composer[DisableEmitter]()
-      delete target.vnode.el.__VUE_I18N__
+      delete target.__VUE_I18N__
     }
     i18n.__deleteInstance(target)
 

packages/vue-i18n-core/src/utils.ts

@@ -10,11 +10,17 @@ import {
   isString,
   warn
 } from '@intlify/shared'
+import * as Vue from 'vue'
 import { Text, createVNode } from 'vue'
 import { I18nWarnCodes, getWarnMessage } from './warnings'
 
 import type { Locale, MessageResolver } from '@intlify/core-base'
-import type { ComponentInternalInstance, RendererElement, RendererNode } from 'vue'
+import type {
+  ComponentInternalInstance,
+  GenericComponentInstance,
+  RendererElement,
+  RendererNode
+} from 'vue'
 import type { Composer, ComposerOptions, CustomBlocks, VueMessageType } from './composer'
 
 type GetLocaleMessagesOptions<Messages = {}> = {
@@ -154,7 +160,9 @@ export function getLocaleMessages<Messages = {}>(
   return ret as { [K in keyof Messages]: Messages[K] }
 }
 
-export function getComponentOptions(instance: ComponentInternalInstance): any {
+export function getComponentOptions(
+  instance: ComponentInternalInstance | GenericComponentInstance
+): any {
   return instance.type
 }
 
@@ -205,3 +213,8 @@ export function adjustI18nResources(
 export function createTextNode(key: string): any {
   return createVNode(Text, null, key, 0)
 }
+
+export function getCurrentInstance(): GenericComponentInstance | ComponentInternalInstance | null {
+  // @ts-ignore -- NOTE(kazupon): for Vue 3.6
+  return Vue.currentInstance || Vue.getCurrentInstance()
+}

packages/vue-i18n-core/src/vue.d.ts

@@ -1,4 +1,5 @@
 import type { InjectionKey } from 'vue'
+import type { Composer } from './composer'
 import type { I18n, I18nInternal } from './i18n'
 
 declare module 'vue' {
@@ -14,8 +15,26 @@ declare module 'vue' {
   export interface ComponentInternalInstance {
     /**
      * @internal
-     * iskk custom element?
+     * whether target component is custom element
      */
     isCE?: boolean
+    /**
+     * @internal
+     * for vue/devtools i18n composer hook
+     */
+    __VUE_I18N__?: Composer
+  }
+
+  export interface GenericComponentInstance {
+    /**
+     * @internal
+     * whether target component is custom element
+     */
+    isCE?: boolean
+    /**
+     * @internal
+     * for vue/devtools i18n composer hook
+     */
+    __VUE_I18N__?: Composer
   }
 }

packages/vue-i18n-core/test/i18n.test.ts

@@ -23,9 +23,10 @@ import {
   setDevToolsHook
 } from '@intlify/core-base'
 import { createEmitter } from '@intlify/shared'
-import { defineComponent, defineCustomElement, getCurrentInstance, h, nextTick, ref } from 'vue'
+import { defineComponent, defineCustomElement, h, nextTick, ref } from 'vue'
 import { errorMessages, I18nErrorCodes } from '../src/errors'
 import { createI18n, useI18n } from '../src/i18n'
+import { getCurrentInstance } from '../src/utils'
 import { pluralRules as _pluralRules, mount, randStr } from './helper'
 
 import type { IntlifyDevToolsEmitterHooks } from '@intlify/devtools-types'

packages/vue-i18n-core/test/issues.test.ts

@@ -21,8 +21,9 @@ import {
   resolveValue,
   setDevToolsHook
 } from '@intlify/core-base'
-import { defineComponent, getCurrentInstance, nextTick, ref } from 'vue'
+import { defineComponent, nextTick, ref } from 'vue'
 import { createI18n, useI18n } from '../src/i18n'
+import { getCurrentInstance } from '../src/utils'
 import { ast } from './fixtures/ast'
 import { mount } from './helper'
 

packages/vue-i18n-core/test/wc.test.ts

@@ -2,19 +2,20 @@
  * @vitest-environment jsdom
  */
 
-import { h, provide, nextTick, defineCustomElement, getCurrentInstance } from 'vue'
 import {
   compile,
+  fallbackWithLocaleChain,
+  registerLocaleFallbacker,
   registerMessageCompiler,
-  resolveValue,
   registerMessageResolver,
-  fallbackWithLocaleChain,
-  registerLocaleFallbacker
+  resolveValue
 } from '@intlify/core-base'
-import { createI18n, useI18n, I18nInjectionKey } from '../src/index'
+import { defineCustomElement, h, nextTick, provide } from 'vue'
+import { createI18n, I18nInjectionKey, useI18n } from '../src/index'
+import { getCurrentInstance } from '../src/utils'
 import { randStr } from './helper'
 
-import type { VueElement, ComponentOptions } from 'vue'
+import type { ComponentOptions, VueElement } from 'vue'
 
 const container = document.createElement('div')
 document.body.appendChild(container)