Match-id-587601ebdfc3d3ef7e317bb42380ca4a550725bd

libs/extension/src/devtools/mock.ts

@@ -5,8 +5,9 @@
 
 import { parseAttr } from '../parser/parseAttr';
 import parseTreeRoot from '../parser/parseVNode';
-import { VNode } from './../../../horizon/src/renderer/vnode/VNode';
+import { VNode } from '../../../horizon/src/renderer/vnode/VNode';
-import { FunctionComponent, ClassComponent } from './../../../horizon/src/renderer/vnode/VNodeTags';
+import { FunctionComponent, ClassComponent } from '../../../horizon/src/renderer/vnode/VNodeTags';
+import { helper } from '../../../horizon/src/external/devtools';
 
 const mockComponentNames = ['Apple', 'Pear', 'Banana', 'Orange', 'Jenny', 'Kiwi', 'Coconut'];
 
@@ -50,7 +51,7 @@ addOneThousandNode(tree);
 
 /**
  * 将mock数据转变为 VNode 树
- * 
+ *
  * @param node 树节点
  * @param vNode VNode节点
  */
@@ -78,7 +79,7 @@ function getMockVNodeTree(node: IMockTree, vNode: VNode) {
 const rootVNode = MockVNode(tree.tag);
 getMockVNodeTree(tree, rootVNode);
 
-export const mockParsedVNodeData = parseTreeRoot(rootVNode);
+export const mockParsedVNodeData = parseTreeRoot(helper.travelVNodeTree, rootVNode);
 
 const mockState = {
   str: 'jenny',

libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx

@@ -17,6 +17,7 @@ function reducer(state, action) {
 export default function MockFunctionComponent(props) {
   const [state, dispatch] = useReducer(reducer, initialState);
   const [age, setAge] = useState(0);
+  const [name, setName] = useState({test: 1});
   const domRef = useRef<HTMLDivElement>();
   const objRef = useRef({ str: 'string' });
   const context = useContext(MockContext);
@@ -26,6 +27,7 @@ export default function MockFunctionComponent(props) {
   return (
     <div>
       age: {age}
+      name: {name.test}
       <button onClick={() => setAge(age + 1)} >update age</button>
       count: {props.count}
       <div ref={domRef} />
@@ -33,4 +35,4 @@ export default function MockFunctionComponent(props) {
       <div>{context.ctx}</div>
     </div>
   );
-}
+}

libs/extension/src/devtools/mockPage/index.tsx

@@ -1,4 +1,4 @@
-import { render } from 'horizon';
+import { render, useState } from 'horizon';
 import MockClassComponent from './MockClassComponent';
 import MockFunctionComponent from './MockFunctionComponent';
 import { MockContext } from './MockContext';
@@ -6,11 +6,13 @@ import { MockContext } from './MockContext';
 const root = document.createElement('div');
 document.body.append(root);
 function App() {
+  const [count, setCount] = useState(12);
   return (
     <div>
+      <button onClick={() => (setCount(count + 1))} >add count</button>
       <MockContext.Provider value={{ ctx: 'I am ctx' }}>
         <MockClassComponent fruit={'apple'} />
-        <MockFunctionComponent />
+        <MockFunctionComponent count={count}/>
       </MockContext.Provider>
       abc
     </div>