refactor(core): Replace activeOutlines array with Map

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)
 });
 ```
 
@@ -416,7 +415,12 @@ 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
+- [ ] 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

src/core/index.ts

@@ -85,7 +85,7 @@ interface Internals {
   componentAllowList: WeakMap<React.ComponentType<any>, Options> | null;
   options: Options;
   scheduledOutlines: PendingOutline[];
-  activeOutlines: ActiveOutline[];
+  activeOutlinesMap: Map<string, ActiveOutline>;
   reportData: Record<
     string,
     {
@@ -136,7 +136,7 @@ export const ReactScanInternals: Internals = {
     }
   >(),
   scheduledOutlines: [],
-  activeOutlines: [],
+  activeOutlinesMap: new Map<string, ActiveOutline>(),
 };
 
 export const getReport = () => ReactScanInternals.reportData;
@@ -204,30 +204,30 @@ export const start = () => {
       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;
-          }
-        }
+        // 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,
-        });
+        // ReactScanInternals.fiberMap.set(fiber, {
+        //   count,
+        //   time,
+        //   lastUpdated: now,
+        // });
       });
     },
     onCommitFinish() {

src/core/web/outline.ts

@@ -113,7 +113,7 @@ export const mergeOutlines = (outlines: PendingOutline[]) => {
 };
 
 export const recalcOutlines = throttle(() => {
-  const { scheduledOutlines, activeOutlines } = ReactScanInternals;
+  const { scheduledOutlines, activeOutlinesMap } = ReactScanInternals;
   for (let i = scheduledOutlines.length - 1; i >= 0; i--) {
     const outline = scheduledOutlines[i];
     const rect = getRect(outline.domNode);
@@ -123,11 +123,16 @@ export const recalcOutlines = throttle(() => {
     }
     outline.rect = rect;
   }
-  for (let i = activeOutlines.length - 1; i >= 0; i--) {
-    const { outline } = activeOutlines[i];
+
+  const activeOutlines = Array.from(activeOutlinesMap.values());
+
+  for (let i = 0, len = activeOutlines.length; i < len; i++) {
+    const activeOutline = activeOutlines[i];
+    const { outline } = activeOutline;
     const rect = getRect(outline.domNode);
     if (!rect) {
       activeOutlines.splice(i, 1);
+      activeOutlinesMap.delete(getOutlineKey(outline));
       continue;
     }
     outline.rect = rect;
@@ -217,17 +222,35 @@ export const paintOutline = (
       log(outline.renders);
     }
 
-    ReactScanInternals.activeOutlines.push({
-      outline,
-      alpha,
-      frame,
-      totalFrames,
-      resolve: () => {
+    const outlineKey = getOutlineKey(outline);
+    const existingActiveOutline =
+      ReactScanInternals.activeOutlinesMap.get(outlineKey);
+
+    if (existingActiveOutline) {
+      existingActiveOutline.outline.renders.push(...outline.renders);
+      existingActiveOutline.frame = frame;
+      existingActiveOutline.totalFrames = totalFrames;
+      existingActiveOutline.alpha = alpha;
+      existingActiveOutline.text = getLabelText(
+        existingActiveOutline.outline.renders,
+      );
+      existingActiveOutline.resolve = () => {
         resolve();
-        options.onPaintFinish?.(outline);
-      },
-      text,
-    });
+        options.onPaintFinish?.(existingActiveOutline.outline);
+      };
+    } else {
+      ReactScanInternals.activeOutlinesMap.set(outlineKey, {
+        outline,
+        alpha,
+        frame,
+        totalFrames,
+        resolve: () => {
+          resolve();
+          options.onPaintFinish?.(outline);
+        },
+        text,
+      });
+    }
 
     if (!animationFrameId) {
       fadeOutOutline(ctx);
@@ -236,7 +259,7 @@ export const paintOutline = (
 };
 
 export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {
-  const { activeOutlines } = ReactScanInternals;
+  const { activeOutlinesMap } = ReactScanInternals;
 
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
@@ -247,34 +270,36 @@ export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {
 
   const pendingLabeledOutlines: PaintedOutline[] = [];
 
-  for (let i = ReactScanInternals.activeOutlines.length - 1; i >= 0; i--) {
-    const animation = ReactScanInternals.activeOutlines[i];
-    const { outline, frame, totalFrames } = animation;
+  const activeOutlines = Array.from(activeOutlinesMap.values());
+
+  for (let i = 0, len = activeOutlines.length; i < len; i++) {
+    const activeOutline = activeOutlines[i];
+    const { outline, frame, totalFrames } = activeOutline;
     const { rect } = outline;
     const unstable = isOutlineUnstable(outline);
 
     const alphaScalar = unstable ? 0.8 : 0.2;
 
-    animation.alpha = alphaScalar * (1 - frame / totalFrames);
+    activeOutline.alpha = alphaScalar * (1 - frame / totalFrames);
 
-    maxStrokeAlpha = Math.max(maxStrokeAlpha, animation.alpha);
-    maxFillAlpha = Math.max(maxFillAlpha, animation.alpha * 0.1);
+    maxStrokeAlpha = Math.max(maxStrokeAlpha, activeOutline.alpha);
+    maxFillAlpha = Math.max(maxFillAlpha, activeOutline.alpha * 0.1);
 
     combinedPath.rect(rect.x, rect.y, rect.width, rect.height);
 
     if (unstable) {
       pendingLabeledOutlines.push({
-        alpha: animation.alpha,
+        alpha: activeOutline.alpha,
         outline,
-        text: animation.text,
+        text: activeOutline.text,
       });
     }
 
-    animation.frame++;
+    activeOutline.frame++;
 
-    if (animation.frame > animation.totalFrames) {
-      activeOutlines.splice(i, 1);
-      animation.resolve();
+    if (activeOutline.frame > activeOutline.totalFrames) {
+      activeOutlinesMap.delete(getOutlineKey(outline));
+      activeOutline.resolve();
     }
   }
 

src/core/web/perf-observer.ts

@@ -5,20 +5,43 @@ import { colorRef } from './outline';
 export const createPerfObserver = () => {
   const observer = new PerformanceObserver(NO_OP);
 
-  observer.observe({ entryTypes: ['longtask'] });
+  observer.observe({ entryTypes: ['measure'] });
 
   return observer;
 };
 
 export const recalcOutlineColor = (entries: PerformanceEntryList) => {
   const { longTaskThreshold } = ReactScanInternals.options;
+  const minDuration = longTaskThreshold ?? 1;
+  const maxDuration = 1000;
+
+  let maxDurationFound = 0;
+
   for (let i = 0, len = entries.length; i < len; i++) {
-    const entry = entries[i];
-    // 64ms = 4 frames
-    // If longTaskThreshold is set, we show all "short" tasks, otherwise we hide them
-    if (entry.duration < (longTaskThreshold ?? 50)) continue;
-    colorRef.current = '185,49,115';
-    return;
+    const duration = entries[i].duration;
+    if (duration > maxDurationFound) {
+      maxDurationFound = duration;
+    }
+  }
+
+  if (maxDurationFound > minDuration) {
+    const t = Math.min(
+      Math.max(
+        (maxDurationFound - minDuration) / (maxDuration - minDuration),
+        0,
+      ),
+      1,
+    );
+
+    const startColor = { r: 115, g: 97, b: 230 }; // Base color
+    const endColor = { r: 185, g: 49, b: 115 }; // Color for longest tasks
+
+    const r = Math.round(startColor.r + t * (endColor.r - startColor.r));
+    const g = Math.round(startColor.g + t * (endColor.g - startColor.g));
+    const b = Math.round(startColor.b + t * (endColor.b - startColor.b));
+
+    colorRef.current = `${r},${g},${b}`;
+  } else {
+    colorRef.current = '115,97,230'; // Default color when there are no significant entries
   }
-  colorRef.current = '115,97,230';
 };