Skip to content

Commit d13e766

Browse files
committed
fr
1 parent 3c98e7b commit d13e766

File tree

2 files changed

+45
-3
lines changed

2 files changed

+45
-3
lines changed

src/core/index.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from './web/outline';
1010
import { createOverlay } from './web/index';
1111
import { logIntro } from './web/log';
12-
import { createToolbar } from './web/toolbar';
12+
import { createToolbar, renderCheckbox } from './web/toolbar';
1313
import { playGeigerClickSound } from './web/geiger';
1414
import { createPerfObserver } from './web/perf-observer';
1515

@@ -83,6 +83,7 @@ interface Internals {
8383
isInIframe: boolean;
8484
isPaused: boolean;
8585
componentAllowList: WeakMap<React.ComponentType<any>, Options> | null;
86+
componentNameAllowList: Set<string>;
8687
options: Options;
8788
scheduledOutlines: PendingOutline[];
8889
activeOutlines: ActiveOutline[];
@@ -116,6 +117,7 @@ export const ReactScanInternals: Internals = {
116117
isInIframe: window.self !== window.top,
117118
isPaused: false,
118119
componentAllowList: null,
120+
componentNameAllowList: new Set<string>(),
119121
options: {
120122
enabled: true,
121123
includeChildren: true,
@@ -181,6 +183,13 @@ export const start = () => {
181183
options.onRender?.(fiber, render);
182184
const outline = getOutline(fiber, render);
183185
if (outline) {
186+
if (
187+
render.name &&
188+
ReactScanInternals.componentNameAllowList.size > 0 &&
189+
!ReactScanInternals.componentNameAllowList.has(render.name)
190+
) {
191+
// don't render if the render has a name, the allowlist is set, and the name is not in the allowlist
192+
}
184193
ReactScanInternals.scheduledOutlines.push(outline);
185194
}
186195

@@ -199,6 +208,7 @@ export const start = () => {
199208
count: (prev?.count ?? 0) + render.count,
200209
time: (prev?.time ?? 0) + render.time,
201210
};
211+
renderCheckbox();
202212
}
203213

204214
requestAnimationFrame(() => {

src/core/web/toolbar.ts

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactScanInternals } from '../../index';
1+
import { getReport, ReactScanInternals } from '../../index';
22
import { createElement } from './utils';
33
import { MONO_FONT } from './outline';
44

@@ -7,8 +7,16 @@ export const createToolbar = () => {
77
`<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>`,
88
) as HTMLDivElement;
99

10+
// Create a scrollable and resizable div containing checkboxes
11+
const checkboxContainer = createElement(
12+
`<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;">
13+
</div>`,
14+
) as HTMLDivElement;
15+
16+
document.documentElement.appendChild(checkboxContainer);
17+
1018
let isHidden =
11-
// discord doesn't support localStorage
19+
// Discord doesn't support localStorage
1220
'localStorage' in globalThis &&
1321
localStorage.getItem('react-scan-hidden') === 'true';
1422

@@ -51,3 +59,27 @@ export const createToolbar = () => {
5159

5260
return status;
5361
};
62+
63+
export const renderCheckbox = () => {
64+
const checkboxContainer = document.getElementById('react-scan-checkbox-list');
65+
if (!checkboxContainer) return;
66+
67+
checkboxContainer.innerHTML = '';
68+
69+
for (const [name, { count, time }] of Object.entries(getReport())) {
70+
const label = createElement(
71+
`<label style="display:block;"><input type="checkbox" value="${name}"> ${name} (✖︎${count}, ${time.toFixed(2)}ms)</label>`,
72+
) as HTMLLabelElement;
73+
74+
const checkbox = label.querySelector('input')!;
75+
checkbox.checked = ReactScanInternals.componentNameAllowList.has(name);
76+
77+
checkbox.addEventListener('change', () => {
78+
if (checkbox.checked)
79+
ReactScanInternals.componentNameAllowList.add(name);
80+
else ReactScanInternals.componentNameAllowList.delete(name);
81+
});
82+
83+
checkboxContainer.appendChild(label);
84+
}
85+
};

0 commit comments

Comments
 (0)