fix: improve connect flow

Akryum · Akryum · commit 61ca693085f3 · 2020-12-18T19:00:12.000+01:00
diff --git a/packages/app-backend-core/src/app.ts b/packages/app-backend-core/src/app.ts
@@ -106,3 +106,7 @@ export function getAppRecordId (app): number {
 export function getAppRecord (app: any, ctx: BackendContext) {
   return ctx.appRecords.find(ar => ar.options.app === app)
 }
+
+export function waitForAppsRegistration () {
+  return jobs.queue(async () => { /* NOOP */ })
+}
diff --git a/packages/app-backend-core/src/index.ts b/packages/app-backend-core/src/index.ts
@@ -25,7 +25,7 @@ import {
 } from './component'
 import { addQueuedPlugins, addPlugin, sendPluginList, addPreviouslyRegisteredPlugins } from './plugin'
 import { PluginDescriptor, SetupFunction, TimelineLayerOptions, App, TimelineEventOptions, CustomInspectorOptions } from '@vue/devtools-api'
-import { registerApp, selectApp, mapAppRecord, getAppRecordId } from './app'
+import { registerApp, selectApp, mapAppRecord, getAppRecordId, waitForAppsRegistration } from './app'
 import { sendInspectorTree, getInspector, getInspectorWithAppId, sendInspectorState } from './inspector'
 import { showScreenshot } from './timeline-screenshot'
 
@@ -55,11 +55,11 @@ export async function initBackend (bridge: Bridge) {
     hook.once(HookEvents.INIT, connect)
   }
 
-  hook.on(HookEvents.APP_ADD, app => {
+  hook.on(HookEvents.APP_ADD, async app => {
+    await registerApp(app, ctx)
+
     // Will init connect
     hook.emit(HookEvents.INIT)
-
-    registerApp(app, ctx)
   })
 
   // In case we close and open devtools again
@@ -71,12 +71,16 @@ export async function initBackend (bridge: Bridge) {
   }
 }
 
-function connect () {
+async function connect () {
   if (connected) {
     return
   }
   connected = true
 
+  await waitForAppsRegistration()
+
+  console.log('%cconnect', 'color: blue;')
+
   ctx.currentTab = BuiltinTabs.COMPONENTS
 
   // Subscriptions

Original file line number	Diff line number	Diff line change
`@@ -106,3 +106,7 @@ export function getAppRecordId (app): number {`
`106`	`106`	`export function getAppRecord (app: any, ctx: BackendContext) {`
`107`	`107`	`return ctx.appRecords.find(ar => ar.options.app === app)`
`108`	`108`	`}`
	`109`	`+`
	`110`	`+export function waitForAppsRegistration () {`
	`111`	`+ return jobs.queue(async () => { /* NOOP */ })`
	`112`	`+}`