fix react 18 compat

aidenybai · Feb 7, 2025 · 2588fb8 · 2588fb8
1 parent e23fb55
commit 2588fb8
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/packages/scan/src/core/index.ts b/packages/scan/src/core/index.ts
@@ -56,7 +56,6 @@ const initRootContainer = (): RootContainer => {
     'image/svg+xml',
   ).documentElement;
 
-
   fragment.appendChild(iconSprite);
   fragment.appendChild(cssStyles);
   shadowRoot.appendChild(fragment);
@@ -497,8 +496,9 @@ export const start = () => {
 
   const options = getOptions();
 
-  idempotent_createToolbar(!!options.value.showToolbar);
-  initReactScanInstrumentation();
+  initReactScanInstrumentation(() =>
+    idempotent_createToolbar(!!options.value.showToolbar),
+  );
 
   const isUsedInBrowserExtension = typeof window !== 'undefined';
   if (!Store.monitor.value && !isUsedInBrowserExtension) {

diff --git a/packages/scan/src/core/instrumentation.ts b/packages/scan/src/core/instrumentation.ts
@@ -338,6 +338,7 @@ interface InstrumentationConfig {
   onCommitFinish: OnCommitFinishHandler;
   onError: OnErrorHandler;
   onActive?: OnActiveHandler;
+  onPostCommitFiberRoot: () => void;
   // monitoring does not need to track changes, and it adds overhead to leave it on
   trackChanges: boolean;
   // allows monitoring to continue tracking renders even if react scan dev mode is disabled
@@ -419,7 +420,6 @@ export const isRenderUnnecessary = (fiber: Fiber) => {
 
 const TRACK_UNNECESSARY_RENDERS = false;
 
-
 export const createInstrumentation = (
   instanceKey: string,
   config: InstrumentationConfig,
@@ -553,6 +553,12 @@ export const createInstrumentation = (
           instance.config.onCommitFinish();
         }
       },
+      onPostCommitFiberRoot() {
+        const allInstances = getAllInstances();
+        for (const instance of allInstances) {
+          instance.config.onPostCommitFiberRoot();
+        }
+      },
     });
   }
   return instrumentation;

diff --git a/packages/scan/src/core/monitor/index.ts b/packages/scan/src/core/monitor/index.ts
@@ -135,6 +135,9 @@ export const startMonitoring = () => {
     onCommitFinish() {
       // ReactScanInternals.options.value.onCommitFinish?.();
     },
+    onPostCommitFiberRoot() {
+      // ...
+    },
     trackChanges: false,
     forceAlwaysTrackRenders: true,
   });

diff --git a/packages/scan/src/new-outlines/index.ts b/packages/scan/src/new-outlines/index.ts
@@ -289,7 +289,9 @@ export const getCanvasEl = () => {
 
   if (IS_OFFSCREEN_CANVAS_WORKER_SUPPORTED) {
     try {
-      const useExtensionWorker = readLocalStorage<boolean>('use-extension-worker');
+      const useExtensionWorker = readLocalStorage<boolean>(
+        'use-extension-worker',
+      );
       removeLocalStorage('use-extension-worker');
 
       if (useExtensionWorker) {
@@ -428,7 +430,7 @@ export const isValidFiber = (fiber: Fiber) => {
 
   return true;
 };
-export const initReactScanInstrumentation = () => {
+export const initReactScanInstrumentation = (setupToolbar: () => void) => {
   if (hasStopped()) return;
   // todo: don't hardcode string getting weird ref error in iife when using process.env
   const instrumentation = createInstrumentation('react-scan-devtools-0.1.0', {
@@ -480,6 +482,9 @@ export const initReactScanInstrumentation = () => {
     onCommitFinish: () => {
       ReactScanInternals.options.value.onCommitFinish?.();
     },
+    onPostCommitFiberRoot() {
+      setupToolbar();
+    },
     trackChanges: false,
   });
   ReactScanInternals.instrumentation = instrumentation;