Skip to content

Commit 9e9e81c

Browse files
AkryumAkryum
committed
fix(components): improved tree loading
1 parent 76981b5 commit 9e9e81c

5 files changed

Lines changed: 60 additions & 66 deletions

File tree

‎packages/app-frontend/src/features/components/ComponentTreeNode.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default defineComponent({
3939
select,
4040
isExpanded: expanded,
4141
isExpandedUndefined,
42-
checkIsExpanded,
42+
isComponentOpen,
4343
toggleExpand: toggle,
4444
subscribeToComponentTree,
4545
} = useComponent(instance)
@@ -50,7 +50,7 @@ export default defineComponent({
5050
5151
onMounted(() => {
5252
if (isExpandedUndefined.value && props.depth < DEFAULT_EXPAND_DEPTH) {
53-
toggle(false)
53+
toggle()
5454
}
5555
})
5656
@@ -129,7 +129,7 @@ export default defineComponent({
129129
} else {
130130
let child = sortedChildren.value[index - 1]
131131
while (child) {
132-
if (child.children.length && checkIsExpanded(child.id)) {
132+
if (child.children.length && isComponentOpen(child.id)) {
133133
const children = sortChildren(child.children)
134134
child = children[children.length - 1]
135135
} else {

‎packages/app-frontend/src/features/components/ComponentsInspector.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export default defineComponent({
2727
subscribeToSelectedData()
2828
2929
onMounted(() => {
30-
requestComponentTree(null)
3130
selectLastComponent()
3231
})
3332
@@ -90,12 +89,12 @@ export default defineComponent({
9089
<template #left>
9190
<div class="flex flex-col h-full">
9291
<VueInput
92+
ref="treeFilterInput"
93+
v-model="treeFilter"
9394
v-tooltip="{
9495
content: $t('ComponentTree.filter.tooltip'),
9596
html: true
9697
}"
97-
ref="treeFilterInput"
98-
v-model="treeFilter"
9998
icon-left="search"
10099
placeholder="Find components..."
101100
select-all

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

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ref, computed, watch, Ref } from '@vue/composition-api'
1+
import { ref, computed, watch, Ref, onMounted } from '@vue/composition-api'
22
import { ComponentTreeNode, EditStatePayload, InspectedComponentData } from '@vue/devtools-api'
33
import Vue from 'vue'
44
import groupBy from 'lodash/groupBy'
@@ -26,7 +26,6 @@ export const selectedComponentPendingId = ref<ComponentTreeNode['id']>(null)
2626
let lastSelectedApp: AppRecord = null
2727
export const lastSelectedComponentId: Record<AppRecord['id'], ComponentTreeNode['id']> = {}
2828
export const expandedMap = ref<Record<ComponentTreeNode['id'], boolean>>({})
29-
export const resetComponentsQueued = ref(false)
3029

3130
export function useComponentRequests () {
3231
const router = useRouter()
@@ -134,17 +133,13 @@ export function useComponent (instance: Ref<ComponentTreeNode>) {
134133
const { selectComponent, requestComponentTree } = useComponentRequests()
135134
const { subscribe } = useBridge()
136135

137-
function checkIsExpanded (id) {
138-
return !!expandedMap.value[id]
139-
}
140-
141-
const isExpanded = computed(() => checkIsExpanded(instance.value.id))
136+
const isExpanded = computed(() => isComponentOpen(instance.value.id))
142137
const isExpandedUndefined = computed(() => expandedMap.value[instance.value.id] == null)
143138

144-
function toggleExpand (load = true) {
139+
function toggleExpand () {
145140
if (!instance.value.hasChildren) return
146141
setComponentOpen(instance.value.id, !isExpanded.value)
147-
if (load) {
142+
if (isComponentOpen(instance.value.id)) {
148143
requestComponentTree(instance.value.id)
149144
}
150145
}
@@ -173,14 +168,16 @@ export function useComponent (instance: Ref<ComponentTreeNode>) {
173168
})
174169
}
175170

176-
if (isExpanded.value) {
177-
requestComponentTree(instance.value.id)
178-
}
171+
onMounted(() => {
172+
if (isExpanded.value) {
173+
requestComponentTree(instance.value.id)
174+
}
175+
})
179176

180177
return {
181178
isExpanded,
182179
isExpandedUndefined,
183-
checkIsExpanded,
180+
isComponentOpen,
184181
toggleExpand,
185182
isSelected,
186183
select,
@@ -192,6 +189,10 @@ export function setComponentOpen (id: ComponentTreeNode['id'], isOpen: boolean)
192189
Vue.set(expandedMap.value, id, isOpen)
193190
}
194191

192+
export function isComponentOpen (id) {
193+
return !!expandedMap.value[id]
194+
}
195+
195196
export function useSelectedComponent () {
196197
const data = computed(() => selectedComponentData.value)
197198
const state = computed(() => selectedComponentData.value
@@ -255,7 +256,6 @@ export function useSelectedComponent () {
255256
}
256257

257258
export function resetComponents () {
258-
resetComponentsQueued.value = false
259259
rootInstances.value = []
260260
componentsMap.value = {}
261261
componentsParent = {}
@@ -273,9 +273,6 @@ export async function requestComponentTree (instanceId: ComponentTreeNode['id']
273273
}
274274
requestedComponentTree.add(instanceId)
275275

276-
if (instanceId === '_root') {
277-
resetComponentsQueued.value = true
278-
}
279276
await waitForAppSelect()
280277

281278
getBridge().send(BridgeEvents.TO_BACK_COMPONENT_TREE, {
@@ -284,35 +281,45 @@ export async function requestComponentTree (instanceId: ComponentTreeNode['id']
284281
})
285282
}
286283

287-
export function restoreChildrenFromComponentsMap (data: ComponentTreeNode) {
288-
const instance = componentsMap.value[data.id]
289-
if (instance && data.hasChildren) {
290-
if (!data.children.length && instance.children.length) {
291-
data.children = instance.children
292-
} else {
293-
for (const child of data.children) {
294-
restoreChildrenFromComponentsMap(child)
295-
}
296-
}
284+
export function ensureComponentsMapData (data: ComponentTreeNode) {
285+
let component = componentsMap.value[data.id]
286+
if (!component) {
287+
component = addToComponentsMap(data)
288+
} else {
289+
component = updateComponentsMapData(data)
290+
}
291+
return component
292+
}
293+
294+
function ensureComponentsMapChildren (id: string, children: ComponentTreeNode[]) {
295+
const result = children.map(child => ensureComponentsMapData(child))
296+
for (const child of children) {
297+
componentsParent[child.id] = id
297298
}
299+
return result
298300
}
299301

300-
export function updateComponentsMapData (data: ComponentTreeNode) {
302+
function updateComponentsMapData (data: ComponentTreeNode) {
301303
const component = componentsMap.value[data.id]
302304
for (const key in data) {
303-
Vue.set(component, key, data[key])
305+
if (key === 'children') {
306+
if (!data.hasChildren || data.children.length) {
307+
const children = ensureComponentsMapChildren(component.id, data.children)
308+
Vue.set(component, key, children)
309+
}
310+
} else {
311+
Vue.set(component, key, data[key])
312+
}
304313
}
305314
return component
306315
}
307316

308-
export function addToComponentsMap (instance: ComponentTreeNode) {
309-
componentsMap.value[instance.id] = instance
310-
if (instance.children) {
311-
instance.children.forEach(c => {
312-
componentsParent[c.id] = instance.id
313-
addToComponentsMap(c)
314-
})
317+
function addToComponentsMap (data: ComponentTreeNode) {
318+
if (!data.hasChildren || data.children.length) {
319+
data.children = ensureComponentsMapChildren(data.id, data.children)
315320
}
321+
componentsMap.value[data.id] = data
322+
return data
316323
}
317324

318325
export async function loadComponent (id: ComponentTreeNode['id']) {

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

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,12 @@ import { Bridge, BridgeEvents, parse, getStorage } from '@vue-devtools/shared-ut
22
import { putError } from '@front/features/error'
33
import {
44
selectedComponentPendingId,
5-
resetComponentsQueued,
6-
resetComponents,
7-
componentsMap,
8-
restoreChildrenFromComponentsMap,
9-
updateComponentsMapData,
10-
addToComponentsMap,
5+
ensureComponentsMapData,
116
rootInstances,
127
selectedComponentId,
138
selectedComponentData,
149
loadComponent,
10+
isComponentOpen,
1511
setComponentOpen,
1612
requestComponentTree,
1713
requestedComponentTree,
@@ -27,11 +23,6 @@ export function setupComponentsBridgeEvents (bridge: Bridge) {
2723

2824
const isRoot = instanceId.endsWith('root')
2925

30-
// Reset
31-
if (resetComponentsQueued.value) {
32-
resetComponents()
33-
}
34-
3526
// Not supported
3627
if (!treeData) {
3728
if (isRoot && !notFound) {
@@ -42,16 +33,12 @@ export function setupComponentsBridgeEvents (bridge: Bridge) {
4233

4334
// Handle tree data
4435
const data = parse(treeData)
45-
const instance = componentsMap.value[instanceId]
46-
if (instance) {
47-
for (const item of data) {
48-
restoreChildrenFromComponentsMap(item)
49-
const component = updateComponentsMapData(item)
50-
addToComponentsMap(component)
36+
if (isRoot) {
37+
rootInstances.value = data.map(i => ensureComponentsMapData(i))
38+
} else {
39+
for (const child of data) {
40+
ensureComponentsMapData(child)
5141
}
52-
} else if (Array.isArray(data)) {
53-
rootInstances.value = data
54-
data.forEach(i => addToComponentsMap(i))
5542
}
5643

5744
// Try to load selected component again
@@ -72,8 +59,10 @@ export function setupComponentsBridgeEvents (bridge: Bridge) {
7259
parentIds.reverse().forEach(id => {
7360
// Ignore root
7461
if (id.endsWith('root')) return
75-
setComponentOpen(id, true)
76-
requestComponentTree(id)
62+
if (!isComponentOpen(id)) {
63+
setComponentOpen(id, true)
64+
requestComponentTree(id)
65+
}
7766
})
7867
}
7968
})

‎packages/shell-host/src/DevIframe.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,11 @@ export default defineComponent({
6060
},
6161
onReload (reloadFn) {
6262
loadListener = reloadFn
63-
iframe.value.addEventListener('load', reloadFn)
6463
},
6564
})
6665
6766
iframe.value.contentWindow.addEventListener('unload', () => {
68-
if (loadListener) iframe.value.removeEventListener('load', loadListener)
67+
if (loadListener) loadListener()
6968
loading.value = true
7069
})
7170
} catch (e) {

0 commit comments

Comments
 (0)