fix(components): guess vue3 anonymous components name, fixes #1311

Author: Akryum

packages/app-backend-vue3/src/components/util.ts

@@ -29,13 +29,23 @@ export function isFragment (instance) {
 export function getInstanceName (instance) {
   const name = getComponentTypeName(instance.type || {})
   if (name) return name
-  return instance.root === instance
-    ? 'Root'
-    : 'Anonymous Component'
+  if (instance.root === instance) return 'Root'
+  for (const key in instance.parent?.type?.components) {
+    if (instance.parent.type.components[key] === instance.type) return saveComponentName(instance, key)
+  }
+  for (const key in instance.appContext?.components) {
+    if (instance.appContext.components[key] === instance.type) return saveComponentName(instance, key)
+  }
+  return 'Anonymous Component'
+}
+
+function saveComponentName (instance, key) {
+  instance.type.__vdevtools_guessedName = key
+  return key
 }
 
 function getComponentTypeName (options) {
-  const name = options.name || options._componentTag
+  const name = options.name || options._componentTag || options.__vdevtools_guessedName
   if (name) {
     return name
   }

packages/shell-dev-vue2/src/index.js

@@ -26,9 +26,18 @@ for (let i = 0; i < 100; i++) {
 const circular = {}
 circular.self = circular
 
+Vue.component('global', {
+  render: h => h('h3', 'Global component')
+})
+
 const app = new Vue({
   store,
   router,
+  components: {
+    inline: {
+      render: h => h('h3', 'Inline component definition')
+    }
+  },
   data: {
     obj: {
       items: items,
@@ -47,7 +56,9 @@ const app = new Vue({
       h(VuexObject),
       h(Init),
       h(RefTester),
-      h(Hidden)
+      h(Hidden),
+      h('global'),
+      h('inline')
     ])
   }
 })

packages/shell-dev-vue3/src/App.vue

@@ -15,6 +15,8 @@ import SetupRender from './SetupRender.js'
 import Form from './Form.vue'
 import Heavy from './Heavy.vue'
 
+import { h } from 'vue'
+
 export default {
   name: 'MyApp',
 
@@ -33,7 +35,10 @@ export default {
     Other,
     SetupRender,
     Form,
-    Heavy
+    Heavy,
+    inline: {
+      render: () => h('h3', 'Inline component definition')
+    }
   },
 
   data () {
@@ -77,6 +82,8 @@ export default {
   <Other />
   <SetupRender />
   <Form />
+  <inline />
+  <global />
 
   <nav>
     <router-link to="/p1">

packages/shell-dev-vue3/src/main.js

@@ -23,6 +23,9 @@ const router = createRouter({
 })
 
 const app = createApp(App)
+app.component('global', {
+  render: () => 'I\'m a global component'
+})
 app.use(TestPlugin)
 app.use(router)
 app.mount('#app')