fix: playwright and react 18 compat (#238)

* fix react 18 compat

* Update package.json

* Update cli.mts

* Update index.ts

* Update index.ts

* Update pnpm-lock.yaml

* fix: hack to autorefresh playwright after script is ran

---------

Co-authored-by: RobPruzan <[email protected]>

Author: lxsmnsyc

packages/kitchen-sink/package.json

@@ -12,7 +12,7 @@
     "bippy": "^0.0.21",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-scan": "^0.0.34",
+    "react-scan": "^0.1.3",
     "sugar-high": "^0.7.5"
   },
   "devDependencies": {

packages/scan/src/cli.mts

@@ -1,9 +1,9 @@
-import { spawn } from 'node:child_process';
-import fs from 'node:fs';
-import path from 'node:path';
 import { cancel, confirm, intro, isCancel, spinner } from '@clack/prompts';
 import { bgMagenta, dim, red } from 'kleur';
 import mri from 'mri';
+import { spawn } from 'node:child_process';
+import fs from 'node:fs/promises';
+import path from 'node:path';
 import {
   type Browser,
   type BrowserContext,
@@ -227,7 +227,7 @@ const init = async () => {
 
   const page = await context.newPage();
 
-  const scriptContent = fs.readFileSync(
+  const scriptContent = await fs.readFile(
     path.resolve(__dirname, './auto.global.js'),
     'utf8',
   );
@@ -237,12 +237,12 @@ const init = async () => {
   const urlString = inferValidURL(inputUrl);
 
   await page.goto(urlString);
-  await page.waitForLoadState('load');
-  await page.waitForTimeout(500);
 
-  await page.addScriptTag({
+  await page.addInitScript({
     content: `${scriptContent}\n//# sourceURL=react-scan.js`,
   });
+  await page.waitForLoadState('load');
+  await page.waitForTimeout(500);
 
   const pollReport = async () => {
     if (page.url() !== currentURL) return;
@@ -296,9 +296,12 @@ const init = async () => {
 
       await page.waitForTimeout(100);
 
+      // TODO: determine why this is needed and fix root cause
+      await page.reload();
+
       await page.evaluate(() => {
         if (typeof globalThis.reactScan !== 'function') return;
-        globalThis.reactScan({ report: true });
+        globalThis.reactScan({});
       });
 
       interval = setInterval(() => {

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) {

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
@@ -611,6 +612,12 @@ export const createInstrumentation = (
           instance.config.onCommitFinish();
         }
       },
+      onPostCommitFiberRoot() {
+        const allInstances = getAllInstances();
+        for (const instance of allInstances) {
+          instance.config.onPostCommitFiberRoot();
+        }
+      },
     });
   }
   return instrumentation;

packages/scan/src/core/monitor/index.ts

@@ -135,6 +135,9 @@ export const startMonitoring = () => {
     onCommitFinish() {
       // ReactScanInternals.options.value.onCommitFinish?.();
     },
+    onPostCommitFiberRoot() {
+      // ...
+    },
     trackChanges: false,
     forceAlwaysTrackRenders: true,
   });

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', {
@@ -438,10 +440,6 @@ export const initReactScanInstrumentation = () => {
     onActive: () => {
       if (hasStopped()) return;
 
-      const host = getCanvasEl();
-      if (host) {
-        document.documentElement.appendChild(host);
-      }
       globalThis.__REACT_SCAN__ = {
         ReactScanInternals,
       };
@@ -480,6 +478,13 @@ export const initReactScanInstrumentation = () => {
     onCommitFinish: () => {
       ReactScanInternals.options.value.onCommitFinish?.();
     },
+    onPostCommitFiberRoot() {
+      const host = getCanvasEl();
+      if (host) {
+        document.documentElement.appendChild(host);
+      }
+      setupToolbar();
+    },
     trackChanges: false,
   });
   ReactScanInternals.instrumentation = instrumentation;