update devtool info

MrWangJustToDo · Dec 9, 2024 · b0ed1d2 · b0ed1d2
1 parent 9ca7784
commit b0ed1d2
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 56 deletions.
diff --git a/packages/myreact-dom/package.json b/packages/myreact-dom/package.json
@@ -96,6 +96,6 @@
     "@my-react/react-reconciler": "^0.3.4"
   },
   "peerDependencies": {
-    "@my-react/react": ">=0.3.3"
+    "@my-react/react": ">=0.3.4"
   }
 }
diff --git a/packages/myreact-jsx/package.json b/packages/myreact-jsx/package.json
@@ -42,6 +42,6 @@
     "@my-react/react-shared": "^0.3.4"
   },
   "peerDependencies": {
-    "@my-react/react": ">=0.3.3"
+    "@my-react/react": ">=0.3.4"
   }
 }
diff --git a/packages/myreact-reactivity/package.json b/packages/myreact-reactivity/package.json
@@ -53,6 +53,6 @@
     "@my-react/react-shared": "^0.3.4"
   },
   "peerDependencies": {
-    "@my-react/react": ">=0.3.3"
+    "@my-react/react": ">=0.3.4"
   }
 }
diff --git a/packages/myreact-reconciler/package.json b/packages/myreact-reconciler/package.json
@@ -40,6 +40,6 @@
     "@my-react/react-shared": "^0.3.4"
   },
   "peerDependencies": {
-    "@my-react/react": ">=0.3.3"
+    "@my-react/react": ">=0.3.4"
   }
 }
diff --git a/packages/myreact-reconciler/src/renderDispatch/instance.ts b/packages/myreact-reconciler/src/renderDispatch/instance.ts
@@ -27,11 +27,12 @@ type Listeners = {
   fiberTrigger: Set<(fiber: MyReactFiberNode, state: UpdateState) => void>;
   fiberUnmount: Set<(fiber: MyReactFiberNode) => void>;
   fiberHMR?: Set<(fiber: MyReactFiberNode) => void>;
-  fiberRun?: Set<(fiber: MyReactFiberNode) => void>;
   fiberWarn?: Set<(fiber: MyReactFiberNode, ...args: any) => void>;
   fiberError?: Set<(fiber: MyReactFiberNode, ...args: any) => void>;
   fiberHasChange: Set<(list: ListTree<MyReactFiberNode>) => void>;
   performanceWarn?: Set<(fiber: MyReactFiberNode) => void>;
+  beforeFiberRun?: Set<(fiber: MyReactFiberNode) => void>;
+  afterFiberRun?: Set<(fiber: MyReactFiberNode) => void>;
 
   instanceInitial: Set<(instance: MyReactComponent, fiber: MyReactFiberNode) => void>;
   instanceUpdate: Set<(instance: MyReactComponent, fiber: MyReactFiberNode) => void>;
@@ -59,7 +60,8 @@ const getInitialValue = (): Listeners => {
         fiberHasChange: new Set(),
         fiberUnmount: new Set(),
         fiberHMR: new Set(),
-        fiberRun: new Set(),
+        beforeFiberRun: new Set(),
+        afterFiberRun: new Set(),
         fiberWarn: new Set(),
         fiberError: new Set(),
         fiberState: new Set(),
@@ -342,16 +344,16 @@ export class CustomRenderDispatch implements RenderDispatch {
     set?.add?.(onceCb);
   }
 
-  onFiberRun(cb: (_fiber: MyReactFiberNode) => void) {
-    const set = listenerMap.get(this).fiberRun;
+  onFiberWarn(cb: (_fiber: MyReactFiberNode, ...args: any) => void) {
+    const set = listenerMap.get(this).fiberWarn;
 
     set?.add?.(cb);
 
     return () => set?.delete?.(cb);
   }
 
-  onceFiberRun(cb: (_fiber: MyReactFiberNode) => void) {
-    const set = listenerMap.get(this).fiberRun;
+  onceFiberWarn(cb: (_fiber: MyReactFiberNode, ...args: any) => void) {
+    const set = listenerMap.get(this).fiberWarn;
 
     const onceCb = (_fiber: MyReactFiberNode) => {
       cb(_fiber);
@@ -362,16 +364,16 @@ export class CustomRenderDispatch implements RenderDispatch {
     set?.add?.(onceCb);
   }
 
-  onFiberWarn(cb: (_fiber: MyReactFiberNode, ...args: any) => void) {
-    const set = listenerMap.get(this).fiberWarn;
+  onFiberError(cb: (_fiber: MyReactFiberNode, ...args: any) => void) {
+    const set = listenerMap.get(this).fiberError;
 
     set?.add?.(cb);
 
     return () => set?.delete?.(cb);
   }
 
-  onceFiberWarn(cb: (_fiber: MyReactFiberNode, ...args: any) => void) {
-    const set = listenerMap.get(this).fiberWarn;
+  onceFiberError(cb: (_fiber: MyReactFiberNode, ...args: any) => void) {
+    const set = listenerMap.get(this).fiberError;
 
     const onceCb = (_fiber: MyReactFiberNode) => {
       cb(_fiber);
@@ -382,16 +384,16 @@ export class CustomRenderDispatch implements RenderDispatch {
     set?.add?.(onceCb);
   }
 
-  onFiberError(cb: (_fiber: MyReactFiberNode, ...args: any) => void) {
-    const set = listenerMap.get(this).fiberError;
+  onPerformanceWarn(cb: (_fiber: MyReactFiberNode) => void) {
+    const set = listenerMap.get(this).performanceWarn;
 
     set?.add?.(cb);
 
     return () => set?.delete?.(cb);
   }
 
-  onceFiberError(cb: (_fiber: MyReactFiberNode, ...args: any) => void) {
-    const set = listenerMap.get(this).fiberError;
+  oncePerformanceWarn(cb: (_fiber: MyReactFiberNode) => void) {
+    const set = listenerMap.get(this).performanceWarn;
 
     const onceCb = (_fiber: MyReactFiberNode) => {
       cb(_fiber);
@@ -402,16 +404,36 @@ export class CustomRenderDispatch implements RenderDispatch {
     set?.add?.(onceCb);
   }
 
-  onPerformanceWarn(cb: (_fiber: MyReactFiberNode) => void) {
-    const set = listenerMap.get(this).performanceWarn;
+  onBeforeFiberRun(cb: (_fiber: MyReactFiberNode) => void) {
+    const set = listenerMap.get(this).beforeFiberRun;
 
     set?.add?.(cb);
 
     return () => set?.delete?.(cb);
   }
 
-  oncePerformanceWarn(cb: (_fiber: MyReactFiberNode) => void) {
-    const set = listenerMap.get(this).performanceWarn;
+  onceBeforeFiberRun(cb: (_fiber: MyReactFiberNode) => void) {
+    const set = listenerMap.get(this).beforeFiberRun;
+
+    const onceCb = (_fiber: MyReactFiberNode) => {
+      cb(_fiber);
+
+      set?.delete?.(onceCb);
+    };
+
+    set?.add?.(onceCb);
+  }
+
+  onAfterFiberRun(cb: (_fiber: MyReactFiberNode) => void) {
+    const set = listenerMap.get(this).afterFiberRun;
+
+    set?.add?.(cb);
+
+    return () => set?.delete?.(cb);
+  }
+
+  onceAfterFiberRun(cb: (_fiber: MyReactFiberNode) => void) {
+    const set = listenerMap.get(this).afterFiberRun;
 
     const onceCb = (_fiber: MyReactFiberNode) => {
       cb(_fiber);

diff --git a/packages/myreact-reconciler/src/runtimeGenerate/invoke.ts b/packages/myreact-reconciler/src/runtimeGenerate/invoke.ts
@@ -176,11 +176,20 @@ export const runtimeNextWork = (fiber: MyReactFiberNode) => {
 export const runtimeNextWorkDev = (fiber: MyReactFiberNode) => {
   const renderDispatch = currentRenderDispatch.current;
 
+  safeCallWithCurrentFiber({
+    fiber,
+    action: function safeCallFiberRunListener() {
+      listenerMap.get(renderDispatch)?.beforeFiberRun?.forEach((cb) => cb(fiber));
+    },
+  });
+
   setRefreshTypeMap(fiber);
 
+  const typedFiber = fiber as MyReactFiberNodeDev;
+
   const start = Date.now();
 
-  const res = runtimeNextWork(fiber);
+  runtimeNextWork(fiber);
 
   const end = Date.now();
 
@@ -201,8 +210,6 @@ export const runtimeNextWorkDev = (fiber: MyReactFiberNode) => {
     });
   }
 
-  const typedFiber = fiber as MyReactFiberNodeDev;
-
   const timeNow = end;
 
   if (enableDebugFiled.current) {
@@ -234,9 +241,7 @@ export const runtimeNextWorkDev = (fiber: MyReactFiberNode) => {
   safeCallWithCurrentFiber({
     fiber,
     action: function safeCallFiberRunListener() {
-      listenerMap.get(renderDispatch)?.fiberRun?.forEach((cb) => cb(fiber));
+      listenerMap.get(renderDispatch)?.afterFiberRun?.forEach((cb) => cb(fiber));
     },
   });
-
-  return res;
 };
diff --git a/packages/myreact-reconciler/src/runtimeHook/create.ts b/packages/myreact-reconciler/src/runtimeHook/create.ts
@@ -4,7 +4,7 @@ import { HOOK_TYPE } from "@my-react/react-shared";
 import { initInstance, setContextForInstance, setOwnerForInstance } from "../runtimeGenerate";
 import { currentRenderDispatch, getStack, safeCallWithCurrentFiber } from "../share";
 
-import { checkHookValid, isValidHookName, isValidInternalHookName } from "./check";
+import { checkHookValid, isValidInternalHookName } from "./check";
 import { MyReactHookNode } from "./instance";
 import { MyReactSignal } from "./signal";
 
@@ -157,26 +157,35 @@ export const createHookNode = ({ type, value, reducer, deps }: RenderHookParams,
     try {
       const stack = getStack();
 
-      const res: NodeJS.CallSite[] = [];
+      const res = [];
+
+      const typedStack = stack.map((i) => {
+        const line = i.getEnclosingLineNumber();
+        const column = i.getEnclosingColumnNumber();
+        const fileName = i.getFileName() || "Unknown";
+        const functionName = i.getFunctionName() || "Anonymous";
+        const scriptName = i.getScriptNameOrSourceURL() || "Unknown";
+        return {
+          id: `${scriptName}-${fileName}-${functionName}-${line}-${column}`,
+          name: i.getMethodName() || i.getFunctionName() || "Anonymous",
+        };
+      });
 
-      while (stack.length > 0 && !isValidInternalHookName(stack[0].getFunctionName())) {
-        stack.shift();
+      while (typedStack.length > 0 && !isValidInternalHookName(typedStack[0].name)) {
+        typedStack.shift();
       }
 
-      while (stack.length > 0 && isValidHookName(stack[0].getFunctionName())) {
-        res.push(stack.shift());
+      while (typedStack.length > 0) {
+        if (typedStack[0].name === "safeCallForwardRefFunctionalComponent" || typedStack[0].name === "safeCallFunctionalComponent") {
+          break;
+        }
+        res.push(typedStack.shift());
       }
 
-      typedHook._debugStack = res
-        .map((i) => {
-          const line = i.getEnclosingLineNumber();
-          const column = i.getEnclosingColumnNumber();
-          const fileName = i.getFileName() || 'Unknown';
-          const functionName = i.getFunctionName() || "Anonymous";
-          const scriptName = i.getScriptNameOrSourceURL() || 'Unknown';
-          return { id: `${scriptName}:${fileName}:${line}:${column}`, name: functionName };
-        })
-        .reverse();
+      // pop current component
+      res.pop();
+
+      typedHook._debugStack = res.reverse();
     } catch (e) {
       void 0;
     }

diff --git a/packages/myreact-refresh-tools/package.json b/packages/myreact-refresh-tools/package.json
@@ -70,7 +70,7 @@
     }
   },
   "peerDependencies": {
-    "@my-react/react-refresh": ">=0.3.3",
+    "@my-react/react-refresh": ">=0.3.4",
     "webpack": "^4 || ^5"
   }
 }
diff --git a/packages/myreact-refresh/package.json b/packages/myreact-refresh/package.json
@@ -58,6 +58,6 @@
     "@my-react/react-reconciler": "^0.3.4"
   },
   "peerDependencies": {
-    "@my-react/react": ">=0.3.3"
+    "@my-react/react": ">=0.3.4"
   }
 }
diff --git a/packages/myreact-terminal/package.json b/packages/myreact-terminal/package.json
@@ -61,6 +61,6 @@
     "@types/wrap-ansi": "^8.1.0"
   },
   "peerDependencies": {
-    "@my-react/react": ">=0.3.3"
+    "@my-react/react": ">=0.3.4"
   }
 }
diff --git a/packages/myreact-vite/package.json b/packages/myreact-vite/package.json
@@ -58,7 +58,7 @@
     }
   ],
   "peerDependencies": {
-    "@my-react/react-refresh": ">=0.3.3",
+    "@my-react/react-refresh": ">=0.3.4",
     "vite": "^4 || ^5"
   },
   "dependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml