feat: support for devtools interface (#97)

Author: kazupon

jest.config.js

@@ -62,7 +62,13 @@ module.exports = {
       diagnostics: false
     },
     __DEV__: true,
-    __VERSION__: require('./package.json').version
+    __TEST__: true,
+    __VERSION__: require('./package.json').version,
+    __BROWSER__: false,
+    __GLOBAL__: false,
+    __ESM_BUNDLER__: true,
+    __ESM_BROWSER__: false,
+    __NODE_JS__: true
   },
 
   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.

rollup.config.js

@@ -168,6 +168,10 @@ function createReplacePlugin(
     __ESM_BUNDLER__: isBundlerESMBuild,
     __ESM_BROWSER__: isBrowserESMBuild,
     __NODE_JS__: isNodeBuild,
+    // feature flags
+    __FEATURE_PROD_DEVTOOLS__: isBundlerESMBuild
+      ? `__INTLFY_PROD_DEVTOOLS__`
+      : false,
     ...(isProduction && isBrowserBuild
       ? {
           'emitError(': `/*#__PURE__*/ emitError(`,

src/devtools.ts

@@ -0,0 +1,30 @@
+import { I18n } from './i18n'
+
+interface I18nRecord {
+  id: number
+  version: string
+}
+
+const enum DevtoolsHooks {
+  REGISTER = 'intlify:register'
+}
+
+interface DevtoolsHook {
+  emit(event: string, ...payload: unknown[]): void
+  on(event: string, handler: Function): void
+  off(event: string, handler: Function): void
+  i18nRecords: I18nRecord[]
+}
+
+export let devtools: DevtoolsHook
+
+export function setDevtoolsHook(hook: DevtoolsHook): void {
+  devtools = hook
+}
+
+export function devtoolsRegisterI18n(i18n: I18n, version: string): void {
+  if (!devtools) {
+    return
+  }
+  devtools.emit(DevtoolsHooks.REGISTER, i18n, version)
+}

src/global.d.ts

@@ -1,3 +1,9 @@
 // Global compile-time constants
-declare let __VERSION__: string
 declare let __DEV__: boolean
+declare let __TEST__: boolean
+declare let __ESM_BUNDLER__: boolean
+declare let __BROWSER__: boolean
+declare let __VERSION__: string
+
+// Feature flags
+declare let __FEATURE_PROD_DEVTOOLS__: boolean

src/i18n.ts

@@ -1,7 +1,7 @@
 import {
   inject,
-  // onMounted,
-  // onUnmounted,
+  onMounted,
+  onUnmounted,
   InjectionKey,
   getCurrentInstance,
   ComponentInternalInstance,
@@ -28,6 +28,8 @@ import { I18nErrorCodes, createI18nError } from './errors'
 import { apply } from './plugin'
 import { defineMixin } from './mixin'
 import { isEmptyObject, warn } from './utils'
+import { devtoolsRegisterI18n } from './devtools'
+import { VERSION } from './misc'
 
 /**
  * I18n Options for `createI18n`
@@ -288,6 +290,10 @@ export function createI18n<
     }
   }
 
+  if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+    devtoolsRegisterI18n(i18n, VERSION)
+  }
+
   return i18n
 }
 
@@ -430,13 +436,11 @@ export function useI18n<
       DateTimeFormats,
       NumberFormats
     >
-    /* NOTE: DISABLE for intlify-devtools
     setupLifeCycle<Messages, DateTimeFormats, NumberFormats>(
       i18nInternal,
       instance,
       composer
     )
-    */
 
     i18nInternal.__setInstance<
       Messages,
@@ -493,25 +497,23 @@ function getComposer<Messages, DateTimeFormats, NumberFormats>(
   return composer
 }
 
-/*
 function setupLifeCycle<Messages, DateTimeFormats, NumberFormats>(
   i18n: I18nInternal,
   target: ComponentInternalInstance,
   composer: Composer<Messages, DateTimeFormats, NumberFormats>
 ): void {
   onMounted(() => {
     // inject composer instance to DOM for intlify-devtools
-    if (target.proxy) {
-      target.proxy.$el.__intlify__ = composer
+    if (target.vnode.el) {
+      target.vnode.el.__intlify__ = composer
     }
   }, target)
 
   onUnmounted(() => {
     // remove composer instance from DOM for intlify-devtools
-    if (target.proxy && target.proxy.$el.__intlify__) {
-      delete target.proxy.$el.__intlify__
+    if (target.vnode.el && target.vnode.el.__INTLIFY__) {
+      delete target.vnode.el.__intlify__
     }
     i18n.__deleteInstance(target)
   }, target)
 }
-*/

src/index.ts

@@ -1,3 +1,5 @@
+import { initDev, initFeatureFlags } from './misc'
+
 export { generateFormatCacheKey, friendlyJSONstringify } from './utils'
 export { Path, PathValue } from './path'
 export { createParser, Parser } from './message/parser'
@@ -56,8 +58,10 @@ export {
   ComponetI18nScope
 } from './components'
 export { I18nPluginOptions } from './plugin'
+export { VERSION } from './misc'
+
+if (__ESM_BUNDLER__ && !__TEST__) {
+  initFeatureFlags()
+}
 
-/**
- * vue-i18n version
- */
-export const VERSION = __VERSION__
+__DEV__ && initDev()

src/misc.ts

@@ -0,0 +1,43 @@
+import { getGlobalThis } from './utils'
+import { setDevtoolsHook } from './devtools'
+
+export const VERSION = __VERSION__
+
+/**
+ * This is only called in esm-bundler builds.
+ * istanbul-ignore-next
+ */
+export function initFeatureFlags(): void {
+  let needWarn = false
+
+  if (typeof __FEATURE_PROD_DEVTOOLS__ !== 'boolean') {
+    needWarn = true
+    getGlobalThis().__INTLIFY_PROD_DEVTOOLS__ = false
+  }
+
+  if (__DEV__ && needWarn) {
+    console.warn(
+      `You are running the esm-bundler build of vue-i18n. It is recommended to ` +
+        `configure your bundler to explicitly replace feature flag globals ` +
+        `with boolean literals to get proper tree-shaking in the final bundle.`
+    )
+  }
+}
+
+/**
+ * This is only called development env
+ * istanbul-ignore-next
+ */
+export function initDev(): void {
+  const target = getGlobalThis()
+
+  target.__INTLIFY__ = true
+  setDevtoolsHook(target.__INTLIFY_DEVTOOLS_GLOBAL_HOOK__)
+
+  if (__BROWSER__) {
+    console.info(
+      `You are running a development build of Vue.\n` +
+        `Make sure to use the production build (*.prod.js) when deploying for production.`
+    )
+  }
+}

src/mixin.ts

@@ -230,7 +230,7 @@ export function defineMixin<Messages, DateTimeFormats, NumberFormats>(
     },
 
     mounted(): void {
-      this.$el.__intlify__ = this.$i18n.__composer
+      this.$el.__INTLIFY__ = this.$i18n.__composer
     },
 
     beforeDestroy(): void {
@@ -240,7 +240,7 @@ export function defineMixin<Messages, DateTimeFormats, NumberFormats>(
         throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
       }
 
-      delete this.$el.__intlify__
+      delete this.$el.__INTLIFY__
 
       delete this.$t
       delete this.$tc

src/utils.ts

@@ -5,7 +5,7 @@
 
 const RE_ARGS = /\{([0-9a-zA-Z]+)\}/g
 
-// eslint-disable-next-line
+/* eslint-disable */
 export function format(message: string, ...args: any): string {
   if (args.length === 1 && isObject(args[0])) {
     args = args[0]
@@ -20,7 +20,6 @@ export function format(message: string, ...args: any): string {
     }
   )
 }
-/* eslint-enable @typescript-eslint/no-explicit-any */
 
 export const generateFormatCacheKey = (
   locale: string,
@@ -56,6 +55,26 @@ export function warn(msg: string, err?: Error): void {
   }
 }
 
+let _globalThis: any
+export const getGlobalThis = (): any => {
+  // prettier-ignore
+  return (
+    _globalThis ||
+    (_globalThis =
+      typeof globalThis !== 'undefined'
+        ? globalThis
+        : typeof self !== 'undefined'
+          ? self
+          : typeof window !== 'undefined'
+            ? window
+            : typeof global !== 'undefined'
+              ? global
+              : {})
+  )
+}
+
+/* eslint-enable */
+
 /**
  * Useful Utilites By Evan you
  * Modified by kazuya kawaguchi