Skip to content

Commit 7090caa

Browse files
MrWangJustToDoMrWangJustToDo
committed
update
1 parent e516a87 commit 7090caa

File tree

14 files changed

+294
-65
lines changed

14 files changed

+294
-65
lines changed

‎chrome/public/bundle/forward-dev.js‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2530,6 +2530,7 @@
25302530
}
25312531

25322532
var linkStateToHookIndex = new WeakMap();
2533+
var linkStateToUpdaterNode = new WeakMap();
25332534
var parseHooksTreeToHOOKTree = function (node, d, p) {
25342535
var _p = p || { index: 0 };
25352536
return node.map(function (item) {
@@ -2636,22 +2637,40 @@
26362637
}
26372638
};
26382639
var tryLinkStateToHookIndex = function (fiber, state) {
2639-
var _a, _b, _c, _d, _e, _f;
2640+
var _a, _b, _c;
26402641
if (state.needUpdate && state.nodes) {
26412642
// filter all hook update queue
2642-
var nodes = (_b = (_a = state.nodes) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.call(_a, function (node) { return node.type === UpdateQueueType.hook; });
2643+
// const nodes = state.nodes?.filter?.((node) => node.type === UpdateQueueType.hook);
26432644
// get all the keys from the nodes;
2644-
var allHooksArray_1 = ((_d = (_c = fiber.hookList) === null || _c === void 0 ? void 0 : _c.toArray) === null || _d === void 0 ? void 0 : _d.call(_c)) || [];
2645-
var keys = ((_f = (_e = nodes === null || nodes === void 0 ? void 0 : nodes.map) === null || _e === void 0 ? void 0 : _e.call(nodes, function (node) { var _a; return (_a = allHooksArray_1 === null || allHooksArray_1 === void 0 ? void 0 : allHooksArray_1.findIndex) === null || _a === void 0 ? void 0 : _a.call(allHooksArray_1, function (_node) { return (node === null || node === void 0 ? void 0 : node.trigger) === _node; }); })) === null || _f === void 0 ? void 0 : _f.filter(function (i) { return i !== -1; })) || [];
2645+
var allHooksArray_1 = ((_b = (_a = fiber.hookList) === null || _a === void 0 ? void 0 : _a.toArray) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
2646+
var nodes = state.nodes || [];
2647+
var indexMap_1 = {};
2648+
var keys = ((_c = nodes.map) === null || _c === void 0 ? void 0 : _c.call(nodes, function (node) {
2649+
var _a;
2650+
if (node.type !== UpdateQueueType.hook)
2651+
return -1;
2652+
var index = (_a = allHooksArray_1 === null || allHooksArray_1 === void 0 ? void 0 : allHooksArray_1.findIndex) === null || _a === void 0 ? void 0 : _a.call(allHooksArray_1, function (_node) { return (node === null || node === void 0 ? void 0 : node.trigger) === _node; });
2653+
// there are a valid updater, link the before node value
2654+
if (index !== -1 && Object.prototype.hasOwnProperty.call(node, "_debugBeforeValue")) {
2655+
var data = getNode(node._debugBeforeValue);
2656+
indexMap_1[index] = data;
2657+
}
2658+
return index;
2659+
})) || [];
26462660
// link the keys to the state
26472661
linkStateToHookIndex.set(state, keys);
2662+
linkStateToUpdaterNode.set(state, indexMap_1);
26482663
}
26492664
};
26502665
var getHookIndexFromState = function (state) {
26512666
return linkStateToHookIndex.get(state);
26522667
};
2668+
var getUpdaterNodeFromState = function (state) {
2669+
return linkStateToUpdaterNode.get(state);
2670+
};
26532671
var deleteLinkState = function (state) {
26542672
linkStateToHookIndex.delete(state);
2673+
linkStateToUpdaterNode.delete(state);
26552674
};
26562675

26572676
var treeMap = new Map();
@@ -3520,10 +3539,14 @@
35203539
var finalStatus = status.filter(function (i) { return (i.isRetrigger ? runtime._enableRetrigger : true); }).slice(-10);
35213540
return finalStatus.map(function (i) {
35223541
var _keysToLinkHook = getHookIndexFromState(i);
3542+
var _nodesToLinkHook = getUpdaterNodeFromState(i);
35233543
var node = getNode(i);
35243544
if (_keysToLinkHook && _keysToLinkHook.length > 0) {
35253545
node._keysToLinkHook = _keysToLinkHook;
35263546
}
3547+
if (_nodesToLinkHook && Object.keys(_nodesToLinkHook).length > 0) {
3548+
node._nodesToLinkHook = _nodesToLinkHook;
3549+
}
35273550
return node;
35283551
});
35293552
};

‎chrome/public/bundle/hook.js‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2530,6 +2530,7 @@
25302530
}
25312531

25322532
var linkStateToHookIndex = new WeakMap();
2533+
var linkStateToUpdaterNode = new WeakMap();
25332534
var parseHooksTreeToHOOKTree = function (node, d, p) {
25342535
var _p = p || { index: 0 };
25352536
return node.map(function (item) {
@@ -2636,22 +2637,40 @@
26362637
}
26372638
};
26382639
var tryLinkStateToHookIndex = function (fiber, state) {
2639-
var _a, _b, _c, _d, _e, _f;
2640+
var _a, _b, _c;
26402641
if (state.needUpdate && state.nodes) {
26412642
// filter all hook update queue
2642-
var nodes = (_b = (_a = state.nodes) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.call(_a, function (node) { return node.type === UpdateQueueType.hook; });
2643+
// const nodes = state.nodes?.filter?.((node) => node.type === UpdateQueueType.hook);
26432644
// get all the keys from the nodes;
2644-
var allHooksArray_1 = ((_d = (_c = fiber.hookList) === null || _c === void 0 ? void 0 : _c.toArray) === null || _d === void 0 ? void 0 : _d.call(_c)) || [];
2645-
var keys = ((_f = (_e = nodes === null || nodes === void 0 ? void 0 : nodes.map) === null || _e === void 0 ? void 0 : _e.call(nodes, function (node) { var _a; return (_a = allHooksArray_1 === null || allHooksArray_1 === void 0 ? void 0 : allHooksArray_1.findIndex) === null || _a === void 0 ? void 0 : _a.call(allHooksArray_1, function (_node) { return (node === null || node === void 0 ? void 0 : node.trigger) === _node; }); })) === null || _f === void 0 ? void 0 : _f.filter(function (i) { return i !== -1; })) || [];
2645+
var allHooksArray_1 = ((_b = (_a = fiber.hookList) === null || _a === void 0 ? void 0 : _a.toArray) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
2646+
var nodes = state.nodes || [];
2647+
var indexMap_1 = {};
2648+
var keys = ((_c = nodes.map) === null || _c === void 0 ? void 0 : _c.call(nodes, function (node) {
2649+
var _a;
2650+
if (node.type !== UpdateQueueType.hook)
2651+
return -1;
2652+
var index = (_a = allHooksArray_1 === null || allHooksArray_1 === void 0 ? void 0 : allHooksArray_1.findIndex) === null || _a === void 0 ? void 0 : _a.call(allHooksArray_1, function (_node) { return (node === null || node === void 0 ? void 0 : node.trigger) === _node; });
2653+
// there are a valid updater, link the before node value
2654+
if (index !== -1 && Object.prototype.hasOwnProperty.call(node, "_debugBeforeValue")) {
2655+
var data = getNode(node._debugBeforeValue);
2656+
indexMap_1[index] = data;
2657+
}
2658+
return index;
2659+
})) || [];
26462660
// link the keys to the state
26472661
linkStateToHookIndex.set(state, keys);
2662+
linkStateToUpdaterNode.set(state, indexMap_1);
26482663
}
26492664
};
26502665
var getHookIndexFromState = function (state) {
26512666
return linkStateToHookIndex.get(state);
26522667
};
2668+
var getUpdaterNodeFromState = function (state) {
2669+
return linkStateToUpdaterNode.get(state);
2670+
};
26532671
var deleteLinkState = function (state) {
26542672
linkStateToHookIndex.delete(state);
2673+
linkStateToUpdaterNode.delete(state);
26552674
};
26562675

26572676
var treeMap = new Map();
@@ -3520,10 +3539,14 @@
35203539
var finalStatus = status.filter(function (i) { return (i.isRetrigger ? runtime._enableRetrigger : true); }).slice(-10);
35213540
return finalStatus.map(function (i) {
35223541
var _keysToLinkHook = getHookIndexFromState(i);
3542+
var _nodesToLinkHook = getUpdaterNodeFromState(i);
35233543
var node = getNode(i);
35243544
if (_keysToLinkHook && _keysToLinkHook.length > 0) {
35253545
node._keysToLinkHook = _keysToLinkHook;
35263546
}
3547+
if (_nodesToLinkHook && Object.keys(_nodesToLinkHook).length > 0) {
3548+
node._nodesToLinkHook = _nodesToLinkHook;
3549+
}
35273550
return node;
35283551
});
35293552
};

‎chrome/src/components/AutoHeightLayout.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Allotment } from "allotment";
2+
import { useCallback, useRef } from "react";
3+
4+
import { AutoHeight } from "./AutoHeight";
5+
6+
import type { ReactNode, RefObject } from "react";
7+
8+
export const AutoHeightLayout = ({ left, right }: { left: ReactNode; right: ReactNode }) => {
9+
const ref = useRef<HTMLDivElement>(null);
10+
11+
const elementRefS = useRef<Array<RefObject<HTMLDivElement>>>();
12+
13+
const onAutoUpdateHeight = () => {
14+
if (ref.current) {
15+
const maxHeight = Math.max(...(elementRefS.current?.map((i) => i.current?.clientHeight || 0) || []));
16+
ref.current.style.height = `${maxHeight + 2}px`;
17+
}
18+
};
19+
20+
const onCreateRef = useCallback((ref: RefObject<HTMLDivElement>) => {
21+
if (!elementRefS.current) {
22+
elementRefS.current = [];
23+
}
24+
elementRefS.current.push(ref);
25+
}, []);
26+
27+
return (
28+
<div ref={ref}>
29+
<Allotment>
30+
<AutoHeight onHeightChange={onAutoUpdateHeight} onAttachRef={onCreateRef}>
31+
{left}
32+
</AutoHeight>
33+
<AutoHeight onHeightChange={onAutoUpdateHeight} onAttachRef={onCreateRef}>
34+
{right}
35+
</AutoHeight>
36+
</Allotment>
37+
</div>
38+
);
39+
};

‎chrome/src/components/NodeValue/index.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { useState, useRef, useMemo, useEffect, Fragment } from "react";
44

55
import { useChunk } from "@/hooks/useChunk";
66
import { useContextMenu } from "@/hooks/useContextMenu";
7+
import { useDetailNodeExt } from "@/hooks/useDetailNodeExt";
8+
import { useHookValue } from "@/hooks/useHookValue";
79
import { usePrevious } from "@/hooks/usePrevious";
810
import { getText } from "@/utils/treeValue";
911

@@ -184,6 +186,22 @@ export const NodeValue = ({
184186
setId(item.i);
185187

186188
setType(item.t);
189+
190+
const enable = useDetailNodeExt.getReadonlyState().enable;
191+
192+
const { setIndex } = useHookValue.getActions();
193+
194+
if (type === "hook" && typeof hookIndex === "number" && enable) {
195+
const state = useHookValue.getReadonlyState().state[hookIndex];
196+
197+
if (state) {
198+
setIndex(hookIndex);
199+
} else {
200+
setIndex(null);
201+
}
202+
} else {
203+
setIndex(null);
204+
}
187205
};
188206

189207
if (!item) return null;

‎chrome/src/components/NodeView/ContextMenu.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import { AnimatePresence, motion } from "framer-motion";
2-
import { Bug, Eye, Package } from "lucide-react";
2+
import { Bug, DiffIcon, Eye, Package } from "lucide-react";
33
import { memo } from "react";
44

55
import { useContextMenu } from "@/hooks/useContextMenu";
6+
import { useHookValue } from "@/hooks/useHookValue";
67

78
const { close: contextMenuClose, setStore, setSource } = useContextMenu.getActions();
89

910
export const ContextMenu = memo(() => {
1011
const { state, position, type } = useContextMenu((s) => s);
1112

13+
const index = useHookValue((s) => s.index);
14+
15+
const toggleOpen = useHookValue.getActions().toggleOpen;
16+
1217
return (
1318
<>
1419
<div
@@ -65,6 +70,18 @@ export const ContextMenu = memo(() => {
6570
)}
6671
</div>
6772
)}
73+
{typeof index === "number" && (
74+
<div
75+
className="context-menu-item px-2 cursor-pointer select-none flex justify-center items-center node-item-hover"
76+
onClick={() => {
77+
toggleOpen();
78+
contextMenuClose();
79+
}}
80+
>
81+
<DiffIcon className="mr-2 w-[1em]" />
82+
<span className="flex-grow">Track the change</span>
83+
</div>
84+
)}
6885
</motion.div>
6986
)}
7087
</AnimatePresence>

‎chrome/src/components/NodeView/ExtendView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const Trigger = ({ select, mode = "vertical" }: { select: string | number; mode?
2222
const triggerCount = useTriggerNode.useShallowSelector((s) => s.state?.[select]);
2323

2424
const render = useCallbackRef((index: number, item: NodeValueType) => {
25-
const { _keysToLinkHook, ...itemToDisplay } = item;
25+
const { _keysToLinkHook, _nodesToLinkHook, ...itemToDisplay } = item;
2626

2727
return (
2828
// SEE DevToolCore/instance.ts notifyTriggerStatus:574

‎chrome/src/components/NodeView/HookCompare.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Modal, ModalBody, ModalContent, ModalHeader } from "@heroui/react";
2+
import { memo } from "react";
3+
4+
import { useHookValue } from "@/hooks/useHookValue";
5+
6+
import { AutoHeightLayout } from "../AutoHeightLayout";
7+
import { NodeValue } from "../NodeValue";
8+
9+
export const HookCompare = memo(() => {
10+
const { state, open, toggle } = useHookValue.useShallowSelector((s) => ({ state: s.state[s.index!], open: s.open, toggle: s.toggleOpen }));
11+
12+
return (
13+
<Modal isOpen={open && !!state} onClose={toggle} size="3xl">
14+
<ModalContent>
15+
<ModalHeader>
16+
<div className="font-bold text-lg mb-2">Hook Value Change</div>
17+
</ModalHeader>
18+
<ModalBody>
19+
<AutoHeightLayout left={<NodeValue name="old" item={state?.old} />} right={<NodeValue name="new" item={state?.new} />} />
20+
</ModalBody>
21+
</ModalContent>
22+
</Modal>
23+
);
24+
});
25+
26+
HookCompare.displayName = "HookCompare";

0 commit comments

Comments
 (0)