From 93e80ff034c8bf57c74b4cba800269ddeec4a55c Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sat, 2 Jan 2021 01:24:33 +0900 Subject: [PATCH] improvement: vue-i18n debugging on vue-devtools --- packages/vue-i18n/src/devtools.ts | 114 ++++++++++++++---------------- packages/vue-i18n/src/i18n.ts | 14 +--- packages/vue-i18n/src/misc.ts | 2 - 3 files changed, 55 insertions(+), 75 deletions(-) diff --git a/packages/vue-i18n/src/devtools.ts b/packages/vue-i18n/src/devtools.ts index 19a2ff075..f0705d44a 100644 --- a/packages/vue-i18n/src/devtools.ts +++ b/packages/vue-i18n/src/devtools.ts @@ -17,7 +17,6 @@ import type { App } from 'vue' import type { DevtoolsPluginApi, InspectedComponentData, - CustomInspectorNode, CustomInspectorState, ComponentStateBase, HookPayloads @@ -34,43 +33,6 @@ type _I18n< Legacy extends boolean > = I18n & I18nInternal -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< - Messages, - DateTimeFormats, - NumberFormats, - Legacy extends boolean ->( - i18n: I18n, - version: string -): void { - if (!devtools) { - return - } - devtools.emit(DevtoolsHooks.REGISTER, i18n, version) -} - let devtoolsApi: DevtoolsPluginApi export async function enableDevTools< @@ -96,7 +58,8 @@ export async function enableDevTools< api.on.walkComponentTree((payload, ctx) => { updateComponentTreeDataTags( ctx.currentAppRecord, - payload.componentTreeData + payload.componentTreeData, + i18n ) }) @@ -106,10 +69,23 @@ export async function enableDevTools< componentInstance.vnode.el.__INTLIFY__ && payload.instanceData ) { - inspectComposer( - payload.instanceData, - componentInstance.vnode.el.__INTLIFY__ as Composer - ) + if (i18n.mode === 'legacy') { + // ignore global scope on legacy mode + if ( + componentInstance.vnode.el.__INTLIFY__ !== + ((i18n.global as unknown) as VueI18nInternal).__composer + ) { + inspectComposer( + payload.instanceData, + componentInstance.vnode.el.__INTLIFY__ as Composer + ) + } + } else { + inspectComposer( + payload.instanceData, + componentInstance.vnode.el.__INTLIFY__ as Composer + ) + } } }) @@ -155,23 +131,36 @@ export async function enableDevTools< }) } -function updateComponentTreeDataTags( +function updateComponentTreeDataTags< + Messages, + DateTimeFormats, + NumberFormats, + Legacy extends boolean +>( appRecord: AppRecord, - treeData: ComponentTreeNode + treeData: ComponentTreeNode, + i18n: _I18n ): void { const instance = appRecord.instanceMap.get(treeData.id) if (instance && instance.vnode.el.__INTLIFY__) { - const label = - instance.type.name || instance.type.displayName || instance.type.__file - const tag = { - label: `i18n (${label} Scope)`, - textColor: 0x000000, - backgroundColor: 0xffcd19 + // prettier-ignore + const global = i18n.mode === 'composition' + ? i18n.global + : (i18n.global as unknown as VueI18nInternal).__composer + // add custom tags local scope only + if (instance.vnode.el.__INTLIFY__ !== global) { + const label = + instance.type.name || instance.type.displayName || instance.type.__file + const tag = { + label: `i18n (${label} Scope)`, + textColor: 0x000000, + backgroundColor: 0xffcd19 + } + treeData.tags = [tag] } - treeData.tags = [tag] } for (const node of treeData.children) { - updateComponentTreeDataTags(appRecord, node) + updateComponentTreeDataTags(appRecord, node, i18n) } } @@ -275,26 +264,31 @@ function registerScope< payload: HookPayloads[Hooks.GET_INSPECTOR_TREE], i18n: _I18n ): void { - const children: CustomInspectorNode[] = [] + payload.rootNodes.push({ + id: 'global', + label: 'Global Scope' + }) + // prettier-ignore + const global = i18n.mode === 'composition' + ? i18n.global + : (i18n.global as unknown as VueI18nInternal).__composer for (const [keyInstance, instance] of i18n.__instances) { // prettier-ignore const composer = i18n.mode === 'composition' ? instance : (instance as unknown as VueI18nInternal).__composer + if (global === composer) { + continue + } const label = keyInstance.type.name || keyInstance.type.displayName || keyInstance.type.__file - children.push({ + payload.rootNodes.push({ id: composer.id.toString(), label: `${label} Scope` }) } - payload.rootNodes.push({ - id: 'global', - label: 'Global Scope', - children - }) } function inspectScope< diff --git a/packages/vue-i18n/src/i18n.ts b/packages/vue-i18n/src/i18n.ts index 35bf5ec87..4ee0589d9 100644 --- a/packages/vue-i18n/src/i18n.ts +++ b/packages/vue-i18n/src/i18n.ts @@ -24,13 +24,8 @@ import { I18nWarnCodes, getWarnMessage } from './warnings' import { I18nErrorCodes, createI18nError } from './errors' import { apply } from './plugin' import { defineMixin } from './mixin' -import { - devtoolsRegisterI18n, - enableDevTools, - addTimelineEvent -} from './devtools' +import { enableDevTools, addTimelineEvent } from './devtools' import { createEmitter } from '@intlify/core-base' -import { VERSION } from './misc' import type { ComponentInternalInstance, ComponentOptions, App } from 'vue' import type { @@ -449,13 +444,6 @@ export function createI18n< } } - if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && !__NODE_JS__) { - devtoolsRegisterI18n( - i18n as I18n, - VERSION - ) - } - return i18n as I18n } diff --git a/packages/vue-i18n/src/misc.ts b/packages/vue-i18n/src/misc.ts index 030cbf056..d8a4f147e 100644 --- a/packages/vue-i18n/src/misc.ts +++ b/packages/vue-i18n/src/misc.ts @@ -1,5 +1,4 @@ import { getGlobalThis } from '@intlify/shared' -import { setDevtoolsHook } from './devtools' /** * Vue I18n Version @@ -50,7 +49,6 @@ export function initDev(): void { const target = getGlobalThis() target.__INTLIFY__ = true - setDevtoolsHook(target.__INTLIFY_DEVTOOLS_GLOBAL_HOOK__) if (__BROWSER__) { console.info(