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

Akryum · Akryum · commit 4d91c35b7fd3 · 2021-12-20T14:10:55.000+01:00
diff --git a/packages/app-backend-core/src/component.ts b/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
diff --git a/packages/app-backend-core/src/index.ts b/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) => {

Original file line number	Diff line number	Diff line change
`@@ -30,9 +30,10 @@ export async function sendComponentTreeData (appRecord: AppRecord, instanceId: s`
`30`	`30`	`if (maxDepth == null) {`
`31`	`31`	`maxDepth = instance === ctx.currentAppRecord.rootInstance ? 2 : 1`
`32`	`32`	`}`
	`33`	`+ const data = await appRecord.backend.api.walkComponentTree(instance, maxDepth, filter)`
`33`	`34`	`const payload = {`
`34`	`35`	`instanceId,`
`35`		`- treeData: stringify(await appRecord.backend.api.walkComponentTree(instance, maxDepth, filter)),`
	`36`	`+ treeData: stringify(data),`
`36`	`37`	`}`
`37`	`38`	`ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_TREE, payload)`
`38`	`39`	`}`
`@@ -101,6 +102,7 @@ export async function editComponentState (instanceId: string, dotPath: string, t`
`101`	`102`
`102`	`103`	`export async function getComponentId (app: App, uid: number, instance: ComponentInstance, ctx: BackendContext) {`
`103`	`104`	`try {`
	`105`	`+ if (instance.__VUE_DEVTOOLS_UID__) return instance.__VUE_DEVTOOLS_UID__`
`104`	`106`	`const appRecord = await getAppRecord(app, ctx)`
`105`	`107`	`if (!appRecord) return null`
`106`	`108`	`const isRoot = appRecord.rootInstance === instance`