diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 800dcce35..7a91ec4e5 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -91,8 +91,8 @@ The `build` script builds all public packages (packages without `private: true` Packages to build can be specified with fuzzy matching: ```bash -# build compiler only -yarn build compiler +# build message-compiler only +yarn build message-compiler # build all packages yarn build --all @@ -128,13 +128,13 @@ By default, each package will be built in multiple distribution formats as speci For example, to build `compiler` with the global build only: ```bash -yarn build compiler -f global +yarn build message-compiler -f global ``` Multiple formats can be specified as a comma-separated list: ```bash -yarn build compiler -f esm-browser,cjs +yarn build message-compiler -f esm-browser,cjs ``` #### Build with Source Maps diff --git a/packages/core-base/src/context.ts b/packages/core-base/src/context.ts index 212b9e7ca..cc5c7682d 100644 --- a/packages/core-base/src/context.ts +++ b/packages/core-base/src/context.ts @@ -332,7 +332,8 @@ export function handleMissing( emitter.emit(DevToolsTimelineEvents.MISSING, { locale, key, - type + type, + groupId: `${type}:${key}` }) } } diff --git a/packages/core-base/src/datetime.ts b/packages/core-base/src/datetime.ts index 9f8a025f8..bc20ae1f3 100644 --- a/packages/core-base/src/datetime.ts +++ b/packages/core-base/src/datetime.ts @@ -190,7 +190,8 @@ export function datetime( type, key, from, - to + to, + groupId: `${type}:${key}` }) } } diff --git a/packages/core-base/src/debugger/constants.ts b/packages/core-base/src/debugger/constants.ts index 692819e53..07f76b3aa 100644 --- a/packages/core-base/src/debugger/constants.ts +++ b/packages/core-base/src/debugger/constants.ts @@ -5,19 +5,13 @@ import type { Locale, CoreMissingType } from '../context' export const enum DevToolsIDs { PLUGIN = 'vue-devtools-plugin-vue-i18n', CUSTOM_INSPECTOR = 'vue-i18n-resource-inspector', - TIMELINE_COMPILE_ERROR = 'vue-i18n-compile-error', - TIMELINE_MISSING = 'vue-i18n-missing', - TIMELINE_FALLBACK = 'vue-i18n-fallback', - TIMELINE_PERFORMANCE = 'vue-i18n-performance' + TIMELINE = 'vue-i18n-timeline' } export const DevToolsLabels: Record = { [DevToolsIDs.PLUGIN]: 'Vue I18n devtools', [DevToolsIDs.CUSTOM_INSPECTOR]: 'I18n Resources', - [DevToolsIDs.TIMELINE_COMPILE_ERROR]: 'Vue I18n: Compile Errors', - [DevToolsIDs.TIMELINE_MISSING]: 'Vue I18n: Missing', - [DevToolsIDs.TIMELINE_FALLBACK]: 'Vue I18n: Fallback', - [DevToolsIDs.TIMELINE_PERFORMANCE]: 'Vue I18n: Performance' + [DevToolsIDs.TIMELINE]: 'Vue I18n' } export const DevToolsPlaceholders: Record = { @@ -25,10 +19,7 @@ export const DevToolsPlaceholders: Record = { } export const DevToolsTimelineColors: Record = { - [DevToolsIDs.TIMELINE_COMPILE_ERROR]: 0xff0000, - [DevToolsIDs.TIMELINE_MISSING]: 0xffcd19, - [DevToolsIDs.TIMELINE_FALLBACK]: 0xffcd19, - [DevToolsIDs.TIMELINE_PERFORMANCE]: 0xffcd19 + [DevToolsIDs.TIMELINE]: 0xffcd19 } export const enum DevToolsTimelineEvents { @@ -46,46 +37,42 @@ export type DevToolsTimelineEventPayloads = { error: string start?: number end?: number + groupId?: string } [DevToolsTimelineEvents.MISSING]: { locale: Locale key: Path type: CoreMissingType + groupId?: string } [DevToolsTimelineEvents.FALBACK]: { key: Path type: CoreMissingType from?: Locale to: Locale | 'global' + groupId?: string } [DevToolsTimelineEvents.MESSAGE_RESOLVE]: { type: DevToolsTimelineEvents.MESSAGE_RESOLVE key: Path message: PathValue time: number + groupId?: string } [DevToolsTimelineEvents.MESSAGE_COMPILATION]: { type: DevToolsTimelineEvents.MESSAGE_COMPILATION message: PathValue time: number + groupId?: string } [DevToolsTimelineEvents.MESSAGE_EVALUATION]: { type: DevToolsTimelineEvents.MESSAGE_EVALUATION value: unknown time: number + groupId?: string } } -export const DevToolsTimelineLayerMaps: Record = { - [DevToolsTimelineEvents.COMPILE_ERROR]: DevToolsIDs.TIMELINE_COMPILE_ERROR, - [DevToolsTimelineEvents.MISSING]: DevToolsIDs.TIMELINE_MISSING, - [DevToolsTimelineEvents.FALBACK]: DevToolsIDs.TIMELINE_FALLBACK, - [DevToolsTimelineEvents.MESSAGE_RESOLVE]: DevToolsIDs.TIMELINE_PERFORMANCE, - [DevToolsTimelineEvents.MESSAGE_COMPILATION]: - DevToolsIDs.TIMELINE_PERFORMANCE, - [DevToolsTimelineEvents.MESSAGE_EVALUATION]: DevToolsIDs.TIMELINE_PERFORMANCE -} - export type DevToolsEmitterEvents = { [DevToolsTimelineEvents.COMPILE_ERROR]: DevToolsTimelineEventPayloads[DevToolsTimelineEvents.COMPILE_ERROR] [DevToolsTimelineEvents.MISSING]: DevToolsTimelineEventPayloads[DevToolsTimelineEvents.MISSING] diff --git a/packages/core-base/src/number.ts b/packages/core-base/src/number.ts index d22dd8e71..ba5dde8a7 100644 --- a/packages/core-base/src/number.ts +++ b/packages/core-base/src/number.ts @@ -184,7 +184,8 @@ export function number( type, key, from, - to + to, + groupId: `${type}:${key}` }) } } diff --git a/packages/core-base/src/translate.ts b/packages/core-base/src/translate.ts index 34e97615d..2a2d1c21e 100644 --- a/packages/core-base/src/translate.ts +++ b/packages/core-base/src/translate.ts @@ -396,7 +396,8 @@ function resolveMessageFormat( type, key, from, - to + to, + groupId: `${type}:${key}` }) } } @@ -429,7 +430,8 @@ function resolveMessageFormat( type: DevToolsTimelineEvents.MESSAGE_RESOLVE, key, message: format, - time: end - start + time: end - start, + groupId: `${type}:${key}` }) } if (startTag && endTag && mark && measure) { @@ -503,7 +505,8 @@ function compileMessasgeFormat( emitter.emit(DevToolsTimelineEvents.MESSAGE_COMPILATION, { type: DevToolsTimelineEvents.MESSAGE_COMPILATION, message: format, - time: end - start + time: end - start, + groupId: `${'translate'}:${key}` }) } if (startTag && endTag && mark && measure) { @@ -545,7 +548,8 @@ function evaluateMessage( emitter.emit(DevToolsTimelineEvents.MESSAGE_EVALUATION, { type: DevToolsTimelineEvents.MESSAGE_EVALUATION, value: messaged, - time: end - start + time: end - start, + groupId: `${'translate'}:${(msg as MessageFunctionInternal).key}` }) } if (startTag && endTag && mark && measure) { @@ -617,7 +621,8 @@ function getCompileOptions( message: source, error: err.message, start: err.location && err.location.start.offset, - end: err.location && err.location.end.offset + end: err.location && err.location.end.offset, + groupId: `${'translate'}:${key}` }) } console.error(codeFrame ? `${message}\n${codeFrame}` : message) diff --git a/packages/vue-i18n/package.json b/packages/vue-i18n/package.json index 464ad9b3d..acee04a79 100644 --- a/packages/vue-i18n/package.json +++ b/packages/vue-i18n/package.json @@ -36,7 +36,7 @@ "dependencies": { "@intlify/core-base": "9.0.0-beta.16", "@intlify/shared": "9.0.0-beta.16", - "@vue/devtools-api": "^6.0.0-beta.2" + "@vue/devtools-api": "^6.0.0-beta.3" }, "peerDependencies": { "vue": "^3.0.0" diff --git a/packages/vue-i18n/src/composer.ts b/packages/vue-i18n/src/composer.ts index e2d2a5411..f6adab380 100644 --- a/packages/vue-i18n/src/composer.ts +++ b/packages/vue-i18n/src/composer.ts @@ -1252,7 +1252,8 @@ export function createComposer< emitter.emit(DevToolsTimelineEvents.FALBACK, { type: warnType, key, - to: 'global' + to: 'global', + groupId: `${warnType}:${key}` }) } } diff --git a/packages/vue-i18n/src/devtools.ts b/packages/vue-i18n/src/devtools.ts index 0a6b955e2..19a2ff075 100644 --- a/packages/vue-i18n/src/devtools.ts +++ b/packages/vue-i18n/src/devtools.ts @@ -1,11 +1,15 @@ -import { setupDevtoolsPlugin, Hooks } from '@vue/devtools-api' +import { + setupDevtoolsPlugin, + Hooks, + AppRecord, + ComponentTreeNode +} from '@vue/devtools-api' import { DevToolsIDs, DevToolsTimelineColors, DevToolsLabels, DevToolsPlaceholders, - DevToolsTimelineEvents, - DevToolsTimelineLayerMaps + DevToolsTimelineEvents } from '@intlify/core-base' import { isFunction, isObject } from '@intlify/shared' @@ -89,6 +93,13 @@ export async function enableDevTools< api => { devtoolsApi = api + api.on.walkComponentTree((payload, ctx) => { + updateComponentTreeDataTags( + ctx.currentAppRecord, + payload.componentTreeData + ) + }) + api.on.inspectComponent(payload => { const componentInstance = payload.componentInstance if ( @@ -129,27 +140,9 @@ export async function enableDevTools< }) api.addTimelineLayer({ - id: DevToolsIDs.TIMELINE_COMPILE_ERROR, - label: DevToolsLabels[DevToolsIDs.TIMELINE_COMPILE_ERROR], - color: DevToolsTimelineColors[DevToolsIDs.TIMELINE_COMPILE_ERROR] - }) - - api.addTimelineLayer({ - id: DevToolsIDs.TIMELINE_PERFORMANCE, - label: DevToolsLabels[DevToolsIDs.TIMELINE_PERFORMANCE], - color: DevToolsTimelineColors[DevToolsIDs.TIMELINE_PERFORMANCE] - }) - - api.addTimelineLayer({ - id: DevToolsIDs.TIMELINE_MISSING, - label: DevToolsLabels[DevToolsIDs.TIMELINE_MISSING], - color: DevToolsTimelineColors[DevToolsIDs.TIMELINE_MISSING] - }) - - api.addTimelineLayer({ - id: DevToolsIDs.TIMELINE_FALLBACK, - label: DevToolsLabels[DevToolsIDs.TIMELINE_FALLBACK], - color: DevToolsTimelineColors[DevToolsIDs.TIMELINE_FALLBACK] + id: DevToolsIDs.TIMELINE, + label: DevToolsLabels[DevToolsIDs.TIMELINE], + color: DevToolsTimelineColors[DevToolsIDs.TIMELINE] }) resolve(true) @@ -162,6 +155,26 @@ export async function enableDevTools< }) } +function updateComponentTreeDataTags( + appRecord: AppRecord, + treeData: ComponentTreeNode +): 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 + } + treeData.tags = [tag] + } + for (const node of treeData.children) { + updateComponentTreeDataTags(appRecord, node) + } +} + function inspectComposer( instanceData: InspectedComponentData, composer: Composer @@ -386,12 +399,26 @@ export function addTimelineEvent( payload?: DevToolsTimelineEventPayloads[DevToolsTimelineEvents] ): void { if (devtoolsApi) { + let groupId: string | undefined + if (payload && 'groupId' in payload) { + groupId = payload.groupId + delete payload.groupId + } devtoolsApi.addTimelineEvent({ - layerId: DevToolsTimelineLayerMaps[event], + layerId: DevToolsIDs.TIMELINE, event: { + title: event, + groupId, time: Date.now(), meta: {}, - data: payload || {} + data: payload || {}, + logType: + event === DevToolsTimelineEvents.COMPILE_ERROR + ? 'error' + : event === DevToolsTimelineEvents.FALBACK || + event === DevToolsTimelineEvents.MISSING + ? 'warning' + : 'default' } }) } diff --git a/yarn.lock b/yarn.lock index 8cf6bf82d..2cf96abe6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1524,6 +1524,11 @@ resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.2.tgz#833ad3335f97ae9439e26247d97f9baf7b5a6116" integrity sha512-5k0A8ffjNNukOiceImBdx1e3W5Jbpwqsu7xYHiZVu9mn4rYxFztIt+Q25mOHm7nwvDnMHrE7u5KtY2zmd+81GA== +"@vue/devtools-api@^6.0.0-beta.3": + version "6.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.3.tgz#5a66cc8beed688fe18c272ee7a8bd8ed7e35a54c" + integrity sha512-iJQhVyWzWIJxYIMjbZpljZQfU4gL2IMD5YQm3HXO8tQRU7RqqnD3f1WHn+vrqvrSvM8Qw2BeNugwdBBmbK8Oxg== + "@vue/reactivity@3.0.4": version "3.0.4" resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.4.tgz#b6599dd8271a745960a03f05744ccf7991ba5d8d"