refactor: api for each backend + state editor, closes #1589

Author: Akryum

packages/api/src/api/app.ts

@@ -1 +1,3 @@
-export type App = any // @TODO
+export type App = Record<string, any> & {
+  __app: true // for type checking
+} // @TODO

packages/api/src/api/component.ts

@@ -1,7 +1,9 @@
 import { InspectorNodeTag } from './api'
 import { ID } from './util'
 
-export type ComponentInstance = any // @TODO
+export type ComponentInstance = Record<string, any> & {
+  __component: true // for type checking
+} // @TODO
 
 export interface ComponentTreeNode {
   uid: ID

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

@@ -3,10 +3,10 @@ import {
   hasPluginPermission,
   HookEvents,
   PluginPermission,
-  set,
   getPluginDefaultSettings,
   getPluginSettings,
-  setPluginSettings
+  setPluginSettings,
+  StateEditor
 } from '@vue-devtools/shared-utils'
 import {
   Hooks,
@@ -25,17 +25,22 @@ import {
 import { DevtoolsHookable } from './hooks'
 import { BackendContext } from './backend-context'
 import { Plugin } from './plugin'
+import { DevtoolsBackend } from './backend'
+import { AppRecord } from './app-record'
 
 let backendOn: DevtoolsHookable
 const pluginOn: DevtoolsHookable[] = []
 
 export class DevtoolsApi {
   bridge: Bridge
   ctx: BackendContext
+  backend: DevtoolsBackend
+  stateEditor: StateEditor = new StateEditor()
 
-  constructor (bridge: Bridge, ctx: BackendContext) {
-    this.bridge = bridge
+  constructor (backend: DevtoolsBackend, ctx: BackendContext) {
+    this.backend = backend
     this.ctx = ctx
+    this.bridge = ctx.bridge
     if (!backendOn) { backendOn = new DevtoolsHookable(ctx) }
   }
 
@@ -171,7 +176,7 @@ export class DevtoolsApi {
       path: arrayPath,
       type,
       state,
-      set: (object, path = arrayPath, value = state.value, cb?) => set(object, path, value, cb || createDefaultSetCallback(state))
+      set: (object, path = arrayPath, value = state.value, cb?) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state))
     })
     return payload.componentInstance
   }
@@ -240,37 +245,26 @@ export class DevtoolsApi {
       path: arrayPath,
       type,
       state,
-      set: (object, path = arrayPath, value = state.value, cb?) => set(object, path, value, cb || createDefaultSetCallback(state))
+      set: (object, path = arrayPath, value = state.value, cb?) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state))
     })
   }
 }
 
-function createDefaultSetCallback (state: EditStatePayload) {
-  return (obj, field, value) => {
-    if (state.remove || state.newKey) {
-      if (Array.isArray(obj)) {
-        obj.splice(field, 1)
-      } else {
-        delete obj[field]
-      }
-    }
-    if (!state.remove) {
-      obj[state.newKey || field] = value
-    }
-  }
-}
-
 export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPluginApi<TSettings> {
   bridge: Bridge
   ctx: BackendContext
   plugin: Plugin
+  appRecord: AppRecord
+  backendApi: DevtoolsApi
   on: DevtoolsHookable
   private defaultSettings: TSettings
 
-  constructor (plugin: Plugin, ctx: BackendContext) {
+  constructor (plugin: Plugin, appRecord: AppRecord, ctx: BackendContext) {
     this.bridge = ctx.bridge
     this.ctx = ctx
     this.plugin = plugin
+    this.appRecord = appRecord
+    this.backendApi = appRecord.backend.api
     this.defaultSettings = getPluginDefaultSettings(plugin.descriptor.settings)
     this.on = new DevtoolsHookable(ctx, plugin)
     pluginOn.push(this.on)
@@ -282,7 +276,7 @@ export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPlugi
     if (!this.enabled || !this.hasPermission(PluginPermission.COMPONENTS)) return
 
     if (instance) {
-      this.ctx.hook.emit(HookEvents.COMPONENT_UPDATED, ...await this.ctx.api.transformCall(HookEvents.COMPONENT_UPDATED, instance))
+      this.ctx.hook.emit(HookEvents.COMPONENT_UPDATED, ...await this.backendApi.transformCall(HookEvents.COMPONENT_UPDATED, instance))
     } else {
       this.ctx.hook.emit(HookEvents.COMPONENT_UPDATED)
     }
@@ -331,15 +325,15 @@ export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPlugi
   }
 
   getComponentBounds (instance: ComponentInstance) {
-    return this.ctx.api.getComponentBounds(instance)
+    return this.backendApi.getComponentBounds(instance)
   }
 
   getComponentName (instance: ComponentInstance) {
-    return this.ctx.api.getComponentName(instance)
+    return this.backendApi.getComponentName(instance)
   }
 
   getComponentInstances (app: App) {
-    return this.ctx.api.getComponentInstances(app)
+    return this.backendApi.getComponentInstances(app)
   }
 
   highlightElement (instance: ComponentInstance) {

packages/app-backend-api/src/backend-context.ts

@@ -1,22 +1,21 @@
 import { Bridge } from '@vue-devtools/shared-utils'
 import {
   TimelineLayerOptions,
-  App,
   CustomInspectorOptions,
   TimelineEventOptions,
   WithId,
   ID,
   TimelineMarkerOptions
 } from '@vue/devtools-api'
 import { AppRecord } from './app-record'
-import { DevtoolsApi } from './api'
 import { Plugin } from './plugin'
 import { DevtoolsHook } from './global-hook'
+import { DevtoolsBackend } from './backend'
 
 export interface BackendContext {
   bridge: Bridge
   hook: DevtoolsHook
-  api: DevtoolsApi
+  backends: DevtoolsBackend[]
   appRecords: AppRecord[]
   currentTab: string
   currentAppRecord: AppRecord
@@ -32,17 +31,17 @@ export interface BackendContext {
 }
 
 export interface TimelineLayer extends TimelineLayerOptions {
-  app: App
+  appRecord: AppRecord | null
   plugin: Plugin
   events: (TimelineEventOptions & WithId)[]
 }
 
 export interface TimelineMarker extends TimelineMarkerOptions {
-  app: App | null
+  appRecord: AppRecord | null
 }
 
 export interface CustomInspector extends CustomInspectorOptions {
-  app: App
+  appRecord: AppRecord
   plugin: Plugin
   treeFilter: string
   selectedNodeId: string
@@ -54,10 +53,10 @@ export interface CreateBackendContextOptions {
 }
 
 export function createBackendContext (options: CreateBackendContextOptions): BackendContext {
-  const ctx: BackendContext = {
+  return {
     bridge: options.bridge,
     hook: options.hook,
-    api: null,
+    backends: [],
     appRecords: [],
     currentTab: null,
     currentAppRecord: null,
@@ -71,6 +70,4 @@ export function createBackendContext (options: CreateBackendContextOptions): Bac
     customInspectors: [],
     timelineMarkers: []
   }
-  ctx.api = new DevtoolsApi(options.bridge, ctx)
-  return ctx
 }

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

@@ -1,19 +1,36 @@
 import { AppRecord } from './app-record'
 import { DevtoolsApi } from './api'
+import { BackendContext } from './backend-context'
 
 export enum BuiltinBackendFeature {
-  COMPONENTS = 'components',
-  EVENTS = 'events',
-  VUEX = 'vuex',
   /**
    * @deprecated
    */
   FLUSH = 'flush'
 }
 
-export interface DevtoolsBackend {
+export interface DevtoolsBackendOptions {
   frameworkVersion: 1 | 2 | 3
-  availableFeatures: (BuiltinBackendFeature | string)[]
+  features: (BuiltinBackendFeature | string)[]
   setup: (api: DevtoolsApi) => void
   setupApp?: (api: DevtoolsApi, app: AppRecord) => void
 }
+
+export function defineBackend (options: DevtoolsBackendOptions) {
+  return options
+}
+
+export interface DevtoolsBackend {
+  options: DevtoolsBackendOptions
+  api: DevtoolsApi
+}
+
+export function createBackend (options: DevtoolsBackendOptions, ctx: BackendContext): DevtoolsBackend {
+  const backend: DevtoolsBackend = {
+    options,
+    api: null
+  }
+  backend.api = new DevtoolsApi(backend, ctx)
+  options.setup(backend.api)
+  return backend
+}