chore(scan): optimize perf of core scan (#138)

- use IntersectionObserver over getClientBoundingRect to minimize reflows

- optimize fast serialize

sample renders to run isRenderUnncessaryOn

dont merge outlines when there are significant active outlines

flush async instead of in hot path/ avoid promise creation every render

dont draw outlines that are out of viewport

Author: RobPruzan

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     sourceType: 'module',
   },
   rules: {
+    "@typescript-eslint/no-unused-vars":"warn",
     '@typescript-eslint/explicit-function-return-type': 'off',
     'import/no-default-export': 'off',
     'no-bitwise': 'off',
@@ -47,12 +48,14 @@ module.exports = {
     'no-implicit-coercion': 'off',
     '@typescript-eslint/no-redundant-type-constituents': 'off',
     'object-shorthand': 'off',
+    "@typescript-eslint/no-unused-vars":"warn",
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
     'no-useless-return': 'off',
     'func-names': 'off',
     '@typescript-eslint/prefer-for-of': 'off',
     '@typescript-eslint/restrict-template-expressions': 'off',
     '@typescript-eslint/array-type': ['error', { default: 'generic' }],
+    "no-console":'warn'
   },
   settings: {
     'import/resolver': {

packages/scan/package.json

@@ -249,7 +249,8 @@
     "mri": "^1.2.0",
     "playwright": "^1.49.0",
     "preact": "^10.25.1",
-    "tsx": "^4.0.0"
+    "tsx": "^4.0.0",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
     "@esbuild-plugins/tsconfig-paths": "^0.1.2",

packages/scan/src/core/fast-serialize.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { fastSerialize } from 'src/core/instrumentation';
+
+describe('fastSerialize', () => {
+  it('serializes null', () => {
+    expect(fastSerialize(null)).toBe('null');
+  });
+
+  it('serializes undefined', () => {
+    expect(fastSerialize(undefined)).toBe('undefined');
+  });
+
+  it('serializes strings', () => {
+    expect(fastSerialize('hello')).toBe('hello');
+    expect(fastSerialize('')).toBe('');
+  });
+
+  it('serializes numbers', () => {
+    expect(fastSerialize(42)).toBe('42');
+    expect(fastSerialize(0)).toBe('0');
+    expect(fastSerialize(NaN)).toBe('NaN');
+  });
+
+  it('serializes booleans', () => {
+    expect(fastSerialize(true)).toBe('true');
+    expect(fastSerialize(false)).toBe('false');
+  });
+
+  it('serializes functions', () => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    function testFunc() {}
+    expect(fastSerialize(testFunc)).toBe('function');
+  });
+
+  it('serializes arrays', () => {
+    expect(fastSerialize([])).toBe('[]');
+    expect(fastSerialize([1, 2, 3])).toBe('[3]');
+  });
+
+  it('serializes plain objects', () => {
+    expect(fastSerialize({})).toBe('{}');
+    expect(fastSerialize({ a: 1, b: 2 })).toBe('{2}');
+  });
+
+  it('serializes deeply nested objects with depth limit', () => {
+    const nested = { a: { b: { c: 1 } } };
+    expect(fastSerialize(nested, 0)).toBe('{1}');
+    expect(fastSerialize(nested, -1)).toBe('…');
+  });
+
+  it('serializes objects with custom constructors', () => {
+    // eslint-disable-next-line @typescript-eslint/no-extraneous-class
+    class CustomClass {}
+    const instance = new CustomClass();
+    expect(fastSerialize(instance)).toBe('CustomClass{…}');
+  });
+
+  it('serializes unknown objects gracefully', () => {
+    const date = new Date();
+    const serialized = fastSerialize(date);
+    expect(serialized.includes('Date')).toBe(true);
+  });
+});

packages/scan/src/core/index.ts

@@ -4,6 +4,7 @@ import { type Signal, signal } from '@preact/signals';
 import {
   getDisplayName,
   getRDTHook,
+  getNearestHostFiber,
   getTimings,
   getType,
   isCompositeFiber,
@@ -14,7 +15,6 @@ import {
 import {
   type ActiveOutline,
   flushOutlines,
-  getOutline,
   type PendingOutline,
 } from '@web-utils/outline';
 import { log, logIntro } from '@web-utils/log';
@@ -314,6 +314,15 @@ export const isValidFiber = (fiber: Fiber) => {
   return true;
 };
 
+let flushInterval: ReturnType<typeof setInterval>;
+const startFlushOutlineInterval = (ctx: CanvasRenderingContext2D) => {
+  clearInterval(flushInterval);
+  setInterval(() => {
+    requestAnimationFrame(() => {
+      flushOutlines(ctx);
+    });
+  }, 30);
+};
 export const start = () => {
   if (typeof window === 'undefined') return;
 
@@ -382,6 +391,7 @@ export const start = () => {
 
         ctx = initReactScanOverlay();
         if (!ctx) return;
+        startFlushOutlineInterval(ctx);
 
         createInspectElementStateMachine(shadow);
 
@@ -445,11 +455,16 @@ export const start = () => {
 
       for (let i = 0, len = renders.length; i < len; i++) {
         const render = renders[i];
-        const outline = getOutline(fiber, render);
-        if (!outline) continue;
-        ReactScanInternals.scheduledOutlines.push(outline);
+        const domFiber = getNearestHostFiber(fiber);
+        if (!domFiber || !domFiber.stateNode) continue;
+
+        ReactScanInternals.scheduledOutlines.push({
+          domNode: domFiber.stateNode,
+          renders,
+        });
 
-        // audio context can take up an insane amount of cpu, todo: figure out why
+        // - audio context can take up an insane amount of cpu, todo: figure out why
+        // - we may want to take this out of hot path
         if (ReactScanInternals.options.value.playSound && audioContext) {
           const renderTimeThreshold = 10;
           const amplitude = Math.min(
@@ -460,7 +475,6 @@ export const start = () => {
           playGeigerClickSound(audioContext, amplitude);
         }
       }
-      flushOutlines(ctx, new Map());
     },
     onCommitFinish() {
       ReactScanInternals.options.value.onCommitFinish?.();

packages/scan/src/core/instrumentation.ts

@@ -92,68 +92,85 @@ export interface Render {
   count: number;
   forget: boolean;
   changes: Array<Change> | null;
-  unnecessary: boolean;
+  unnecessary: boolean | null;
   didCommit: boolean;
   fps: number;
 }
 
 const unstableTypes = ['function', 'object'];
 
-export const fastSerialize = (value: unknown, depth = 0) => {
+const cache = new WeakMap<object, string>();
+
+export function fastSerialize(value: unknown, depth = 0): string {
   if (depth < 0) return '…';
+
   switch (typeof value) {
     case 'function':
       return value.toString();
     case 'string':
       return value;
+    case 'number':
+    case 'boolean':
+    case 'undefined':
+      return String(value);
     case 'object':
-      if (value === null) {
-        return 'null';
-      }
-      if (Array.isArray(value)) {
-        return value.length > 0 ? `[${value.length}]` : '[]';
-      }
-      if (isValidElement(value)) {
-        // attempt to extract some name from the component
-        return `<${getDisplayName(value.type) ?? ''} ${
-          Object.keys(value.props || {}).length
-        }>`;
-      }
-      if (
-        typeof value === 'object' &&
-        value !== null &&
-        value.constructor === Object
-      ) {
-        for (const key in value) {
-          if (Object.prototype.hasOwnProperty.call(value, key)) {
-            return `{${Object.keys(value).length}}`;
-          }
-        }
-        return '{}';
-      }
-      // eslint-disable-next-line no-case-declarations
-      const tagString = Object.prototype.toString.call(value).slice(8, -1);
-      if (tagString === 'Object') {
-        const proto = Object.getPrototypeOf(value);
-        const constructor = proto?.constructor;
-        if (typeof constructor === 'function') {
-          return `${constructor.displayName || constructor.name || ''}{…}`;
-        }
-      }
-      return `${tagString}{…}`;
+      break;
     default:
       return String(value);
   }
-};
+
+  if (value === null) return 'null';
+
+  if (cache.has(value)) {
+    return cache.get(value)!;
+  }
+
+  if (Array.isArray(value)) {
+    const str = value.length ? `[${value.length}]` : '[]';
+    cache.set(value, str);
+    return str;
+  }
+
+  if (isValidElement(value)) {
+    const type = getDisplayName(value.type) ?? '';
+    const propCount = value.props ? Object.keys(value.props).length : 0;
+    const str = `<${type} ${propCount}>`;
+    cache.set(value, str);
+    return str;
+  }
+
+  if (Object.getPrototypeOf(value) === Object.prototype) {
+    const keys = Object.keys(value);
+    const str = keys.length ? `{${keys.length}}` : '{}';
+    cache.set(value, str);
+    return str;
+  }
+
+  const ctor = (value as any).constructor;
+  if (ctor && typeof ctor === 'function' && ctor.name) {
+    const str = `${ctor.name}{…}`;
+    cache.set(value, str);
+    return str;
+  }
+
+  const tagString = Object.prototype.toString.call(value).slice(8, -1);
+  const str = `${tagString}{…}`;
+  cache.set(value, str);
+  return str;
+}
 
 export const getPropsChanges = (fiber: Fiber) => {
   const changes: Array<Change> = [];
 
   const prevProps = fiber.alternate?.memoizedProps || {};
   const nextProps = fiber.memoizedProps || {};
 
-  // eslint-disable-next-line prefer-object-spread
-  for (const propName in Object.assign({}, prevProps, nextProps)) {
+
+  const allKeys = new Set([
+    ...Object.keys(prevProps),
+    ...Object.keys(nextProps),
+  ]);
+  for (const propName in allKeys) {
     const prevValue = prevProps?.[propName];
     const nextValue = nextProps?.[propName];
 
@@ -199,7 +216,6 @@ export const getStateChanges = (fiber: Fiber) => {
   return changes;
 };
 
-
 export const getContextChanges = (fiber: Fiber) => {
   const changes: Array<Change> = [];
 
@@ -343,7 +359,8 @@ export const createInstrumentation = (
           changes,
           time: selfTime,
           forget: hasMemoCache(fiber),
-          unnecessary: isRenderUnnecessary(fiber),
+          // only collect if the render was unnecessary 5% of the time since is isRenderUnnecessary is expensive
+          unnecessary: Math.random() < 0.05 ? isRenderUnnecessary(fiber) : null,
           didCommit: didFiberCommit(fiber),
           fps,
         };

packages/scan/src/core/web/inspect-element/utils.ts

@@ -10,11 +10,14 @@ import {
   isCompositeFiber,
 } from 'bippy';
 import { ReactScanInternals, Store } from '../../index';
-import { getRect } from '../utils/outline';
 
 interface OverrideMethods {
-  overrideProps: ((fiber: Fiber, path: Array<string>, value: any) => void) | null;
-  overrideHookState: ((fiber: Fiber, id: string, path: Array<any>, value: any) => void) | null;
+  overrideProps:
+    | ((fiber: Fiber, path: Array<string>, value: any) => void)
+    | null;
+  overrideHookState:
+    | ((fiber: Fiber, id: string, path: Array<any>, value: any) => void)
+    | null;
 }
 
 export const getFiberFromElement = (element: Element): Fiber | null => {
@@ -203,7 +206,7 @@ export const getCompositeComponentFromElement = (element: Element) => {
     : (associatedFiber.alternate ?? associatedFiber);
   const stateNode = getFirstStateNode(currentAssociatedFiber);
   if (!stateNode) return {};
-  const targetRect = getRect(stateNode);
+  const targetRect = stateNode.getBoundingClientRect(); // causes reflow, be careful
   if (!targetRect) return {};
   const anotherRes = getParentCompositeFiber(currentAssociatedFiber);
   if (!anotherRes) {

packages/scan/src/core/web/overlay.ts

@@ -1,4 +1,4 @@
-import { recalcOutlines } from './utils/outline';
+import { recalcOutlines } from '@web-utils/outline';
 
 export const initReactScanOverlay = () => {
   const container = document.getElementById('react-scan-root');