diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 0327ec6576d8e..71693593569bb 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -36,6 +36,7 @@ import { renamePathInObject, setInObject, utfEncodeString, + filterOutLocationComponentFilters, } from 'react-devtools-shared/src/utils'; import {sessionStorageGetItem} from 'react-devtools-shared/src/storage'; import { @@ -918,7 +919,11 @@ export function attach( // because they are stored in localStorage within the context of the extension. // Instead it relies on the extension to pass filters through. if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) { - applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__); + const componentFiltersWithoutLocationBasedOnes = + filterOutLocationComponentFilters( + window.__REACT_DEVTOOLS_COMPONENT_FILTERS__, + ); + applyComponentFilters(componentFiltersWithoutLocationBasedOnes); } else { // Unfortunately this feature is not expected to work for React Native for now. // It would be annoying for us to spam YellowBox warnings with unactionable stuff, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index e19f056c8b4c9..cc53ffb3e58eb 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -374,7 +374,9 @@ export default function ComponentsSettings(_: {}): React.Node { ): any): ComponentFilterType), ) }> - + {/* TODO: currently disabled, need find a new way of doing this + + */} diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index cd66740abba05..20e736046433f 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -43,6 +43,7 @@ import { } from './constants'; import { ComponentFilterElementType, + ComponentFilterLocation, ElementTypeHostComponent, } from './frontend/types'; import { @@ -339,7 +340,8 @@ export function getSavedComponentFilters(): Array { LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY, ); if (raw != null) { - return JSON.parse(raw); + const parsedFilters: Array = JSON.parse(raw); + return filterOutLocationComponentFilters(parsedFilters); } } catch (error) {} return getDefaultComponentFilters(); @@ -350,10 +352,27 @@ export function setSavedComponentFilters( ): void { localStorageSetItem( LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY, - JSON.stringify(componentFilters), + JSON.stringify(filterOutLocationComponentFilters(componentFilters)), ); } +// 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. +export function filterOutLocationComponentFilters( + componentFilters: Array, +): Array { + // This is just an additional check to preserve the previous state + // Filters can be stored on the backend side or in user land (in a window object) + if (!Array.isArray(componentFilters)) { + return componentFilters; + } + + return componentFilters.filter(f => f.type !== ComponentFilterLocation); +} + function parseBool(s: ?string): ?boolean { if (s === 'true') { return true;