feat: basic render code view, closes #535

Author: Akryum

packages/api/src/api/hooks.ts

@@ -18,6 +18,7 @@ export const enum Hooks {
   GET_COMPONENT_ROOT_ELEMENTS = 'getComponentRootElements',
   EDIT_COMPONENT_STATE = 'editComponentState',
   GET_COMPONENT_DEVTOOLS_OPTIONS = 'getAppDevtoolsOptions',
+  GET_COMPONENT_RENDER_CODE = 'getComponentRenderCode',
   INSPECT_TIMELINE_EVENT = 'inspectTimelineEvent',
   GET_INSPECTOR_TREE = 'getInspectorTree',
   GET_INSPECTOR_STATE = 'getInspectorState',
@@ -101,6 +102,10 @@ export type HookPayloads = {
     componentInstance: ComponentInstance
     options: ComponentDevtoolsOptions
   }
+  [Hooks.GET_COMPONENT_RENDER_CODE]: {
+    componentInstance: ComponentInstance
+    code: string
+  }
   [Hooks.INSPECT_TIMELINE_EVENT]: {
     app: App
     layerId: string
@@ -158,6 +163,7 @@ export interface Hookable<TContext> {
   getComponentRootElements (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_ROOT_ELEMENTS], TContext>)
   editComponentState (handler: HookHandler<HookPayloads[Hooks.EDIT_COMPONENT_STATE], TContext>)
   getComponentDevtoolsOptions (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS], TContext>)
+  getComponentRenderCode (handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_RENDER_CODE], TContext>)
   inspectTimelineEvent (handler: HookHandler<HookPayloads[Hooks.INSPECT_TIMELINE_EVENT], TContext>)
   getInspectorTree (handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_TREE], TContext>)
   getInspectorState (handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_STATE], TContext>)

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

@@ -175,6 +175,18 @@ export class DevtoolsApi {
     return payload.options || {}
   }
 
+  async getComponentRenderCode (instance: ComponentInstance): Promise<{
+    code: string
+  }> {
+    const payload = await this.callHook(Hooks.GET_COMPONENT_RENDER_CODE, {
+      componentInstance: instance,
+      code: null
+    })
+    return {
+      code: payload.code
+    }
+  }
+
   async inspectTimelineEvent (eventData: TimelineEventOptions & WithId, app: App) {
     const payload = await this.callHook(Hooks.INSPECT_TIMELINE_EVENT, {
       event: eventData.event,

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

@@ -120,6 +120,10 @@ export class DevtoolsHookable implements Hookable<BackendContext> {
     this.hook(Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS, handler, PluginPermission.COMPONENTS)
   }
 
+  getComponentRenderCode (handler: Handler<HookPayloads[Hooks.GET_COMPONENT_RENDER_CODE]>) {
+    this.hook(Hooks.GET_COMPONENT_RENDER_CODE, handler, PluginPermission.COMPONENTS)
+  }
+
   inspectTimelineEvent (handler: Handler<HookPayloads[Hooks.INSPECT_TIMELINE_EVENT]>) {
     this.hook(Hooks.INSPECT_TIMELINE_EVENT, handler, PluginPermission.TIMELINE)
   }

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

@@ -227,6 +227,17 @@ async function connect () {
     }
   })
 
+  ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_RENDER_CODE, async ({ instanceId }) => {
+    const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
+    if (instance) {
+      const { code } = await ctx.api.getComponentRenderCode(instance)
+      ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_RENDER_CODE, {
+        instanceId,
+        code
+      })
+    }
+  })
+
   // Component perf
 
   hook.on(HookEvents.PERFORMANCE_START, (app, uid, vm, type, time) => {

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

@@ -62,6 +62,10 @@ export const backend: DevtoolsBackend = {
       payload.options = payload.componentInstance.$options.devtools
     })
 
+    api.on.getComponentRenderCode(payload => {
+      payload.code = payload.componentInstance.$options.render.toString()
+    })
+
     api.on.getComponentInstances(() => {
       console.warn('on.getComponentInstances is not implemented for Vue 2')
     })

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

@@ -70,6 +70,10 @@ export const backend: DevtoolsBackend = {
       payload.options = payload.componentInstance.type.devtools
     })
 
+    api.on.getComponentRenderCode(payload => {
+      payload.code = payload.componentInstance.render.toString()
+    })
+
     api.on.transformCall(payload => {
       if (payload.callName === HookEvents.COMPONENT_UPDATED) {
         const component = payload.inArgs[0]

packages/app-frontend/package.json

@@ -4,14 +4,15 @@
   "private": true,
   "dependencies": {
     "@pixi/unsafe-eval": "^5.3.7",
-    "@vue/devtools-api": "^6.0.0-beta.9",
     "@vue-devtools/shared-utils": "^0.0.0",
     "@vue/composition-api": "^0.6.7",
+    "@vue/devtools-api": "^6.0.0-beta.9",
     "@vue/ui": "^0.12.5",
     "circular-json-es6": "^2.0.2",
     "d3": "^5.16.0",
     "lodash": "^4.17.15",
     "lru-cache": "^5.1.1",
+    "monaco-editor": "^0.24.0",
     "pixi.js-legacy": "^5.3.7",
     "portal-vue": "^2.1.7",
     "scroll-into-view-if-needed": "^2.2.28",