@samitouri / QOS-React-2 / commits / d4cac3f96c

feature[REMOVED][devtools]: turn off / hide location based component filters (#28417)

Following https://github.com/facebook/react/pull/28265, this should disable location-based component filters. ``` // Following __debugSource removal from Fiber, the new approach for finding the source location // of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames // To find the original location, React DevTools will perform symbolication, source maps are required for that. // In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily. // Eager symbolication can become quite expensive for large applications. ``` I am planning to publish a patch version of RDT soon, so I think its better to remove this feature, instead of shipping it in a broken state. The reason for filtering out these filters is a potential cases, where we load filters from the backend (like in RN, where we storing some settings on device), or these filters can be stored in user land (`window.__REACT_DEVTOOLS_COMPONENT_FILTERS__`). Explicitly tested the case when: 1. Load current RDT extension, add location-based component filter 2. Reload the page and observe that previously created component filter is preserved 3. Re-load RDT extension with these changes, observe there is no previously created component filter and user can't create a new location-based filter 4. Reload RDT extension without these changes, no location-based filters saved, user can create location-based filters

Ruslan Lesiutin committed Feb 22, 2024 at 16:59 UTC d4cac3f96c01b4222f917a2e5a8ce85754f706f8

3 files changed +30 -4

packages/react-devtools-shared/src/backend/renderer.js

+6 -1

@@ -36,6 +36,7 @@ import {

36 renamePathInObject,

37 setInObject,

38 utfEncodeString,

39 + filterOutLocationComponentFilters,

40 } from 'react-devtools-shared/src/utils';

41 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';

42 import {

@@ -918,7 +919,11 @@ export function attach(

919 // because they are stored in localStorage within the context of the extension.

920 // Instead it relies on the extension to pass filters through.

921 if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {

921 - applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);

922 + const componentFiltersWithoutLocationBasedOnes =

923 + filterOutLocationComponentFilters(

924 + window.__REACT_DEVTOOLS_COMPONENT_FILTERS__,

925 + );

926 + applyComponentFilters(componentFiltersWithoutLocationBasedOnes);

927 } else {

928 // Unfortunately this feature is not expected to work for React Native for now.

929 // It would be annoying for us to spam YellowBox warnings with unactionable stuff,

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

+3 -1

@@ -374,7 +374,9 @@ export default function ComponentsSettings(_: {}): React.Node {

374 ): any): ComponentFilterType),

375 )

376 }>

377 - <option value={ComponentFilterLocation}>location</option>

377 + {/* TODO: currently disabled, need find a new way of doing this

378 + <option value={ComponentFilterLocation}>location</option>

379 + */}

380 <option value={ComponentFilterDisplayName}>name</option>

381 <option value={ComponentFilterElementType}>type</option>

382 <option value={ComponentFilterHOC}>hoc</option>

packages/react-devtools-shared/src/utils.js

+21 -2

@@ -43,6 +43,7 @@ import {

43 } from './constants';

44 import {

45 ComponentFilterElementType,

46 + ComponentFilterLocation,

47 ElementTypeHostComponent,

48 } from './frontend/types';

49 import {

@@ -339,7 +340,8 @@ export function getSavedComponentFilters(): Array<ComponentFilter> {

340 LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,

341 );

342 if (raw != null) {

342 - return JSON.parse(raw);

343 + const parsedFilters: Array<ComponentFilter> = JSON.parse(raw);

344 + return filterOutLocationComponentFilters(parsedFilters);

345 }

346 } catch (error) {}

347 return getDefaultComponentFilters();

@@ -350,10 +352,27 @@ export function setSavedComponentFilters(

352 ): void {

353 localStorageSetItem(

354 LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,

353 - JSON.stringify(componentFilters),

355 + JSON.stringify(filterOutLocationComponentFilters(componentFilters)),

356 );

357 }

358

359 +// Following __debugSource removal from Fiber, the new approach for finding the source location

360 +// of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames

361 +// To find the original location, React DevTools will perform symbolication, source maps are required for that.

362 +// In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily.

363 +// Eager symbolication can become quite expensive for large applications.

364 +export function filterOutLocationComponentFilters(

365 + componentFilters: Array<ComponentFilter>,

366 +): Array<ComponentFilter> {

367 + // This is just an additional check to preserve the previous state

368 + // Filters can be stored on the backend side or in user land (in a window object)

369 + if (!Array.isArray(componentFilters)) {

370 + return componentFilters;

371 + }

372 +

373 + return componentFilters.filter(f => f.type !== ComponentFilterLocation);

374 +}

375 +

376 function parseBool(s: ?string): ?boolean {

377 if (s === 'true') {

378 return true;