Skip to content

Commit 14a51ef

Browse files
AkryumAkryum
committed
fix: async getAppRecord, closes #1459 
1 parent 62767b7 commit 14a51ef

File tree

7 files changed

+79
-29
lines changed

7 files changed

+79
-29
lines changed

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

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ import {
66
DevtoolsBackend
77
} from '@vue-devtools/app-backend-api'
88
import { BridgeEvents } from '@vue-devtools/shared-utils'
9+
import { App } from '@vue/devtools-api'
910
import { JobQueue } from './util/queue'
11+
import { scan } from './legacy/scan'
1012

1113
import { backend as backendVue1 } from '@vue-devtools/app-backend-vue1'
1214
import { backend as backendVue2 } from '@vue-devtools/app-backend-vue2'
1315
import { backend as backendVue3 } from '@vue-devtools/app-backend-vue3'
14-
import { scan } from './legacy/scan'
1516

1617
const availableBackends = [
1718
backendVue1,
@@ -24,6 +25,9 @@ const jobs = new JobQueue()
2425

2526
let recordId = 0
2627

28+
type AppRecordResolver = (record: AppRecord) => void | Promise<void>
29+
const appRecordPromises = new Map<App, AppRecordResolver[]>()
30+
2731
export async function registerApp (options: AppRecordOptions, ctx: BackendContext) {
2832
return jobs.queue(() => registerAppJob(options, ctx))
2933
}
@@ -73,6 +77,12 @@ async function registerAppJob (options: AppRecordOptions, ctx: BackendContext) {
7377
backend.setupApp(ctx.api, record)
7478
}
7579

80+
if (appRecordPromises.has(options.app)) {
81+
for (const r of appRecordPromises.get(options.app)) {
82+
await r(record)
83+
}
84+
}
85+
7686
// Auto select first app
7787
if (ctx.currentAppRecord == null) {
7888
await selectApp(record, ctx)
@@ -109,8 +119,29 @@ export function getAppRecordId (app): number {
109119
return id
110120
}
111121

112-
export function getAppRecord (app: any, ctx: BackendContext) {
113-
return ctx.appRecords.find(ar => ar.options.app === app)
122+
export async function getAppRecord (app: any, ctx: BackendContext): Promise<AppRecord> {
123+
const record = ctx.appRecords.find(ar => ar.options.app === app)
124+
if (record) {
125+
return record
126+
}
127+
return new Promise((resolve, reject) => {
128+
let timedOut = false
129+
const timer = setTimeout(() => {
130+
timedOut = true
131+
reject(new Error(`Timed out getting app record for app ${app}`))
132+
}, 2000)
133+
let resolvers = appRecordPromises.get(app)
134+
if (!resolvers) {
135+
resolvers = []
136+
appRecordPromises.set(app, resolvers)
137+
}
138+
resolvers.push((record) => {
139+
if (!timedOut) {
140+
clearTimeout(timer)
141+
resolve(record)
142+
}
143+
})
144+
})
114145
}
115146

116147
export function waitForAppsRegistration () {
@@ -131,8 +162,8 @@ export async function sendApps (ctx: BackendContext) {
131162
})
132163
}
133164

134-
export function removeApp (app: any, ctx: BackendContext) {
135-
const appRecord = getAppRecord(app, ctx)
165+
export async function removeApp (app: any, ctx: BackendContext) {
166+
const appRecord = await getAppRecord(app, ctx)
136167
if (appRecord) {
137168
const index = ctx.appRecords.indexOf(appRecord)
138169
if (index !== -1) ctx.appRecords.splice(index, 1)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ export async function editComponentState (instanceId: string, dotPath: string, t
7171
}
7272
}
7373

74-
export function getComponentId (app: App, uid: number, ctx: BackendContext) {
75-
const appRecord = getAppRecord(app, ctx)
74+
export async function getComponentId (app: App, uid: number, ctx: BackendContext) {
75+
const appRecord = await getAppRecord(app, ctx)
7676
if (!appRecord) return null
7777
return `${appRecord.id}:${uid === 0 ? 'root' : uid}`
7878
}

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,12 @@ async function connect () {
136136
sendSelectedComponentData(ctx.currentAppRecord, instanceId, ctx)
137137
})
138138

139-
hook.on(HookEvents.COMPONENT_UPDATED, (app, uid) => {
139+
hook.on(HookEvents.COMPONENT_UPDATED, async (app, uid) => {
140140
let id: string
141141
let appRecord: AppRecord
142142
if (app && uid != null) {
143-
id = getComponentId(app, uid, ctx)
144-
appRecord = getAppRecord(app, ctx)
143+
id = await getComponentId(app, uid, ctx)
144+
appRecord = await getAppRecord(app, ctx)
145145
} else {
146146
id = ctx.currentInspectedComponentId
147147
appRecord = ctx.currentAppRecord
@@ -151,8 +151,8 @@ async function connect () {
151151
}
152152
})
153153

154-
hook.on(HookEvents.COMPONENT_ADDED, (app, uid, parentUid, component) => {
155-
const id = getComponentId(app, uid, ctx)
154+
hook.on(HookEvents.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
155+
const id = await getComponentId(app, uid, ctx)
156156
if (component) {
157157
if (component.__VUE_DEVTOOLS_UID__ == null) {
158158
component.__VUE_DEVTOOLS_UID__ = id
@@ -162,9 +162,9 @@ async function connect () {
162162
}
163163
}
164164

165-
const appRecord = getAppRecord(app, ctx)
165+
const appRecord = await getAppRecord(app, ctx)
166166

167-
const parentId = getComponentId(app, parentUid, ctx)
167+
const parentId = await getComponentId(app, parentUid, ctx)
168168
if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
169169
requestAnimationFrame(() => {
170170
sendComponentTreeData(appRecord, parentId, ctx.currentAppRecord.componentFilter, ctx)
@@ -176,15 +176,15 @@ async function connect () {
176176
}
177177
})
178178

179-
hook.on(HookEvents.COMPONENT_REMOVED, (app, uid, parentUid) => {
180-
const parentId = getComponentId(app, parentUid, ctx)
179+
hook.on(HookEvents.COMPONENT_REMOVED, async (app, uid, parentUid) => {
180+
const parentId = await getComponentId(app, parentUid, ctx)
181181
if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
182-
requestAnimationFrame(() => {
183-
sendComponentTreeData(getAppRecord(app, ctx), parentId, ctx.currentAppRecord.componentFilter, ctx)
182+
requestAnimationFrame(async () => {
183+
sendComponentTreeData(await getAppRecord(app, ctx), parentId, ctx.currentAppRecord.componentFilter, ctx)
184184
})
185185
}
186186

187-
const id = getComponentId(app, uid, ctx)
187+
const id = await getComponentId(app, uid, ctx)
188188
if (isSubscribed(BridgeSubscriptions.SELECTED_COMPONENT_DATA, sub => sub.payload.instanceId === id)) {
189189
sendEmptyComponentData(id, ctx)
190190
}

‎packages/app-backend-core/src/perf.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export async function performanceMarkStart (
1818
ctx: BackendContext
1919
) {
2020
if (!SharedData.performanceMonitoringEnabled) return
21-
const appRecord = getAppRecord(app, ctx)
21+
const appRecord = await getAppRecord(app, ctx)
2222
const componentName = await ctx.api.getComponentName(instance)
2323
const groupId = uniqueGroupId++
2424
const groupKey = `${uid}-${type}`
@@ -48,7 +48,7 @@ export async function performanceMarkEnd (
4848
ctx: BackendContext
4949
) {
5050
if (!SharedData.performanceMonitoringEnabled) return
51-
const appRecord = getAppRecord(app, ctx)
51+
const appRecord = await getAppRecord(app, ctx)
5252
const componentName = await ctx.api.getComponentName(instance)
5353
const groupKey = `${uid}-${type}`
5454
const { groupId, time: startTime } = appRecord.perfGroupIds.get(groupKey)
@@ -100,7 +100,7 @@ export async function performanceMarkEnd (
100100

101101
if (change) {
102102
// Update component tree
103-
const id = getComponentId(app, uid, ctx)
103+
const id = await getComponentId(app, uid, ctx)
104104
if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === id)) {
105105
requestAnimationFrame(() => {
106106
sendComponentTreeData(appRecord, id, ctx.currentAppRecord.componentFilter, ctx)

‎packages/app-backend-core/src/timeline.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function setupBuiltinLayers (ctx: BackendContext) {
5555
})
5656

5757
hook.on(HookEvents.COMPONENT_EMIT, async (app, instance, event, params) => {
58-
const appRecord = getAppRecord(app, ctx)
58+
const appRecord = await getAppRecord(app, ctx)
5959
const componentId = `${appRecord.id}:${instance.uid}`
6060
const componentDisplay = (await ctx.api.getComponentName(instance)) || '<i>Unknown Component</i>'
6161

@@ -84,15 +84,19 @@ function setupBuiltinLayers (ctx: BackendContext) {
8484
})
8585
}
8686

87-
export function sendTimelineLayers (ctx: BackendContext) {
88-
ctx.bridge.send(BridgeEvents.TO_FRONT_TIMELINE_LAYER_LIST, {
89-
layers: ctx.timelineLayers.map(layer => ({
87+
export async function sendTimelineLayers (ctx: BackendContext) {
88+
const layers = []
89+
for (const layer of ctx.timelineLayers) {
90+
layers.push({
9091
id: layer.id,
9192
label: layer.label,
9293
color: layer.color,
93-
appId: getAppRecord(layer.app, ctx)?.id,
94+
appId: (await getAppRecord(layer.app, ctx))?.id,
9495
pluginId: layer.plugin.descriptor.id
95-
}))
96+
})
97+
}
98+
ctx.bridge.send(BridgeEvents.TO_FRONT_TIMELINE_LAYER_LIST, {
99+
layers
96100
})
97101
}
98102

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import Heavy from './Heavy.vue'
1717
import Mixins from './Mixins.vue'
1818
import Animation from './Animation.vue'
1919
20-
import { h } from 'vue'
20+
import { h, createApp } from 'vue'
2121
2222
export default {
2323
name: 'MyApp',
@@ -50,6 +50,12 @@ export default {
5050
count: 0,
5151
text: 'Meow'
5252
}
53+
},
54+
55+
methods: {
56+
createApp () {
57+
createApp(Child).mount('#nested-app')
58+
}
5359
}
5460
}
5561
</script>
@@ -97,6 +103,11 @@ export default {
97103
{{ $store.getters.twoFoo }}
98104
</div>
99105

106+
<button @click="createApp()">
107+
Create nested app
108+
</button>
109+
<div id="nested-app" />
110+
100111
<nav>
101112
<router-link to="/p1">
102113
page 1

‎packages/shell-dev-vue3/src/Child.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ export default {
5858
this.classicAnswer = value
5959
}
6060
}
61+
},
62+
63+
mounted () {
64+
this.$emit('child mounted', 'bar')
6165
}
6266
}
6367
</script>

0 commit comments

Comments
 (0)