refactor: wait for app record in plugin

Author: Akryum

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

@@ -75,8 +75,8 @@ async function registerAppJob (options: AppRecordOptions, ctx: BackendContext) {
         record.instanceMap.set(rootId, record.rootInstance)
         record.rootInstance.__VUE_DEVTOOLS_UID__ = rootId
         await ctx.api.registerApplication(record)
-        ctx.appRecords.push(record)
         addBuiltinLayers(options.app, ctx)
+        ctx.appRecords.push(record)
 
         ctx.bridge.send(BridgeEvents.TO_FRONT_APP_ADD, {
           appRecord: mapAppRecord(record)

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

@@ -275,8 +275,8 @@ async function connect () {
   addPreviouslyRegisteredPlugins(ctx)
   addQueuedPlugins(ctx)
 
-  hook.on(HookEvents.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor: PluginDescriptor, setupFn: SetupFunction) => {
-    addPlugin(pluginDescriptor, setupFn, ctx)
+  hook.on(HookEvents.SETUP_DEVTOOLS_PLUGIN, async (pluginDescriptor: PluginDescriptor, setupFn: SetupFunction) => {
+    await addPlugin(pluginDescriptor, setupFn, ctx)
   })
 
   // Legacy flush

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

@@ -1,16 +1,17 @@
 import { PluginDescriptor, SetupFunction } from '@vue/devtools-api'
 import { Plugin, BackendContext, DevtoolsPluginApiInstance } from '@vue-devtools/app-backend-api'
 import { BridgeEvents, target } from '@vue-devtools/shared-utils'
-import { getAppRecordId } from './app'
+import { getAppRecord, getAppRecordId } from './app'
 
-export function addPlugin (pluginDescriptor: PluginDescriptor, setupFn: SetupFunction, ctx: BackendContext) {
+export async function addPlugin (pluginDescriptor: PluginDescriptor, setupFn: SetupFunction, ctx: BackendContext) {
   const plugin: Plugin = {
     descriptor: pluginDescriptor,
     setupFn,
     error: null
   }
   ctx.currentPlugin = plugin
   try {
+    await getAppRecord(plugin.descriptor.app, ctx)
     const api = new DevtoolsPluginApiInstance(plugin, ctx)
     setupFn(api)
   } catch (e) {
@@ -33,7 +34,7 @@ export function addPlugin (pluginDescriptor: PluginDescriptor, setupFn: SetupFun
 export async function addQueuedPlugins (ctx: BackendContext) {
   if (target.__VUE_DEVTOOLS_PLUGINS__ && Array.isArray(target.__VUE_DEVTOOLS_PLUGINS__)) {
     for (const plugin of target.__VUE_DEVTOOLS_PLUGINS__) {
-      addPlugin(plugin.pluginDescriptor, plugin.setupFn, ctx)
+      await addPlugin(plugin.pluginDescriptor, plugin.setupFn, ctx)
     }
     target.__VUE_DEVTOOLS_PLUGINS__ = null
   }
@@ -42,7 +43,7 @@ export async function addQueuedPlugins (ctx: BackendContext) {
 export async function addPreviouslyRegisteredPlugins (ctx: BackendContext) {
   if (target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__ && Array.isArray(target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__)) {
     for (const plugin of target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__) {
-      addPlugin(plugin.pluginDescriptor, plugin.setupFn, ctx)
+      await addPlugin(plugin.pluginDescriptor, plugin.setupFn, ctx)
     }
   }
 }

packages/app-frontend/src/features/plugin/index.ts

@@ -68,13 +68,13 @@ function addPlugin (plugin: Plugin) {
 }
 
 export function setupPluginsBridgeEvents (bridge: Bridge) {
-  bridge.on(BridgeEvents.TO_FRONT_DEVTOOLS_PLUGIN_ADD, ({ plugin }) => {
-    addPlugin(plugin)
+  bridge.on(BridgeEvents.TO_FRONT_DEVTOOLS_PLUGIN_ADD, async ({ plugin }) => {
+    await addPlugin(plugin)
   })
 
-  bridge.on(BridgeEvents.TO_FRONT_DEVTOOLS_PLUGIN_LIST, ({ plugins }) => {
+  bridge.on(BridgeEvents.TO_FRONT_DEVTOOLS_PLUGIN_LIST, async ({ plugins }) => {
     for (const plugin of plugins) {
-      addPlugin(plugin)
+      await addPlugin(plugin)
     }
   })