chore: Update scripts, dependencies, and core functionality

Author: aidenybai

packages/kitchen-sink/package.json

@@ -2,14 +2,15 @@
   "name": "@react-scan/kitchen-sink",
   "version": "0.0.0",
   "scripts": {
-    "build": "vite build",
+    "build": "rm -rf node_modules/.vite && vite build",
     "postbuild": "node ../../scripts/version-warning.mjs",
-    "dev": "vite",
+    "dev": "rm -rf node_modules/.vite && vite",
     "preview": "vite preview"
   },
   "dependencies": {
     "@vercel/analytics": "^1.4.0",
     "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "bippy": "^0.0.21",
     "react": "19.0.0-rc.1",
     "react-dom": "19.0.0-rc.1",
     "react-scan": "^0.0.34",

packages/kitchen-sink/src/index.jsx

@@ -6,6 +6,7 @@ import './styles.css';
 
 scan({
   enabled: true,
+  dangerouslyForceRunInProduction: true,
   // monitor: {
   //   url: 'https://localhost:3000/api/scan',
   // },

packages/kitchen-sink/vite.config.mjs

@@ -13,7 +13,7 @@ export default defineConfig({
     Inspect(),
   ],
   resolve:
-    process.env.NODE_ENV === 'production'
+    process.env.NODE_ENV === 'production' && !process.env.TEST
       ? {}
       : {
           alias: {

packages/scan/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scan",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "description": "Scan your React app for renders",
   "keywords": [
     "react",
@@ -242,7 +242,7 @@
     "@preact/signals": "^1.3.1",
     "@rollup/pluginutils": "^5.1.3",
     "@types/node": "^20.17.9",
-    "bippy": "^0.0.20",
+    "bippy": "^0.0.23",
     "esbuild": "^0.24.0",
     "estree-walker": "^3.0.3",
     "kleur": "^4.1.5",

packages/scan/src/core/index.ts

@@ -3,11 +3,13 @@ import type * as React from 'react';
 import { type Signal, signal } from '@preact/signals';
 import {
   getDisplayName,
+  getRDTHook,
   getTimings,
   getType,
   isCompositeFiber,
   isInstrumentationActive,
   traverseFiber,
+  detectReactBuildType,
 } from 'bippy';
 import {
   type ActiveOutline,
@@ -49,6 +51,13 @@ export interface Options {
    */
   includeChildren?: boolean;
 
+  /**
+   * Force React Scan to run in production (not recommended)
+   *
+   * @default false
+   */
+  dangerouslyForceRunInProduction?: boolean;
+
   /**
    * Enable/disable geiger sound
    *
@@ -196,6 +205,7 @@ export const ReactScanInternals: Internals = {
     report: undefined,
     alwaysShowLabels: false,
     animationSpeed: 'fast',
+    dangerouslyForceRunInProduction: false,
   }),
   onRender: null,
   scheduledOutlines: [],
@@ -307,65 +317,96 @@ export const isValidFiber = (fiber: Fiber) => {
 export const start = () => {
   if (typeof window === 'undefined') return;
 
-  const existingRoot = document.querySelector('react-scan-root');
-  if (existingRoot) {
-    return;
-  }
+  const audioContext =
+    typeof window !== 'undefined'
+      ? new (window.AudioContext ||
+          // @ts-expect-error -- This is a fallback for Safari
+          window.webkitAudioContext)()
+      : null;
 
-  // Create container for shadow DOM
-  const container = document.createElement('div');
-  container.id = 'react-scan-root';
+  let ctx: ReturnType<typeof initReactScanOverlay> | null = null;
+  // TODO: dynamic enable, and inspect-off check
 
-  const shadow = container.attachShadow({ mode: 'open' });
+  const instrumentation = createInstrumentation('devtools', {
+    onActive() {
+      if (!Store.monitor.value) {
+        const rdtHook = getRDTHook();
+        let isProduction = false;
+        for (const renderer of rdtHook.renderers.values()) {
+          const buildType = detectReactBuildType(renderer);
+          if (
+            buildType === 'production' &&
+            !ReactScanInternals.options.value.dangerouslyForceRunInProduction
+          ) {
+            isProduction = true;
+          }
+        }
+        if (isProduction) {
+          setOptions({ enabled: false, showToolbar: false });
+          return;
+        }
 
-  const fragment = document.createDocumentFragment();
+        const existingRoot = document.querySelector('react-scan-root');
+        if (existingRoot) {
+          return;
+        }
 
-  // add styles
-  const cssStyles = document.createElement('style');
-  cssStyles.textContent = styles;
+        const container = document.createElement('div');
+        container.id = 'react-scan-root';
 
-  // Create SVG sprite sheet node directly
-  const iconSprite = new DOMParser().parseFromString(
-    ICONS,
-    'image/svg+xml',
-  ).documentElement;
-  shadow.appendChild(iconSprite);
+        const shadow = container.attachShadow({ mode: 'open' });
 
-  // add toolbar root
-  const root = document.createElement('div');
-  root.id = 'react-scan-toolbar-root';
-  root.className = 'absolute z-2147483647';
+        const fragment = document.createDocumentFragment();
 
-  fragment.appendChild(cssStyles);
-  fragment.appendChild(root);
+        const cssStyles = document.createElement('style');
+        cssStyles.textContent = styles;
 
-  shadow.appendChild(fragment);
+        const iconSprite = new DOMParser().parseFromString(
+          ICONS,
+          'image/svg+xml',
+        ).documentElement;
+        shadow.appendChild(iconSprite);
 
-  // Add container to document first (so shadow DOM is available)
-  document.documentElement.appendChild(container);
+        const root = document.createElement('div');
+        root.id = 'react-scan-toolbar-root';
+        root.className = 'absolute z-2147483647';
 
-  const options = ReactScanInternals.options.value;
+        fragment.appendChild(cssStyles);
+        fragment.appendChild(root);
 
-  const ctx = initReactScanOverlay();
-  if (!ctx) return;
+        shadow.appendChild(fragment);
 
-  createInspectElementStateMachine(shadow);
+        document.documentElement.appendChild(container);
 
-  const audioContext =
-    typeof window !== 'undefined'
-      ? new (window.AudioContext ||
-          // @ts-expect-error -- This is a fallback for Safari
-          window.webkitAudioContext)()
-      : null;
+        ctx = initReactScanOverlay();
+        if (!ctx) return;
 
-  globalThis.__REACT_SCAN__ = {
-    ReactScanInternals,
-  };
+        createInspectElementStateMachine(shadow);
+
+        globalThis.__REACT_SCAN__ = {
+          ReactScanInternals,
+        };
+
+        if (ReactScanInternals.options.value.showToolbar) {
+          toolbarContainer = createToolbar(shadow);
+        }
+
+        // Add this right after creating the container
+        container.setAttribute('part', 'scan-root');
+
+        // Add this before creating the Shadow DOM
+        const mainStyles = document.createElement('style');
+        mainStyles.textContent = `
+          html[data-theme="light"] react-scan-root::part(scan-root) {
+            --icon-color: rgba(0, 0, 0, 0.8);
+          }
+
+          html[data-theme="dark"] react-scan-root::part(scan-root) {
+            --icon-color: rgba(255, 255, 255, 0.8);
+          }
+        `;
+        document.head.appendChild(mainStyles);
 
-  // TODO: dynamic enable, and inspect-off check
-  const instrumentation = createInstrumentation('devtools', {
-    onActive() {
-      if (!Store.monitor.value) {
         const existingOverlay = document.querySelector('react-scan-overlay');
         if (existingOverlay) {
           return;
@@ -388,7 +429,7 @@ export const start = () => {
     },
     isValidFiber,
     onRender(fiber, renders) {
-      if (ReactScanInternals.instrumentation?.isPaused.value) {
+      if (Boolean(ReactScanInternals.instrumentation?.isPaused.value) || !ctx) {
         // don't draw if it's paused
         return;
       }
@@ -430,26 +471,6 @@ export const start = () => {
 
   ReactScanInternals.instrumentation = instrumentation;
 
-  if (options.showToolbar) {
-    toolbarContainer = createToolbar(shadow);
-  }
-
-  // Add this right after creating the container
-  container.setAttribute('part', 'scan-root');
-
-  // Add this before creating the Shadow DOM
-  const mainStyles = document.createElement('style');
-  mainStyles.textContent = `
-    html[data-theme="light"] react-scan-root::part(scan-root) {
-      --icon-color: rgba(0, 0, 0, 0.8);
-    }
-
-    html[data-theme="dark"] react-scan-root::part(scan-root) {
-      --icon-color: rgba(255, 255, 255, 0.8);
-    }
-  `;
-  document.head.appendChild(mainStyles);
-
   // TODO: add an visual error indicator that it didn't load
   if (!Store.monitor.value) {
     setTimeout(() => {