feat(React Scan): Add performance analytics features

Author: aidenybai

README.md

@@ -133,10 +133,12 @@ scan({
 });
 ```
 
-Or, if you prefer a more manual approach, use the `withScan` API:
+## Examples
+
+If you're digging into performance issues and prefer a more manual approach, use the `withScan` API:
 
 ```js
-import { withScan } from 'react-scan';
+import { withScan, setOptions } from 'react-scan';
 
 const ExpensiveComponent = withScan(
   (props) => {
@@ -146,6 +148,29 @@ const ExpensiveComponent = withScan(
 );
 ```
 
+You can also hook into internal lifecycle methods to for internal data or get a summary of component renders by calling `getReport()`:
+
+```js
+import { setOptions, getReport } from 'react-scan';
+
+setOptions({
+  onCommitStart() {},
+  onRender(fiber, render) {},
+  onCommitFinish() {},
+  onPaintStart(outline) {},
+  onPaintFinish(outline) {},
+});
+
+console.log(getReport());
+//          ^
+//          {
+//            "ExpensiveComponent": {
+//              count: 100,
+//              time: 400
+//            }
+//          }
+```
+
 And voilà! You're ready to go.
 
 ## Why React Scan?
@@ -208,21 +233,22 @@ We expect all contributors to abide by the terms of our [Code of Conduct](https:
 
 - [x] Scan only for unnecessary renders ("unstable" props)
 - [x] Scan API (`withScan`, `scan`)
-- [ ] Don't show label if no reconciliation occurred ("client renders" in DevTools)
-- [ ] Investigate `__REACT_DEVTOOLS_TARGET_WINDOW__`
+- [x] Cleanup config options
 - [x] Chrome extension (h/t [@biw](https://github.com/biw))
+- [x] Mode to highlight long tasks
+- [x] Add context updates
+- [x] Expose primitives / internals for advanced use cases
+- [x] More explicit options override API (start log at certain area, stop log, etc.)
+- [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
+- [ ] UI for turning on/off options
 - [ ] "PageSpeed insights" for React
-- [x] Cleanup config options
 - [ ] Offscreen canvas on worker thread
 - [ ] React Native support
-- [ ] "global" counter using `sessionStorage`, aggregate count stats instead of immediate replacement
 - [ ] Name / explain the actual problem
-- [x] More explicit options override API (start log at certain area, stop log, etc.)
-- [x] Expose primitives / internals for advanced use cases
-- [x] Add context updates
 - [ ] Simple FPS counter
 - [ ] Drag and select areas of the screen to scan
-- [x] Mode to show on main thread blocking
 - [ ] Add a funny mascot, like the ["Stop I'm Changing" dude](https://www.youtube.com/shorts/FwOZdX7bDKI?app=desktop)
 
 ## Acknowledgments

src/core/index.ts

@@ -63,6 +63,13 @@ interface Options {
    */
   longTaskThreshold?: number;
 
+  /**
+   * Clear aggregated fibers after this time in milliseconds
+   *
+   * @default 5000
+   */
+  resetCountTimeout?: number;
+
   onCommitStart?: () => void;
   onRender?: (fiber: Fiber, render: Render) => void;
   onCommitFinish?: () => void;
@@ -79,6 +86,21 @@ interface Internals {
   options: Options;
   scheduledOutlines: PendingOutline[];
   activeOutlines: ActiveOutline[];
+  reportData: Record<
+    string,
+    {
+      count: number;
+      time: number;
+    }
+  >;
+  fiberMap: WeakMap<
+    Fiber,
+    {
+      count: number;
+      time: number;
+      lastUpdated: number;
+    }
+  >;
 }
 
 export const ReactScanInternals: Internals = {
@@ -102,11 +124,23 @@ export const ReactScanInternals: Internals = {
     log: false,
     showToolbar: true,
     longTaskThreshold: 50,
+    resetCountTimeout: 5000,
   },
+  reportData: {},
+  fiberMap: new WeakMap<
+    Fiber,
+    {
+      count: number;
+      time: number;
+      lastUpdated: number;
+    }
+  >(),
   scheduledOutlines: [],
   activeOutlines: [],
 };
 
+export const getReport = () => ReactScanInternals.reportData;
+
 export const setOptions = (options: Options) => {
   ReactScanInternals.options = {
     ...ReactScanInternals.options,
@@ -159,6 +193,36 @@ export const start = () => {
         playGeigerClickSound(audioContext, amplitude);
       }
 
+      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;
+        }
+      }
+
+      if (render.name) {
+        const prev = ReactScanInternals.reportData[render.name];
+        ReactScanInternals.reportData[render.name] = {
+          count: (prev?.count ?? 0) + render.count,
+          time: (prev?.time ?? 0) + render.time,
+        };
+      }
+
+      ReactScanInternals.fiberMap.set(fiber, {
+        count,
+        time,
+        lastUpdated: now,
+      });
+
       requestAnimationFrame(() => {
         flushOutlines(ctx, new Map(), toolbar, perfObserver);
       });