breaking: split devtools production feature flags (#434)

To provide experimental features for `@intlify/devtools`, feature flags have been separated as follows.

- `__VUE_I18N_PROD_DEVTOOLS__`: enable/disable vue-devtools support in production, default: false
- `__INTLIFY_PROD_DEVTOOLS__`: enable/disable `@intlify/devtools` support in production, default: false

Previously, `__INTLIFY_PROD_DEVTOOLS__` setting flagged the use of both vue-devtools and `@intlify/devtools` in production.

In later v9.1, The feature flags for vue-devtools are now enabled/disabled by setting `__VUE_I18N_PROD_DEVTOOLS__`.

Author: kazupon

docs/guide/advanced/optimization.md

@@ -93,7 +93,11 @@ The `esm-bundler` builds now exposes global feature flags that can be overwritte
 
 - `__VUE_I18N_FULL_INSTALL__` (enable/disable, in addition to vue-i18n APIs, components and directives all fully support installation: `true`)
 - `__VUE_I18N_LEGACY_API__` (enable/disable vue-i18n legacy style APIs support, default: `true`)
-- `__INTLIFY_PROD_DEVTOOLS__` (enable/disable intlify-devtools and vue-devtools support in production, default: `false`)
+- `__VUE_I18N_PROD_DEVTOOLS__` (enable/disable vue-devtools support in production, default: `false`)
+- `__INTLIFY_PROD_DEVTOOLS__` (enable/disable `@intlify/devtools` support in production, default: `false`)
+
+:::warning NOTICE
+`__INTLIFY_PROD_DEVTOOLS__` flag is experimental, and `@intlify/devtools` is WIP yet.
 
 The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree shaking in the final bundle. To configure these flags:
 

packages/core-base/src/context.ts

@@ -309,8 +309,7 @@ export function createCoreContext<
   }
 
   // NOTE: experimental !!
-  // TODO: should be checked with feature flags
-  if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+  if (__DEV__ || __FEATURE_PROD_INTLIFY_DEVTOOLS__) {
     initI18nDevTools(context, VERSION, __meta)
   }
 

packages/core-base/src/translate.ts

@@ -384,8 +384,7 @@ export function translate<Messages, Message = string>(
   const ret = postTranslation ? postTranslation(messaged) : messaged
 
   // NOTE: experimental !!
-  // TODO: should be checked with feature flags
-  if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+  if (__DEV__ || __FEATURE_PROD_INTLIFY_DEVTOOLS__) {
     const payloads = {
       timestamp: Date.now(),
       key:

packages/global.d.ts

@@ -11,7 +11,8 @@ declare let __BUNDLE_FILENAME__: string
 declare let __COMMIT__: string
 
 // Feature flags
-declare let __FEATURE_PROD_DEVTOOLS__: boolean
+declare let __FEATURE_PROD_VUE_DEVTOOLS__: boolean
+declare let __FEATURE_PROD_INTLIFY_DEVTOOLS__: boolean
 declare let __FEATURE_LEGACY_API__: boolean
 declare let __FEATURE_FULL_INSTALL__: boolean
 declare let __FEATURE_ESM_BUNDLER_WARN__: boolean

packages/size-check-vue-i18n/rollup.config.js

@@ -28,6 +28,7 @@ const config = {
       __VUE_PROD_DEVTOOLS__: false,
       __VUE_I18N_LEGACY_API__: false,
       __VUE_I18N_FULL_INSTALL__: false,
+      __VUE_I18N_PROD_DEVTOOLS__: false,
       __INTLIFY_PROD_DEVTOOLS__: false,
       'process.env.NODE_ENV': JSON.stringify('production')
     }),

packages/vue-i18n/README.md

@@ -7,8 +7,9 @@ Internationalization plugin for Vue.js
 ### From CDN or without a Bundler
 
 - **`vue-i18n(.runtime).global(.prod).js`**:
+
   - For direct use via `<script src="...">` in the browser. Exposes the `VueI18n` global
-  - Note that global builds are not [UMD](https://github.com/umdjs/umd) builds.  They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and is only meant for direct use via `<script src="...">`
+  - Note that global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and is only meant for direct use via `<script src="...">`
   - In-browser locale messages compilation:
     - **`vue-i18n.global.js`** is the "full" build that includes both the compiler and the runtime so it supports compiling locale messages on the fly
     - **`vue-i18n.runtime.global.js`** contains only the runtime and requires locale messages to be pre-compiled during a build step
@@ -51,7 +52,10 @@ The `esm-bundler` builds now exposes global feature flags that can be overwritte
 
 - `__VUE_I18N_FULL_INSTALL__` (enable/disable, in addition to vue-i18n APIs, components and directives all fully support installation: `true`)
 - `__VUE_I18N_LEGACY_API__` (enable/disable vue-i18n legacy style APIs support, default: `true`)
-- `__INTLIFY_PROD_DEVTOOLS__` (enable/disable intlify-devtools and vue-devtools support in production, default: `false`)
+- `__VUE_I18N_PROD_DEVTOOLS__` (enable/disable vue-devtools support in production, default: `false`)
+- `__INTLIFY_PROD_DEVTOOLS__` (enable/disable `@intlify/devtools` support in production, default: `false`)
+
+> NOTE: `__INTLIFY_PROD_DEVTOOLS__` flag is experimental, and `@intlify/devtools` is WIP yet.
 
 The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree shaking in the final bundle. To configure these flags:
 

packages/vue-i18n/src/devtools.ts

@@ -71,22 +71,22 @@ export async function enableDevTools<
           })
 
           api.on.inspectComponent(({ componentInstance, instanceData }) => {
-            if (componentInstance.vnode.el.__INTLIFY__ && instanceData) {
+            if (componentInstance.vnode.el.__VUE_I18N__ && instanceData) {
               if (i18n.mode === 'legacy') {
                 // ignore global scope on legacy mode
                 if (
-                  componentInstance.vnode.el.__INTLIFY__ !==
+                  componentInstance.vnode.el.__VUE_I18N__ !==
                   ((i18n.global as unknown) as VueI18nInternal).__composer
                 ) {
                   inspectComposer(
                     instanceData,
-                    componentInstance.vnode.el.__INTLIFY__ as Composer
+                    componentInstance.vnode.el.__VUE_I18N__ as Composer
                   )
                 }
               } else {
                 inspectComposer(
                   instanceData,
-                  componentInstance.vnode.el.__INTLIFY__ as Composer
+                  componentInstance.vnode.el.__VUE_I18N__ as Composer
                 )
               }
             }
@@ -157,9 +157,9 @@ function updateComponentTreeTags<
   const global = i18n.mode === 'composition'
     ? i18n.global
     : (i18n.global as unknown as VueI18nInternal).__composer
-  if (instance && instance.vnode.el.__INTLIFY__) {
+  if (instance && instance.vnode.el.__VUE_I18N__) {
     // add custom tags local scope only
-    if (instance.vnode.el.__INTLIFY__ !== global) {
+    if (instance.vnode.el.__VUE_I18N__ !== global) {
       const label =
         instance.type.name || instance.type.displayName || instance.type.__file
       const tag = {

packages/vue-i18n/src/i18n.ts

@@ -359,7 +359,7 @@ export function createI18n<
     },
     // install plugin
     async install(app: App, ...options: unknown[]): Promise<void> {
-      if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && !__NODE_JS__) {
+      if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__) {
         app.__VUE_I18N__ = i18n as _I18n
       }
 
@@ -400,7 +400,7 @@ export function createI18n<
       }
 
       // setup vue-devtools plugin
-      if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && !__NODE_JS__) {
+      if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__) {
         const ret = await enableDevTools(app, i18n as _I18n)
         if (!ret) {
           throw createI18nError(I18nErrorCodes.CANNOT_SETUP_VUE_DEVTOOLS_PLUGIN)
@@ -721,11 +721,11 @@ function setupLifeCycle<Messages, DateTimeFormats, NumberFormats>(
   onMounted(() => {
     // inject composer instance to DOM for intlify-devtools
     if (
-      (__DEV__ || __FEATURE_PROD_DEVTOOLS__) &&
+      (__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) &&
       !__NODE_JS__ &&
       target.vnode.el
     ) {
-      target.vnode.el.__INTLIFY__ = composer
+      target.vnode.el.__VUE_I18N__ = composer
       emitter = createEmitter<VueDevToolsEmitterEvents>()
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const _composer = composer as any
@@ -737,16 +737,16 @@ function setupLifeCycle<Messages, DateTimeFormats, NumberFormats>(
   onUnmounted(() => {
     // remove composer instance from DOM for intlify-devtools
     if (
-      (__DEV__ || __FEATURE_PROD_DEVTOOLS__) &&
+      (__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) &&
       !__NODE_JS__ &&
       target.vnode.el &&
-      target.vnode.el.__INTLIFY__
+      target.vnode.el.__VUE_I18N__
     ) {
       emitter && emitter.off('*', addTimelineEvent)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const _composer = composer as any
       _composer[DisableEmitter] && _composer[DisableEmitter]()
-      delete target.vnode.el.__INTLIFY__
+      delete target.vnode.el.__VUE_I18N__
     }
     i18n.__deleteInstance(target)
   }, target)

packages/vue-i18n/src/index.ts

@@ -79,16 +79,16 @@ export { I18nPluginOptions } from './plugin'
 export { VERSION } from './misc'
 
 // NOTE: experimental !!
-// TODO: should be checked with feature flags
-if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+if (__DEV__ || __FEATURE_PROD_INTLIFY_DEVTOOLS__) {
   const target = getGlobalThis()
+  target.__INTLIFY__ = true
   setDevToolsHook(target.__INTLIFY_DEVTOOLS_GLOBAL_HOOK__)
 }
 
 if (__ESM_BUNDLER__ && !__TEST__) {
   initFeatureFlags()
 }
 
-if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+if (__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) {
   initDev()
 }

packages/vue-i18n/src/misc.ts

@@ -27,8 +27,12 @@ export function initFeatureFlags(): void {
     getGlobalThis().__VUE_I18N_LEGACY_API__ = true
   }
 
-  if (typeof __FEATURE_PROD_DEVTOOLS__ !== 'boolean') {
+  if (typeof __FEATURE_PROD_VUE_DEVTOOLS__ !== 'boolean') {
     needWarn = true
+    getGlobalThis().__VUE_I18N_PROD_DEVTOOLS__ = false
+  }
+
+  if (typeof __FEATURE_PROD_INTLIFY_DEVTOOLS__ !== 'boolean') {
     getGlobalThis().__INTLIFY_PROD_DEVTOOLS__ = false
   }
 
@@ -50,10 +54,6 @@ export function initFeatureFlags(): void {
  * istanbul-ignore-next
  */
 export function initDev(): void {
-  const target = getGlobalThis()
-
-  target.__INTLIFY__ = true
-
   if (__BROWSER__) {
     console.info(
       `You are running a development build of vue-i18n.\n` +