refactor(core): Optimize color calculation and outline rendering

Author: aidenybai

README.md

@@ -426,6 +426,9 @@ We expect all contributors to abide by the terms of our [Code of Conduct](https:
 - [ ] Simple FPS counter
 - [ ] Drag and select areas of the screen to scan
 - [ ] Long task progress bar filter
+- [ ] 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

src/core/index.ts

@@ -70,6 +70,13 @@ interface Options {
    */
   resetCountTimeout?: number;
 
+  /**
+   * Maximum number of renders for red indicator
+   *
+   * @default 20
+   */
+  maxRenders?: number;
+
   onCommitStart?: () => void;
   onRender?: (fiber: Fiber, render: Render) => void;
   onCommitFinish?: () => void;

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;
   };
 

src/core/web/outline.ts

@@ -20,6 +20,7 @@ export interface ActiveOutline {
   totalFrames: number;
   resolve: () => void;
   text: string | null;
+  color: { r: number; g: number; b: number };
 }
 
 export interface PaintedOutline {
@@ -114,6 +115,7 @@ export const mergeOutlines = (outlines: PendingOutline[]) => {
 
 export const recalcOutlines = throttle(() => {
   const { scheduledOutlines, activeOutlinesMap } = ReactScanInternals;
+
   for (let i = scheduledOutlines.length - 1; i >= 0; i--) {
     const outline = scheduledOutlines[i];
     const rect = getRect(outline.domNode);
@@ -126,13 +128,14 @@ export const recalcOutlines = throttle(() => {
 
   const activeOutlines = Array.from(activeOutlinesMap.values());
 
-  for (let i = 0, len = activeOutlines.length; i < len; i++) {
+  for (let i = activeOutlines.length - 1; i >= 0; i--) {
     const activeOutline = activeOutlines[i];
+    if (!activeOutline) continue;
     const { outline } = activeOutline;
     const rect = getRect(outline.domNode);
     if (!rect) {
-      activeOutlines.splice(i, 1);
       activeOutlinesMap.delete(getOutlineKey(outline));
+      activeOutline.resolve();
       continue;
     }
     outline.rect = rect;
@@ -209,13 +212,10 @@ export const paintOutline = (
 ) => {
   return new Promise<void>((resolve) => {
     const unstable = isOutlineUnstable(outline);
-
     const totalFrames = unstable ? 30 : 10;
     const frame = 0;
     const alpha = 0.8;
 
-    const text: string | null = getLabelText(outline.renders);
-
     const { options } = ReactScanInternals;
     options.onPaintStart?.(outline);
     if (options.log) {
@@ -226,6 +226,21 @@ export const paintOutline = (
     const existingActiveOutline =
       ReactScanInternals.activeOutlinesMap.get(outlineKey);
 
+    const renderCount = existingActiveOutline
+      ? existingActiveOutline.outline.renders.length + outline.renders.length
+      : outline.renders.length;
+    const maxRenders = ReactScanInternals.options.maxRenders;
+    const t = Math.min(renderCount / (maxRenders ?? 20), 1);
+
+    const startColor = { r: 115, g: 97, b: 230 };
+    const endColor = { r: 185, g: 49, b: 115 };
+
+    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));
+
+    const color = { r, g, b };
+
     if (existingActiveOutline) {
       existingActiveOutline.outline.renders.push(...outline.renders);
       existingActiveOutline.frame = frame;
@@ -234,6 +249,7 @@ export const paintOutline = (
       existingActiveOutline.text = getLabelText(
         existingActiveOutline.outline.renders,
       );
+      existingActiveOutline.color = color;
       existingActiveOutline.resolve = () => {
         resolve();
         options.onPaintFinish?.(existingActiveOutline.outline);
@@ -248,7 +264,8 @@ export const paintOutline = (
           resolve();
           options.onPaintFinish?.(outline);
         },
-        text,
+        text: getLabelText(outline.renders),
+        color,
       });
     }
 
@@ -261,65 +278,42 @@ export const paintOutline = (
 export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {
   const { activeOutlinesMap } = ReactScanInternals;
 
+  ctx.save();
+  ctx.resetTransform();
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
-  const combinedPath = new Path2D();
-
-  let maxStrokeAlpha = 0;
-  let maxFillAlpha = 0;
-
-  const pendingLabeledOutlines: PaintedOutline[] = [];
+  ctx.restore();
 
   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 { outline, frame, totalFrames, color } = activeOutline;
     const { rect } = outline;
     const unstable = isOutlineUnstable(outline);
 
     const alphaScalar = unstable ? 0.8 : 0.2;
 
     activeOutline.alpha = alphaScalar * (1 - frame / totalFrames);
 
-    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: activeOutline.alpha,
-        outline,
-        text: activeOutline.text,
-      });
-    }
-
-    activeOutline.frame++;
-
-    if (activeOutline.frame > activeOutline.totalFrames) {
-      activeOutlinesMap.delete(getOutlineKey(outline));
-      activeOutline.resolve();
-    }
-  }
-
-  ctx.save();
-
-  ctx.strokeStyle = `rgba(${colorRef.current}, ${maxStrokeAlpha})`;
-  ctx.lineWidth = 1;
-  ctx.fillStyle = `rgba(${colorRef.current}, ${maxFillAlpha})`;
+    const strokeAlpha = activeOutline.alpha;
+    const fillAlpha = activeOutline.alpha * 0.1;
 
-  ctx.stroke(combinedPath);
-  ctx.fill(combinedPath);
-
-  ctx.restore();
-
-  for (let i = 0, len = pendingLabeledOutlines.length; i < len; i++) {
-    const { alpha, outline, text } = pendingLabeledOutlines[i];
-    const { rect } = outline;
     ctx.save();
+    ctx.strokeStyle = `rgba(${color.r},${color.g},${color.b},${strokeAlpha})`;
+    ctx.lineWidth = 1;
+    ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${fillAlpha})`;
+
+    ctx.beginPath();
+    ctx.rect(rect.x, rect.y, rect.width, rect.height);
+    ctx.stroke();
+    ctx.fill();
+    ctx.closePath();
+    ctx.restore();
+
+    if (unstable && activeOutline.text) {
+      const { text } = activeOutline;
+      ctx.save();
 
-    if (text) {
       ctx.font = `10px ${MONO_FONT}`;
       const textMetrics = ctx.measureText(text);
       const textWidth = textMetrics.width;
@@ -328,19 +322,26 @@ export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {
       const labelX: number = rect.x;
       const labelY: number = rect.y - textHeight - 4;
 
-      ctx.fillStyle = `rgba(${colorRef.current},${alpha})`;
+      ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${strokeAlpha})`;
       ctx.fillRect(labelX, labelY, textWidth + 4, textHeight + 4);
 
-      ctx.fillStyle = `rgba(255,255,255,${alpha})`;
+      ctx.fillStyle = `rgba(255,255,255,${strokeAlpha})`;
       ctx.fillText(text, labelX + 2, labelY + textHeight);
+
+      ctx.restore();
     }
 
-    ctx.restore();
+    activeOutline.frame++;
+
+    if (activeOutline.frame > activeOutline.totalFrames) {
+      activeOutlinesMap.delete(getOutlineKey(outline));
+      activeOutline.resolve();
+    }
   }
 
-  if (activeOutlines.length) {
-    animationFrameId = requestAnimationFrame(() => fadeOutOutline(ctx));
-  } else {
+  if (activeOutlinesMap.size === 0) {
     animationFrameId = null;
+  } else {
+    animationFrameId = requestAnimationFrame(() => fadeOutOutline(ctx));
   }
 };

src/core/web/perf-observer.ts

@@ -5,15 +5,14 @@ import { colorRef } from './outline';
 export const createPerfObserver = () => {
   const observer = new PerformanceObserver(NO_OP);
 
-  observer.observe({ entryTypes: ['measure'] });
+  observer.observe({ entryTypes: ['longtask'] });
 
   return observer;
 };
 
 export const recalcOutlineColor = (entries: PerformanceEntryList) => {
   const { longTaskThreshold } = ReactScanInternals.options;
-  const minDuration = longTaskThreshold ?? 1;
-  const maxDuration = 1000;
+  const minDuration = longTaskThreshold ?? 50;
 
   let maxDurationFound = 0;
 
@@ -24,24 +23,6 @@ export const recalcOutlineColor = (entries: PerformanceEntryList) => {
     }
   }
 
-  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 =
+    maxDurationFound > minDuration ? '185,49,115' : '115,97,230';
 };

src/core/web/toolbar.ts

@@ -19,7 +19,7 @@ export const createToolbar = () => {
     status.textContent = isHidden ? 'start ►' : 'stop ⏹';
     ReactScanInternals.isPaused = isHidden;
     if (ReactScanInternals.isPaused) {
-      ReactScanInternals.activeOutlines = [];
+      ReactScanInternals.activeOutlinesMap.clear();
       ReactScanInternals.scheduledOutlines = [];
     }
     if ('localStorage' in globalThis) {