fix..

Author: MrWangJustToDo

chrome/public/bundle/detector.js

@@ -1341,7 +1341,6 @@
     		    DevToolMessageEnum["triggerStatus"] = "triggerStatus";
     		    DevToolMessageEnum["hmr"] = "hmr";
     		    DevToolMessageEnum["hmrStatus"] = "hmrStatus";
-    		    DevToolMessageEnum["run"] = "run";
     		    DevToolMessageEnum["source"] = "source";
     		    DevToolMessageEnum["detail"] = "detail";
     		    DevToolMessageEnum["unmount"] = "unmount";

chrome/public/bundle/hook.js

@@ -1343,7 +1343,6 @@
     		    DevToolMessageEnum["triggerStatus"] = "triggerStatus";
     		    DevToolMessageEnum["hmr"] = "hmr";
     		    DevToolMessageEnum["hmrStatus"] = "hmrStatus";
-    		    DevToolMessageEnum["run"] = "run";
     		    DevToolMessageEnum["source"] = "source";
     		    DevToolMessageEnum["detail"] = "detail";
     		    DevToolMessageEnum["unmount"] = "unmount";

chrome/public/bundle/panel.js

@@ -1412,7 +1412,6 @@
     		    DevToolMessageEnum["triggerStatus"] = "triggerStatus";
     		    DevToolMessageEnum["hmr"] = "hmr";
     		    DevToolMessageEnum["hmrStatus"] = "hmrStatus";
-    		    DevToolMessageEnum["run"] = "run";
     		    DevToolMessageEnum["source"] = "source";
     		    DevToolMessageEnum["detail"] = "detail";
     		    DevToolMessageEnum["unmount"] = "unmount";

chrome/public/bundle/proxy.js

@@ -1341,7 +1341,6 @@
     		    DevToolMessageEnum["triggerStatus"] = "triggerStatus";
     		    DevToolMessageEnum["hmr"] = "hmr";
     		    DevToolMessageEnum["hmrStatus"] = "hmrStatus";
-    		    DevToolMessageEnum["run"] = "run";
     		    DevToolMessageEnum["source"] = "source";
     		    DevToolMessageEnum["detail"] = "detail";
     		    DevToolMessageEnum["unmount"] = "unmount";

chrome/public/bundle/service-worker.js

@@ -1341,7 +1341,6 @@
     		    DevToolMessageEnum["triggerStatus"] = "triggerStatus";
     		    DevToolMessageEnum["hmr"] = "hmr";
     		    DevToolMessageEnum["hmrStatus"] = "hmrStatus";
-    		    DevToolMessageEnum["run"] = "run";
     		    DevToolMessageEnum["source"] = "source";
     		    DevToolMessageEnum["detail"] = "detail";
     		    DevToolMessageEnum["unmount"] = "unmount";

chrome/src/components/ExtendView.tsx

@@ -3,16 +3,20 @@ import { type NodeValue as NodeValueType } from "@my-react-devtool/core";
 
 import { useCallbackRef } from "@/hooks/useCallbackRef";
 import { useDetailNodeExt } from "@/hooks/useDetailNodeExt";
+import { useHighlightNode } from "@/hooks/useHighlightNode";
 import { useSelectNode } from "@/hooks/useSelectNode";
+import { useTriggerNode } from "@/hooks/useTriggerNode";
 import { useUISize } from "@/hooks/useUISize";
 
 import { NodeValue } from "./NodeValue";
 
-const Trigger = () => {
+const Trigger = ({ select }: { select: string }) => {
   const trigger = useDetailNodeExt((s) => s.triggerStatus);
 
   const size = useUISize.useShallowStableSelector((s) => s.state);
 
+  const triggerCount = useTriggerNode.useShallowSelector((s) => s.state?.[select]);
+
   const sizeClass = size === "sm" ? "text-[11px]" : size === "md" ? "text-[12px]" : "text-[13px]";
 
   const render = useCallbackRef((index: number, item: NodeValueType) => {
@@ -23,6 +27,8 @@ const Trigger = () => {
     );
   });
 
+  const startCount = triggerCount - 9 >= 0 ? triggerCount - 9 : 0;
+
   const hasTrigger = trigger?.length > 0;
 
   return hasTrigger ? (
@@ -31,17 +37,19 @@ const Trigger = () => {
         <span>trigger</span>
       </div>
       <Spacer y={1} />
-      <div className="w-full">{trigger?.map((w, index) => render(index, w))}</div>
+      <div className="w-full">{trigger?.map((w, index) => render(startCount + index, w))}</div>
       <Divider />
     </div>
   ) : null;
 };
 
-const Warn = () => {
+const Warn = ({ select }: { select: string }) => {
   const warn = useDetailNodeExt((s) => s.warnStatus);
 
   const size = useUISize.useShallowStableSelector((s) => s.state);
 
+  const warnCount = useHighlightNode.useShallowSelector((s) => s.warn[select]);
+
   const sizeClass = size === "sm" ? "text-[11px]" : size === "md" ? "text-[12px]" : "text-[13px]";
 
   const render = useCallbackRef((index: number, item: NodeValueType) => {
@@ -52,6 +60,8 @@ const Warn = () => {
     );
   });
 
+  const startCount = warnCount - 9 >= 0 ? warnCount - 9 : 0;
+
   const hasWarn = warn?.length > 0;
 
   return hasWarn ? (
@@ -60,17 +70,19 @@ const Warn = () => {
         <span>warn</span>
       </div>
       <Spacer y={1} />
-      <div className="w-full">{warn?.map((w, index) => render(index, w))}</div>
+      <div className="w-full">{warn?.map((w, index) => render(startCount + index, w))}</div>
       <Divider />
     </div>
   ) : null;
 };
 
-const Error = () => {
+const Error = ({ select }: { select: string }) => {
   const error = useDetailNodeExt((s) => s.errorStatus);
 
   const size = useUISize.useShallowStableSelector((s) => s.state);
 
+  const errorCount = useHighlightNode.useShallowSelector((s) => s.error[select]);
+
   const sizeClass = size === "sm" ? "text-[11px]" : size === "md" ? "text-[12px]" : "text-[13px]";
 
   const render = useCallbackRef((index: number, item: NodeValueType) => {
@@ -81,6 +93,8 @@ const Error = () => {
     );
   });
 
+  const startCount = errorCount - 9 >= 0 ? errorCount - 9 : 0;
+
   const hasError = error?.length > 0;
 
   return hasError ? (
@@ -89,7 +103,7 @@ const Error = () => {
         <span>error</span>
       </div>
       <Spacer y={1} />
-      <div className="w-full">{error?.map((w, index) => render(index, w))}</div>
+      <div className="w-full">{error?.map((w, index) => render(startCount + index, w))}</div>
       <Divider />
     </div>
   ) : null;
@@ -104,9 +118,9 @@ export const ExtendView = () => {
 
   return (
     <>
-      <Trigger />
-      <Warn />
-      <Error />
+      <Trigger select={select} />
+      <Warn select={select} />
+      <Error select={select} />
     </>
   );
 };

chrome/src/hooks/useHMRNode.ts

@@ -5,9 +5,7 @@ export const useHMRNode = createState(() => ({ state: {} }) as { state: Record<s
   withActions: (s) => {
     return {
       update: (state: Record<string, number>) => {
-        Object.keys(state).forEach((key) => {
-          s.state[key] = state[key];
-        });
+        s.state = state;
       },
       clear: () => {
         s.state = {};

chrome/src/hooks/useRunNode.ts

@@ -5,9 +5,7 @@ export const useTriggerNode = createState(() => ({ state: {} }) as { state: Reco
   withActions: (s) => {
     return {
       update: (state: Record<string, number>) => {
-        Object.keys(state).forEach(key => {
-          s.state[key] = state[key];
-        });
+        s.state = state;
       },
       clear: () => {
         s.state = {};

chrome/src/hooks/useTriggerNode.ts

@@ -6,7 +6,6 @@ import { useDetailNodeExt } from "@/hooks/useDetailNodeExt";
 import { useHighlightNode } from "@/hooks/useHighlightNode";
 import { useHMRNode } from "@/hooks/useHMRNode";
 import { useNodeName } from "@/hooks/useNodeName";
-import { useRunNode } from "@/hooks/useRunNode";
 import { useSelectNode } from "@/hooks/useSelectNode";
 import { useTriggerNode } from "@/hooks/useTriggerNode";
 
@@ -18,7 +17,6 @@ export const onClear = () => {
   useNodeName?.getActions?.()?.clear?.();
   useSelectNode?.getActions?.()?.clear?.();
   useDetailNode?.getActions?.()?.clear?.();
-  useRunNode?.getActions?.()?.clear?.();
   useHMRNode?.getActions?.()?.clear?.();
   useContextMenu?.getActions?.()?.clear?.();
   useTriggerNode?.getActions?.()?.clear?.();