Match-id-094551ccf405a03b88a0a038c149dac31ae48e12

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();

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);