experimental: improve meta for intlify devtools (#446)

* experimental: improve meta for intlify devtools

* fix: lint errors

Author: kazupon

packages/core-base/src/context.ts

@@ -72,6 +72,7 @@ export type MessageCompiler<Message = string> = (
 ) => MessageFunction<Message>
 
 export interface CoreOptions<Message = string> {
+  version?: string
   locale?: Locale
   fallbackLocale?: FallbackLocale
   messages?: LocaleMessages<Message>
@@ -101,6 +102,7 @@ export interface CoreInternalOptions {
 
 export interface CoreCommonContext<Message = string> {
   cid: number
+  version: string
   locale: Locale
   fallbackLocale: FallbackLocale
   missing: CoreMissingHandler<Message> | null
@@ -147,7 +149,7 @@ export interface CoreInternalContext {
   __numberFormatters: Map<string, Intl.NumberFormat>
   __localeChainCache?: Map<Locale, Locale[]>
   __v_emitter?: VueDevToolsEmitter // eslint-disable-line camelcase
-  __meta?: MetaInfo
+  __meta: MetaInfo // for Intlify DevTools
 }
 
 /**
@@ -184,6 +186,18 @@ export function registerMessageCompiler<Message>(
   _compiler = compiler
 }
 
+// Additional Meta for Intlify DevTools
+let _additionalMeta: MetaInfo | null = /* #__PURE__*/ null
+
+export const setAdditionalMeta = /* #__PURE__*/ (
+  meta: MetaInfo | null
+): void => {
+  _additionalMeta = meta
+}
+
+export const getAdditionalMeta = /* #__PURE__*/ (): MetaInfo | null =>
+  _additionalMeta
+
 // ID for CoreContext
 let _cid = 0
 
@@ -211,6 +225,7 @@ export function createCoreContext<
   Message
 > {
   // setup options
+  const version = isString(options.version) ? options.version : VERSION
   const locale = isString(options.locale) ? options.locale : 'en-US'
   const fallbackLocale =
     isArray(options.fallbackLocale) ||
@@ -266,11 +281,12 @@ export function createCoreContext<
   const __numberFormatters = isObject(internalOptions.__numberFormatters)
     ? internalOptions.__numberFormatters
     : new Map<string, Intl.NumberFormat>()
-  const { __meta } = internalOptions
+  const __meta = isObject(internalOptions.__meta) ? internalOptions.__meta : {}
 
   _cid++
 
   const context = {
+    version,
     cid: _cid,
     locale,
     fallbackLocale,
@@ -310,7 +326,7 @@ export function createCoreContext<
 
   // NOTE: experimental !!
   if (__DEV__ || __FEATURE_PROD_INTLIFY_DEVTOOLS__) {
-    initI18nDevTools(context, VERSION, __meta)
+    initI18nDevTools(context, version, __meta)
   }
 
   return context

packages/core-base/src/translate.ts

@@ -21,7 +21,8 @@ import {
   isTranslateFallbackWarn,
   handleMissing,
   getLocaleChain,
-  NOT_REOSLVED
+  NOT_REOSLVED,
+  getAdditionalMeta
 } from './context'
 import { CoreWarnCodes, getWarnMessage } from './warnings'
 import { CoreErrorCodes, createCoreError } from './errors'
@@ -385,22 +386,30 @@ export function translate<Messages, Message = string>(
 
   // NOTE: experimental !!
   if (__DEV__ || __FEATURE_PROD_INTLIFY_DEVTOOLS__) {
+    // prettier-ignore
     const payloads = {
       timestamp: Date.now(),
-      key:
-        !isMessageFunction(format) && isString(key)
-          ? key
-          : (format as MessageFunctionInternal).key!,
-      locale: targetLocale!,
+      key: isString(key)
+        ? key
+        : isMessageFunction(format)
+          ? (format as MessageFunctionInternal).key!
+          : '',
+      locale: targetLocale || (isMessageFunction(format)
+          ? (format as MessageFunctionInternal).locale!
+          : ''),
       format:
-        !isMessageFunction(format) && isString(format)
-          ? format
-          : (format as MessageFunctionInternal).source!,
+        isString(format)
+        ? format
+        : isMessageFunction(format)
+          ? (format as MessageFunctionInternal).source!
+          : '',
       message: ret as string
     }
-    if (((context as unknown) as CoreInternalContext).__meta) {
-      ;(payloads as AdditionalPayloads).meta = ((context as unknown) as CoreInternalContext).__meta
-    }
+    ;(payloads as AdditionalPayloads).meta = Object.assign(
+      {},
+      ((context as unknown) as CoreInternalContext).__meta,
+      getAdditionalMeta() || {}
+    )
     translateDevTools(payloads)
   }
 

packages/vue-i18n/src/composer.ts

@@ -37,11 +37,13 @@ import {
   getLocaleChain,
   NOT_REOSLVED,
   handleFlatJson,
-  MessageFunction
+  MessageFunction,
+  setAdditionalMeta
 } from '@intlify/core-base'
 import { VueDevToolsTimelineEvents } from '@intlify/vue-devtools'
 import { I18nWarnCodes, getWarnMessage } from './warnings'
 import { I18nErrorCodes, createI18nError } from './errors'
+import { VERSION } from './misc'
 
 import type { ComponentInternalInstance, VNode, VNodeArrayChildren } from 'vue'
 import type { WritableComputedRef, ComputedRef } from '@vue/reactivity'
@@ -323,7 +325,6 @@ export interface ComposerInternalOptions<
   __i18n?: CustomBlocks<Message>
   __i18nGlobal?: CustomBlocks<Message>
   __root?: Composer<Messages, DateTimeFormats, NumberFormats, Message>
-  __meta?: MetaInfo
 }
 
 /**
@@ -1171,6 +1172,14 @@ function deepCopy(src: any, des: any): void {
   }
 }
 
+// for Intlify DevTools
+const getMetaInfo = /* #__PURE__*/ (): MetaInfo | null => {
+  const instance = getCurrentInstance()
+  return instance && (instance.type as any)[DEVTOOLS_META] // eslint-disable-line @typescript-eslint/no-explicit-any
+    ? { [DEVTOOLS_META]: (instance.type as any)[DEVTOOLS_META] } // eslint-disable-line @typescript-eslint/no-explicit-any
+    : null
+}
+
 /**
  * Create composer interface factory
  *
@@ -1199,7 +1208,7 @@ export function createComposer<
   Options['numberFormats'],
   Message
 > {
-  const { __root, __meta } = options as ComposerInternalOptions<
+  const { __root } = options as ComposerInternalOptions<
     Messages,
     DateTimeFormats,
     NumberFormats,
@@ -1312,6 +1321,7 @@ export function createComposer<
     Message
   > {
     return createCoreContext<Message>({
+      version: VERSION,
       locale: _locale.value,
       fallbackLocale: _fallbackLocale.value,
       messages: _messages.value,
@@ -1336,7 +1346,7 @@ export function createComposer<
       __v_emitter: isPlainObject(_context)
         ? ((_context as unknown) as CoreInternalContext).__v_emitter
         : undefined,
-      __meta: Object.assign({ framework: 'vue' }, __meta || {})
+      __meta: { framework: 'vue' }
     } as CoreOptions<Message>) as CoreContext<
       Messages,
       DateTimeFormats,
@@ -1434,7 +1444,18 @@ export function createComposer<
     successCondition: (val: unknown) => boolean
   ): U {
     trackReactivityValues() // track reactive dependency
-    const ret = fn(_context)
+    // NOTE: experimental !!
+    let ret: unknown
+    if (__DEV__ || __FEATURE_PROD_INTLIFY_DEVTOOLS__) {
+      try {
+        setAdditionalMeta(getMetaInfo())
+        ret = fn(_context)
+      } finally {
+        setAdditionalMeta(null)
+      }
+    } else {
+      ret = fn(_context)
+    }
     if (isNumber(ret) && ret === NOT_REOSLVED) {
       const [key, arg2] = argumentParser()
       if (
@@ -1842,8 +1863,7 @@ export function createComposer<
     [TransrateVNodeSymbol]: transrateVNode,
     [NumberPartsSymbol]: numberParts,
     [DatetimePartsSymbol]: datetimeParts,
-    [SetPluralRulesSymbol]: setPluralRules,
-    [DevToolsMetaSymbol]: __meta
+    [SetPluralRulesSymbol]: setPluralRules
   }
 
   // for vue-devtools timeline event

packages/vue-i18n/src/i18n.ts

@@ -15,7 +15,6 @@ import {
   createEmitter
 } from '@intlify/shared'
 import {
-  DEVTOOLS_META,
   getLocaleMessages,
   createComposer,
   EnableEmitter,
@@ -631,11 +630,6 @@ export function useI18n<
       composerOptions.__i18n = type.__i18n
     }
 
-    if (type[DEVTOOLS_META]) {
-      composerOptions.__meta = composerOptions.__meta || {}
-      composerOptions.__meta[DEVTOOLS_META] = type[DEVTOOLS_META]
-    }
-
     if (global) {
       composerOptions.__root = global
     }
@@ -822,7 +816,7 @@ function injectGlobalFields<Messages, DateTimeFormats, NumberFormats>(
 
   globalExportMethods.forEach(method => {
     const desc = Object.getOwnPropertyDescriptor(composer, method)
-    if (!desc) {
+    if (!desc || !desc.value) {
       throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
     }
     Object.defineProperty(app.config.globalProperties, `$${method}`, desc)

packages/vue-i18n/src/legacy.ts

@@ -1112,7 +1112,7 @@ function convertComposerOptions<
       return messages
     }, (messages || {}) as LocaleMessages<VueMessageType>) as typeof options.messages
   }
-  const { __i18n, __root, __meta } = options
+  const { __i18n, __root } = options
 
   const datetimeFormats = options.datetimeFormats
   const numberFormats = options.numberFormats
@@ -1137,8 +1137,7 @@ function convertComposerOptions<
     escapeParameter,
     inheritLocale,
     __i18n,
-    __root,
-    __meta
+    __root
   }
 }
 

packages/vue-i18n/src/mixin.ts

@@ -1,10 +1,5 @@
 import { getCurrentInstance } from 'vue'
-import {
-  getLocaleMessages,
-  SetPluralRulesSymbol,
-  DEVTOOLS_META,
-  DevToolsMetaSymbol
-} from './composer'
+import { getLocaleMessages, SetPluralRulesSymbol } from './composer'
 import { createVueI18n } from './legacy'
 import { createI18nError, I18nErrorCodes } from './errors'
 import { addTimelineEvent } from './devtools'
@@ -53,9 +48,6 @@ export function defineMixin<Messages, DateTimeFormats, NumberFormats>(
         if (options.__i18n) {
           optionsI18n.__i18n = options.__i18n
         }
-        optionsI18n.__meta = options[DEVTOOLS_META]
-          ? { [DEVTOOLS_META]: options[DEVTOOLS_META] }
-          : {}
         optionsI18n.__root = composer
         if (this === this.$root) {
           this.$i18n = mergeToRoot(vuei18n, optionsI18n)
@@ -68,9 +60,6 @@ export function defineMixin<Messages, DateTimeFormats, NumberFormats>(
         } else {
           this.$i18n = createVueI18n({
             __i18n: (options as ComposerInternalOptions<Messages>).__i18n,
-            __meta: options[DEVTOOLS_META]
-              ? { [DEVTOOLS_META]: options[DEVTOOLS_META] }
-              : {},
             __root: composer
           } as VueI18nOptions)
         }
@@ -182,16 +171,6 @@ function mergeToRoot<Messages, DateTimeFormats, NumberFormats>(
   ;(root as any).__composer[SetPluralRulesSymbol](
     options.pluralizationRules || root.pluralizationRules
   )
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  if (
-    (options as any)[DEVTOOLS_META] &&
-    !(root as any).__composer[DevToolsMetaSymbol]
-  ) {
-    ;(root as any).__composer[DevToolsMetaSymbol] = {
-      [DEVTOOLS_META]: (options as any)[DEVTOOLS_META]
-    }
-  }
-  /* eslint-enable @typescript-eslint/no-explicit-any */
   const messages = getLocaleMessages<VueMessageType>(root.locale, {
     messages: options.messages,
     __i18n: options.__i18n

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

@@ -8,7 +8,7 @@ import type {
   DateTimeOptions,
   NumberOptions
 } from '@intlify/core'
-import type { CustomBlocks, DEVTOOLS_META, VueMessageType } from './composer'
+import type { CustomBlocks, VueMessageType } from './composer'
 import type {
   VueI18n,
   VueI18nOptions,