diff --git a/libs/extension/src/injector/index.ts b/libs/extension/src/injector/index.ts index 58432849..0d1ad023 100644 --- a/libs/extension/src/injector/index.ts +++ b/libs/extension/src/injector/index.ts @@ -1,4 +1,4 @@ -import parseTreeRoot, { deleteVNode, queryVNode } from '../parser/parseVNode'; +import parseTreeRoot, { clearVNode, queryVNode } from '../parser/parseVNode'; import { packagePayload, checkMessage } from './../utils/transferTool'; import { RequestAllVNodeTreeInfos, @@ -12,6 +12,32 @@ import { VNode } from './../../../horizon/src/renderer/vnode/VNode'; import { ClassComponent } from '../../../horizon/src/renderer/vnode/VNodeTags'; import { parseAttr } from '../parser/parseAttr'; +const roots = []; + +function addIfNotInclude(treeRoot: VNode) { + if (!roots.includes(treeRoot)) { + roots.push(treeRoot); + } +} + +function send() { + const result = roots.reduce((pre, current) => { + const info = parseTreeRoot(current); + pre.push(info); + return pre; + }, []); + postMessage(AllVNodeTreesInfos, result); +} + +function deleteVNode(vNode: VNode) { + // 开发工具中保存了 vNode 的引用,在清理 VNode 的时候需要一并删除 + clearVNode(vNode); + const index = roots.indexOf(vNode); + if (index !== -1) { + roots.splice(index, 1); + } +} + function postMessage(type: string, data) { window.postMessage(packagePayload({ type: type, @@ -19,7 +45,19 @@ function postMessage(type: string, data) { }, DevToolHook), '*'); } -const roots = []; +function parseCompAttrs(id: number) { + const vNode: VNode = queryVNode(id); + const tag = vNode.tag; + if (tag === ClassComponent) { + const { props, state } = vNode; + const parsedProps = parseAttr(props); + const parsedState = parseAttr(state); + postMessage(ComponentAttrs, { + parsedProps, + parsedState, + }); + } +} function injectHook() { if (window.__HORIZON_DEV_HOOK__) { @@ -28,27 +66,9 @@ function injectHook() { Object.defineProperty(window, '__HORIZON_DEV_HOOK__', { enumerable: false, value: { - addIfNotInclude: function (treeRoot: VNode) { - if (!roots.includes(treeRoot)) { - roots.push(treeRoot); - } - }, - send: function () { - const result = roots.reduce((pre, current) => { - const info = parseTreeRoot(current); - pre.push(info); - return pre; - }, []); - postMessage(AllVNodeTreesInfos, result); - }, - delete: function (vNode: VNode) { - // 开发工具中保存了 vNode 的引用,在清理 VNode 的时候需要一并删除 - deleteVNode(vNode); - const index = roots.indexOf(vNode); - if (index !== -1) { - roots.splice(index, 1); - } - } + addIfNotInclude, + send, + deleteVNode, }, }); window.addEventListener('message', function (event) { @@ -61,26 +81,12 @@ function injectHook() { const { payload } = request; const { type, data } = payload; if (type === RequestAllVNodeTreeInfos) { - const result = roots.reduce((pre, current) => { - const info = parseTreeRoot(current); - pre.push(info); - return pre; - }, []); - postMessage(AllVNodeTreesInfos, result); + send(); } else if (type === RequestComponentAttrs) { - const vNode: VNode = queryVNode(data); - const tag = vNode.tag; - if (tag === ClassComponent) { - const { props, state } = vNode; - const parsedProps = parseAttr(props); - const parsedState = parseAttr(state); - postMessage(ComponentAttrs, { - parsedProps, - parsedState, - }); - } + parseCompAttrs(data); } } }); } + injectHook(); diff --git a/libs/extension/src/parser/parseVNode.ts b/libs/extension/src/parser/parseVNode.ts index e4ecc276..fbf4b0bd 100644 --- a/libs/extension/src/parser/parseVNode.ts +++ b/libs/extension/src/parser/parseVNode.ts @@ -61,7 +61,7 @@ export function queryVNode(id: number) { return IdToVNodeMap.get(id); } -export function deleteVNode(vNode: VNode) { +export function clearVNode(vNode: VNode) { if (VNodeToIdMap.has(vNode)) { const id = VNodeToIdMap.get(vNode); VNodeToIdMap.delete(vNode);