From b0ed1d2873329f2a12b5280c4eaa0a160f0fa1c6 Mon Sep 17 00:00:00 2001 From: MrWangJustToDo <2711470541@qq.com> Date: Mon, 9 Dec 2024 14:15:56 +0800 Subject: [PATCH] update devtool info --- packages/myreact-dom/package.json | 2 +- packages/myreact-jsx/package.json | 2 +- packages/myreact-reactivity/package.json | 2 +- packages/myreact-reconciler/package.json | 2 +- .../src/renderDispatch/instance.ts | 58 +++++++++++++------ .../src/runtimeGenerate/invoke.ts | 17 ++++-- .../src/runtimeHook/create.ts | 41 ++++++++----- packages/myreact-refresh-tools/package.json | 2 +- packages/myreact-refresh/package.json | 2 +- packages/myreact-terminal/package.json | 2 +- packages/myreact-vite/package.json | 2 +- pnpm-lock.yaml | 16 ++--- 12 files changed, 92 insertions(+), 56 deletions(-) diff --git a/packages/myreact-dom/package.json b/packages/myreact-dom/package.json index 6ac48001..77e6b9b0 100644 --- 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 index 75616038..5ff5ee33 100644 --- 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 index c43ff418..699251ee 100644 --- 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 index 87ba53e4..a6012956 100644 --- 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 index e110b255..39cae111 100644 --- 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) => 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 index 6bcc7ead..fc918502 100644 --- 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 index a8b05477..a398310e 100644 --- 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 index 10aaa0c6..b4484c3d 100644 --- 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 index 1854826c..c5a02078 100644 --- 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 index dd249f3e..1469509a 100644 --- 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 index 3ce93f91..d4777ee4 100644 --- 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 index 636c7adc..e3158687 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -136,7 +136,7 @@ importers: packages/myreact-dom: dependencies: '@my-react/react': - specifier: '>=0.3.3' + specifier: '>=0.3.4' version: link:../myreact devDependencies: '@my-react/react-reconciler': @@ -149,7 +149,7 @@ importers: packages/myreact-jsx: dependencies: '@my-react/react': - specifier: '>=0.3.3' + specifier: '>=0.3.4' version: link:../myreact devDependencies: '@my-react/react-shared': @@ -159,7 +159,7 @@ importers: packages/myreact-reactivity: dependencies: '@my-react/react': - specifier: '>=0.3.3' + specifier: '>=0.3.4' version: link:../myreact devDependencies: '@my-react/react-shared': @@ -169,7 +169,7 @@ importers: packages/myreact-reconciler: dependencies: '@my-react/react': - specifier: '>=0.3.3' + specifier: '>=0.3.4' version: link:../myreact devDependencies: '@my-react/react-shared': @@ -179,7 +179,7 @@ importers: packages/myreact-refresh: dependencies: '@my-react/react': - specifier: '>=0.3.3' + specifier: '>=0.3.4' version: link:../myreact devDependencies: '@my-react/react-reconciler': @@ -192,7 +192,7 @@ importers: packages/myreact-refresh-tools: dependencies: '@my-react/react-refresh': - specifier: '>=0.3.3' + specifier: '>=0.3.4' version: link:../myreact-refresh webpack: specifier: ^4 || ^5 @@ -210,7 +210,7 @@ importers: specifier: ^0.1.3 version: 0.1.3 '@my-react/react': - specifier: '>=0.3.3' + specifier: '>=0.3.4' version: link:../myreact ansi-escapes: specifier: ^6.2.0 @@ -304,7 +304,7 @@ importers: specifier: ^7.22.5 version: 7.22.5(@babel/core@7.22.5) '@my-react/react-refresh': - specifier: '>=0.3.3' + specifier: '>=0.3.4' version: link:../myreact-refresh vite: specifier: ^4 || ^5