@samitouri / QOS-React / commits / e740d4b14b

chore: remove using local storage for persisting console settings on the frontend (#31002)

After https://github.com/facebook/react/pull/30636 and https://github.com/facebook/react/pull/30986 we no longer store settings on the Frontend side via `localStorage`. This PR removes all occurrences of it from `react-devtools-core/standalone` and `react-devtools-inline`.

Ruslan Lesiutin committed Sep 19, 2024 at 15:47 UTC e740d4b14b27b4c7a21f67d20a4526a57d6729a7
6 files changed +2 -95
packages/react-devtools-core/src/standalone.js
+1 -19
@@ -12,13 +12,7 @@ import {flushSync} from 'react-dom';
12 import {createRoot} from 'react-dom/client';
13 import Bridge from 'react-devtools-shared/src/bridge';
14 import Store from 'react-devtools-shared/src/devtools/store';
15 -import {
16 - getAppendComponentStack,
17 - getBreakOnConsoleErrors,
18 - getSavedComponentFilters,
19 - getShowInlineWarningsAndErrors,
20 - getHideConsoleLogsInStrictMode,
21 -} from 'react-devtools-shared/src/utils';
15 +import {getSavedComponentFilters} from 'react-devtools-shared/src/utils';
16 import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
17 import {Server} from 'ws';
18 import {join} from 'path';
@@ -368,20 +362,8 @@ function startServer(
362 // Because of this it relies on the extension to pass filters, so include them wth the response here.
363 // This will ensure that saved filters are shared across different web pages.
364 const savedPreferencesString = `
371 - window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
372 - getAppendComponentStack(),
373 - )};
374 - window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
375 - getBreakOnConsoleErrors(),
376 - )};
365 window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
366 getSavedComponentFilters(),
379 - )};
380 - window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
381 - getShowInlineWarningsAndErrors(),
382 - )};
383 - window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
384 - getHideConsoleLogsInStrictMode(),
367 )};`;
368
369 response.end(
packages/react-devtools-inline/src/frontend.js
+1 -11
@@ -5,13 +5,7 @@ import {forwardRef} from 'react';
5 import Bridge from 'react-devtools-shared/src/bridge';
6 import Store from 'react-devtools-shared/src/devtools/store';
7 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
8 -import {
9 - getAppendComponentStack,
10 - getBreakOnConsoleErrors,
11 - getSavedComponentFilters,
12 - getShowInlineWarningsAndErrors,
13 - getHideConsoleLogsInStrictMode,
14 -} from 'react-devtools-shared/src/utils';
8 +import {getSavedComponentFilters} from 'react-devtools-shared/src/utils';
9
10 import type {Wall} from 'react-devtools-shared/src/frontend/types';
11 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -76,11 +70,7 @@ export function initialize(
70 frontendBridge.removeListener('getSavedPreferences', onGetSavedPreferences);
71
72 const data = {
79 - appendComponentStack: getAppendComponentStack(),
80 - breakOnConsoleErrors: getBreakOnConsoleErrors(),
73 componentFilters: getSavedComponentFilters(),
82 - showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
83 - hideConsoleLogsInStrictMode: getHideConsoleLogsInStrictMode(),
74 };
75
76 // The renderer interface can't read saved preferences directly,
packages/react-devtools-shared/src/bridge.js
-4
@@ -170,11 +170,7 @@ type NativeStyleEditor_SetValueParams = {
170 };
171
172 type SavedPreferencesParams = {
173 - appendComponentStack: boolean,
174 - breakOnConsoleErrors: boolean,
173 componentFilters: Array<ComponentFilter>,
176 - showInlineWarningsAndErrors: boolean,
177 - hideConsoleLogsInStrictMode: boolean,
174 };
175
176 export type BackendEvents = {
packages/react-devtools-shared/src/constants.js
-8
@@ -43,17 +43,9 @@ export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
43 'React::DevTools::recordChangeDescriptions';
44 export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
45 'React::DevTools::reloadAndProfile';
46 -export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
47 - 'React::DevTools::breakOnConsoleErrors';
46 export const LOCAL_STORAGE_BROWSER_THEME = 'React::DevTools::theme';
49 -export const LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY =
50 - 'React::DevTools::appendComponentStack';
51 -export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
52 - 'React::DevTools::showInlineWarningsAndErrors';
47 export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
48 'React::DevTools::traceUpdatesEnabled';
55 -export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE =
56 - 'React::DevTools::hideConsoleLogsInStrictMode';
49 export const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
50 'React::DevTools::supportsProfiling';
51
packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
-1
@@ -24,7 +24,6 @@ import type {FrontendBridge} from '../../../bridge';
24 import type {DevToolsHookSettings} from '../../../backend/types';
25 import type Store from '../../store';
26
27 -export type DisplayDensity = 'comfortable' | 'compact';
27 export type Theme = 'auto' | 'light' | 'dark';
28
29 type Context = {
packages/react-devtools-shared/src/utils.js
-52
@@ -36,10 +36,6 @@ import {
36 TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
37 LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
38 LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
39 - LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
40 - LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
41 - LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
42 - LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
39 } from './constants';
40 import {
41 ComponentFilterElementType,
@@ -61,7 +57,6 @@ import isArray from './isArray';
57 import type {
58 ComponentFilter,
59 ElementType,
64 - BrowserTheme,
60 SerializedElement as SerializedElementFrontend,
61 LRUCache,
62 } from 'react-devtools-shared/src/frontend/types';
@@ -374,53 +369,6 @@ export function filterOutLocationComponentFilters(
369 return componentFilters.filter(f => f.type !== ComponentFilterLocation);
370 }
371
377 -function parseBool(s: ?string): ?boolean {
378 - if (s === 'true') {
379 - return true;
380 - }
381 - if (s === 'false') {
382 - return false;
383 - }
384 -}
385 -
386 -export function castBool(v: any): ?boolean {
387 - if (v === true || v === false) {
388 - return v;
389 - }
390 -}
391 -
392 -export function castBrowserTheme(v: any): ?BrowserTheme {
393 - if (v === 'light' || v === 'dark' || v === 'auto') {
394 - return v;
395 - }
396 -}
397 -
398 -export function getAppendComponentStack(): boolean {
399 - const raw = localStorageGetItem(
400 - LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
401 - );
402 - return parseBool(raw) ?? true;
403 -}
404 -
405 -export function getBreakOnConsoleErrors(): boolean {
406 - const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS);
407 - return parseBool(raw) ?? false;
408 -}
409 -
410 -export function getHideConsoleLogsInStrictMode(): boolean {
411 - const raw = localStorageGetItem(
412 - LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
413 - );
414 - return parseBool(raw) ?? false;
415 -}
416 -
417 -export function getShowInlineWarningsAndErrors(): boolean {
418 - const raw = localStorageGetItem(
419 - LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
420 - );
421 - return parseBool(raw) ?? true;
422 -}
423 -
372 export function getDefaultOpenInEditorURL(): string {
373 return typeof process.env.EDITOR_URL === 'string'
374 ? process.env.EDITOR_URL