fix: support vue-devtools component inspector custom tags breaking change (#332)

Author: kazupon

package.json

@@ -65,7 +65,7 @@
     "@types/jest": "^26.0.14",
     "@typescript-eslint/eslint-plugin": "^4.11.0",
     "@typescript-eslint/parser": "^4.11.0",
-    "@vue/devtools-api": "^6.0.0-beta.3",
+    "@vue/devtools-api": "^6.0.0-beta.5",
     "@vue/server-renderer": "^3.0.0",
     "algoliasearch": "^4.8.2",
     "api-docs-gen": "^0.2.6",

packages/vue-i18n/package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@intlify/core-base": "9.0.0-rc.4",
     "@intlify/shared": "9.0.0-rc.4",
-    "@vue/devtools-api": "^6.0.0-beta.3"
+    "@vue/devtools-api": "^6.0.0-beta.5"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

packages/vue-i18n/src/devtools.ts

@@ -138,29 +138,31 @@ function updateComponentTreeDataTags<
   Legacy extends boolean
 >(
   appRecord: AppRecord,
-  treeData: ComponentTreeNode,
+  treeData: ComponentTreeNode[],
   i18n: _I18n<Messages, DateTimeFormats, NumberFormats, Legacy>
 ): void {
-  const instance = appRecord.instanceMap.get(treeData.id)
-  if (instance && instance.vnode.el.__INTLIFY__) {
-    // 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
+  // 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)
       }
-      treeData.tags = [tag]
     }
-  }
-  for (const node of treeData.children) {
-    updateComponentTreeDataTags(appRecord, node, i18n)
+    updateComponentTreeDataTags(appRecord, node.children, i18n)
   }
 }
 

yarn.lock

@@ -1424,10 +1424,10 @@
     "@vue/compiler-dom" "3.0.5"
     "@vue/shared" "3.0.5"
 
-"@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/devtools-api@^6.0.0-beta.5":
+  version "6.0.0-beta.5"
+  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/[email protected]":
   version "3.0.4"