Merge branch 'main' into feat/select

Author: aidenybai

README.md

@@ -121,7 +121,6 @@ import React from 'react';
 scan({
   enabled: true,
   log: true, // logs render info to console (default: false)
-  clearLog: false, // clears the console per group of renders (default: false)
 });
 ```
 
@@ -169,19 +168,19 @@ scan({
    * Long task threshold in milliseconds, only show
    * when main thread is blocked for longer than this
    */
-  longTaskThreshold: 50;
+  longTaskThreshold: 50,
 
   /**
-   * Clear aggregated fibers after this time in milliseconds
+   * Report data to getReport()
    */
-  resetCountTimeout: 5000;
-
-  onCommitStart?: () => void;
-  onRender?: (fiber, render) => void;
-  onCommitFinish?: () => void;
-  onPaintStart?: (outline) => void;
-  onPaintFinish?: (outline) => void;
-})
+  report: false,
+
+  onCommitStart: () => {},
+  onRender: (fiber, render) => {},
+  onCommitFinish: () => {},
+  onPaintStart: (outline) => {},
+  onPaintFinish: (outline) => {},
+});
 ```
 
 </details>
@@ -232,19 +231,19 @@ withScan(Component, {
    * Long task threshold in milliseconds, only show
    * when main thread is blocked for longer than this
    */
-  longTaskThreshold: 50;
+  longTaskThreshold: 50,
 
   /**
-   * Clear aggregated fibers after this time in milliseconds
+   * Report data to getReport()
    */
-  resetCountTimeout: 5000;
-
-  onCommitStart?: () => void;
-  onRender?: (fiber, render) => void;
-  onCommitFinish?: () => void;
-  onPaintStart?: (outline) => void;
-  onPaintFinish?: (outline) => void;
-})
+  report: false,
+
+  onCommitStart: () => {},
+  onRender: (fiber, render) => {},
+  onCommitFinish: () => {},
+  onPaintStart: (outline) => {},
+  onPaintFinish: (outline) => {},
+});
 ```
 
 </details>
@@ -257,6 +256,8 @@ withScan(Component, {
 Get a aggregated report of all components and renders.
 
 ```jsx
+scan({ report: true });
+
 const report = getReport();
 
 for (const component in report) {
@@ -310,19 +311,19 @@ setOptions({
    * Long task threshold in milliseconds, only show
    * when main thread is blocked for longer than this
    */
-  longTaskThreshold: 50;
+  longTaskThreshold: 50,
 
   /**
-   * Clear aggregated fibers after this time in milliseconds
+   * Report data to getReport()
    */
-  resetCountTimeout: 5000;
-
-  onCommitStart?: () => void;
-  onRender?: (fiber, render) => void;
-  onCommitFinish?: () => void;
-  onPaintStart?: (outline) => void;
-  onPaintFinish?: (outline) => void;
-})
+  report: false,
+
+  onCommitStart: () => {},
+  onRender: (fiber, render) => {},
+  onCommitFinish: () => {},
+  onPaintStart: (outline) => {},
+  onPaintFinish: (outline) => {},
+});
 ```
 
 </details>
@@ -416,12 +417,20 @@ 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] heatmap decay (stacked renders will be more intense)
+- [ ] Investigate components (UI allowlist)
+- [ ] UI for turning on/off options
+- [ ] “PageSpeed insights” for React
 - [ ] React Native support
 - [ ] 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)
 
 ## Acknowledgments

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scan",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Scan your React app for renders",
   "keywords": [
     "react",
@@ -23,7 +23,6 @@
     "email": "[email protected]",
     "url": "https://million.dev"
   },
-  "sideEffects": false,
   "type": "commonjs",
   "exports": {
     "./package.json": "./package.json",

src/core/index.ts

@@ -70,6 +70,20 @@ interface Options {
    */
   resetCountTimeout?: number;
 
+  /**
+   * Maximum number of renders for red indicator
+   *
+   * @default 20
+   */
+  maxRenders?: number;
+
+  /**
+   * Report data to getReport()
+   *
+   * @default false
+   */
+  report?: boolean;
+
   onCommitStart?: () => void;
   onRender?: (fiber: Fiber, render: Render) => void;
   onCommitFinish?: () => void;
@@ -92,14 +106,7 @@ interface Internals {
     {
       count: number;
       time: number;
-    }
-  >;
-  fiberMap: WeakMap<
-    Fiber,
-    {
-      count: number;
-      time: number;
-      lastUpdated: number;
+      renders: Render[];
     }
   >;
 }
@@ -126,17 +133,9 @@ export const ReactScanInternals: Internals = {
     log: false,
     showToolbar: true,
     longTaskThreshold: 50,
-    resetCountTimeout: 5000,
+    report: false,
   },
   reportData: {},
-  fiberMap: new WeakMap<
-    Fiber,
-    {
-      count: number;
-      time: number;
-      lastUpdated: number;
-    }
-  >(),
   scheduledOutlines: [],
   activeOutlines: [],
 };
@@ -182,15 +181,16 @@ export const start = () => {
     onRender(fiber, render) {
       options.onRender?.(fiber, render);
       const outline = getOutline(fiber, render);
-      if (outline) {
-        if (
-          render.name &&
-          ReactScanInternals.componentNameAllowList.size > 0 &&
-          !ReactScanInternals.componentNameAllowList.has(render.name)
-        ) {
-          /** */
-        } else ReactScanInternals.scheduledOutlines.push(outline);
-      }
+      if (!outline) return;
+      const { componentNameAllowList } = ReactScanInternals;
+      if (
+        !render.name ||
+        !componentNameAllowList.size ||
+        componentNameAllowList.has(render.name)
+      ) {
+        ReactScanInternals.scheduledOutlines.push(outline);
+      } 
+  
 
       if (options.playSound && audioContext) {
         const renderTimeThreshold = 10;
@@ -203,40 +203,17 @@ export const start = () => {
 
       if (render.name) {
         const prev = ReactScanInternals.reportData[render.name];
+        prev.renders.push(render);
         ReactScanInternals.reportData[render.name] = {
           count: (prev?.count ?? 0) + render.count,
           time: (prev?.time ?? 0) + render.time,
+          renders: prev.renders,
         };
         renderCheckbox();
       }
 
       requestAnimationFrame(() => {
         flushOutlines(ctx, new Map(), toolbar, perfObserver);
-
-        const fiberData = ReactScanInternals.fiberMap.get(fiber);
-        const now = Date.now();
-        let count = render.count;
-        let time = render.time;
-        if (fiberData) {
-          // clear aggregated fibers after 5 seconds
-          if (
-            now - fiberData.lastUpdated >
-            (options.resetCountTimeout ?? 5000)
-          ) {
-            ReactScanInternals.fiberMap.delete(fiber);
-          } else {
-            count += fiberData.count;
-            time += fiberData.time;
-            render.count = count;
-            render.time = time;
-          }
-        }
-
-        ReactScanInternals.fiberMap.set(fiber, {
-          count,
-          time,
-          lastUpdated: now,
-        });
       });
     },
     onCommitFinish() {

src/core/instrumentation/fiber.ts

@@ -128,7 +128,6 @@ export const didFiberRender = (fiber: Fiber): boolean => {
 
   const prevProps = fiber.alternate?.memoizedProps || {};
   const flags = fiber.flags ?? (fiber as any).effectTag ?? 0;
-  const subtreeFlags = fiber.subtreeFlags ?? 0;
 
   switch (fiber.tag) {
     case ClassComponentTag:
@@ -137,10 +136,7 @@ export const didFiberRender = (fiber: Fiber): boolean => {
     case ForwardRefTag:
     case MemoComponentTag:
     case SimpleMemoComponentTag:
-      return (
-        (flags & PerformedWorkFlag) === PerformedWorkFlag &&
-        (subtreeFlags & PerformedWorkFlag) === PerformedWorkFlag
-      );
+      return (flags & PerformedWorkFlag) === PerformedWorkFlag;
     default:
       // Host nodes (DOM, root, etc.)
       if (!fiber.alternate) return true;

src/core/utils.ts

@@ -37,6 +37,7 @@ export const getLabelText = (renders: Render[]) => {
     ([, a], [, b]) => b.count - a.count,
   );
 
+  const parts: string[] = [];
   for (const [name, { count, trigger, forget }] of sortedComponents) {
     let text = name;
     if (count > 1) {
@@ -48,9 +49,11 @@ export const getLabelText = (renders: Render[]) => {
     if (forget) {
       text = `${text} ✨`;
     }
-    labelText += text;
+    parts.push(text);
   }
 
+  labelText = parts.join(' ');
+
   if (!labelText.length) return null;
   if (labelText.length > 20) {
     labelText = `${labelText.slice(0, 20)}…`;

src/core/web/index.ts

@@ -13,7 +13,12 @@ export const createOverlay = () => {
     const dpi = window.devicePixelRatio;
     canvas.width = dpi * window.innerWidth;
     canvas.height = dpi * window.innerHeight;
-    ctx?.scale(dpi, dpi);
+
+    if (ctx) {
+      ctx.resetTransform();
+      ctx.scale(dpi, dpi);
+    }
+
     resizeScheduled = false;
   };