refactor: component order follows dom order, closes #1503

Author: Akryum

packages/api/src/api/component.ts

@@ -12,7 +12,7 @@ export interface ComponentTreeNode {
   isFragment: boolean
   hasChildren: boolean
   children: ComponentTreeNode[]
-  positionTop?: number
+  indexInParent?: number
   consoleId?: string
   isRouterView?: boolean
   macthedRouteSegment?: string

packages/app-backend-vue2/src/components/el.ts

@@ -116,3 +116,15 @@ function addIframePosition (bounds, win: any) {
   }
   return bounds
 }
+
+export function getRootElementsFromComponentInstance (instance) {
+  if (instance._isFragment) {
+    const list = []
+    const { _fragmentStart, _fragmentEnd } = instance
+    util().mapNodeRange(_fragmentStart, _fragmentEnd, node => {
+      list.push(node)
+    })
+    return list
+  }
+  return [instance.$el]
+}

packages/app-backend-vue2/src/components/tree.ts

@@ -1,7 +1,7 @@
 import { AppRecord, BackendContext, DevtoolsApi } from '@vue-devtools/app-backend-api'
 import { classify } from '@vue-devtools/shared-utils'
 import { ComponentTreeNode } from '@vue/devtools-api'
-import { getInstanceOrVnodeRect } from './el'
+import { getRootElementsFromComponentInstance } from './el'
 import { getInstanceName, getRenderKey, getUniqueId, isBeingDestroyed } from './util'
 
 export let instanceMap: Map<any, any>
@@ -253,12 +253,13 @@ async function capture (instance, index?: number, list?: any[]): Promise<Compone
     ret.hasChildren = !!ret.children.length
   }
 
-  // record screen position to ensure correct ordering
-  if ((!list || list.length > 1) && !instance._inactive) {
-    const rect = getInstanceOrVnodeRect(instance)
-    ret.positionTop = rect ? rect.top : Infinity
+  // ensure correct ordering
+  const rootElements = getRootElementsFromComponentInstance(instance)
+  if (rootElements.length) {
+    const firstElement = rootElements[0]
+    ret.indexInParent = Array.from(firstElement.parentElement.childNodes).indexOf(firstElement)
   } else {
-    ret.positionTop = Infinity
+    ret.indexInParent = -1
   }
 
   // check if instance is available in console

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

@@ -1,7 +1,7 @@
 import { DevtoolsBackend, BuiltinBackendFeature } from '@vue-devtools/app-backend-api'
 import { backendInjections, getComponentName } from '@vue-devtools/shared-utils'
 import { editState, getCustomInstanceDetails, getInstanceDetails } from './components/data'
-import { getInstanceOrVnodeRect, findRelatedComponent } from './components/el'
+import { getInstanceOrVnodeRect, findRelatedComponent, getRootElementsFromComponentInstance } from './components/el'
 import { getComponentParents, instanceMap, walkTree } from './components/tree'
 import { getInstanceName } from './components/util'
 import { wrapVueForEvents } from './events'
@@ -55,7 +55,7 @@ export const backend: DevtoolsBackend = {
     })
 
     api.on.getComponentRootElements(payload => {
-      payload.rootElements = [payload.componentInstance.$el]
+      payload.rootElements = getRootElementsFromComponentInstance(payload.componentInstance)
     })
 
     api.on.getComponentDevtoolsOptions(payload => {

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

@@ -2,7 +2,7 @@ import { isBeingDestroyed, getUniqueComponentId, getInstanceName, getRenderKey,
 import { ComponentFilter } from './filter'
 import { BackendContext } from '@vue-devtools/app-backend-api'
 import { ComponentTreeNode } from '@vue/devtools-api'
-import { getInstanceOrVnodeRect } from './el'
+import { getRootElementsFromComponentInstance } from './el'
 
 export class ComponentWalker {
   ctx: BackendContext
@@ -162,10 +162,13 @@ export class ComponentWalker {
       }
     }
 
-    // record screen position to ensure correct ordering
-    if ((!list || list.length > 1) && !instance._inactive) {
-      const rect = getInstanceOrVnodeRect(instance)
-      treeNode.positionTop = rect ? rect.top : Infinity
+    // ensure correct ordering
+    const rootElements = getRootElementsFromComponentInstance(instance)
+    if (rootElements.length) {
+      const firstElement = rootElements[0]
+      treeNode.indexInParent = Array.from(firstElement.parentElement.childNodes).indexOf(firstElement)
+    } else {
+      treeNode.indexInParent = -1
     }
 
     if (instance.suspense) {

packages/app-frontend/src/features/components/composable/components.ts

@@ -314,10 +314,10 @@ export function loadComponent (id: ComponentTreeNode['id']) {
 
 export function sortChildren (children: ComponentTreeNode[]) {
   return children.slice().sort((a, b) => {
-    if (a.positionTop === b.positionTop) {
+    if (a.indexInParent === b.indexInParent) {
       return a.id.localeCompare(b.id)
     } else {
-      return a.positionTop - b.positionTop
+      return a.indexInParent - b.indexInParent
     }
   })
 }