fix(components): update hasChildren for components that is not subscribed

Author: Akryum

packages/app-backend-core/src/component.ts

@@ -30,9 +30,10 @@ export async function sendComponentTreeData (appRecord: AppRecord, instanceId: s
     if (maxDepth == null) {
       maxDepth = instance === ctx.currentAppRecord.rootInstance ? 2 : 1
     }
+    const data = await appRecord.backend.api.walkComponentTree(instance, maxDepth, filter)
     const payload = {
       instanceId,
-      treeData: stringify(await appRecord.backend.api.walkComponentTree(instance, maxDepth, filter)),
+      treeData: stringify(data),
     }
     ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_TREE, payload)
   }
@@ -101,6 +102,7 @@ export async function editComponentState (instanceId: string, dotPath: string, t
 
 export async function getComponentId (app: App, uid: number, instance: ComponentInstance, ctx: BackendContext) {
   try {
+    if (instance.__VUE_DEVTOOLS_UID__) return instance.__VUE_DEVTOOLS_UID__
     const appRecord = await getAppRecord(app, ctx)
     if (!appRecord) return null
     const isRoot = appRecord.rootInstance === instance

packages/app-backend-core/src/index.ts

@@ -152,11 +152,14 @@ async function connect () {
       if (parentUid != null) {
         const parentInstances = await appRecord.backend.api.walkComponentParents(component)
         if (parentInstances.length) {
-          const parentId = await getComponentId(app, parentUid, parentInstances[0], ctx)
-          if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
-            requestAnimationFrame(() => {
-              sendComponentTreeData(appRecord, parentId, appRecord.componentFilter, null, ctx)
-            })
+          // Check two parents level to update `hasChildren
+          for (let i = 0; i < 2 && i < parentInstances.length; i++) {
+            const parentId = await getComponentId(app, parentUid, parentInstances[i], ctx)
+            if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
+              requestAnimationFrame(() => {
+                sendComponentTreeData(appRecord, parentId, appRecord.componentFilter, null, ctx)
+              })
+            }
           }
         }
       }
@@ -359,6 +362,7 @@ function connectBridge () {
   ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_TREE, ({ instanceId, filter }) => {
     ctx.currentAppRecord.componentFilter = filter
     sendComponentTreeData(ctx.currentAppRecord, instanceId, filter, null, ctx)
+    subscribe(BridgeSubscriptions.COMPONENT_TREE, { instanceId })
   })
 
   ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_SELECTED_DATA, (instanceId) => {