resolving comments + wrappers

packages/scan/package.json

@@ -2,7 +2,13 @@
   "name": "react-scan",
   "version": "0.1.1",
   "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"
@@ -166,17 +172,27 @@
   "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"
       ],
@@ -192,12 +208,23 @@
       "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/loader": ["./dist/react-component-name/loader.d.ts"]
+      "react-component-name/astro": [
+        "./dist/react-component-name/astro.d.ts"
+      ],
+      "react-component-name/loader": [
+        "./dist/react-component-name/loader.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",
@@ -219,6 +246,7 @@
     "@babel/types": "^7.26.0",
     "@clack/core": "^0.3.5",
     "@clack/prompts": "^0.8.2",
+    "@pivanov/utils": "^0.0.1",
     "@preact/signals": "^1.3.1",
     "@rollup/pluginutils": "^5.1.3",
     "@types/node": "^20.17.9",

packages/scan/src/core/instrumentation.ts

@@ -419,6 +419,7 @@ export const isRenderUnnecessary = (fiber: Fiber) => {
 
 const TRACK_UNNECESSARY_RENDERS = false;
 
+
 export const createInstrumentation = (
   instanceKey: string,
   config: InstrumentationConfig,
@@ -435,6 +436,7 @@ export const createInstrumentation = (
   });
   if (!inited) {
     inited = true;
+
     instrument({
       name: 'react-scan',
       onActive: config.onActive,
@@ -471,13 +473,14 @@ export const createInstrumentation = (
             const changes: Array<Change> = [];
 
             if (allInstances.some((instance) => instance.config.trackChanges)) {
-              const { changes: changesProps } = collectPropsChanges(fiber);
-              const { changes: changesState } = collectStateChanges(fiber);
-              const { changes: changesContext } = collectContextChanges(fiber);
+              const changesProps = collectPropsChanges(fiber).changes;
+              const changesState = collectStateChanges(fiber).changes;
+              const changesContext = collectContextChanges(fiber).changes;
 
               // Convert props changes
-              changes.push(
-                ...changesProps.map(
+              changes.push.apply(
+                null,
+                changesProps.map(
                   (change) =>
                     ({
                       type: ChangeReason.Props,
@@ -505,8 +508,9 @@ export const createInstrumentation = (
               }
 
               // Convert context changes
-              changes.push(
-                ...changesContext.map(
+              changes.push.apply(
+                null,
+                changesContext.map(
                   (change) =>
                     ({
                       type: ChangeReason.Context,

packages/scan/src/new-outlines/index.ts

@@ -435,7 +435,7 @@ export const initReactScanInstrumentation = () => {
     onCommitStart: () => {
       ReactScanInternals.options.value.onCommitStart?.();
     },
-    onActive() {
+    onActive: () => {
       if (hasStopped()) return;
 
       const host = getCanvasEl();
@@ -448,7 +448,7 @@ export const initReactScanInstrumentation = () => {
       startReportInterval();
       logIntro();
     },
-    onError() {
+    onError: () => {
       // todo: ingest errors without accidentally collecting data about user
     },
     isValidFiber,

packages/scan/src/react-component-name/babel/index.ts

@@ -235,8 +235,6 @@ export const reactScanComponentNamePlugin = (options?: Options): PluginObj => ({
   visitor: {
     Program(path) {
       const assignedNames = getAssignedDisplayNames(path);
-      // biome-ignore lint/correctness/noUnusedVariables: @pivanov => @Alexis do we need this?
-      let count = 0;
       path.traverse({
         ClassDeclaration(path) {
           if (isReactClassComponent(path)) {
@@ -247,12 +245,7 @@ export const reactScanComponentNamePlugin = (options?: Options): PluginObj => ({
             if (assignedNames.has(name)) {
               return;
             }
-            assignDisplayName(
-              path,
-              name,
-              options?.flags?.noTryCatchDisplayNames,
-            );
-            count++;
+            assignDisplayName(path, name, options?.flags?.noTryCatchDisplayNames);
           }
         },
         FunctionDeclaration(path) {
@@ -275,12 +268,7 @@ export const reactScanComponentNamePlugin = (options?: Options): PluginObj => ({
             if (assignedNames.has(name)) {
               return;
             }
-            assignDisplayName(
-              path,
-              name,
-              options?.flags?.noTryCatchDisplayNames,
-            );
-            count++;
+            assignDisplayName(path, name, options?.flags?.noTryCatchDisplayNames);
           }
         },
         VariableDeclarator(path) {
@@ -304,7 +292,6 @@ export const reactScanComponentNamePlugin = (options?: Options): PluginObj => ({
                 name,
                 options?.flags?.noTryCatchDisplayNames,
               );
-              count++;
             }
           }
         },

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

@@ -57,6 +57,7 @@ input {
   @apply bg-none bg-transparent;
   @apply outline-none;
   @apply placeholder:text-neutral-500 placeholder:italic placeholder:text-xs;
+  @apply placeholder-shown:truncate;
 }
 
 svg {
@@ -545,29 +546,18 @@ svg {
     @apply bg-[#8e61e3];
     @apply pointer-events-none;
     @apply transition-transform duration-75;
-    /* &::before {
-      @apply content-[''];
-      @apply absolute inset-0;
-      @apply bg-green-500;
-      @apply rounded-lg;
-      @apply w-4 h-4;
-    } */
   }
 }
 
 .resize-v-line {
   @apply flex items-center justify-center;
-  @apply min-w-3 max-w-3;
+  @apply min-w-5 max-w-5;
   @apply w-full h-full;
   @apply transition-colors;
   @apply cursor-col-resize;
 
   &:hover,
   &:active {
-    &::before {
-      @apply bg-white/10;
-    }
-
     > span {
       @apply bg-white/10;
     }
@@ -581,6 +571,7 @@ svg {
     @apply content-[""];
     @apply absolute inset-0 left-1/2 -translate-x-1/2;
     @apply w-[1px];
+    @apply bg-white/10;
     @apply transition-colors;
   }
 

packages/scan/src/web/assets/svgs/svgs.ts

@@ -88,5 +88,15 @@ export const ICONS = `
     <circle cx="11" cy="11" r="8"/>
     <line x1="21" y1="21" x2="16.65" y2="16.65"/>
   </symbol>
+
+  <symbol id="icon-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
+    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+  </symbol>
+
+  <symbol id="icon-lock-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
+    <path d="M7 11V7a5 5 0 0 1 9.9-1"/>
+  </symbol>
 </svg>
 `;

packages/scan/src/web/components/inspector/index.tsx

@@ -8,14 +8,14 @@ import { constant } from '~web/utils/preact/constant';
 import { Icon } from '../icon';
 import { StickySection } from '../sticky-section';
 import { flashManager } from './flash-overlay';
-import { PropertySection } from './propeties';
+import { PropertySection } from './properties';
 import {
   type TimelineUpdate,
   inspectorUpdateSignal,
   timelineActions,
 } from './states';
 import { collectInspectorData, getStateNames, resetTracking } from './timeline/utils';
-import { extractMinimalFiberInfo } from './utils';
+import { extractMinimalFiberInfo, getCompositeFiberFromElement } from './utils';
 import { WhatChangedSection } from './what-changed';
 
 export const globalInspectorState = {
@@ -125,24 +125,26 @@ export const Inspector = constant(() => {
       }
     });
 
-    const unSubInspectorUpdate = inspectorUpdateSignal.subscribe(() => {
+    const unSubInspectorUpdate = inspectorUpdateSignal.subscribe((fiber) => {
       const inspectState = Store.inspectState.value;
       if (inspectState.kind !== 'focused' || !inspectState.focusedDomElement) {
         refLastInspectedFiber.current = null;
         globalInspectorState.cleanup();
         return;
       }
 
-      const fiber = inspectState.fiber;
+      const { parentCompositeFiber } = getCompositeFiberFromElement(
+        inspectState.focusedDomElement,
+      );
 
-      if (!fiber) {
+      if (!parentCompositeFiber) {
         Store.inspectState.value = {
           kind: 'inspect-off',
         };
         return;
       }
 
-      processUpdate(fiber);
+      processUpdate(parentCompositeFiber);
 
       if (!inspectState.focusedDomElement.isConnected) {
         refLastInspectedFiber.current = null;

packages/scan/src/web/components/inspector/timeline/index.tsx

@@ -22,8 +22,12 @@ export const Timeline = memo(({
   const refPlayInterval = useRef<number | null>(null);
   const refChangeInterval = useRef<number | null>(null);
 
-  const { currentIndex, isVisible, totalUpdates, updates } =
-    timelineState.value;
+  const {
+    currentIndex,
+    isVisible,
+    totalUpdates,
+    updates,
+  } = timelineState.value;
 
   const sliderValues = useMemo(() => {
     return calculateSliderValues(totalUpdates, currentIndex);
@@ -74,6 +78,10 @@ export const Timeline = memo(({
     return null;
   }
 
+  if (totalUpdates <= 1) {
+    return null;
+  }
+
   return (
     <button
       ref={refSticky}
@@ -110,11 +118,7 @@ export const Timeline = memo(({
               </div>
             </>
           )
-          : (
-            <>
-              View Re-renders History
-            </>
-          )
+          : 'View Re-renders History'
       }
     </button>
   );

packages/scan/src/web/components/inspector/timeline/utils.ts

@@ -386,8 +386,7 @@ export const getAllFiberContexts = (
     const dependencies = currentFiber.dependencies;
 
     if (dependencies?.firstContext) {
-      let contextItem: ContextDependency<unknown> | null =
-        dependencies.firstContext;
+      let contextItem: ContextDependency<unknown> | null = dependencies.firstContext;
 
       while (contextItem) {
         const memoizedValue = contextItem.memoizedValue;
@@ -399,7 +398,6 @@ export const getAllFiberContexts = (
             displayName: displayName ?? 'UnnamedContext',
             contextType: null,
           });
-        } else {
         }
 
         if (contextItem === contextItem.next) {
@@ -408,7 +406,6 @@ export const getAllFiberContexts = (
 
         contextItem = contextItem.next;
       }
-    } else {
     }
 
     currentFiber = currentFiber.return;

packages/scan/src/web/components/inspector/utils.ts

@@ -442,6 +442,8 @@ export interface InspectableElement {
   element: HTMLElement;
   depth: number;
   name: string;
+  tag: number;
+  type: unknown;
 }
 
 export const getInspectableElements = (
@@ -473,6 +475,8 @@ export const getInspectableElements = (
         element: inspectable,
         depth,
         name: getDisplayName(parentCompositeFiber.type) ?? 'Unknown',
+        tag: parentCompositeFiber.tag,
+        type: parentCompositeFiber.type,
       });
     }
 
@@ -520,6 +524,8 @@ export const getInspectableAncestors = (
           element: inspectable,
           depth: 0,
           name: getDisplayName(fiber.type) ?? 'Unknown',
+          tag: fiber.tag,
+          type: fiber.type,
         });
       }
     }