improvement: vue-devtools debugging (#268)

* improvement: vue-devtools debugging

* timeline grouped and event named

Author: kazupon

.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

packages/core-base/src/context.ts

@@ -332,7 +332,8 @@ export function handleMissing<Message = string>(
       emitter.emit(DevToolsTimelineEvents.MISSING, {
         locale,
         key,
-        type
+        type,
+        groupId: `${type}:${key}`
       })
     }
   }

packages/core-base/src/datetime.ts

@@ -190,7 +190,8 @@ export function datetime<DateTimeFormats, Message = string>(
           type,
           key,
           from,
-          to
+          to,
+          groupId: `${type}:${key}`
         })
       }
     }

packages/core-base/src/debugger/constants.ts

@@ -5,30 +5,21 @@ 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<string, string> = {
   [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<string, string> = {
   [DevToolsIDs.CUSTOM_INSPECTOR]: 'Search for scopes ...'
 }
 
 export const DevToolsTimelineColors: Record<string, number> = {
-  [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<string, string> = {
-  [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]

packages/core-base/src/number.ts

@@ -184,7 +184,8 @@ export function number<NumberFormats, Message = string>(
           type,
           key,
           from,
-          to
+          to,
+          groupId: `${type}:${key}`
         })
       }
     }

packages/core-base/src/translate.ts

@@ -396,7 +396,8 @@ function resolveMessageFormat<Messages, Message>(
           type,
           key,
           from,
-          to
+          to,
+          groupId: `${type}:${key}`
         })
       }
     }
@@ -429,7 +430,8 @@ function resolveMessageFormat<Messages, Message>(
           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<Messages, Message>(
       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<Messages, Message>(
       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<Messages, Message>(
             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)

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"

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}`
             })
           }
         }

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'
       }
     })
   }

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/[email protected]":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.4.tgz#b6599dd8271a745960a03f05744ccf7991ba5d8d"