update

Author: aidenybai

README.md

@@ -248,9 +248,14 @@ if (typeof window !== 'undefined') {
 
 </details>
 
-- `scan(options)`: Imperative API to start scanning
-- `useScan(options)`: Hook API to start scanning
-- `withScan(Component, options)`: Useful if you only want to scan a specific component
+- `scan(options: Options)`: Imperative API to start scanning
+- `useScan(options: Options)`: Hook API to start scanning
+- `withScan(Component, options: Options)`: Whitelist a specific component, do not scan other components
+- `getReport()`: Get a report of all the renders
+- `setOptions(options: Options): void`: Set options at runtime
+- `getOptions()`: Get the current options
+- `onRender(Component, onRender: (fiber: Fiber, render: Render) => void)`: Hook into a specific component's renders
+- `getRenderInfo(Component)`: Get the render info for a specific component
 
 ## Why React Scan?
 
@@ -323,18 +328,18 @@ We expect all contributors to abide by the terms of our [Code of Conduct](https:
 - [x] Don't show label if no reconciliation occurred ("client renders" in DevTools)
 - [x] "global" counter using `sessionStorage`, aggregate count stats instead of immediate replacement
 - [x] Give a general report of the app's performance
-- [ ] checkbox filtering API, leaderboard
-- [ ] Offscreen canvas on worker thread
+- [x] Select areas of the screen to scan
+- [x] Report should include all renders
 - [x] heatmap decay (stacked renders will be more intense)
-- [ ] Investigate components (UI allowlist)
+- [x] Investigate components (UI allowlist)
+- [ ] Offscreen canvas on worker thread
 - [ ] UI for turning on/off options
 - [ ] “PageSpeed insights” for React
+- [ ] CLI
 - [ ] React Native support
+- [ ] Cleanup API reference
 - [ ] Name / explain the actual problem, docs
 - [ ] Simple FPS counter
-- [ ] Drag and select areas of the screen to scan
-- [ ] Long task progress bar filter
-- [x] Report should include all renders
 - [ ] [Runtime version guarding](https://github.com/lahmatiy/react-render-tracker/blob/229ad0e9c28853615300724d5dc86c140f250f60/src/publisher/react-integration/utils/getInternalReactConstants.ts#L28)
 - [ ] React as peer dependency (lock version to range)
 - [ ] Add a funny mascot, like the ["Stop I'm Changing" dude](https://www.youtube.com/shorts/FwOZdX7bDKI?app=desktop)

src/auto.ts

@@ -1,4 +1,4 @@
-import './core/instrumentation/placeholder';
+import './core/instrumentation/init';
 import { scan } from './index';
 
 if (typeof window !== 'undefined') {

src/core/index.ts

@@ -16,6 +16,7 @@ import {
   type States,
 } from './web/inspect-element/inspect-state-machine';
 import { createToolbar } from './web/toolbar';
+import { getType } from './instrumentation/utils';
 
 export interface Options {
   /**
@@ -106,6 +107,7 @@ export interface Internals {
   options: Options;
   scheduledOutlines: PendingOutline[];
   activeOutlines: ActiveOutline[];
+  onRender: ((fiber: Fiber, render: Render) => void) | null;
   reportDataByFiber: WeakMap<
     Fiber,
     {
@@ -120,6 +122,7 @@ export interface Internals {
     {
       count: number;
       time: number;
+      type: unknown;
       badRenders: Render[];
     }
   >;
@@ -252,6 +255,7 @@ export const ReactScanInternals = createStore<Internals>({
     report: undefined,
     alwaysShowLabels: false,
   },
+  onRender: null,
   reportData: {},
   reportDataByFiber: new WeakMap(),
   scheduledOutlines: [],
@@ -277,15 +281,14 @@ export const start = () => {
   if (typeof window === 'undefined') {
     return;
   }
-  const { options } = ReactScanInternals;
 
   if (document.querySelector('react-scan-overlay')) return;
   initReactScanOverlay();
 
   const overlayElement = document.createElement('react-scan-overlay') as any;
   document.documentElement.appendChild(overlayElement);
 
-  if (options.showToolbar) {
+  if (ReactScanInternals.options.showToolbar) {
     createToolbar();
   }
   const ctx = overlayElement.getContext();
@@ -307,19 +310,19 @@ export const start = () => {
 
   instrument({
     onCommitStart() {
-      options.onCommitStart?.();
+      ReactScanInternals.options.onCommitStart?.();
     },
     onRender(fiber, render) {
       if (ReactScanInternals.isPaused) {
         // don't draw if it's paused
         return;
       }
-      options.onRender?.(fiber, render);
+      ReactScanInternals.options.onRender?.(fiber, render);
       const outline = getOutline(fiber, render);
       if (!outline) return;
       ReactScanInternals.scheduledOutlines.push(outline);
 
-      if (options.playSound && audioContext) {
+      if (ReactScanInternals.options.playSound && audioContext) {
         const renderTimeThreshold = 10;
         const amplitude = Math.min(
           1,
@@ -330,7 +333,7 @@ export const start = () => {
       flushOutlines(ctx, new Map());
     },
     onCommitFinish() {
-      options.onCommitFinish?.();
+      ReactScanInternals.options.onCommitFinish?.();
     },
   });
 };
@@ -370,3 +373,27 @@ export const useScan = (options: Options) => {
     scan(options);
   }, []);
 };
+
+export const onRender = (
+  type: unknown,
+  _onRender: (fiber: Fiber, render: Render) => void,
+) => {
+  const prevOnRender = ReactScanInternals.onRender;
+  ReactScanInternals.onRender = (fiber, render) => {
+    prevOnRender?.(fiber, render);
+    if (getType(fiber.type) === type) {
+      _onRender(fiber, render);
+    }
+  };
+};
+
+export const getRenderInfo = (type: unknown) => {
+  type = getType(type) || type;
+  const reportData = ReactScanInternals.reportData;
+  for (const componentName in reportData) {
+    if (reportData[componentName].type === type) {
+      return reportData[componentName];
+    }
+  }
+  return null;
+};

src/core/instrumentation/index.ts

@@ -11,7 +11,7 @@ import {
   traverseFiber,
   traverseState,
 } from './fiber';
-import { registerDevtoolsHook } from './placeholder';
+import { registerDevtoolsHook } from './init';
 
 export interface Change {
   name: string;
@@ -150,6 +150,7 @@ export const reportRender = (
     count: (report?.count ?? 0) + 1,
     time: (report?.time ?? 0) + time,
     badRenders: report?.badRenders || [],
+    type: getType(fiber.type) || fiber.type,
   };
 };
 export const reportRenderFiber = (fiber: Fiber, renders: (Render | null)[]) => {

src/core/instrumentation/placeholder.ts renamed to src/core/instrumentation/init.ts

@@ -1,5 +1,8 @@
-import { type FiberRoot } from 'react-reconciler';
-import { NO_OP } from '../utils';
+import type { FiberRoot } from 'react-reconciler';
+
+const NO_OP = () => {
+  /**/
+};
 
 export const registerDevtoolsHook = ({
   onCommitFiberRoot,

src/core/utils.ts

@@ -1,9 +1,5 @@
 import type { Render } from './instrumentation/index';
 
-export const NO_OP = () => {
-  /**/
-};
-
 export const getLabelText = (renders: Render[]) => {
   let labelText = '';
 

src/core/web/index.ts

@@ -1,6 +1,7 @@
 import { type Internals, ReactScanInternals } from '../../index';
 import { throttle } from '../utils';
 import { didFiberRender } from '../../instrumentation/fiber';
+import { restoreSizeFromLocalStorage } from '../toolbar';
 import { renderPropsAndState } from './view-state';
 import {
   currentLockIconRect,
@@ -9,7 +10,6 @@ import {
   updateCanvasSize,
 } from './overlay';
 import { getCompositeComponentFromElement, hasValidParent } from './utils';
-import { restoreSizeFromLocalStorage } from '../toolbar';
 
 export type States =
   | {
@@ -260,7 +260,7 @@ export const createInspectElementStateMachine = () => {
             if (!document.contains(inspectState.focusedDomElement)) {
               setTimeout(() => {
 
-                // potential race condition solution for some websites 
+                // potential race condition solution for some websites
                 clearCanvas();
               }, 500)
               inspectState.propContainer.style.maxHeight = '0';

src/core/web/inspect-element/inspect-state-machine.ts

@@ -165,7 +165,13 @@ export const drawStatsPill = (
   const componentName = fiber
     ? (getDisplayName(fiber) ?? 'Unknown')
     : 'Unknown';
-  const text = `${componentName} • x${stats.count} (${stats.time.toFixed(1)}ms)`;
+  let text = componentName;
+  if (stats.count) {
+    text += ` • ×${stats.count}`;
+    if (stats.time) {
+      text += ` (${stats.time.toFixed(1)}ms)`;
+    }
+  }
 
   ctx.save();
   ctx.font = '12px system-ui, -apple-system, sans-serif';