improvement: upgrade devtools (#368)

intlify · Feb 28, 2021 · ff07407 · ff07407
1 parent f356712
commit ff07407
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 35 deletions.
diff --git a/packages/vue-i18n/package.json b/packages/vue-i18n/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@intlify/core-base": "9.0.0",
     "@intlify/shared": "9.0.0",
-    "@vue/devtools-api": "^6.0.0-beta.5"
+    "@vue/devtools-api": "^6.0.0-beta.7"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

diff --git a/packages/vue-i18n/src/devtools.ts b/packages/vue-i18n/src/devtools.ts
@@ -1,7 +1,6 @@
 import {
   setupDevtoolsPlugin,
   Hooks,
-  AppRecord,
   ComponentTreeNode
 } from '@vue/devtools-api'
 import {
@@ -55,34 +54,26 @@ export async function enableDevTools<
         api => {
           devtoolsApi = api
 
-          api.on.walkComponentTree((payload, ctx) => {
-            updateComponentTreeDataTags(
-              ctx.currentAppRecord,
-              payload.componentTreeData,
-              i18n
-            )
+          api.on.visitComponentTree(({ componentInstance, treeNode }) => {
+            updateComponentTreeTags(componentInstance, treeNode, i18n)
           })
 
-          api.on.inspectComponent(payload => {
-            const componentInstance = payload.componentInstance
-            if (
-              componentInstance.vnode.el.__INTLIFY__ &&
-              payload.instanceData
-            ) {
+          api.on.inspectComponent(({ componentInstance, instanceData }) => {
+            if (componentInstance.vnode.el.__INTLIFY__ && instanceData) {
               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,
+                    instanceData,
                     componentInstance.vnode.el.__INTLIFY__ as Composer
                   )
                 }
               } else {
                 inspectComposer(
-                  payload.instanceData,
+                  instanceData,
                   componentInstance.vnode.el.__INTLIFY__ as Composer
                 )
               }
@@ -131,38 +122,32 @@ export async function enableDevTools<
   })
 }
 
-function updateComponentTreeDataTags<
+function updateComponentTreeTags<
   Messages,
   DateTimeFormats,
   NumberFormats,
   Legacy extends boolean
 >(
-  appRecord: AppRecord,
-  treeData: ComponentTreeNode[],
+  instance: any, // eslint-disable-line @typescript-eslint/no-explicit-any
+  treeNode: ComponentTreeNode,
   i18n: _I18n<Messages, DateTimeFormats, NumberFormats, Legacy>
 ): void {
   // prettier-ignore
   const global = i18n.mode === 'composition'
     ? i18n.global
     : (i18n.global as unknown as VueI18nInternal).__composer
-  for (const node of treeData) {
-    const instance = appRecord.instanceMap.get(node.id)
-    if (instance && instance.vnode.el.__INTLIFY__) {
-      // 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
-        }
-        node.tags.push(tag)
+  if (instance && instance.vnode.el.__INTLIFY__) {
+    // 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
       }
+      treeNode.tags.push(tag)
     }
-    updateComponentTreeDataTags(appRecord, node.children, i18n)
   }
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -1410,6 +1410,11 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.5.tgz#722296bb0b93c4d0018b6a2beda1e781a3ff8789"
   integrity sha512-Xik8/zF+cu1lQmhJy2djGudZ2OmSGGB25mjtTIGhMsNN7jvvwnn44kD6qSN22+PdnX6sAK+2EQ51WDCXWmitwg==
 
+"@vue/devtools-api@^6.0.0-beta.7":
+  version "6.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.7.tgz#1d306613c93b9a837a3776b1b9255502662f850f"
+  integrity sha512-mIfqX8ZF6s2ulelIzfxGk9sFoigpoeK/2/DlWrtBGWfvwaK3kR1P2bxNkZ0LbJeuKHfcRP6hGZtGist7nxUN9A==
+
 "@vue/reactivity@3.0.5":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.5.tgz#e3789e4d523d845f9ae0b4d770e2b45594742fd2"