{"files":[{"path":"packages\/react-devtools-core\/README.md","status":"M"},{"path":"packages\/react-devtools-core\/src\/backend.js","status":"M"},{"path":"packages\/react-devtools-core\/src\/standalone.js","status":"M"},{"path":"packages\/react-devtools-extensions\/src\/contentScripts\/hookSettingsInjector.js","status":"M"},{"path":"packages\/react-devtools-extensions\/src\/contentScripts\/installHook.js","status":"M"},{"path":"packages\/react-devtools-extensions\/src\/contentScripts\/messages.js","status":"M"},{"path":"packages\/react-devtools-extensions\/src\/main\/index.js","status":"M"},{"path":"packages\/react-devtools-inline\/src\/backend.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/__tests__\/setupTests.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/attachRenderer.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/types.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/bridge.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/store.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/hook.js","status":"M"}],"parents":["2c30ebc4e397d57fe75f850e32aa44e353052944"],"body":"","patch":"diff --git a\/packages\/react-devtools-core\/README.md b\/packages\/react-devtools-core\/README.md\nindex 21f4f697cf..a42e569697 100644\n--- a\/packages\/react-devtools-core\/README.md\n+++ b\/packages\/react-devtools-core\/README.md\n@@ -25,15 +25,30 @@ if (process.env.NODE_ENV !== 'production') {\n > **NOTE** that this API (`connectToDevTools`) must be (1) run in the same context as React and (2) must be called before React packages are imported (e.g. `react`, `react-dom`, `react-native`).\n \n ### `initialize` arguments\n-| Argument | Description |\n-|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n-| `settings` | Optional. If not specified, or received as null, then default settings are used. Can be plain object or a Promise that resolves with the [plain settings object](#Settings). If Promise rejects, the console will not be patched and some console features from React DevTools will not work. |\n+| Argument | Description |\n+|---------------------------|-------------|\n+| `settings` | Optional. If not specified, or received as null, then default settings are used. Can be plain object or a Promise that resolves with the [plain settings object](#Settings). If Promise rejects, the console will not be patched and some console features from React DevTools will not work. |\n+| `shouldStartProfilingNow` | Optional. Whether to start profiling immediately after installing the hook. Defaults to `false`. |\n+| `profilingSettings` | Optional. Profiling settings used when `shouldStartProfilingNow` is `true`. Defaults to `{ recordChangeDescriptions: false, recordTimeline: false }`. |\n+| `componentFilters` | Optional. Array or Promise that resolves to an array of component filters to apply before DevTools connects. Defaults to the built-in host component filter. See [Component filters](#component-filters) for the full spec. |\n \n #### `Settings`\n | Spec | Default value |\n |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n |

{
  appendComponentStack: boolean,
  breakOnConsoleErrors: boolean,
  showInlineWarningsAndErrors: boolean,
  hideConsoleLogsInStrictMode: boolean,
  disableSecondConsoleLogDimmingInStrictMode: boolean
}<\/pre> | {
  appendComponentStack: true,
  breakOnConsoleErrors: false,
  showInlineWarningsAndErrors: true,
  hideConsoleLogsInStrictMode: false,
  disableSecondConsoleLogDimmingInStrictMode: false
}<\/pre> |\n \n+#### Component filters\n+Each filter object must include `type` and `isEnabled`. Some filters also require `value` or `isValid`.\n+\n+| Type | Required fields | Description |\n+|------|-----------------|-------------|\n+| `ComponentFilterElementType` (`1`) | `type`, `isEnabled`, `value: ElementType` | Hides elements of the given element type. DevTools defaults to hiding host components. |\n+| `ComponentFilterDisplayName` (`2`) | `type`, `isEnabled`, `isValid`, `value: string` | Hides components whose display name matches the provided RegExp string. |\n+| `ComponentFilterLocation` (`3`) | `type`, `isEnabled`, `isValid`, `value: string` | Hides components whose source location matches the provided RegExp string. |\n+| `ComponentFilterHOC` (`4`) | `type`, `isEnabled`, `isValid` | Hides higher-order components. |\n+| `ComponentFilterEnvironmentName` (`5`) | `type`, `isEnabled`, `isValid`, `value: string` | Hides components whose environment name matches the provided string. |\n+| `ComponentFilterActivitySlice` (`6`) | `type`, `isEnabled`, `isValid`, `activityID`, `rendererID` | Filters activity slices; usually managed by DevTools rather than user code. |\n+\n ### `connectToDevTools` options\n | Prop                   | Default       | Description                                                                                                               |\n |------------------------|---------------|---------------------------------------------------------------------------------------------------------------------------|\ndiff --git a\/packages\/react-devtools-core\/src\/backend.js b\/packages\/react-devtools-core\/src\/backend.js\nindex 4cca0887c5..262b3bc041 100644\n--- a\/packages\/react-devtools-core\/src\/backend.js\n+++ b\/packages\/react-devtools-core\/src\/backend.js\n@@ -66,9 +66,17 @@ export function initialize(\n     | Promise,\n   shouldStartProfilingNow: boolean = false,\n   profilingSettings?: ProfilingSettings,\n+  maybeComponentFiltersOrComponentFiltersPromise?:\n+    | Array\n+    | Promise>,\n ) {\n+  const componentFiltersOrComponentFiltersPromise =\n+    maybeComponentFiltersOrComponentFiltersPromise\n+      ? maybeComponentFiltersOrComponentFiltersPromise\n+      : savedComponentFilters;\n   installHook(\n     window,\n+    componentFiltersOrComponentFiltersPromise,\n     maybeSettingsOrSettingsPromise,\n     shouldStartProfilingNow,\n     profilingSettings,\n@@ -174,19 +182,6 @@ export function connectToDevTools(options: ?ConnectOptions) {\n       },\n     );\n \n-    \/\/ The renderer interface doesn't read saved component filters directly,\n-    \/\/ because they are generally stored in localStorage within the context of the extension.\n-    \/\/ Because of this it relies on the extension to pass filters.\n-    \/\/ In the case of the standalone DevTools being used with a website,\n-    \/\/ saved filters are injected along with the backend script tag so we shouldn't override them here.\n-    \/\/ This injection strategy doesn't work for React Native though.\n-    \/\/ Ideally the backend would save the filters itself, but RN doesn't provide a sync storage solution.\n-    \/\/ So for now we just fall back to using the default filters...\n-    if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ == null) {\n-      \/\/ $FlowFixMe[incompatible-use] found when upgrading Flow\n-      bridge.send('overrideComponentFilters', savedComponentFilters);\n-    }\n-\n     \/\/ TODO (npm-packages) Warn if \"isBackendStorageAPISupported\"\n     \/\/ $FlowFixMe[incompatible-call] found when upgrading Flow\n     const agent = new Agent(bridge, isProfiling, onReloadAndProfile);\n@@ -381,10 +376,6 @@ export function connectWithCustomMessagingProtocol({\n     },\n   );\n \n-  if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ == null) {\n-    bridge.send('overrideComponentFilters', savedComponentFilters);\n-  }\n-\n   const agent = new Agent(bridge, isProfiling, onReloadAndProfile);\n   if (typeof onReloadAndProfileFlagsReset === 'function') {\n     onReloadAndProfileFlagsReset();\ndiff --git a\/packages\/react-devtools-core\/src\/standalone.js b\/packages\/react-devtools-core\/src\/standalone.js\nindex f8286783a9..df89a728c3 100644\n--- a\/packages\/react-devtools-core\/src\/standalone.js\n+++ b\/packages\/react-devtools-core\/src\/standalone.js\n@@ -356,17 +356,12 @@ function startServer(\n     \/\/ because they are generally stored in localStorage within the context of the extension.\n     \/\/ Because of this it relies on the extension to pass filters, so include them wth the response here.\n     \/\/ This will ensure that saved filters are shared across different web pages.\n-    const savedPreferencesString = `\n-      window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(\n-        getSavedComponentFilters(),\n-      )};`;\n+    const componentFiltersString = JSON.stringify(getSavedComponentFilters());\n \n     response.end(\n-      savedPreferencesString +\n+      backendFile.toString() +\n         '\\n;' +\n-        backendFile.toString() +\n-        '\\n;' +\n-        'ReactDevToolsBackend.initialize();' +\n+        `ReactDevToolsBackend.initialize(undefined, undefined, undefined, ${componentFiltersString});` +\n         '\\n' +\n         `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', useHttps: ${\n           useHttps ? 'true' : 'false'\ndiff --git a\/packages\/react-devtools-extensions\/src\/contentScripts\/hookSettingsInjector.js b\/packages\/react-devtools-extensions\/src\/contentScripts\/hookSettingsInjector.js\nindex 196369e71d..00c9b905a6 100644\n--- a\/packages\/react-devtools-extensions\/src\/contentScripts\/hookSettingsInjector.js\n+++ b\/packages\/react-devtools-extensions\/src\/contentScripts\/hookSettingsInjector.js\n@@ -5,9 +5,15 @@\n \/\/ This is the only purpose of this script - to send persisted settings to installHook.js content script\n \n import type {UnknownMessageEvent} from '.\/messages';\n-import type {DevToolsHookSettings} from 'react-devtools-shared\/src\/backend\/types';\n+import type {\n+  DevToolsHookSettings,\n+  DevToolsSettings,\n+} from 'react-devtools-shared\/src\/backend\/types';\n+import type {ComponentFilter} from 'react-devtools-shared\/src\/frontend\/types';\n import {postMessage} from '.\/messages';\n \n+import {getDefaultComponentFilters} from 'react-devtools-shared\/src\/utils';\n+\n async function messageListener(event: UnknownMessageEvent) {\n   if (event.source !== window) {\n     return;\n@@ -15,7 +21,7 @@ async function messageListener(event: UnknownMessageEvent) {\n \n   if (event.data.source === 'react-devtools-hook-installer') {\n     if (event.data.payload.handshake) {\n-      const settings: Partial =\n+      const settings: Partial =\n         await chrome.storage.local.get();\n       \/\/ If storage was empty (first installation), define default settings\n       const hookSettings: DevToolsHookSettings = {\n@@ -41,10 +47,15 @@ async function messageListener(event: UnknownMessageEvent) {\n             ? settings.disableSecondConsoleLogDimmingInStrictMode\n             : false,\n       };\n+      const componentFilters: Array = Array.isArray(\n+        settings.componentFilters,\n+      )\n+        ? settings.componentFilters\n+        : getDefaultComponentFilters();\n \n       postMessage({\n-        source: 'react-devtools-hook-settings-injector',\n-        payload: {settings: hookSettings},\n+        source: 'react-devtools-settings-injector',\n+        payload: {hookSettings, componentFilters},\n       });\n \n       window.removeEventListener('message', messageListener);\n@@ -54,6 +65,6 @@ async function messageListener(event: UnknownMessageEvent) {\n \n window.addEventListener('message', messageListener);\n postMessage({\n-  source: 'react-devtools-hook-settings-injector',\n+  source: 'react-devtools-settings-injector',\n   payload: {handshake: true},\n });\ndiff --git a\/packages\/react-devtools-extensions\/src\/contentScripts\/installHook.js b\/packages\/react-devtools-extensions\/src\/contentScripts\/installHook.js\nindex 8f30d6f089..490232baf8 100644\n--- a\/packages\/react-devtools-extensions\/src\/contentScripts\/installHook.js\n+++ b\/packages\/react-devtools-extensions\/src\/contentScripts\/installHook.js\n@@ -2,6 +2,7 @@\n \n import type {UnknownMessageEvent} from '.\/messages';\n import type {DevToolsHookSettings} from 'react-devtools-shared\/src\/backend\/types';\n+import type {ComponentFilter} from 'react-devtools-shared\/src\/frontend\/types';\n \n import {installHook} from 'react-devtools-shared\/src\/hook';\n import {\n@@ -11,13 +12,14 @@ import {\n import {postMessage} from '.\/messages';\n \n let resolveHookSettingsInjection: (settings: DevToolsHookSettings) => void;\n+let resolveComponentFiltersInjection: (filters: Array) => void;\n \n function messageListener(event: UnknownMessageEvent) {\n   if (event.source !== window) {\n     return;\n   }\n \n-  if (event.data.source === 'react-devtools-hook-settings-injector') {\n+  if (event.data.source === 'react-devtools-settings-injector') {\n     const payload = event.data.payload;\n     \/\/ In case handshake message was sent prior to hookSettingsInjector execution\n     \/\/ We can't guarantee order\n@@ -26,9 +28,10 @@ function messageListener(event: UnknownMessageEvent) {\n         source: 'react-devtools-hook-installer',\n         payload: {handshake: true},\n       });\n-    } else if (payload.settings) {\n+    } else if (payload.hookSettings) {\n       window.removeEventListener('message', messageListener);\n-      resolveHookSettingsInjection(payload.settings);\n+      resolveHookSettingsInjection(payload.hookSettings);\n+      resolveComponentFiltersInjection(payload.componentFilters);\n     }\n   }\n }\n@@ -38,6 +41,11 @@ if (!window.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {\n   const hookSettingsPromise = new Promise(resolve => {\n     resolveHookSettingsInjection = resolve;\n   });\n+  const componentFiltersPromise = new Promise>(\n+    resolve => {\n+      resolveComponentFiltersInjection = resolve;\n+    },\n+  );\n \n   window.addEventListener('message', messageListener);\n   postMessage({\n@@ -50,6 +58,7 @@ if (!window.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {\n   \/\/ Can't delay hook installation, inject settings lazily\n   installHook(\n     window,\n+    componentFiltersPromise,\n     hookSettingsPromise,\n     shouldStartProfiling,\n     profilingSettings,\ndiff --git a\/packages\/react-devtools-extensions\/src\/contentScripts\/messages.js b\/packages\/react-devtools-extensions\/src\/contentScripts\/messages.js\nindex e65d46b4b2..b93a3f0df8 100644\n--- a\/packages\/react-devtools-extensions\/src\/contentScripts\/messages.js\n+++ b\/packages\/react-devtools-extensions\/src\/contentScripts\/messages.js\n@@ -1,6 +1,7 @@\n \/** @flow *\/\n \n import type {DevToolsHookSettings} from 'react-devtools-shared\/src\/backend\/types';\n+import type {ComponentFilter} from 'react-devtools-shared\/src\/frontend\/types';\n \n export function postMessage(event: UnknownMessageEventData): void {\n   window.postMessage(event);\n@@ -10,7 +11,7 @@ export interface UnknownMessageEvent\n   extends MessageEvent {}\n \n export type UnknownMessageEventData =\n-  | HookSettingsInjectorEventData\n+  | SettingsInjectorEventData\n   | HookInstallerEventData;\n \n export type HookInstallerEventData = {\n@@ -24,19 +25,20 @@ export type HookInstallerEventPayloadHandshake = {\n   handshake: true,\n };\n \n-export type HookSettingsInjectorEventData = {\n-  source: 'react-devtools-hook-settings-injector',\n-  payload: HookSettingsInjectorEventPayload,\n+export type SettingsInjectorEventData = {\n+  source: 'react-devtools-settings-injector',\n+  payload: SettingsInjectorEventPayload,\n };\n \n-export type HookSettingsInjectorEventPayload =\n-  | HookSettingsInjectorEventPayloadHandshake\n-  | HookSettingsInjectorEventPayloadSettings;\n+export type SettingsInjectorEventPayload =\n+  | SettingsInjectorEventPayloadHandshake\n+  | SettingsInjectorEventPayloadSettings;\n \n-export type HookSettingsInjectorEventPayloadHandshake = {\n+export type SettingsInjectorEventPayloadHandshake = {\n   handshake: true,\n };\n \n-export type HookSettingsInjectorEventPayloadSettings = {\n-  settings: DevToolsHookSettings,\n+export type SettingsInjectorEventPayloadSettings = {\n+  hookSettings: DevToolsHookSettings,\n+  componentFilters: Array,\n };\ndiff --git a\/packages\/react-devtools-extensions\/src\/main\/index.js b\/packages\/react-devtools-extensions\/src\/main\/index.js\nindex c2616cf04a..75a81c92dd 100644\n--- a\/packages\/react-devtools-extensions\/src\/main\/index.js\n+++ b\/packages\/react-devtools-extensions\/src\/main\/index.js\n@@ -171,8 +171,8 @@ function createBridgeAndStore() {\n     createSuspensePanel();\n   });\n \n-  store.addListener('settingsUpdated', settings => {\n-    chrome.storage.local.set(settings);\n+  store.addListener('settingsUpdated', (hookSettings, componentFilters) => {\n+    chrome.storage.local.set({...hookSettings, componentFilters});\n   });\n \n   if (!isProfiling) {\ndiff --git a\/packages\/react-devtools-inline\/src\/backend.js b\/packages\/react-devtools-inline\/src\/backend.js\nindex 2dd0341712..9810d5b39c 100644\n--- a\/packages\/react-devtools-inline\/src\/backend.js\n+++ b\/packages\/react-devtools-inline\/src\/backend.js\n@@ -10,7 +10,10 @@ import type {\n   BackendBridge,\n   SavedPreferencesParams,\n } from 'react-devtools-shared\/src\/bridge';\n-import type {Wall} from 'react-devtools-shared\/src\/frontend\/types';\n+import type {\n+  ComponentFilter,\n+  Wall,\n+} from 'react-devtools-shared\/src\/frontend\/types';\n import {\n   getIfReloadedAndProfiling,\n   getIsReloadAndProfileSupported,\n@@ -18,6 +21,11 @@ import {\n   onReloadAndProfileFlagsReset,\n } from 'react-devtools-shared\/src\/utils';\n \n+let resolveComponentFiltersInjection: (filters: Array) => void;\n+const componentFiltersPromise = new Promise>(resolve => {\n+  resolveComponentFiltersInjection = resolve;\n+});\n+\n function startActivation(contentWindow: any, bridge: BackendBridge) {\n   const onSavedPreferences = (data: SavedPreferencesParams) => {\n     \/\/ This is the only message we're listening for,\n@@ -26,21 +34,13 @@ function startActivation(contentWindow: any, bridge: BackendBridge) {\n \n     const {componentFilters} = data;\n \n-    contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;\n-\n-    \/\/ TRICKY\n-    \/\/ The backend entry point may be required in the context of an iframe or the parent window.\n-    \/\/ If it's required within the parent window, store the saved values on it as well,\n-    \/\/ since the injected renderer interface will read from window.\n-    \/\/ Technically we don't need to store them on the contentWindow in this case,\n-    \/\/ but it doesn't really hurt anything to store them there too.\n-    if (contentWindow !== window) {\n-      window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;\n-    }\n-\n-    finishActivation(contentWindow, bridge);\n+    resolveComponentFiltersInjection(componentFilters);\n   };\n \n+  componentFiltersPromise.then(\n+    finishActivation.bind(null, contentWindow, bridge),\n+  );\n+\n   bridge.addListener('savedPreferences', onSavedPreferences);\n \n   \/\/ The backend may be unable to read saved preferences directly,\n@@ -113,5 +113,5 @@ export function createBridge(contentWindow: any, wall?: Wall): BackendBridge {\n }\n \n export function initialize(contentWindow: any): void {\n-  installHook(contentWindow);\n+  installHook(contentWindow, componentFiltersPromise);\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/setupTests.js b\/packages\/react-devtools-shared\/src\/__tests__\/setupTests.js\nindex 5774a573b3..37b07ea7c3 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/setupTests.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/setupTests.js\n@@ -238,9 +238,8 @@ beforeEach(() => {\n \n   \/\/ Initialize filters to a known good state.\n   setSavedComponentFilters(getDefaultComponentFilters());\n-  global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();\n \n-  installHook(global, {\n+  installHook(global, getDefaultComponentFilters(), {\n     appendComponentStack: true,\n     breakOnConsoleErrors: false,\n     showInlineWarningsAndErrors: true,\ndiff --git a\/packages\/react-devtools-shared\/src\/attachRenderer.js b\/packages\/react-devtools-shared\/src\/attachRenderer.js\nindex fedf76293c..fa230fe7ef 100644\n--- a\/packages\/react-devtools-shared\/src\/attachRenderer.js\n+++ b\/packages\/react-devtools-shared\/src\/attachRenderer.js\n@@ -14,6 +14,7 @@ import type {\n   RendererID,\n   ProfilingSettings,\n } from 'react-devtools-shared\/src\/backend\/types';\n+import type {ComponentFilter} from 'react-devtools-shared\/src\/frontend\/types';\n \n import {attach as attachFlight} from 'react-devtools-shared\/src\/backend\/flight\/renderer';\n import {attach as attachFiber} from 'react-devtools-shared\/src\/backend\/fiber\/renderer';\n@@ -32,6 +33,9 @@ export default function attachRenderer(\n   global: Object,\n   shouldStartProfilingNow: boolean,\n   profilingSettings: ProfilingSettings,\n+  componentFiltersOrComponentFiltersPromise:\n+    | Array\n+    | Promise>,\n ): RendererInterface | void {\n   \/\/ only attach if the renderer is compatible with the current version of the backend\n   if (!isMatchingRender(renderer.reconcilerVersion || renderer.version)) {\n@@ -58,6 +62,7 @@ export default function attachRenderer(\n         global,\n         shouldStartProfilingNow,\n         profilingSettings,\n+        componentFiltersOrComponentFiltersPromise,\n       );\n     } else if (renderer.ComponentTree) {\n       \/\/ react-dom v15\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\nindex 892a3c6fc7..289bad6f32 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n@@ -48,13 +48,11 @@ import {\n   deletePathInObject,\n   getDisplayName,\n   getWrappedDisplayName,\n-  getDefaultComponentFilters,\n   getInObject,\n   getUID,\n   renamePathInObject,\n   setInObject,\n   utfEncodeString,\n-  persistableComponentFilters,\n } from 'react-devtools-shared\/src\/utils';\n import {\n   formatConsoleArgumentsToSingleString,\n@@ -1010,6 +1008,9 @@ export function attach(\n   global: Object,\n   shouldStartProfilingNow: boolean,\n   profilingSettings: ProfilingSettings,\n+  componentFiltersOrComponentFiltersPromise:\n+    | Array\n+    | Promise>,\n ): RendererInterface {\n   \/\/ Newer versions of the reconciler package also specific reconciler version.\n   \/\/ If that version number is present, use it.\n@@ -1516,21 +1517,12 @@ export function attach(\n     });\n   }\n \n-  \/\/ The renderer interface can't read saved component filters directly,\n-  \/\/ because they are stored in localStorage within the context of the extension.\n-  \/\/ Instead it relies on the extension to pass filters through.\n-  if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {\n-    const restoredComponentFilters: Array =\n-      persistableComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);\n-    applyComponentFilters(restoredComponentFilters, null);\n+  if (Array.isArray(componentFiltersOrComponentFiltersPromise)) {\n+    applyComponentFilters(componentFiltersOrComponentFiltersPromise, null);\n   } else {\n-    \/\/ Unfortunately this feature is not expected to work for React Native for now.\n-    \/\/ It would be annoying for us to spam YellowBox warnings with unactionable stuff,\n-    \/\/ so for now just skip this message...\n-    \/\/console.warn('⚛ DevTools: Could not locate saved component filters');\n-\n-    \/\/ Fallback to assuming the default filters in this case.\n-    applyComponentFilters(getDefaultComponentFilters(), null);\n+    componentFiltersOrComponentFiltersPromise.then(componentFilters => {\n+      applyComponentFilters(componentFilters, null);\n+    });\n   }\n \n   \/\/ If necessary, we can revisit optimizing this operation.\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex 00c66355b2..a97439b7cf 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -599,3 +599,7 @@ export type DevToolsHookSettings = {\n   hideConsoleLogsInStrictMode: boolean,\n   disableSecondConsoleLogDimmingInStrictMode: boolean,\n };\n+\n+export type DevToolsSettings = DevToolsHookSettings & {\n+  componentFilters: Array,\n+};\ndiff --git a\/packages\/react-devtools-shared\/src\/bridge.js b\/packages\/react-devtools-shared\/src\/bridge.js\nindex af3a87b596..bc752ec4b8 100644\n--- a\/packages\/react-devtools-shared\/src\/bridge.js\n+++ b\/packages\/react-devtools-shared\/src\/bridge.js\n@@ -208,7 +208,6 @@ export type BackendEvents = {\n   isReloadAndProfileSupportedByBackend: [boolean],\n   operations: [Array],\n   ownersList: [OwnersList],\n-  overrideComponentFilters: [Array],\n   environmentNames: [Array],\n   profilingData: [ProfilingDataBackend],\n   profilingStatus: [boolean],\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex c48d5b42fb..3e2dde5fea 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -148,7 +148,7 @@ export default class Store extends EventEmitter<{\n   error: [Error],\n   hookSettings: [$ReadOnly],\n   hostInstanceSelected: [Element['id'] | null],\n-  settingsUpdated: [$ReadOnly],\n+  settingsUpdated: [$ReadOnly, Array],\n   mutated: [\n     [\n       Array,\n@@ -321,10 +321,6 @@ export default class Store extends EventEmitter<{\n \n     this._bridge = bridge;\n     bridge.addListener('operations', this.onBridgeOperations);\n-    bridge.addListener(\n-      'overrideComponentFilters',\n-      this.onBridgeOverrideComponentFilters,\n-    );\n     bridge.addListener('shutdown', this.onBridgeShutdown);\n     bridge.addListener(\n       'isReloadAndProfileSupportedByBackend',\n@@ -437,8 +433,23 @@ export default class Store extends EventEmitter<{\n \n     this._componentFilters = value;\n \n-    \/\/ Update persisted filter preferences stored in localStorage.\n+    \/\/ Update persisted filter preferences\n     setSavedComponentFilters(value);\n+    if (this._hookSettings === null) {\n+      \/\/ We changed filters before we got the hook settings.\n+      \/\/ Wait for hook settings before persisting component filters to not overwrite\n+      \/\/ persisted hook settings with defaults.\n+      \/\/ This exists purely as a type safety check; in practice the hook settings\n+      \/\/ should have arrived before any filter changes could be made.\n+      const onHookSettings = (settings: $ReadOnly) => {\n+        this._bridge.removeListener('hookSettings', onHookSettings);\n+        this.emit('settingsUpdated', settings, value);\n+      };\n+      this._bridge.addListener('hookSettings', onHookSettings);\n+      this._bridge.send('getHookSettings');\n+    } else {\n+      this.emit('settingsUpdated', this._hookSettings, value);\n+    }\n \n     \/\/ Notify the renderer that filter preferences have changed.\n     \/\/ This is an expensive operation; it unmounts and remounts the entire tree,\n@@ -2264,19 +2275,6 @@ export default class Store extends EventEmitter<{\n     return didMutate;\n   }\n \n-  \/\/ Certain backends save filters on a per-domain basis.\n-  \/\/ In order to prevent filter preferences and applied filters from being out of sync,\n-  \/\/ this message enables the backend to override the frontend's current (\"saved\") filters.\n-  \/\/ This action should also override the saved filters too,\n-  \/\/ else reloading the frontend without reloading the backend would leave things out of sync.\n-  onBridgeOverrideComponentFilters: (\n-    componentFilters: Array,\n-  ) => void = componentFilters => {\n-    this._componentFilters = componentFilters;\n-\n-    setSavedComponentFilters(componentFilters);\n-  };\n-\n   onBridgeShutdown: () => void = () => {\n     if (__DEBUG__) {\n       debug('onBridgeShutdown', 'unsubscribing from Bridge');\n@@ -2284,10 +2282,6 @@ export default class Store extends EventEmitter<{\n \n     const bridge = this._bridge;\n     bridge.removeListener('operations', this.onBridgeOperations);\n-    bridge.removeListener(\n-      'overrideComponentFilters',\n-      this.onBridgeOverrideComponentFilters,\n-    );\n     bridge.removeListener('shutdown', this.onBridgeShutdown);\n     bridge.removeListener(\n       'isReloadAndProfileSupportedByBackend',\n@@ -2419,7 +2413,7 @@ export default class Store extends EventEmitter<{\n       this._hookSettings = settings;\n \n       this._bridge.send('updateHookSettings', settings);\n-      this.emit('settingsUpdated', settings);\n+      this.emit('settingsUpdated', settings, this._componentFilters);\n     };\n \n   onHookSettings: (settings: $ReadOnly) => void =\ndiff --git a\/packages\/react-devtools-shared\/src\/hook.js b\/packages\/react-devtools-shared\/src\/hook.js\nindex 97f8230b6a..5764a8bee4 100644\n--- a\/packages\/react-devtools-shared\/src\/hook.js\n+++ b\/packages\/react-devtools-shared\/src\/hook.js\n@@ -18,6 +18,7 @@ import type {\n   DevToolsHookSettings,\n   ProfilingSettings,\n } from '.\/backend\/types';\n+import type {ComponentFilter} from '.\/frontend\/types';\n \n import {\n   FIREFOX_CONSOLE_DIMMING_COLOR,\n@@ -57,6 +58,9 @@ const defaultProfilingSettings: ProfilingSettings = {\n \n export function installHook(\n   target: any,\n+  componentFiltersOrComponentFiltersPromise:\n+    | Array\n+    | Promise>,\n   maybeSettingsOrSettingsPromise?:\n     | DevToolsHookSettings\n     | Promise,\n@@ -224,6 +228,7 @@ export function installHook(\n       target,\n       isProfiling,\n       profilingSettings,\n+      componentFiltersOrComponentFiltersPromise,\n     );\n     if (rendererInterface != null) {\n       hook.rendererInterfaces.set(id, rendererInterface);\n","commit":{"subject":"[DevTools] Apply component filters on initial load (#35587)","authorName":"Sebastian \"Sebbie\" Silbermann","authoredAt":"2026-01-26T11:06:04+01:00","authorEmail":"sebastian.silbermann@vercel.com","revision":"3e319a943cff862b8fbb8e96868f9f153a9e199d","shortRevision":"3e319a943c"}}

dillon1000/react

Files changed