improve highlight

packages/myreact-dom/src/client/api/append/index.ts

@@ -39,6 +39,8 @@ export const append = (fiber: MyReactFiberNode, renderDispatch: ClientDomDispatc
       parentDom.appendChild(currentDom);
     }
 
+    renderDispatch.pathToCommitAppend?.(fiber);
+
     fiber.patch = remove(fiber.patch, PATCH_TYPE.__append__);
   }
 };

packages/myreact-dom/src/client/api/update/feature.ts

@@ -43,6 +43,8 @@ export const update = (fiber: MyReactFiberNode, renderDispatch: ClientDomDispatc
       }
     }
 
+    renderDispatch.pathToCommitUpdate?.(fiber)
+
     fiber.memoizedProps = fiber.pendingProps;
 
     fiber.patch = remove(fiber.patch, PATCH_TYPE.__update__);

packages/myreact-dom/src/client/api/update/nativeUpdate.ts

@@ -1,12 +1,11 @@
 import { NODE_TYPE } from "@my-react/react-reconciler";
 import { include } from "@my-react/react-shared";
 
-import { enableControlComponent, enableEventSystem, enableHighlight, isEvent, isProperty, isStyle } from "@my-react-dom-shared";
+import { enableControlComponent, enableEventSystem, isEvent, isProperty, isStyle } from "@my-react-dom-shared";
 
 import { addEventListener, controlElementTag, removeEventListener, setAttribute, setStyle } from "../helper";
 
 import { mountControl, updateControl } from "./control";
-import { HighLight } from "./highlight";
 import { getAllKeys } from "./tool";
 
 import type { MyReactFiberNode } from "@my-react/react-reconciler";
@@ -70,14 +69,4 @@ export const nativeUpdate = (fiber: MyReactFiberNode, renderDispatch: ClientDomD
       dom.innerHTML = typedProps.__html as string;
     }
   }
-
-  if (
-    __DEV__ &&
-    renderDispatch.isAppMounted &&
-    !renderDispatch.isHydrateRender &&
-    !renderDispatch.isServerRender &&
-    (enableHighlight.current || (window as any).__highlight__)
-  ) {
-    HighLight.getHighLightInstance().highLight(fiber);
-  }
 };

packages/myreact-dom/src/client/mount/hydrate.ts

@@ -3,13 +3,14 @@ import { initialFiberNode, MyReactFiberNode } from "@my-react/react-reconciler";
 
 import { ClientDomDispatch } from "@my-react-dom-client/renderDispatch";
 import { prepareRenderPlatform } from "@my-react-dom-client/renderPlatform";
+import { highlightUpdateFiber } from "@my-react-dom-client/tools";
 import { checkRehydrate, checkRoot, enableASyncHydrate, prepareDevContainer, startRender, startRenderAsync } from "@my-react-dom-shared";
 
 import { onceLog, onceLogConcurrentMode, onceLogLegacyLifeCycleMode, onceLogPerformanceWarn } from "./render";
 
 import type { RenderContainer } from "./render";
 import type { MyReactElement, LikeJSX } from "@my-react/react";
-import type { CustomRenderPlatform} from "@my-react/react-reconciler";
+import type { CustomRenderPlatform } from "@my-react/react-reconciler";
 
 const { currentRenderPlatform } = __my_react_internal__;
 
@@ -24,6 +25,8 @@ const hydrateSync = (element: MyReactElement, container: RenderContainer, cb?: (
 
   renderPlatform.dispatchSet.uniPush(renderDispatch);
 
+  __DEV__ && (renderDispatch.pathToCommitUpdate = highlightUpdateFiber);
+
   __DEV__ && checkRoot(fiber);
 
   __DEV__ && prepareDevContainer(renderDispatch);
@@ -54,6 +57,8 @@ const hydrateAsync = async (element: MyReactElement, container: RenderContainer,
 
   renderPlatform.dispatchSet.uniPush(renderDispatch);
 
+  __DEV__ && (renderDispatch.pathToCommitUpdate = highlightUpdateFiber);
+
   __DEV__ && checkRoot(fiber);
 
   __DEV__ && prepareDevContainer(renderDispatch);

packages/myreact-dom/src/client/mount/render.ts

@@ -4,7 +4,7 @@ import { include, once, STATE_TYPE } from "@my-react/react-shared";
 
 import { ClientDomDispatch } from "@my-react-dom-client/renderDispatch";
 import { prepareRenderPlatform } from "@my-react-dom-client/renderPlatform";
-import { unmountComponentAtNode } from "@my-react-dom-client/tools";
+import { unmountComponentAtNode, highlightUpdateFiber } from "@my-react-dom-client/tools";
 import { checkRoot, prepareDevContainer, startRender } from "@my-react-dom-shared";
 
 import type { LikeJSX } from "@my-react/react";
@@ -113,6 +113,8 @@ export const render = (element: LikeJSX, _container: Partial<RenderContainer>, c
 
   renderPlatform.dispatchSet.uniPush(renderDispatch);
 
+  __DEV__ && (renderDispatch.pathToCommitUpdate = highlightUpdateFiber);
+
   __DEV__ && checkRoot(fiber);
 
   __DEV__ && prepareDevContainer(renderDispatch);

packages/myreact-dom/src/client/renderDispatch/instance.ts

@@ -46,6 +46,12 @@ export class ClientDomDispatch extends CustomRenderDispatch {
 
   performanceLogTimeLimit = asyncUpdateTimeLimit.current;
 
+  pathToCommitAppend?: (_fiber: MyReactFiberNode) => void;
+
+  pathToCommitUpdate?: (_fiber: MyReactFiberNode) => void;
+
+  pathToCommitSetRef?: (_fiber: MyReactFiberNode) => void;
+
   commitCreate(_fiber: MyReactFiberNode, _hydrate?: boolean): boolean {
     return create(_fiber, this, !!_hydrate);
   }
@@ -59,7 +65,7 @@ export class ClientDomDispatch extends CustomRenderDispatch {
     position(_fiber, this);
   }
   commitSetRef(_fiber: MyReactFiberNode): void {
-    setRef(_fiber);
+    setRef(_fiber, this);
   }
   commitUnsetRef(_fiber: MyReactFiberNode): void {
     unsetRef(_fiber);