bump

Author: aidenybai

packages/scan/package.json

@@ -2,13 +2,7 @@
   "name": "react-scan",
   "version": "0.0.50",
   "description": "Scan your React app for renders",
-  "keywords": [
-    "react",
-    "react-scan",
-    "react scan",
-    "render",
-    "performance"
-  ],
+  "keywords": ["react", "react-scan", "react scan", "render", "performance"],
   "homepage": "https://react-scan.million.dev",
   "bugs": {
     "url": "https://github.com/aidenybai/react-scan/issues"
@@ -167,27 +161,17 @@
   "types": "dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "monitoring": [
-        "./dist/core/monitor/index.d.ts"
-      ],
-      "monitoring/next": [
-        "./dist/core/monitor/params/next.d.ts"
-      ],
+      "monitoring": ["./dist/core/monitor/index.d.ts"],
+      "monitoring/next": ["./dist/core/monitor/params/next.d.ts"],
       "monitoring/react-router-legacy": [
         "./dist/core/monitor/params/react-router-v5.d.ts"
       ],
       "monitoring/react-router": [
         "./dist/core/monitor/params/react-router-v6.d.ts"
       ],
-      "monitoring/remix": [
-        "./dist/core/monitor/params/remix.d.ts"
-      ],
-      "monitoring/astro": [
-        "./dist/core/monitor/params/astro/index.ts"
-      ],
-      "react-component-name/vite": [
-        "./dist/react-component-name/vite.d.ts"
-      ],
+      "monitoring/remix": ["./dist/core/monitor/params/remix.d.ts"],
+      "monitoring/astro": ["./dist/core/monitor/params/astro/index.ts"],
+      "react-component-name/vite": ["./dist/react-component-name/vite.d.ts"],
       "react-component-name/webpack": [
         "./dist/react-component-name/webpack.d.ts"
       ],
@@ -203,20 +187,11 @@
       "react-component-name/rollup": [
         "./dist/react-component-name/rollup.d.ts"
       ],
-      "react-component-name/astro": [
-        "./dist/react-component-name/astro.d.ts"
-      ]
+      "react-component-name/astro": ["./dist/react-component-name/astro.d.ts"]
     }
   },
   "bin": "bin/cli.js",
-  "files": [
-    "dist",
-    "bin",
-    "package.json",
-    "README.md",
-    "LICENSE",
-    "auto.d.ts"
-  ],
+  "files": ["dist", "bin", "package.json", "README.md", "LICENSE", "auto.d.ts"],
   "scripts": {
     "build": "npm run build:css && NODE_ENV=production tsup",
     "postbuild": "pnpm copy-astro && node ../../scripts/version-warning.mjs",
@@ -242,7 +217,7 @@
     "@preact/signals": "^1.3.1",
     "@rollup/pluginutils": "^5.1.3",
     "@types/node": "^20.17.9",
-    "bippy": "^0.0.23",
+    "bippy": "^0.0.25",
     "esbuild": "^0.24.0",
     "estree-walker": "^3.0.3",
     "kleur": "^4.1.5",

packages/scan/src/core/web/utils/outline.ts

@@ -1,7 +1,7 @@
-import { throttle } from "@web-utils/helpers";
-import { ReactScanInternals } from "../../index";
-import { type Render } from "../../instrumentation";
-import { getLabelText } from "../../utils";
+import { throttle } from '@web-utils/helpers';
+import { ReactScanInternals } from '../../index';
+import { type Render } from '../../instrumentation';
+import { getLabelText } from '../../utils';
 
 export interface PendingOutline {
   domNode: HTMLElement;
@@ -21,7 +21,7 @@ export interface OutlineLabel {
   alpha: number;
   outline: PendingOutline;
   color: { r: number; g: number; b: number };
-  reasons: Array<"unstable" | "commit" | "unnecessary">;
+  reasons: Array<'unstable' | 'commit' | 'unnecessary'>;
   labelText: string;
   textWidth: number;
   rect: DOMRect;
@@ -32,7 +32,7 @@ const DEFAULT_THROTTLE_TIME = 32; // 2 frames
 const START_COLOR = { r: 115, g: 97, b: 230 };
 const END_COLOR = { r: 185, g: 49, b: 115 };
 const MONO_FONT =
-  "Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace";
+  'Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace';
 
 export const getOutlineKey = (rect: DOMRect): string => {
   return `${rect.top}-${rect.left}-${rect.width}-${rect.height}`;
@@ -45,7 +45,7 @@ function incrementFrameId() {
   requestAnimationFrame(incrementFrameId);
 }
 
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
   incrementFrameId();
 }
 
@@ -81,7 +81,7 @@ const boundingRectCache = new Map<
 const CACHE_LIFETIME = 200;
 
 export const batchGetBoundingRects = (
-  elements: Array<HTMLElement>
+  elements: Array<HTMLElement>,
 ): Promise<Map<HTMLElement, DOMRect>> => {
   idempotent_startBoundingRectGC();
   return new Promise((resolve) => {
@@ -143,7 +143,7 @@ const idempotent_startBoundingRectGC = () => {
 
 export const flushOutlines = async (
   ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  previousOutlines: Map<string, PendingOutline> = new Map()
+  previousOutlines: Map<string, PendingOutline> = new Map(),
 ) => {
   if (!ReactScanInternals.scheduledOutlines.length) {
     return;
@@ -152,15 +152,15 @@ export const flushOutlines = async (
   const scheduledOutlines = ReactScanInternals.scheduledOutlines;
   const newPreviousOutlines = await activateOutlines(
     scheduledOutlines,
-    previousOutlines
+    previousOutlines,
   );
   ReactScanInternals.scheduledOutlines = [];
 
   recalcOutlines();
 
   void paintOutlines(
     ctx,
-    scheduledOutlines // this only matters for API back compat we aren't using it in this func
+    scheduledOutlines, // this only matters for API back compat we aren't using it in this func
   );
 
   if (ReactScanInternals.scheduledOutlines.length) {
@@ -178,13 +178,13 @@ function getCachedLabelText(outline: PendingOutline): string {
   if (labelTextCache.has(outline)) {
     return labelTextCache.get(outline)!;
   }
-  const text = getLabelText(outline.renders) ?? "";
+  const text = getLabelText(outline.renders) ?? '';
   labelTextCache.set(outline, text);
   return text;
 }
 
 export const fadeOutOutline = (
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
 ) => {
   const { activeOutlines } = ReactScanInternals;
   const options = ReactScanInternals.options.value;
@@ -219,7 +219,7 @@ export const fadeOutOutline = (
         existing.frame = Math.min(existing.frame, activeOutline.frame);
         existing.totalFrames = Math.max(
           existing.totalFrames,
-          activeOutline.totalFrames
+          activeOutline.totalFrames,
         );
       }
 
@@ -247,7 +247,7 @@ export const fadeOutOutline = (
   const renderCountThreshold = options.renderCountThreshold ?? 0;
 
   const phases = new Set<string>();
-  const reasons: Array<"unstable" | "commit" | "unnecessary"> = [];
+  const reasons: Array<'unstable' | 'commit' | 'unnecessary'> = [];
 
   for (const activeOutline of groupedOutlines.values()) {
     const { outline, frame, totalFrames, rect } = activeOutline;
@@ -267,7 +267,7 @@ export const fadeOutOutline = (
     const avgFps = totalFps / renderLen;
     const averageScore = Math.max(
       (THRESHOLD_FPS - Math.min(avgFps, THRESHOLD_FPS)) / THRESHOLD_FPS,
-      totalTime / totalCount / 16
+      totalTime / totalCount / 16,
     );
 
     const t = Math.min(averageScore, 1);
@@ -304,10 +304,10 @@ export const fadeOutOutline = (
       }
     }
 
-    if (didCommit) reasons.push("commit");
-    if (isUnstable) reasons.push("unstable");
+    if (didCommit) reasons.push('commit');
+    if (isUnstable) reasons.push('unstable');
     if (isUnnecessary) {
-      reasons.push("unnecessary");
+      reasons.push('unnecessary');
       if (reasons.length === 1) {
         color = { r: 128, g: 128, b: 128 };
       }
@@ -344,7 +344,7 @@ export const fadeOutOutline = (
     if (
       reasons.length &&
       labelText &&
-      !(phases.has("mount") && phases.size === 1)
+      !(phases.has('mount') && phases.size === 1)
     ) {
       const measured = measureTextCached(labelText, ctx);
       pendingLabeledOutlines.push({
@@ -370,8 +370,8 @@ export const fadeOutOutline = (
     const { alpha, outline, color, reasons, rect } = mergedLabels[i];
     const text = getCachedLabelText(outline);
     const conditionalText =
-      reasons.includes("unstable") &&
-      (reasons.includes("commit") || reasons.includes("unnecessary"))
+      reasons.includes('unstable') &&
+      (reasons.includes('commit') || reasons.includes('unnecessary'))
         ? `⚠️${text}`
         : text;
 
@@ -405,7 +405,7 @@ export interface PendingOutline {
 
 const activateOutlines = async (
   outlines: Array<PendingOutline>,
-  previousOutlines: Map<string, PendingOutline>
+  previousOutlines: Map<string, PendingOutline>,
 ) => {
   const newPreviousOutlines = new Map<string, PendingOutline>();
 
@@ -462,7 +462,7 @@ const activateOutlines = async (
 
 async function paintOutlines(
   ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  outlines: Array<PendingOutline>
+  outlines: Array<PendingOutline>,
 ): Promise<void> {
   const { options } = ReactScanInternals;
   options.value.onPaintStart?.(outlines); // maybe we should start passing activeOutlines to onPaintStart, since we have the activeOutlines at painStart
@@ -491,7 +491,7 @@ export const getLabelRect = (label: OutlineLabel): DOMRect => {
 
 export const mergeOverlappingLabels = (
   labels: Array<OutlineLabel>,
-  maxMergeOps = 2000
+  maxMergeOps = 2000,
 ): Array<OutlineLabel> => {
   const sortedByX = labels.map((label) => ({
     ...label,
@@ -533,7 +533,7 @@ export const mergeOverlappingLabels = (
         nextLabel.rect = combinedOutline.rect;
         nextLabel.outline = combinedOutline;
         nextLabel.reasons = Array.from(
-          new Set(nextLabel.reasons.concat(label.reasons))
+          new Set(nextLabel.reasons.concat(label.reasons)),
         );
 
         isMerged = true;
@@ -553,7 +553,7 @@ const textMeasurementCache = new Map<string, TextMetrics>();
 
 export const measureTextCached = (
   text: string,
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
 ): TextMetrics => {
   if (textMeasurementCache.has(text)) {
     return textMeasurementCache.get(text)!;
@@ -567,18 +567,18 @@ export const measureTextCached = (
 export const getOverlapArea = (rect1: DOMRect, rect2: DOMRect): number => {
   const xOverlap = Math.max(
     0,
-    Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left)
+    Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left),
   );
   const yOverlap = Math.max(
     0,
-    Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top)
+    Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top),
   );
   return xOverlap * yOverlap;
 };
 
 export const getOutermostLabel = (
   label1: OutlineLabel,
-  label2: OutlineLabel
+  label2: OutlineLabel,
 ): OutlineLabel => {
   const area1 = label1.rect.width * label1.rect.height;
   const area2 = label2.rect.width * label2.rect.height;