feat(api): proxy with queue before plugin api is available

Author: Akryum

packages/api/src/api/api.ts

@@ -6,18 +6,18 @@ import { ID } from './util'
 
 export interface DevtoolsPluginApi {
   on: Hookable<Context>
-  notifyComponentUpdate (instance?: ComponentInstance)
-  addTimelineLayer (options: TimelineLayerOptions)
-  addTimelineEvent (options: TimelineEventOptions)
-  addInspector (options: CustomInspectorOptions)
-  sendInspectorTree (inspectorId: string)
-  sendInspectorState (inspectorId: string)
-  selectInspectorNode (inspectorId: string, nodeId: string)
+  notifyComponentUpdate (instance?: ComponentInstance): void
+  addTimelineLayer (options: TimelineLayerOptions): void
+  addTimelineEvent (options: TimelineEventOptions): void
+  addInspector (options: CustomInspectorOptions): void
+  sendInspectorTree (inspectorId: string): void
+  sendInspectorState (inspectorId: string): void
+  selectInspectorNode (inspectorId: string, nodeId: string): void
   getComponentBounds (instance: ComponentInstance): Promise<ComponentBounds>
   getComponentName (instance: ComponentInstance): Promise<string>
   getComponentInstances (app: App): Promise<ComponentInstance[]>
-  highlightElement (instance: ComponentInstance)
-  unhighlightElement ()
+  highlightElement (instance: ComponentInstance): void
+  unhighlightElement (): void
 }
 
 export interface AppRecord {

packages/api/src/env.ts

@@ -1,11 +1,15 @@
 import { PluginDescriptor, SetupFunction } from '.'
-import { HookHandler } from './api'
+import { ApiProxy } from './proxy'
+
+export interface PluginQueueItem {
+  pluginDescriptor: PluginDescriptor
+  setupFn: SetupFunction
+  proxy?: ApiProxy
+}
 
 interface GlobalTarget {
-  __VUE_DEVTOOLS_PLUGINS__: Array<{
-    pluginDescriptor: PluginDescriptor
-    setupFn: SetupFunction
-  }>
+  __VUE_DEVTOOLS_PLUGINS__?: PluginQueueItem[]
+  __VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__?: boolean
 }
 
 export function getDevtoolsGlobalHook (): any {
@@ -20,3 +24,5 @@ export function getTarget (): GlobalTarget {
       ? global
       : {}
 }
+
+export const isProxyAvailable = typeof Proxy === 'function'

packages/api/src/index.ts

@@ -1,8 +1,10 @@
-import { getTarget, getDevtoolsGlobalHook } from './env'
+import { getTarget, getDevtoolsGlobalHook, isProxyAvailable } from './env'
 import { HOOK_SETUP } from './const'
 import { DevtoolsPluginApi, App } from './api'
+import { ApiProxy } from './proxy'
 
 export * from './api'
+export { PluginQueueItem } from './env'
 
 export interface PluginDescriptor {
   id: string
@@ -18,15 +20,20 @@ export interface PluginDescriptor {
 export type SetupFunction = (api: DevtoolsPluginApi) => void
 
 export function setupDevtoolsPlugin (pluginDescriptor: PluginDescriptor, setupFn: SetupFunction) {
+  const target = getTarget()
   const hook = getDevtoolsGlobalHook()
-  if (hook) {
+  if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !isProxyAvailable)) {
     hook.emit(HOOK_SETUP, pluginDescriptor, setupFn)
   } else {
-    const target = getTarget()
+    const proxy = isProxyAvailable ? new ApiProxy() : null
+
     const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || []
     list.push({
       pluginDescriptor,
-      setupFn
+      setupFn,
+      proxy
     })
+
+    setupFn(proxy.proxiedTarget as DevtoolsPluginApi)
   }
 }

packages/api/src/proxy.ts

@@ -0,0 +1,69 @@
+import { Context, DevtoolsPluginApi, Hookable } from './api'
+
+interface QueueItem {
+  method: string
+  args: any[]
+  resolve?: (value?: any) => void
+}
+
+export class ApiProxy<TTarget extends DevtoolsPluginApi = DevtoolsPluginApi> {
+  target: TTarget | null
+  targetQueue: QueueItem[]
+  proxiedTarget: TTarget
+
+  onQueue: QueueItem[]
+  proxiedOn: Hookable<Context>
+
+  constructor () {
+    this.target = null
+    this.targetQueue = []
+    this.onQueue = []
+
+    this.proxiedOn = new Proxy({} as Hookable<Context>, {
+      get: (_target, prop: string) => {
+        if (this.target) {
+          return this.target.on[prop]
+        } else {
+          return (...args) => {
+            this.onQueue.push({
+              method: prop,
+              args
+            })
+          }
+        }
+      }
+    })
+
+    this.proxiedTarget = new Proxy({} as TTarget, {
+      get: (_target, prop: string) => {
+        if (this.target) {
+          return this.target[prop]
+        } else if (prop === 'on') {
+          return this.proxiedOn
+        } else {
+          return (...args) => {
+            return new Promise(resolve => {
+              this.targetQueue.push({
+                method: prop,
+                args,
+                resolve
+              })
+            })
+          }
+        }
+      }
+    })
+  }
+
+  async setRealTarget (target: TTarget) {
+    this.target = target
+
+    for (const item of this.onQueue) {
+      this.target.on[item.method](...item.args)
+    }
+
+    for (const item of this.targetQueue) {
+      item.resolve(await this.target[item.method](...item.args))
+    }
+  }
+}

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

@@ -286,9 +286,11 @@ async function connect () {
   addQueuedPlugins(ctx)
 
   hook.on(HookEvents.SETUP_DEVTOOLS_PLUGIN, async (pluginDescriptor: PluginDescriptor, setupFn: SetupFunction) => {
-    await addPlugin(pluginDescriptor, setupFn, ctx)
+    await addPlugin({ pluginDescriptor, setupFn }, ctx)
   })
 
+  target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ = true
+
   // Legacy flush
   hook.off('flush')
   hook.on('flush', () => {

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

@@ -1,9 +1,11 @@
-import { PluginDescriptor, SetupFunction } from '@vue/devtools-api'
+import { PluginQueueItem } from '@vue/devtools-api'
 import { Plugin, BackendContext, DevtoolsPluginApiInstance } from '@vue-devtools/app-backend-api'
 import { BridgeEvents, target } from '@vue-devtools/shared-utils'
 import { getAppRecord, getAppRecordId } from './app'
 
-export async function addPlugin (pluginDescriptor: PluginDescriptor, setupFn: SetupFunction, ctx: BackendContext) {
+export async function addPlugin (pluginQueueItem: PluginQueueItem, ctx: BackendContext) {
+  const { pluginDescriptor, setupFn } = pluginQueueItem
+
   const plugin: Plugin = {
     descriptor: pluginDescriptor,
     setupFn,
@@ -13,7 +15,11 @@ export async function addPlugin (pluginDescriptor: PluginDescriptor, setupFn: Se
   try {
     await getAppRecord(plugin.descriptor.app, ctx)
     const api = new DevtoolsPluginApiInstance(plugin, ctx)
-    setupFn(api)
+    if (pluginQueueItem.proxy) {
+      await pluginQueueItem.proxy.setRealTarget(api)
+    } else {
+      setupFn(api)
+    }
   } catch (e) {
     plugin.error = e
     console.error(e)
@@ -33,17 +39,17 @@ export async function addPlugin (pluginDescriptor: PluginDescriptor, setupFn: Se
 
 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__) {
-      await addPlugin(plugin.pluginDescriptor, plugin.setupFn, ctx)
+    for (const queueItem of target.__VUE_DEVTOOLS_PLUGINS__) {
+      await addPlugin(queueItem, ctx)
     }
     target.__VUE_DEVTOOLS_PLUGINS__ = null
   }
 }
 
 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__) {
-      await addPlugin(plugin.pluginDescriptor, plugin.setupFn, ctx)
+    for (const queueItem of target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__) {
+      await addPlugin(queueItem, ctx)
     }
   }
 }

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

@@ -109,6 +109,9 @@ export default {
   <h2>Store</h2>
   <div>
     {{ $store.getters.answer }}
+    <button @click="$store.commit('increment')">
+      +1
+    </button>
     {{ $store.getters.twoFoo }}
   </div>
 

packages/shell-dev-vue3/src/store.js

@@ -3,11 +3,17 @@ import { createStore } from 'vuex'
 const store = createStore({
   state () {
     return {
-      rootState: 'root'
+      rootState: 'root',
+      answer: 42
     }
   },
   getters: {
-    answer: () => 42
+    answer: (state) => state.answer
+  },
+  mutations: {
+    increment (state) {
+      state.answer++
+    }
   },
   modules: {
     nested: {