improve log

package.json

@@ -34,15 +34,15 @@
     }
   },
   "devDependencies": {
-    "@apollo/client": "^3.11.8",
+    "@apollo/client": "^3.11.10",
     "@babel/runtime": "^7.22.5",
     "@graphql-codegen/add": "^5.0.3",
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/near-operation-file-preset": "^3.0.0",
-    "@graphql-codegen/typed-document-node": "^5.0.11",
-    "@graphql-codegen/typescript": "^4.1.1",
-    "@graphql-codegen/typescript-operations": "^4.3.1",
+    "@graphql-codegen/typed-document-node": "^5.0.12",
+    "@graphql-codegen/typescript": "^4.1.2",
+    "@graphql-codegen/typescript-operations": "^4.4.0",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@my-react/react": "workspace:*",
     "@my-react/react-dom": "workspace:*",

packages/myreact-dom/src/client/dispatchMount/feature.ts

@@ -1,12 +1,14 @@
-import { __my_react_internal__ } from "@my-react/react";
+import { __my_react_internal__, __my_react_shared__ } from "@my-react/react";
 import {
   afterSyncUpdate,
   beforeSyncUpdate,
   effect,
   generateFiberToMountList,
   insertionEffect,
   layoutEffect,
+  resetLogScope,
   safeCallWithCurrentFiber,
+  setLogScope,
 } from "@my-react/react-reconciler";
 
 import { fallback } from "@my-react-dom-client/api";
@@ -16,6 +18,8 @@ import type { ClientDomDispatch } from "@my-react-dom-client/renderDispatch";
 
 const { currentRenderPlatform } = __my_react_internal__;
 
+const { enableScopeTreeLog } = __my_react_shared__;
+
 let currentHydratedNode: ChildNode | null = null;
 
 export const getPreviousHydratedNode = () => currentHydratedNode;
@@ -100,9 +104,13 @@ export const clientDispatchMount = (_fiber: MyReactFiberNode, _dispatch: ClientD
     const renderPlatform = currentRenderPlatform.current;
 
     renderPlatform.microTask(function invokeEffectListTask() {
+      __DEV__ && enableScopeTreeLog.current && setLogScope();
+
       _list.listToFoot(function invokeEffectList(fiber) {
         effect(fiber, _dispatch);
       });
+
+      __DEV__ && enableScopeTreeLog.current && resetLogScope();
     });
   };
 

packages/myreact-reconciler/src/dispatchMount/feature.ts

@@ -1,13 +1,15 @@
-import { __my_react_internal__ } from "@my-react/react";
+import { __my_react_internal__, __my_react_shared__ } from "@my-react/react";
 
 import { effect, insertionEffect, layoutEffect } from "../dispatchEffect";
-import { afterSyncUpdate, beforeSyncUpdate, generateFiberToMountList, safeCallWithCurrentFiber } from "../share";
+import { afterSyncUpdate, beforeSyncUpdate, generateFiberToMountList, resetLogScope, safeCallWithCurrentFiber, setLogScope } from "../share";
 
 import type { CustomRenderDispatch } from "../renderDispatch";
 import type { MyReactFiberNode } from "../runtimeFiber";
 
 const { currentRenderPlatform } = __my_react_internal__;
 
+const { enableScopeTreeLog } = __my_react_shared__;
+
 export const defaultDispatchMountLegacy = (_fiber: MyReactFiberNode, _dispatch: CustomRenderDispatch) => {
   const mountInsertionEffectList = (_fiber: MyReactFiberNode) => {
     if (_fiber.child) mountInsertionEffectList(_fiber.child);
@@ -71,7 +73,11 @@ export const defaultDispatchMountLegacy = (_fiber: MyReactFiberNode, _dispatch:
     const renderPlatform = currentRenderPlatform.current;
 
     renderPlatform.microTask(function invokeEffectList() {
+      __DEV__ && enableScopeTreeLog.current && setLogScope();
+
       mountEffectList(_fiber);
+
+      __DEV__ && enableScopeTreeLog.current && resetLogScope();
     });
   };
 
@@ -120,9 +126,13 @@ export const defaultDispatchMountLatest = (_fiber: MyReactFiberNode, _dispatch:
   const renderPlatform = currentRenderPlatform.current;
 
   renderPlatform.microTask(function invokeEffectListTask() {
+    __DEV__ && enableScopeTreeLog.current && setLogScope();
+
     _list.listToFoot(function invokeEffectList(_fiber) {
       effect(_fiber, _dispatch);
     });
+
+    __DEV__ && enableScopeTreeLog.current && resetLogScope();
   });
 };
 

packages/myreact-reconciler/src/dispatchUpdate/feature.ts

@@ -1,16 +1,18 @@
-import { __my_react_internal__ } from "@my-react/react";
+import { __my_react_internal__, __my_react_shared__ } from "@my-react/react";
 import { STATE_TYPE, exclude } from "@my-react/react-shared";
 
 import { effect, insertionEffect, layoutEffect } from "../dispatchEffect";
 import { unmountPending } from "../dispatchUnmount";
-import { afterSyncUpdate, beforeSyncUpdate, safeCallWithCurrentFiber } from "../share";
+import { afterSyncUpdate, beforeSyncUpdate, resetLogScope, safeCallWithCurrentFiber, setLogScope } from "../share";
 
 import type { CustomRenderDispatch } from "../renderDispatch";
 import type { MyReactFiberNode } from "../runtimeFiber";
 import type { ListTree } from "@my-react/react-shared";
 
 const { currentRenderPlatform } = __my_react_internal__;
 
+const { enableScopeTreeLog } = __my_react_shared__;
+
 export const defaultDispatchUpdate = (_list: ListTree<MyReactFiberNode>, _dispatch: CustomRenderDispatch) => {
   // TODO maybe need call `insertionEffect` in another function
   beforeSyncUpdate();
@@ -73,10 +75,14 @@ export const defaultDispatchUpdate = (_list: ListTree<MyReactFiberNode>, _dispat
 
   // TODO before next update flow, make sure all the effect has done
   renderPlatform.microTask(function invokeEffectListTask() {
+    __DEV__ && enableScopeTreeLog.current && setLogScope();
+
     _list.listToFoot(function invokeEffectList(_fiber) {
       if (exclude(_fiber.state, STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
         effect(_fiber, _dispatch);
       }
     });
+
+    __DEV__ && enableScopeTreeLog.current && resetLogScope();
   });
 };

packages/myreact-reconciler/src/renderMount/feature.ts

@@ -21,6 +21,8 @@ export const mount = (fiber: MyReactFiberNode, renderDispatch: CustomRenderDispa
   __DEV__ && enableScopeTreeLog.current && resetLogScope();
 
   (function finishMount() {
+    __DEV__ && enableScopeTreeLog.current && setLogScope();
+
     renderDispatch.reconcileCommit(fiber);
 
     const commitList = renderDispatch.pendingCommitFiberList;
@@ -35,6 +37,8 @@ export const mount = (fiber: MyReactFiberNode, renderDispatch: CustomRenderDispa
 
     commitList?.length && renderDispatch.reconcileUpdate(commitList);
 
+    __DEV__ && enableScopeTreeLog.current && resetLogScope();
+
     changedList?.length &&
       safeCallWithCurrentFiber({
         fiber,
@@ -75,9 +79,11 @@ export const mountAsync = async (fiber: MyReactFiberNode, renderDispatch: Custom
     }
   }
 
-  __DEV__ && enableScopeTreeLog.current && resetLogScope();
+  __DEV__ && enableScopeTreeLog.current && setLogScope();
 
   (function finishMount() {
+    __DEV__ && enableScopeTreeLog.current && setLogScope();
+
     renderDispatch.reconcileCommit(fiber);
 
     const commitList = renderDispatch.pendingCommitFiberList;
@@ -92,6 +98,8 @@ export const mountAsync = async (fiber: MyReactFiberNode, renderDispatch: Custom
 
     commitList?.length && renderDispatch.reconcileUpdate(commitList);
 
+    __DEV__ && enableScopeTreeLog.current && setLogScope();
+
     changedList?.length &&
       safeCallWithCurrentFiber({
         fiber,

packages/myreact-reconciler/src/renderUpdate/feature.ts

@@ -32,8 +32,12 @@ export const updateSyncFromRoot = (renderDispatch: CustomRenderDispatch) => {
 
     renderDispatch.pendingChangedFiberList = null;
 
+    __DEV__ && enableScopeTreeLog.current && setLogScope();
+
     commitList?.length && renderDispatch.reconcileUpdate(commitList);
 
+    __DEV__ && enableScopeTreeLog.current && resetLogScope();
+
     changedList?.length &&
       safeCall(function safeCallFiberHasChangeListener() {
         listenerMap.get(renderDispatch)?.fiberHasChange?.forEach((cb) => cb(changedList));
@@ -69,8 +73,12 @@ export const updateSyncFromTrigger = (renderDispatch: CustomRenderDispatch) => {
 
     renderDispatch.pendingChangedFiberList = null;
 
+    __DEV__ && enableScopeTreeLog.current && setLogScope();
+
     commitList?.length && renderDispatch.reconcileUpdate(commitList);
 
+    __DEV__ && enableScopeTreeLog.current && resetLogScope();
+
     changedList?.length &&
       safeCall(function safeCallFiberHasChangeListener() {
         listenerMap.get(renderDispatch)?.fiberHasChange?.forEach((cb) => cb(changedList));
@@ -111,8 +119,12 @@ export const updateConcurrentFromRoot = (renderDispatch: CustomRenderDispatch) =
 
       renderDispatch.pendingChangedFiberList = null;
 
+      __DEV__ && enableScopeTreeLog.current && setLogScope();
+
       commitList?.length && renderDispatch.reconcileUpdate(commitList);
 
+      __DEV__ && enableScopeTreeLog.current && setLogScope();
+
       changedList?.length &&
         safeCall(function safeCallFiberHasChangeListener() {
           listenerMap.get(renderDispatch)?.fiberHasChange?.forEach((cb) => cb(changedList));
@@ -155,8 +167,12 @@ export const updateConcurrentFromTrigger = (renderDispatch: CustomRenderDispatch
 
       renderDispatch.pendingChangedFiberList = null;
 
+      __DEV__ && enableScopeTreeLog.current && setLogScope();
+
       commitList?.length && renderDispatch.reconcileUpdate(commitList);
 
+      __DEV__ && enableScopeTreeLog.current && resetLogScope();
+
       changedList?.length &&
         safeCall(function safeCallFiberHasChangeListener() {
           listenerMap.get(renderDispatch)?.fiberHasChange?.forEach((cb) => cb(changedList));

packages/myreact-reconciler/src/runtimeFiber/instance.ts

@@ -117,13 +117,6 @@ const processUpdateOnFiber = (fiber: MyReactFiberNode, renderDispatch: CustomRen
   }
 
   if (updateState?.needUpdate) {
-    safeCallWithCurrentFiber({
-      fiber,
-      action: function safeCallFiberTriggerListener() {
-        listenerMap.get(renderDispatch)?.fiberTrigger?.forEach((cb) => cb(fiber, updateState));
-      },
-    });
-
     // TODO get from updateState ?
     if (currentRunning && currentRunning === fiber) {
       fiber.state = remove(fiber.state, STATE_TYPE.__stable__);
@@ -135,6 +128,13 @@ const processUpdateOnFiber = (fiber: MyReactFiberNode, renderDispatch: CustomRen
       return;
     }
 
+    safeCallWithCurrentFiber({
+      fiber,
+      action: function safeCallFiberTriggerListener() {
+        listenerMap.get(renderDispatch)?.fiberTrigger?.forEach((cb) => cb(fiber, updateState));
+      },
+    });
+
     if (updateState.isSync) {
       renderPlatform.microTask(function triggerSyncUpdateOnFiber() {
         triggerUpdate(fiber, updateState.isForce ? STATE_TYPE.__triggerSyncForce__ : STATE_TYPE.__triggerSync__, updateState.callback);

packages/myreact-reconciler/src/share/debug.ts

@@ -76,7 +76,7 @@ export const devWarn = (...args) => {
 
   const obj = [];
 
-  const log = args.map((i) => (typeof i === "object" ? (obj.push(i), "%o") : i)).join("") + treeLog;
+  const log = args.map((i) => (typeof i === "object" ? (obj.push(i), "%o") : i)).join(" ") + treeLog;
 
   if (enableFiberForLog.current && renderFiber) {
     originalWarn.call(console, log + "\n%o", ...obj, renderFiber);
@@ -105,7 +105,7 @@ export const devError = (...args) => {
 
   const obj = [];
 
-  const log = args.map((i) => (typeof i === "object" ? (obj.push(i), "%o") : i)).join("") + treeLog;
+  const log = args.map((i) => (typeof i === "object" ? (obj.push(i), "%o") : i)).join(" ") + treeLog;
 
   if (enableFiberForLog.current && renderFiber) {
     originalError.call(console, log + "\n%o", ...obj, renderFiber);

packages/myreact-reconciler/src/share/safeCall.ts

@@ -19,11 +19,16 @@ export const safeCall = <T extends any[] = any[], K = any>(action: (...args: T)
   }
 };
 
+const stack: MyReactFiberNode[] = [];
+
 export const safeCallWithCurrentFiber = <T extends any[] = any[], K = any>(
   { action, fiber, fallback }: { action: (...args: T) => K; fiber: MyReactFiberNode; fallback?: () => K },
   ...args: T
 ): K => {
+  stack.push(fiber);
+
   currentCallingFiber.current = fiber;
+
   try {
     return action.call(null, ...args);
   } catch (e) {
@@ -33,7 +38,9 @@ export const safeCallWithCurrentFiber = <T extends any[] = any[], K = any>(
 
     return fallback?.();
   } finally {
-    currentCallingFiber.current = null;
+    const l = stack.pop();
+
+    currentCallingFiber.current = l;
   }
 };