File size: 3,621 Bytes
4d70170 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
import { defineBackend } from '@vue-devtools/app-backend-api'
import { HookEvents, backendInjections } from '@vue-devtools/shared-utils'
import { ComponentWalker } from './components/tree'
import { editState, getCustomInstanceDetails, getCustomObjectDetails, getInstanceDetails } from './components/data'
import { getComponentInstances, getInstanceName } from './components/util'
import { getComponentInstanceFromElement, getInstanceOrVnodeRect, getRootElementsFromComponentInstance } from './components/el'
export const backend = defineBackend({
frameworkVersion: 3,
features: [],
setup(api) {
api.on.getAppRecordName((payload) => {
if (payload.app._component) {
payload.name = payload.app._component.name
}
})
api.on.getAppRootInstance((payload) => {
if (payload.app._instance) {
payload.root = payload.app._instance
}
else if (payload.app._container?._vnode?.component) {
payload.root = payload.app._container?._vnode?.component
}
})
api.on.walkComponentTree(async (payload, ctx) => {
const walker = new ComponentWalker(payload.maxDepth, payload.filter, payload.recursively, api, ctx)
payload.componentTreeData = await walker.getComponentTree(payload.componentInstance)
})
api.on.walkComponentParents((payload, ctx) => {
const walker = new ComponentWalker(0, null, false, api, ctx)
payload.parentInstances = walker.getComponentParents(payload.componentInstance)
})
api.on.inspectComponent((payload, ctx) => {
// @TODO refactor
backendInjections.getCustomInstanceDetails = getCustomInstanceDetails
backendInjections.getCustomObjectDetails = getCustomObjectDetails
backendInjections.instanceMap = ctx.currentAppRecord.instanceMap
backendInjections.isVueInstance = val => val._ && Object.keys(val._).includes('vnode')
payload.instanceData = getInstanceDetails(payload.componentInstance, ctx)
})
api.on.getComponentName((payload) => {
payload.name = getInstanceName(payload.componentInstance)
})
api.on.getComponentBounds((payload) => {
payload.bounds = getInstanceOrVnodeRect(payload.componentInstance)
})
api.on.getElementComponent((payload) => {
payload.componentInstance = getComponentInstanceFromElement(payload.element)
})
api.on.getComponentInstances((payload) => {
payload.componentInstances = getComponentInstances(payload.app)
})
api.on.getComponentRootElements((payload) => {
payload.rootElements = getRootElementsFromComponentInstance(payload.componentInstance)
})
api.on.editComponentState((payload, ctx) => {
editState(payload, api.stateEditor, ctx)
})
api.on.getComponentDevtoolsOptions((payload) => {
payload.options = payload.componentInstance.type.devtools
})
api.on.getComponentRenderCode((payload) => {
payload.code = !(payload.componentInstance.type instanceof Function) ? payload.componentInstance.render.toString() : payload.componentInstance.type.toString()
})
api.on.transformCall((payload) => {
if (payload.callName === HookEvents.COMPONENT_UPDATED) {
const component = payload.inArgs[0]
payload.outArgs = [
component.appContext.app,
component.uid,
component.parent ? component.parent.uid : undefined,
component,
]
}
})
api.stateEditor.isRef = value => !!value?.__v_isRef
api.stateEditor.getRefValue = ref => ref.value
api.stateEditor.setRefValue = (ref, value) => {
ref.value = value
}
},
})
|