Skip to content

Commit fa0604f

Browse files
AkryumAkryum
committed
feat: basic render code view, closes vuejs#535 
1 parent 5ddb9df commit fa0604f

18 files changed

Lines changed: 1406 additions & 10 deletions

File tree

‎packages/api/src/api/hooks.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const enum Hooks {
1818
GET_COMPONENT_ROOT_ELEMENTS = 'getComponentRootElements',
1919
EDIT_COMPONENT_STATE = 'editComponentState',
2020
GET_COMPONENT_DEVTOOLS_OPTIONS = 'getAppDevtoolsOptions',
21+
GET_COMPONENT_RENDER_CODE = 'getComponentRenderCode',
2122
INSPECT_TIMELINE_EVENT = 'inspectTimelineEvent',
2223
GET_INSPECTOR_TREE = 'getInspectorTree',
2324
GET_INSPECTOR_STATE = 'getInspectorState',
@@ -101,6 +102,10 @@ export type HookPayloads = {
101102
componentInstance: ComponentInstance
102103
options: ComponentDevtoolsOptions
103104
}
105+
[Hooks.GET_COMPONENT_RENDER_CODE]: {
106+
componentInstance: ComponentInstance
107+
code: string
108+
}
104109
[Hooks.INSPECT_TIMELINE_EVENT]: {
105110
app: App
106111
layerId: string
@@ -158,6 +163,7 @@ export interface Hookable<TContext> {
158163
getComponentRootElements (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_ROOT_ELEMENTS], TContext>)
159164
editComponentState (handler: HookHandler<HookPayloads[Hooks.EDIT_COMPONENT_STATE], TContext>)
160165
getComponentDevtoolsOptions (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS], TContext>)
166+
getComponentRenderCode (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_RENDER_CODE], TContext>)
161167
inspectTimelineEvent (handler: HookHandler<HookPayloads[Hooks.INSPECT_TIMELINE_EVENT], TContext>)
162168
getInspectorTree (handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_TREE], TContext>)
163169
getInspectorState (handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_STATE], TContext>)

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,18 @@ export class DevtoolsApi {
175175
return payload.options || {}
176176
}
177177

178+
async getComponentRenderCode (instance: ComponentInstance): Promise<{
179+
code: string
180+
}> {
181+
const payload = await this.callHook(Hooks.GET_COMPONENT_RENDER_CODE, {
182+
componentInstance: instance,
183+
code: null
184+
})
185+
return {
186+
code: payload.code
187+
}
188+
}
189+
178190
async inspectTimelineEvent (eventData: TimelineEventOptions & WithId, app: App) {
179191
const payload = await this.callHook(Hooks.INSPECT_TIMELINE_EVENT, {
180192
event: eventData.event,

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,10 @@ export class DevtoolsHookable implements Hookable<BackendContext> {
120120
this.hook(Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS, handler, PluginPermission.COMPONENTS)
121121
}
122122

123+
getComponentRenderCode (handler: Handler<HookPayloads[Hooks.GET_COMPONENT_RENDER_CODE]>) {
124+
this.hook(Hooks.GET_COMPONENT_RENDER_CODE, handler, PluginPermission.COMPONENTS)
125+
}
126+
123127
inspectTimelineEvent (handler: Handler<HookPayloads[Hooks.INSPECT_TIMELINE_EVENT]>) {
124128
this.hook(Hooks.INSPECT_TIMELINE_EVENT, handler, PluginPermission.TIMELINE)
125129
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,17 @@ async function connect () {
227227
}
228228
})
229229

230+
ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_RENDER_CODE, async ({ instanceId }) => {
231+
const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
232+
if (instance) {
233+
const { code } = await ctx.api.getComponentRenderCode(instance)
234+
ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_RENDER_CODE, {
235+
instanceId,
236+
code
237+
})
238+
}
239+
})
240+
230241
// Component perf
231242

232243
hook.on(HookEvents.PERFORMANCE_START, (app, uid, vm, type, time) => {

‎packages/app-backend-vue2/src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ export const backend: DevtoolsBackend = {
6262
payload.options = payload.componentInstance.$options.devtools
6363
})
6464

65+
api.on.getComponentRenderCode(payload => {
66+
payload.code = payload.componentInstance.$options.render.toString()
67+
})
68+
6569
api.on.getComponentInstances(() => {
6670
console.warn('on.getComponentInstances is not implemented for Vue 2')
6771
})

‎packages/app-backend-vue3/src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ export const backend: DevtoolsBackend = {
7070
payload.options = payload.componentInstance.type.devtools
7171
})
7272

73+
api.on.getComponentRenderCode(payload => {
74+
payload.code = payload.componentInstance.render.toString()
75+
})
76+
7377
api.on.transformCall(payload => {
7478
if (payload.callName === HookEvents.COMPONENT_UPDATED) {
7579
const component = payload.inArgs[0]

‎packages/app-frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
"private": true,
55
"dependencies": {
66
"@pixi/unsafe-eval": "^5.3.7",
7-
"@vue/devtools-api": "^6.0.0-beta.9",
87
"@vue-devtools/shared-utils": "^0.0.0",
98
"@vue/composition-api": "^0.6.7",
9+
"@vue/devtools-api": "^6.0.0-beta.9",
1010
"@vue/ui": "^0.12.5",
1111
"circular-json-es6": "^2.0.2",
1212
"d3": "^5.16.0",
1313
"lodash": "^4.17.15",
1414
"lru-cache": "^5.1.1",
15+
"monaco-editor": "^0.24.0",
1516
"pixi.js-legacy": "^5.3.7",
1617
"portal-vue": "^2.1.7",
1718
"scroll-into-view-if-needed": "^2.2.28",

0 commit comments

Comments
 (0)