feat: components tree (#240)

* feat: components tree
 - add re-renders to components tree
 - improve widget resizing
 - improve header UI
 - improve biome checks

Author: pivanov

package.json

@@ -8,7 +8,8 @@
     "dev": "node scripts/workspace.mjs dev",
     "pack": "node scripts/workspace.mjs pack",
     "pack:bump": "pnpm --filter scan pack:bump",
-    "lint": "biome lint .",
+    "lint": "pnpm -r lint",
+    "lint:all": "biome lint .",
     "format": "biome format . --write",
     "check": "biome check . --write"
   },

packages/extension/package.json

@@ -15,7 +15,11 @@
     "pack:chrome": "pnpm clean && pnpm build && pnpm mkdir && cd dist && zip -r \"../build/chrome-extension-v$npm_package_version.zip\" .",
     "pack:firefox": "pnpm clean && BROWSER=firefox pnpm build && pnpm mkdir && cd dist && zip -r \"../build/firefox-extension-v$npm_package_version.zip\" .",
     "pack:brave": "pnpm clean && BROWSER=brave pnpm build && pnpm mkdir && cd dist && zip -r \"../build/brave-extension-v$npm_package_version.zip\" .",
-    "pack:all": "rm -rf build && pnpm pack:chrome && pnpm pack:firefox && pnpm pack:brave"
+    "pack:all": "rm -rf build && pnpm pack:chrome && pnpm pack:firefox && pnpm pack:brave",
+    "lint": "biome lint src && pnpm typecheck",
+    "format": "biome format . --write",
+    "check": "biome check . --write",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@pivanov/utils": "^0.0.1",

packages/scan/package.json

@@ -238,7 +238,11 @@
     "pack:bump": "bun scripts/bump-version.js && nr pack && echo $(pwd)/react-scan-$(node -p \"require('./package.json').version\").tgz | pbcopy",
     "prettier": "prettier --config .prettierrc.mjs -w src",
     "publint": "publint",
-    "test": "vitest"
+    "test": "vitest",
+    "lint": "biome lint src && pnpm typecheck",
+    "format": "biome format . --write",
+    "check": "biome check . --write",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@babel/core": "^7.26.0",

packages/scan/src/core/instrumentation.ts

@@ -419,6 +419,48 @@ export const isRenderUnnecessary = (fiber: Fiber) => {
 
 const TRACK_UNNECESSARY_RENDERS = false;
 
+export interface RenderData {
+  selfTime: number;
+  totalTime: number;
+  renderCount: number;
+  lastRenderTimestamp: number;
+}
+
+const RENDER_DEBOUNCE_MS = 16;
+
+export const renderDataMap = new WeakMap<object, RenderData>();
+
+const trackRender = (
+  type: unknown,
+  fiberSelfTime: number,
+  fiberTotalTime: number,
+  hasChanges: boolean,
+  hasDomMutations: boolean,
+) => {
+  const currentTimestamp = Date.now();
+  const existingData = renderDataMap.get(type as object);
+
+  if (
+    (hasChanges || hasDomMutations) &&
+    (!existingData ||
+      currentTimestamp - (existingData.lastRenderTimestamp || 0) >
+        RENDER_DEBOUNCE_MS)
+  ) {
+    const renderData: RenderData = existingData || {
+      selfTime: 0,
+      totalTime: 0,
+      renderCount: 0,
+      lastRenderTimestamp: currentTimestamp,
+    };
+
+    renderData.renderCount = (renderData.renderCount || 0) + 1;
+    renderData.selfTime = fiberSelfTime || 0;
+    renderData.totalTime = fiberTotalTime || 0;
+    renderData.lastRenderTimestamp = currentTimestamp;
+
+    renderDataMap.set(type as object, { ...renderData });
+  }
+};
 
 export const createInstrumentation = (
   instanceKey: string,
@@ -522,25 +564,41 @@ export const createInstrumentation = (
               );
             }
 
-            const { selfTime } = getTimings(fiber);
+            // Get timing information for this render
+            const { selfTime: fiberSelfTime, totalTime: fiberTotalTime } =
+              getTimings(fiber);
 
             const fps = getFPS();
             const render: Render = {
               phase: RENDER_PHASE_STRING_TO_ENUM[phase],
               componentName: getDisplayName(type),
               count: 1,
               changes,
-              time: selfTime,
+              time: fiberSelfTime,
               forget: hasMemoCache(fiber),
               // todo: allow this to be toggle-able through toolbar
               // todo: performance optimization: if the last fiber measure was very off screen, do not run isRenderUnnecessary
               unnecessary: TRACK_UNNECESSARY_RENDERS
                 ? isRenderUnnecessary(fiber)
                 : null,
-
               didCommit: didFiberCommit(fiber),
               fps,
             };
+
+            // First, determine if this is a real render we should track
+            const hasChanges = changes.length > 0;
+            const hasDomMutations = getMutatedHostFibers(fiber).length > 0;
+
+            if (phase === 'update') {
+              trackRender(
+                type,
+                fiberSelfTime,
+                fiberTotalTime,
+                hasChanges,
+                hasDomMutations,
+              );
+            }
+
             for (let i = 0, len = validInstancesIndicies.length; i < len; i++) {
               const index = validInstancesIndicies[i];
               const instance = allInstances[index];

packages/scan/src/web/assets/css/styles.tailwind.css

@@ -224,7 +224,7 @@ svg {
   @apply flex items-center gap-x-2;
   @apply pl-3 pr-2;
   @apply min-h-9;
-  @apply border-b-1 border-white/10;
+  @apply border-b-1 border-[#222];
   @apply whitespace-nowrap overflow-hidden;
 }
 
@@ -554,12 +554,11 @@ svg {
   @apply min-w-5 max-w-5;
   @apply w-full h-full;
   @apply transition-colors;
-  @apply cursor-col-resize;
 
   &:hover,
   &:active {
     > span {
-      @apply bg-white/10;
+      @apply bg-[#222];
     }
 
     svg {
@@ -571,7 +570,7 @@ svg {
     @apply content-[""];
     @apply absolute inset-0 left-1/2 -translate-x-1/2;
     @apply w-[1px];
-    @apply bg-white/10;
+    @apply bg-[#222];
     @apply transition-colors;
   }
 

packages/scan/src/web/views/index.tsx

@@ -64,7 +64,7 @@ export const Content = () => {
             'bg-[#0A0A0A]',
             'transition-opacity delay-150',
             'overflow-hidden',
-            'border-b border-white/10',
+            'border-b border-[#222]',
           )}
         >