Match-id-e56b18c31b44e4091ce6cf98af6502f369a02364

2022-04-25 19:55:21 +08:00 · 2022-04-25 19:55:21 +08:00 · 58d5869a58
parent 0237a0b72c
commit 58d5869a58
6 changed files with 165 additions and 102 deletions
--- a/libs/extension/src/background/index.ts
+++ b/libs/extension/src/background/index.ts
@ -1,6 +1,6 @@
 import { checkMessage, packagePayload, changeSource } from '../utils/transferTool';
 import { RequestAllVNodeTreeInfos, InitDevToolPageConnection, DevToolBackground } from '../utils/constants';
-import { DevToolPanel, DevToolContentScript } from './../utils/constants';
+import { DevToolPanel, DevToolContentScript } from '../utils/constants';

 // 多个页面、tab页共享一个 background，需要建立连接池，给每个tab建立连接
 const connections = {};
--- a/libs/extension/src/components/ComponentInfo.tsx
+++ b/libs/extension/src/components/ComponentInfo.tsx
@ -5,17 +5,19 @@ import Copy from '../svgs/Copy';
 import Triangle from '../svgs/Triangle';
 import { useState, useEffect } from 'horizon';
 import { IData } from './VTree';
-import { IAttr } from '../parser/parseAttr';
+import { buildAttrModifyData, IAttr } from '../parser/parseAttr';
+import { postMessageToBackground } from '../panelConnection';
+import { ModifyAttrs } from '../utils/constants';

 type IComponentInfo = {
  name: string;
  attrs: {
-    props?: IAttr[];
-    context?: IAttr[];
-    state?: IAttr[];
-    hooks?: IAttr[];
+    parsedProps?: IAttr[],
+    parsedState?: IAttr[],
+    parsedHooks?: IAttr[],
  };
  parents: IData[];
+  id: number;
  onClickParent: (item: IData) => void;
 };

@ -26,11 +28,18 @@ function collapseAllNodes(attrs: IAttr[]) {
  });
 }

-function ComponentAttr({ name, attrs }: { name: string, attrs: IAttr[] }) {
+function ComponentAttr({ attrsName, attrsType, attrs, id }: {
+  attrsName: string,
+  attrsType: string,
+  attrs: IAttr[],
+  id: number}) {
  const [collapsedNode, setCollapsedNode] = useState(collapseAllNodes(attrs));
+  const [editableAttrs, setEditableAttrs] = useState(attrs);
  useEffect(() => {
    setCollapsedNode(collapseAllNodes(attrs));
+    setEditableAttrs(attrs);
  }, [attrs]);
+
  const handleCollapse = (item: IAttr) => {
    const nodes = [...collapsedNode];
    const i = nodes.indexOf(item);
@ -44,7 +53,7 @@ function ComponentAttr({ name, attrs }: { name: string, attrs: IAttr[] }) {

  const showAttr = [];
  let currentIndentation = null;
-  attrs.forEach((item, index) => {
+  editableAttrs.forEach((item, index) => {
    const indentation = item.indentation;
    if (currentIndentation !== null) {
      if (indentation > currentIndentation) {
@ -53,17 +62,40 @@ function ComponentAttr({ name, attrs }: { name: string, attrs: IAttr[] }) {
        currentIndentation = null;
      }
    }
-    const nextItem = attrs[index + 1];
+    const nextItem = editableAttrs[index + 1];
    const hasChild = nextItem ? nextItem.indentation - item.indentation > 0 : false;
    const isCollapsed = collapsedNode.includes(item);
    showAttr.push(
-      <div style={{ paddingLeft: item.indentation * 10 }} key={index} onClick={() => (handleCollapse(item))}>
+      <div style={{ paddingLeft: item.indentation * 10 }} key={index} onClick={() => handleCollapse(item)}>
        <span className={styles.attrArrow}>{hasChild && <Triangle director={isCollapsed ? 'right' : 'down'} />}</span>
        <span className={styles.attrName}>{`${item.name}`}</span>
        {' :'}
-        {item.type === 'string' || item.type === 'number' 
-        ? <input value={item.value} className={styles.attrValue}>{item.value}</input>
-        : <span className={styles.attrValue}>{item.value}</span>}
+        {item.type === 'string' || item.type === 'number' ? (
+          <input
+            value={item.value}
+            className={styles.attrValue}
+            onChange={(event) => {
+              const nextAttrs = [...editableAttrs];
+              const nextItem = {...item};
+              nextItem.value = event.target.value;
+              nextAttrs[index] = nextItem;
+              setEditableAttrs(nextAttrs);
+            }}
+            onKeyUp={(event) => {
+              const value = (event.target as HTMLInputElement).value;
+              if (event.key === 'Enter') {
+                if(isDev) {
+                  console.log('post attr change', value);
+                } else {
+                  const data = buildAttrModifyData(attrsType,attrs, value,item, index, id);
+                  postMessageToBackground(ModifyAttrs, data);
+                }
+              }
+            }}
+          />
+        ) : (
+          <span className={styles.attrValue}>{item.value}</span>
+        )}
      </div>
    );
    if (isCollapsed) {
@ -74,7 +106,7 @@ function ComponentAttr({ name, attrs }: { name: string, attrs: IAttr[] }) {
  return (
    <div className={styles.attrContainer}>
      <div className={styles.attrHead}>
-        <span className={styles.attrType}>{name}</span>
+        <span className={styles.attrType}>{attrsName}</span>
        <span className={styles.attrCopy}>
          <Copy />
        </span>
@ -86,8 +118,7 @@ function ComponentAttr({ name, attrs }: { name: string, attrs: IAttr[] }) {
  );
 }

-export default function ComponentInfo({ name, attrs, parents, onClickParent }: IComponentInfo) {
-  const { state, props, context, hooks } = attrs;
+export default function ComponentInfo({ name, attrs, parents, id, onClickParent }: IComponentInfo) {
  return (
    <div className={styles.infoContainer} >
      <div className={styles.componentInfoHead}>
@ -104,10 +135,14 @@ export default function ComponentInfo({ name, attrs, parents, onClickParent }: I
        </>}
      </div>
      <div className={styles.componentInfoMain}>
-        {context && <ComponentAttr name={'context'} attrs={context} />}
-        {props && props.length !== 0 && <ComponentAttr name={'props'} attrs={props} />}
-        {state && state.length !== 0 && <ComponentAttr name={'state'} attrs={state} />}
-        {hooks && hooks.length !== 0 && <ComponentAttr name={'hook'} attrs={hooks} />}
+        {Object.keys(attrs).map(attrsType => {
+          const parsedAttrs = attrs[attrsType];
+          if (parsedAttrs && parsedAttrs.length !== 0) {
+            const attrsName = attrsType.slice(6); // parsedState => State
+            return <ComponentAttr attrsName={attrsName} attrs={parsedAttrs} id={id} attrsType={attrsType}/>;
+          }
+          return null;
+        })}
        <div className={styles.parentsInfo}>
          {name && <div>
            parents: {
@ -122,4 +157,4 @@ export default function ComponentInfo({ name, attrs, parents, onClickParent }: I
      </div>
    </div>
  );
-}
+}
--- a/libs/extension/src/injector/index.ts
+++ b/libs/extension/src/injector/index.ts
@ -1,5 +1,5 @@
 import parseTreeRoot, { clearVNode, queryVNode } from '../parser/parseVNode';
-import { packagePayload, checkMessage } from './../utils/transferTool';
+import { packagePayload, checkMessage } from '../utils/transferTool';
 import {
  RequestAllVNodeTreeInfos,
  AllVNodeTreesInfos,
@ -7,11 +7,9 @@ import {
  ComponentAttrs,
  DevToolHook,
  DevToolContentScript
-} from './../utils/constants';
-import { VNode } from './../../../horizon/src/renderer/vnode/VNode';
-import { ClassComponent } from '../../../horizon/src/renderer/vnode/VNodeTags';
-import { parseAttr, parseHooks } from '../parser/parseAttr';
-import { FunctionComponent } from './../../../horizon/src/renderer/vnode/VNodeTags';
+} from '../utils/constants';
+import { VNode } from '../../../horizon/src/renderer/vnode/VNode';
+import { parseVNodeAttrs } from '../parser/parseAttr';

 const roots = [];

@ -48,24 +46,8 @@ function postMessage(type: string, data) {

 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,
-    });
-  } else if (tag === FunctionComponent) {
-    const { props, hooks } = vNode;
-    const parsedProps = parseAttr(props);
-    const parsedHooks = parseHooks(hooks);
-    postMessage(ComponentAttrs, {
-      parsedProps,
-      parsedHooks,
-    });
-  }
+  const parsedAttrs = parseVNodeAttrs(vNode);
+  postMessage(ComponentAttrs, parsedAttrs);
 }

 function injectHook() {
--- a/libs/extension/src/panel/App.tsx
+++ b/libs/extension/src/panel/App.tsx
@ -9,13 +9,16 @@ import { FilterTree } from '../hooks/FilterTree';
 import Close from '../svgs/Close';
 import Arrow from './../svgs/Arrow';
 import {
-  InitDevToolPageConnection,
  AllVNodeTreesInfos,
  RequestComponentAttrs,
  ComponentAttrs,
-  DevToolPanel,
-} from './../utils/constants';
-import { packagePayload } from './../utils/transferTool';
+} from '../utils/constants';
+import {
+  addBackgroundMessageListener,
+  initBackgroundConnection,
+  postMessageToBackground, removeBackgroundMessageListener,
+} from '../panelConnection';
+import { IAttr } from '../parser/parseAttr';

 const parseVNodeData = (rawData) => {
  const idIndentationMap: {
@ -59,45 +62,13 @@ const getParents = (item: IData | null, parsedVNodeData: IData[]) => {
  return parents;
 };

-let connection;
-if (!isDev) {
-  // 与 background 的唯一连接
-  connection = chrome.runtime.connect({
-    name: 'panel'
-  });
-}
-
-let reconnectTimes = 0;
-
-function postMessage(type: string, data: any) {
-  try {
-    connection.postMessage(packagePayload({
-      type: type,
-      data: data,
-    }, DevToolPanel));
-  } catch(err) {
-    // 可能出现 port 关闭的场景，需要重新建立连接，增加可靠性
-    if (reconnectTimes === 20) {
-      reconnectTimes = 0;
-      console.error('reconnect failed');
-      return;
-    }
-    console.error(err);
-    reconnectTimes++;
-    // 重建连接
-    connection = chrome.runtime.connect({
-      name: 'panel'
-    });
-    // 重新发送初始化消息
-    postMessage(InitDevToolPageConnection, chrome.devtools.inspectedWindow.tabId);
-    // 初始化成功后才会重新发送消息
-    postMessage(type, data);
-  }
-}
-
 function App() {
  const [parsedVNodeData, setParsedVNodeData] = useState([]);
-  const [componentAttrs, setComponentAttrs] = useState({});
+  const [componentAttrs, setComponentAttrs] = useState<{
+    parsedProps?: IAttr[],
+    parsedState?: IAttr[],
+    parsedHooks?: IAttr[],
+  }>();
  const [selectComp, setSelectComp] = useState(null);
  const treeRootInfos = useRef<{id: number, length: number}[]>([]); // 记录保存的根节点 id 和长度，

@ -119,14 +90,11 @@ function App() {
      const parsedData = parseVNodeData(mockParsedVNodeData);
      setParsedVNodeData(parsedData);
      setComponentAttrs({
-        state: parsedMockState,
-        props: parsedMockState,
+        parsedProps: parsedMockState,
+        parsedState: parsedMockState,
      });
    } else {
-      // 页面打开后发送初始化请求
-      postMessage(InitDevToolPageConnection, chrome.devtools.inspectedWindow.tabId);
-      // 监听 background消息
-      connection.onMessage.addListener(function (message) {
+      const handleBackgroundMessage = (message) => {
        const { payload } = message;
        if (payload) {
          const { type, data } = payload;
@ -145,13 +113,21 @@ function App() {
          } else if (type === ComponentAttrs) {
            const {parsedProps, parsedState, parsedHooks} = data;
            setComponentAttrs({
-              props: parsedProps,
-              state: parsedState,
-              hooks: parsedHooks,
+              parsedProps,
+              parsedState,
+              parsedHooks,
            });
          }
        }
-      });
+      };
+      console.log('handle connection');
+      // 在页面渲染后初始化连接
+      initBackgroundConnection();
+      // 监听 background消息
+      addBackgroundMessageListener(handleBackgroundMessage);
+      return () => {
+        removeBackgroundMessageListener(handleBackgroundMessage);
+      };
    }
  }, []);

@ -162,11 +138,11 @@ function App() {
  const handleSelectComp = (item: IData) => {
    if (isDev) {
      setComponentAttrs({
-        state: parsedMockState,
-        props: parsedMockState,
+        parsedProps: parsedMockState,
+        parsedState: parsedMockState,
      });
    } else {
-      postMessage(RequestComponentAttrs, item.id);
+      postMessageToBackground(RequestComponentAttrs, item.id);
    }
    setSelectComp(item);
  };
@ -216,6 +192,7 @@ function App() {
          name={selectComp ? selectComp.name : null}
          attrs={selectComp ? componentAttrs : {}}
          parents={parents}
+          id={selectComp ? selectComp.id : null}
          onClickParent={handleClickParent} />
      </div>
    </div>
--- a/libs/extension/src/parser/parseAttr.ts
+++ b/libs/extension/src/parser/parseAttr.ts
@ -1,5 +1,8 @@

-import { Hook, Reducer, Ref } from './../../../horizon/src/renderer/hooks/HookType';
+import { Hook, Reducer, Ref } from '../../../horizon/src/renderer/hooks/HookType';
+import { ModifyHooks, ModifyProps, ModifyState } from '../utils/constants';
+import { VNode } from '../../../horizon/src/renderer/vnode/VNode';
+import { ClassComponent, FunctionComponent } from '../../../horizon/src/renderer/vnode/VNodeTags';

 // 展示值为 string 的可编辑类型
 type editableStringType = 'string' | 'number' | 'undefined' | 'null';
@ -12,7 +15,7 @@ type showAsStringType = editableStringType | unEditableStringType;


 export type IAttr = {
-  name: string;
+  name: string | number;
  indentation: number;
  hIndex?: number; // 用于记录 hook 的 hIndex 值
 } & ({
@ -131,3 +134,61 @@ export function parseHooks(hooks: Hook<any, any>[]) {
  });
  return result;
 }
+
+export function parseVNodeAttrs(vNode: VNode) {
+  const tag = vNode.tag;
+  if (tag === ClassComponent) {
+    const { props, state } = vNode;
+    const parsedProps = parseAttr(props);
+    const parsedState = parseAttr(state);
+    return {
+      parsedProps,
+      parsedState,
+    };
+  } else if (tag === FunctionComponent) {
+    const { props, hooks } = vNode;
+    const parsedProps = parseAttr(props);
+    const parsedHooks = parseHooks(hooks);
+    return {
+      parsedProps,
+      parsedHooks,
+    };
+  }
+}
+
+// 计算属性的访问顺序
+function calculateAttrAccessPath(item: IAttr, index: number, attrs: IAttr[]) {
+  let currentIndentation = item.indentation;
+  const path = [item.name];
+  for(let i = index - 1; i >= 0; i--) {
+    const lastItem = attrs[i];
+    const lastIndentation = lastItem.indentation;
+    if (lastIndentation < currentIndentation) {
+      path.push(lastItem.name);
+      currentIndentation = lastIndentation;
+    }
+  }
+  path.reverse();
+  return path;
+}
+
+export function buildAttrModifyData(parsedAttrsType: string, attrs: IAttr[], value, item: IAttr, index: number, id: number) {
+  const path = calculateAttrAccessPath(item, index, attrs);
+  let type;
+  if (parsedAttrsType === 'parsedProps') {
+    type = ModifyProps;
+  } else if (parsedAttrsType === 'parsedState') {
+    type = ModifyState;
+    path[0] = item.hIndex;
+  } else if (parsedAttrsType === 'parsedHooks') {
+    type = ModifyHooks;
+  } else {
+    return null;
+  }
+  return {
+    id: id,
+    type: type,
+    value: value,
+    path: path,
+  };
+}
--- a/libs/extension/src/utils/constants.ts
+++ b/libs/extension/src/utils/constants.ts
@ -11,6 +11,14 @@ export const RequestComponentAttrs = 'get component attrs';
 // 返回组件属性
 export const ComponentAttrs = 'component attrs';

+export const ModifyAttrs = 'modify attrs';
+
+export const ModifyProps = 'modify props';
+
+export const ModifyState = 'modify state';
+
+export const ModifyHooks = 'modify hooks';
+

 // 传递消息来源标志
 export const DevToolPanel = 'dev tool panel';
@ -19,4 +27,4 @@ export const DevToolBackground = 'dev tool background';

 export const DevToolContentScript = 'dev tool content script';

-export const DevToolHook = 'dev tool hook';
+export const DevToolHook = 'dev tool hook';