Merge pull request #17 from aidenybai/feat/select

Select Components

Author: aidenybai

src/core/index.ts

@@ -9,7 +9,7 @@ import {
 } from './web/outline';
 import { createOverlay } from './web/index';
 import { logIntro } from './web/log';
-import { createToolbar } from './web/toolbar';
+import { createToolbar, renderCheckbox } from './web/toolbar';
 import { playGeigerClickSound } from './web/geiger';
 import { createPerfObserver } from './web/perf-observer';
 
@@ -97,6 +97,7 @@ interface Internals {
   isInIframe: boolean;
   isPaused: boolean;
   componentAllowList: WeakMap<React.ComponentType<any>, Options> | null;
+  componentNameAllowList: Set<string>;
   options: Options;
   scheduledOutlines: PendingOutline[];
   activeOutlines: ActiveOutline[];
@@ -123,6 +124,7 @@ export const ReactScanInternals: Internals = {
   isInIframe: window.self !== window.top,
   isPaused: false,
   componentAllowList: null,
+  componentNameAllowList: new Set<string>(),
   options: {
     enabled: true,
     includeChildren: true,
@@ -180,7 +182,15 @@ export const start = () => {
       options.onRender?.(fiber, render);
       const outline = getOutline(fiber, render);
       if (!outline) return;
-      ReactScanInternals.scheduledOutlines.push(outline);
+      const { componentNameAllowList } = ReactScanInternals;
+      if (
+        !render.name ||
+        !componentNameAllowList.size ||
+        componentNameAllowList.has(render.name)
+      ) {
+        ReactScanInternals.scheduledOutlines.push(outline);
+      } 
+  
 
       if (options.playSound && audioContext) {
         const renderTimeThreshold = 10;
@@ -199,6 +209,7 @@ export const start = () => {
           time: (prev?.time ?? 0) + render.time,
           renders: prev.renders,
         };
+        renderCheckbox();
       }
 
       requestAnimationFrame(() => {

src/core/web/toolbar.ts

@@ -1,4 +1,4 @@
-import { ReactScanInternals } from '../../index';
+import { getReport, ReactScanInternals } from '../../index';
 import { createElement } from './utils';
 import { MONO_FONT } from './outline';
 
@@ -7,16 +7,32 @@ export const createToolbar = () => {
     `<div id="react-scan-toolbar" title="Number of unnecessary renders and time elapsed" style="position:fixed;bottom:3px;right:3px;background:rgba(0,0,0,0.5);padding:4px 8px;border-radius:4px;color:white;z-index:2147483647;font-family:${MONO_FONT}" aria-hidden="true">react-scan</div>`,
   ) as HTMLDivElement;
 
+  // Create a scrollable and resizable div containing checkboxes
+  const checkboxContainer = createElement(
+    `<div id="react-scan-checkbox-list" style="position:fixed;bottom:3px;left:3px;min-width:200px;max-width:400px;height:200px;background:rgba(0,0,0,0.5);padding:8px;border:1px solid rgba(255,255,255,0.4);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:2147483647;font-family:${MONO_FONT};overflow-y:auto;resize:horizontal;display:none;">
+      <div style="font-weight:400;margin-bottom:8px;color:white;border-bottom:1px solid rgba(255,255,255,0.4);padding-bottom:4px; font-size:14px;">Component Filters</div>
+    </div>`,
+  ) as HTMLDivElement;
+
+  document.documentElement.appendChild(checkboxContainer);
+
   let isHidden =
-    // discord doesn't support localStorage
+    // Discord doesn't support localStorage
     'localStorage' in globalThis &&
     localStorage.getItem('react-scan-hidden') === 'true';
 
+  let isCheckboxContainerHidden = true;
+
+  const toggleButton = createElement(
+    `<button style="margin-left:8px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);color:white;cursor:pointer;padding:3px 6px;border-radius:4px;font-size:16px;transition:all 0.2s;" title="Toggle component list">☰</button>`
+  ) as HTMLButtonElement;
+
   const updateVisibility = () => {
     const overlay = document.getElementById('react-scan-overlay');
     if (!overlay) return;
     overlay.style.display = isHidden ? 'none' : 'block';
-    status.textContent = isHidden ? 'start ►' : 'stop ⏹';
+    status.textContent = isHidden ? 'start' : 'stop';
+    status.appendChild(toggleButton);
     ReactScanInternals.isPaused = isHidden;
     if (ReactScanInternals.isPaused) {
       ReactScanInternals.activeOutlines = [];
@@ -29,18 +45,30 @@ export const createToolbar = () => {
 
   updateVisibility();
 
-  status.addEventListener('click', () => {
+  status.addEventListener('click', (e) => {
+    if (e.target === toggleButton) return;
     isHidden = !isHidden;
     updateVisibility();
   });
 
+  toggleButton.addEventListener('click', () => {
+    isCheckboxContainerHidden = !isCheckboxContainerHidden;
+    checkboxContainer.style.display = isCheckboxContainerHidden ? 'none' : 'block';
+    renderCheckbox();
+  });
+
   status.addEventListener('mouseenter', () => {
-    status.textContent = isHidden ? 'start ►' : 'stop ⏹';
+    if (status.textContent !== '☰') {
+      status.textContent = isHidden ? 'start' : 'stop';
+      status.appendChild(toggleButton);
+    }
     status.style.backgroundColor = 'rgba(0,0,0,1)';
+    toggleButton.style.backgroundColor = 'rgba(255,255,255,0.3)';
   });
 
   status.addEventListener('mouseleave', () => {
     status.style.backgroundColor = 'rgba(0,0,0,0.5)';
+    toggleButton.style.backgroundColor = 'rgba(255,255,255,0.2)';
   });
 
   const prevElement = document.getElementById('react-scan-toolbar');
@@ -51,3 +79,41 @@ export const createToolbar = () => {
 
   return status;
 };
+
+export const renderCheckbox = () => {
+  const checkboxContainer = document.getElementById('react-scan-checkbox-list');
+  if (!checkboxContainer) return;
+
+  checkboxContainer.innerHTML = `
+    <div style="font-weight:600;margin-bottom:8px;color:white;border-bottom:1px solid rgba(255,255,255,0.4);padding-bottom:4px;">Component Filters</div>
+  `;
+
+  for (const [name, { count, time }] of Object.entries(getReport())) {
+    const label = createElement(
+      `<label style="display:flex;align-items:center;padding:4px 0;border-radius:4px;cursor:pointer;transition:background 0.2s;margin:2px 0;color:white;font-size:13px;">
+        <input type="checkbox" value="${name}" style="margin-right:8px;">
+        <div style="flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${name}</div>
+        <div style="margin-left:8px;color:rgba(255,255,255,0.7);white-space:nowrap;">✖︎${count} · ${time.toFixed(1)}ms</div>
+      </label>`,
+    ) as HTMLLabelElement;
+
+    const checkbox = label.querySelector('input')!;
+    checkbox.checked = ReactScanInternals.componentNameAllowList.has(name);
+
+    label.addEventListener('mouseenter', () => {
+      label.style.background = 'rgba(255,255,255,0.1)';
+    });
+
+    label.addEventListener('mouseleave', () => {
+      label.style.background = 'transparent';
+    });
+
+    checkbox.addEventListener('change', () => {
+      if (checkbox.checked)
+        ReactScanInternals.componentNameAllowList.add(name);
+      else ReactScanInternals.componentNameAllowList.delete(name);
+    });
+
+    checkboxContainer.appendChild(label);
+  }
+};