fr

Author: NisargIO

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';
 
@@ -83,6 +83,7 @@ interface Internals {
   isInIframe: boolean;
   isPaused: boolean;
   componentAllowList: WeakMap<React.ComponentType<any>, Options> | null;
+  componentNameAllowList: Set<string>;
   options: Options;
   scheduledOutlines: PendingOutline[];
   activeOutlines: ActiveOutline[];
@@ -116,6 +117,7 @@ export const ReactScanInternals: Internals = {
   isInIframe: window.self !== window.top,
   isPaused: false,
   componentAllowList: null,
+  componentNameAllowList: new Set<string>(),
   options: {
     enabled: true,
     includeChildren: true,
@@ -181,6 +183,13 @@ export const start = () => {
       options.onRender?.(fiber, render);
       const outline = getOutline(fiber, render);
       if (outline) {
+        if (
+          render.name &&
+          ReactScanInternals.componentNameAllowList.size > 0 &&
+          !ReactScanInternals.componentNameAllowList.has(render.name)
+        ) {
+          // don't render if the render has a name, the allowlist is set, and the name is not in the allowlist
+        }
         ReactScanInternals.scheduledOutlines.push(outline);
       }
 
@@ -199,6 +208,7 @@ export const start = () => {
           count: (prev?.count ?? 0) + render.count,
           time: (prev?.time ?? 0) + render.time,
         };
+        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,8 +7,16 @@ 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:140px;height:150px;background:#fff;padding:2px 4px;border:1px solid #ccc;border-radius:4px;z-index:2147483647;font-family:${MONO_FONT};overflow-y:auto;resize:horizontal;">
+    </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';
 
@@ -51,3 +59,27 @@ export const createToolbar = () => {
 
   return status;
 };
+
+export const renderCheckbox = () => {
+  const checkboxContainer = document.getElementById('react-scan-checkbox-list');
+  if (!checkboxContainer) return;
+
+  checkboxContainer.innerHTML = '';
+
+  for (const [name, { count, time }] of Object.entries(getReport())) {
+    const label = createElement(
+      `<label style="display:block;"><input type="checkbox" value="${name}"> ${name} (✖︎${count}, ${time.toFixed(2)}ms)</label>`,
+    ) as HTMLLabelElement;
+
+    const checkbox = label.querySelector('input')!;
+    checkbox.checked = ReactScanInternals.componentNameAllowList.has(name);
+
+    checkbox.addEventListener('change', () => {
+      if (checkbox.checked)
+        ReactScanInternals.componentNameAllowList.add(name);
+      else ReactScanInternals.componentNameAllowList.delete(name);
+    });
+
+    checkboxContainer.appendChild(label);
+  }
+};