push

packages/scan/package.json

@@ -91,6 +91,11 @@
         }
       }
     },
+    "./install-hook": {
+      "types": "./dist/install-hook.d.ts",
+      "import": "./dist/install-hook.mjs",
+      "require": "./dist/install-hook.js"
+    },
     "./auto": {
       "production": {
         "import": {
@@ -234,7 +239,7 @@
     "@preact/signals": "^1.3.1",
     "@rollup/pluginutils": "^5.1.3",
     "@types/node": "^20.17.9",
-    "bippy": "^0.0.14",
+    "bippy": "^0.0.18",
     "esbuild": "^0.24.0",
     "estree-walker": "^3.0.3",
     "kleur": "^4.1.5",
@@ -253,6 +258,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vercel/style-guide": "^6.0.0",
+    "es-module-lexer": "^1.5.4",
     "eslint": "^8.0.0",
     "next": "*",
     "prettier": "^3.3.3",

packages/scan/src/auto.ts

@@ -1,4 +1,4 @@
-import 'bippy';
+import 'bippy'; // implicit init RDT hook
 import { scan } from './index';
 
 if (typeof window !== 'undefined') {

packages/scan/src/core/index.ts

@@ -1,7 +1,13 @@
 import type { Fiber } from 'react-reconciler';
 import type * as React from 'react';
 import { type Signal, signal } from '@preact/signals';
-import { getDisplayName, getTimings, getType, isCompositeFiber } from 'bippy';
+import {
+  getDisplayName,
+  getTimings,
+  getType,
+  isCompositeFiber,
+  traverseFiber,
+} from 'bippy';
 import { createInstrumentation, type Render } from './instrumentation';
 import {
   type ActiveOutline,
@@ -18,11 +24,7 @@ import {
 import { createToolbar } from './web/toolbar';
 import type { InternalInteraction } from './monitor/types';
 import { type getSession } from './monitor/utils';
-import {
-  isValidFiber,
-  type RenderData,
-  updateFiberRenderData,
-} from './utils';
+import { type RenderData, updateFiberRenderData } from './utils';
 import { playGeigerClickSound } from './web/geiger';
 
 export interface Options {
@@ -275,6 +277,30 @@ export const reportRender = (fiber: Fiber, renders: Array<Render>) => {
   }
 };
 
+export const isValidFiber = (fiber: Fiber) => {
+  if (ignoredProps.has(fiber.memoizedProps)) {
+    return false;
+  }
+
+  const allowList = ReactScanInternals.componentAllowList;
+  const shouldAllow =
+    allowList?.has(fiber.type) ?? allowList?.has(fiber.elementType);
+
+  if (shouldAllow) {
+    const parent = traverseFiber(
+      fiber,
+      (node) => {
+        const options =
+          allowList?.get(node.type) ?? allowList?.get(node.elementType);
+        return options?.includeChildren;
+      },
+      true,
+    );
+    if (!parent && !shouldAllow) return false;
+  }
+  return true;
+};
+
 export const start = () => {
   if (typeof window === 'undefined') return;
   const options = ReactScanInternals.options.value;
@@ -304,14 +330,15 @@ export const start = () => {
   };
 
   // TODO: dynamic enable, and inspect-off check
-  const instrumentation = createInstrumentation({
-    kind: 'devtool',
+  const instrumentation = createInstrumentation('devtools', {
     onCommitStart() {
       ReactScanInternals.options.value.onCommitStart?.();
     },
-    isValidFiber(fiber) {
-      return isValidFiber(fiber);
+    onError(error) {
+      // eslint-disable-next-line no-console
+      console.error('[React Scan] Error instrumenting:', error);
     },
+    isValidFiber,
     onRender(fiber, renders) {
       if (ReactScanInternals.instrumentation?.isPaused.value) {
         // don't draw if it's paused