Skip to content

Commit 1af142a

Browse files
AkryumAkryum
committed
refactor: api for each backend + state editor, closes vuejs#1589 
1 parent 9361839 commit 1af142a

27 files changed

Lines changed: 385 additions & 281 deletions

File tree

‎packages/api/src/api/app.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
export type App = any // @TODO
1+
export type App = Record<string, any> & {
2+
__app: true // for type checking
3+
} // @TODO

‎packages/api/src/api/component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { InspectorNodeTag } from './api'
22
import { ID } from './util'
33

4-
export type ComponentInstance = any // @TODO
4+
export type ComponentInstance = Record<string, any> & {
5+
__component: true // for type checking
6+
} // @TODO
57

68
export interface ComponentTreeNode {
79
uid: ID

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

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import {
33
hasPluginPermission,
44
HookEvents,
55
PluginPermission,
6-
set,
76
getPluginDefaultSettings,
87
getPluginSettings,
9-
setPluginSettings
8+
setPluginSettings,
9+
StateEditor
1010
} from '@vue-devtools/shared-utils'
1111
import {
1212
Hooks,
@@ -25,17 +25,22 @@ import {
2525
import { DevtoolsHookable } from './hooks'
2626
import { BackendContext } from './backend-context'
2727
import { Plugin } from './plugin'
28+
import { DevtoolsBackend } from './backend'
29+
import { AppRecord } from './app-record'
2830

2931
let backendOn: DevtoolsHookable
3032
const pluginOn: DevtoolsHookable[] = []
3133

3234
export class DevtoolsApi {
3335
bridge: Bridge
3436
ctx: BackendContext
37+
backend: DevtoolsBackend
38+
stateEditor: StateEditor = new StateEditor()
3539

36-
constructor (bridge: Bridge, ctx: BackendContext) {
37-
this.bridge = bridge
40+
constructor (backend: DevtoolsBackend, ctx: BackendContext) {
41+
this.backend = backend
3842
this.ctx = ctx
43+
this.bridge = ctx.bridge
3944
if (!backendOn) { backendOn = new DevtoolsHookable(ctx) }
4045
}
4146

@@ -171,7 +176,7 @@ export class DevtoolsApi {
171176
path: arrayPath,
172177
type,
173178
state,
174-
set: (object, path = arrayPath, value = state.value, cb?) => set(object, path, value, cb || createDefaultSetCallback(state))
179+
set: (object, path = arrayPath, value = state.value, cb?) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state))
175180
})
176181
return payload.componentInstance
177182
}
@@ -240,37 +245,26 @@ export class DevtoolsApi {
240245
path: arrayPath,
241246
type,
242247
state,
243-
set: (object, path = arrayPath, value = state.value, cb?) => set(object, path, value, cb || createDefaultSetCallback(state))
248+
set: (object, path = arrayPath, value = state.value, cb?) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state))
244249
})
245250
}
246251
}
247252

248-
function createDefaultSetCallback (state: EditStatePayload) {
249-
return (obj, field, value) => {
250-
if (state.remove || state.newKey) {
251-
if (Array.isArray(obj)) {
252-
obj.splice(field, 1)
253-
} else {
254-
delete obj[field]
255-
}
256-
}
257-
if (!state.remove) {
258-
obj[state.newKey || field] = value
259-
}
260-
}
261-
}
262-
263253
export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPluginApi<TSettings> {
264254
bridge: Bridge
265255
ctx: BackendContext
266256
plugin: Plugin
257+
appRecord: AppRecord
258+
backendApi: DevtoolsApi
267259
on: DevtoolsHookable
268260
private defaultSettings: TSettings
269261

270-
constructor (plugin: Plugin, ctx: BackendContext) {
262+
constructor (plugin: Plugin, appRecord: AppRecord, ctx: BackendContext) {
271263
this.bridge = ctx.bridge
272264
this.ctx = ctx
273265
this.plugin = plugin
266+
this.appRecord = appRecord
267+
this.backendApi = appRecord.backend.api
274268
this.defaultSettings = getPluginDefaultSettings(plugin.descriptor.settings)
275269
this.on = new DevtoolsHookable(ctx, plugin)
276270
pluginOn.push(this.on)
@@ -282,7 +276,7 @@ export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPlugi
282276
if (!this.enabled || !this.hasPermission(PluginPermission.COMPONENTS)) return
283277

284278
if (instance) {
285-
this.ctx.hook.emit(HookEvents.COMPONENT_UPDATED, ...await this.ctx.api.transformCall(HookEvents.COMPONENT_UPDATED, instance))
279+
this.ctx.hook.emit(HookEvents.COMPONENT_UPDATED, ...await this.backendApi.transformCall(HookEvents.COMPONENT_UPDATED, instance))
286280
} else {
287281
this.ctx.hook.emit(HookEvents.COMPONENT_UPDATED)
288282
}
@@ -331,15 +325,15 @@ export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPlugi
331325
}
332326

333327
getComponentBounds (instance: ComponentInstance) {
334-
return this.ctx.api.getComponentBounds(instance)
328+
return this.backendApi.getComponentBounds(instance)
335329
}
336330

337331
getComponentName (instance: ComponentInstance) {
338-
return this.ctx.api.getComponentName(instance)
332+
return this.backendApi.getComponentName(instance)
339333
}
340334

341335
getComponentInstances (app: App) {
342-
return this.ctx.api.getComponentInstances(app)
336+
return this.backendApi.getComponentInstances(app)
343337
}
344338

345339
highlightElement (instance: ComponentInstance) {

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
import { Bridge } from '@vue-devtools/shared-utils'
22
import {
33
TimelineLayerOptions,
4-
App,
54
CustomInspectorOptions,
65
TimelineEventOptions,
76
WithId,
87
ID,
98
TimelineMarkerOptions
109
} from '@vue/devtools-api'
1110
import { AppRecord } from './app-record'
12-
import { DevtoolsApi } from './api'
1311
import { Plugin } from './plugin'
1412
import { DevtoolsHook } from './global-hook'
13+
import { DevtoolsBackend } from './backend'
1514

1615
export interface BackendContext {
1716
bridge: Bridge
1817
hook: DevtoolsHook
19-
api: DevtoolsApi
18+
backends: DevtoolsBackend[]
2019
appRecords: AppRecord[]
2120
currentTab: string
2221
currentAppRecord: AppRecord
@@ -32,17 +31,17 @@ export interface BackendContext {
3231
}
3332

3433
export interface TimelineLayer extends TimelineLayerOptions {
35-
app: App
34+
appRecord: AppRecord | null
3635
plugin: Plugin
3736
events: (TimelineEventOptions & WithId)[]
3837
}
3938

4039
export interface TimelineMarker extends TimelineMarkerOptions {
41-
app: App | null
40+
appRecord: AppRecord | null
4241
}
4342

4443
export interface CustomInspector extends CustomInspectorOptions {
45-
app: App
44+
appRecord: AppRecord
4645
plugin: Plugin
4746
treeFilter: string
4847
selectedNodeId: string
@@ -54,10 +53,10 @@ export interface CreateBackendContextOptions {
5453
}
5554

5655
export function createBackendContext (options: CreateBackendContextOptions): BackendContext {
57-
const ctx: BackendContext = {
56+
return {
5857
bridge: options.bridge,
5958
hook: options.hook,
60-
api: null,
59+
backends: [],
6160
appRecords: [],
6261
currentTab: null,
6362
currentAppRecord: null,
@@ -71,6 +70,4 @@ export function createBackendContext (options: CreateBackendContextOptions): Bac
7170
customInspectors: [],
7271
timelineMarkers: []
7372
}
74-
ctx.api = new DevtoolsApi(options.bridge, ctx)
75-
return ctx
7673
}

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
11
import { AppRecord } from './app-record'
22
import { DevtoolsApi } from './api'
3+
import { BackendContext } from './backend-context'
34

45
export enum BuiltinBackendFeature {
5-
COMPONENTS = 'components',
6-
EVENTS = 'events',
7-
VUEX = 'vuex',
86
/**
97
* @deprecated
108
*/
119
FLUSH = 'flush'
1210
}
1311

14-
export interface DevtoolsBackend {
12+
export interface DevtoolsBackendOptions {
1513
frameworkVersion: 1 | 2 | 3
16-
availableFeatures: (BuiltinBackendFeature | string)[]
14+
features: (BuiltinBackendFeature | string)[]
1715
setup: (api: DevtoolsApi) => void
1816
setupApp?: (api: DevtoolsApi, app: AppRecord) => void
1917
}
18+
19+
export function defineBackend (options: DevtoolsBackendOptions) {
20+
return options
21+
}
22+
23+
export interface DevtoolsBackend {
24+
options: DevtoolsBackendOptions
25+
api: DevtoolsApi
26+
}
27+
28+
export function createBackend (options: DevtoolsBackendOptions, ctx: BackendContext): DevtoolsBackend {
29+
const backend: DevtoolsBackend = {
30+
options,
31+
api: null
32+
}
33+
backend.api = new DevtoolsApi(backend, ctx)
34+
options.setup(backend.api)
35+
return backend
36+
}

0 commit comments

Comments
 (0)