@samitouri / QOS-React-2 / commits / 6840c98c32

Remove named hooks feature flag (#21894)

Brian Vaughn committed Jul 16, 2021 at 00:14 UTC 6840c98c3246b749549beae2a62150f509ba4111
11 files changed +99 -68
packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
-5
@@ -23,11 +23,6 @@ describe('parseHookNames', () => {
23 console.trace('source-map-support');
24 });
25
26 - const {
27 - overrideFeatureFlags,
28 - } = require('react-devtools-shared/src/__tests__/utils');
29 - overrideFeatureFlags({enableHookNameParsing: true});
30 -
26 fetchMock = require('jest-fetch-mock');
27 fetchMock.enableMocks();
28
packages/react-devtools-extensions/src/parseHookNames.js
-5
@@ -10,7 +10,6 @@
10 */
11
12 import {parse} from '@babel/parser';
13 -import {enableHookNameParsing} from 'react-devtools-feature-flags';
13 import LRU from 'lru-cache';
14 import {SourceMapConsumer} from 'source-map';
15 import {getHookName} from './astUtils';
@@ -105,10 +104,6 @@ const originalURLToMetadataCache: LRUCache<
104 export async function parseHookNames(
105 hooksTree: HooksTree,
106 ): Thenable<HookNames | null> {
108 - if (!enableHookNameParsing) {
109 - return Promise.resolve(null);
110 - }
111 -
107 const hooksList: Array<HooksNode> = [];
108 flattenHooksList(hooksTree, hooksList);
109
packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+63
@@ -157,6 +157,12 @@ describe('InspectedElement', () => {
157 "events": undefined,
158 "hooks": Array [
159 Object {
160 + "hookSource": Object {
161 + "columnNumber": "removed by Jest serializer",
162 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
163 + "functionName": "Example",
164 + "lineNumber": "removed by Jest serializer",
165 + },
166 "id": 0,
167 "isStateEditable": true,
168 "name": "State",
@@ -1041,6 +1047,12 @@ describe('InspectedElement', () => {
1047 expect(inspectedElement.hooks).toMatchInlineSnapshot(`
1048 Array [
1049 Object {
1050 + "hookSource": Object {
1051 + "columnNumber": "removed by Jest serializer",
1052 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
1053 + "functionName": "Example",
1054 + "lineNumber": "removed by Jest serializer",
1055 + },
1056 "id": 0,
1057 "isStateEditable": true,
1058 "name": "State",
@@ -1062,6 +1074,12 @@ describe('InspectedElement', () => {
1074 expect(inspectedElement.hooks).toMatchInlineSnapshot(`
1075 Array [
1076 Object {
1077 + "hookSource": Object {
1078 + "columnNumber": "removed by Jest serializer",
1079 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
1080 + "functionName": "Example",
1081 + "lineNumber": "removed by Jest serializer",
1082 + },
1083 "id": 0,
1084 "isStateEditable": true,
1085 "name": "State",
@@ -1547,6 +1565,12 @@ describe('InspectedElement', () => {
1565 "events": undefined,
1566 "hooks": Array [
1567 Object {
1568 + "hookSource": Object {
1569 + "columnNumber": "removed by Jest serializer",
1570 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
1571 + "functionName": "Example",
1572 + "lineNumber": "removed by Jest serializer",
1573 + },
1574 "id": null,
1575 "isStateEditable": false,
1576 "name": "Context",
@@ -1799,11 +1823,23 @@ describe('InspectedElement', () => {
1823 expect(hooks).toMatchInlineSnapshot(`
1824 Array [
1825 Object {
1826 + "hookSource": Object {
1827 + "columnNumber": "removed by Jest serializer",
1828 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
1829 + "functionName": "DisplayedComplexValue",
1830 + "lineNumber": "removed by Jest serializer",
1831 + },
1832 "id": null,
1833 "isStateEditable": false,
1834 "name": "DebuggableHook",
1835 "subHooks": Array [
1836 Object {
1837 + "hookSource": Object {
1838 + "columnNumber": "removed by Jest serializer",
1839 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
1840 + "functionName": "useDebuggableHook",
1841 + "lineNumber": "removed by Jest serializer",
1842 + },
1843 "id": 0,
1844 "isStateEditable": true,
1845 "name": "State",
@@ -1877,6 +1913,12 @@ describe('InspectedElement', () => {
1913 Object {
1914 "hooks": Array [
1915 Object {
1916 + "hookSource": Object {
1917 + "columnNumber": "removed by Jest serializer",
1918 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
1919 + "functionName": "Example",
1920 + "lineNumber": "removed by Jest serializer",
1921 + },
1922 "id": 0,
1923 "isStateEditable": true,
1924 "name": "State",
@@ -1910,6 +1952,12 @@ describe('InspectedElement', () => {
1952 Object {
1953 "hooks": Array [
1954 Object {
1955 + "hookSource": Object {
1956 + "columnNumber": "removed by Jest serializer",
1957 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
1958 + "functionName": "Example",
1959 + "lineNumber": "removed by Jest serializer",
1960 + },
1961 "id": 0,
1962 "isStateEditable": true,
1963 "name": "State",
@@ -1943,6 +1991,12 @@ describe('InspectedElement', () => {
1991 Object {
1992 "hooks": Array [
1993 Object {
1994 + "hookSource": Object {
1995 + "columnNumber": "removed by Jest serializer",
1996 + "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
1997 + "functionName": "Example",
1998 + "lineNumber": "removed by Jest serializer",
1999 + },
2000 "id": 0,
2001 "isStateEditable": true,
2002 "name": "State",
@@ -2490,9 +2544,18 @@ describe('InspectedElement', () => {
2544 targetErrorBoundaryID,
2545 );
2546
2547 + // Suppress expected error and warning.
2548 + const originalError = console.error;
2549 + const originalWarn = console.warn;
2550 + console.error = () => {};
2551 + console.warn = () => {};
2552 +
2553 // now force error state on <Example />
2554 await toggleError(true);
2555
2556 + console.error = originalError;
2557 + console.warn = originalWarn;
2558 +
2559 // we are in error state now, <Example /> won't show up
2560 withErrorsOrWarningsIgnored(['Invalid index'], () => {
2561 expect(store.getElementIDAtIndex(1)).toBe(null);
packages/react-devtools-shared/src/backend/renderer.js
+2 -5
@@ -80,10 +80,7 @@ import {
80 MEMO_SYMBOL_STRING,
81 } from './ReactSymbols';
82 import {format} from './utils';
83 -import {
84 - enableHookNameParsing,
85 - enableProfilerChangedHookIndices,
86 -} from 'react-devtools-feature-flags';
83 +import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
84 import is from 'shared/objectIs';
85 import isArray from 'shared/isArray';
86
@@ -3112,7 +3109,7 @@ export function attach(
3109 hooks = inspectHooksOfFiber(
3110 fiber,
3111 (renderer.currentDispatcherRef: any),
3115 - enableHookNameParsing, // Include source location info for hooks
3112 + true, // Include source location info for hooks
3113 );
3114 } finally {
3115 // Restore original console functionality.
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
-1
@@ -13,6 +13,5 @@
13 * It should always be imported from "react-devtools-feature-flags".
14 ************************************************************************/
15
16 -export const enableHookNameParsing = false;
16 export const enableProfilerChangedHookIndices = false;
17 export const isInternalFacebookBuild = false;
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
-1
@@ -13,7 +13,6 @@
13 * It should always be imported from "react-devtools-feature-flags".
14 ************************************************************************/
15
16 -export const enableHookNameParsing = true;
16 export const enableProfilerChangedHookIndices = true;
17 export const isInternalFacebookBuild = true;
18
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
-1
@@ -13,7 +13,6 @@
13 * It should always be imported from "react-devtools-feature-flags".
14 ************************************************************************/
15
16 -export const enableHookNameParsing = false;
16 export const enableProfilerChangedHookIndices = false;
17 export const isInternalFacebookBuild = false;
18
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+23 -28
@@ -18,7 +18,6 @@ import {
18 useMemo,
19 useState,
20 } from 'react';
21 -import {enableHookNameParsing} from 'react-devtools-feature-flags';
21 import {TreeStateContext} from './TreeContext';
22 import {BridgeContext, StoreContext} from '../context';
23 import {
@@ -117,19 +116,17 @@ export function InspectedElementContextController({children}: Props) {
116 if (!elementHasChanged && element !== null) {
117 inspectedElement = inspectElement(element, state.path, store, bridge);
118
120 - if (enableHookNameParsing) {
121 - if (parseHookNames || alreadyLoadedHookNames) {
122 - if (
123 - inspectedElement !== null &&
124 - inspectedElement.hooks !== null &&
125 - loadHookNamesFunction !== null
126 - ) {
127 - hookNames = loadHookNames(
128 - element,
129 - inspectedElement.hooks,
130 - loadHookNamesFunction,
131 - );
132 - }
119 + if (parseHookNames || alreadyLoadedHookNames) {
120 + if (
121 + inspectedElement !== null &&
122 + inspectedElement.hooks !== null &&
123 + loadHookNamesFunction !== null
124 + ) {
125 + hookNames = loadHookNames(
126 + element,
127 + inspectedElement.hooks,
128 + loadHookNamesFunction,
129 + );
130 }
131 }
132 }
@@ -155,20 +152,18 @@ export function InspectedElementContextController({children}: Props) {
152 );
153
154 useEffect(() => {
158 - if (enableHookNameParsing) {
159 - if (typeof purgeCachedMetadata === 'function') {
160 - // When Fast Refresh updates a component, any cached AST metadata may be invalid.
161 - const fastRefreshScheduled = () => {
162 - startTransition(() => {
163 - clearHookNamesCache();
164 - purgeCachedMetadata();
165 - refresh();
166 - });
167 - };
168 - bridge.addListener('fastRefreshScheduled', fastRefreshScheduled);
169 - return () =>
170 - bridge.removeListener('fastRefreshScheduled', fastRefreshScheduled);
171 - }
155 + if (typeof purgeCachedMetadata === 'function') {
156 + // When Fast Refresh updates a component, any cached AST metadata may be invalid.
157 + const fastRefreshScheduled = () => {
158 + startTransition(() => {
159 + clearHookNamesCache();
160 + purgeCachedMetadata();
161 + refresh();
162 + });
163 + };
164 + bridge.addListener('fastRefreshScheduled', fastRefreshScheduled);
165 + return () =>
166 + bridge.removeListener('fastRefreshScheduled', fastRefreshScheduled);
167 }
168 }, [bridge]);
169
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+2 -5
@@ -22,10 +22,7 @@ import styles from './InspectedElementHooksTree.css';
22 import useContextMenu from '../../ContextMenu/useContextMenu';
23 import {meta} from '../../../hydration';
24 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
25 -import {
26 - enableHookNameParsing,
27 - enableProfilerChangedHookIndices,
28 -} from 'react-devtools-feature-flags';
25 +import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
26
27 import type {InspectedElement} from './types';
28 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -85,7 +82,7 @@ export function InspectedElementHooksTree({
82 <div className={styles.HooksTreeView}>
83 <div className={styles.HeaderRow}>
84 <div className={styles.Header}>hooks</div>
88 - {enableHookNameParsing && (!parseHookNames || hookParsingFailed) && (
85 + {(!parseHookNames || hookParsingFailed) && (
86 <Toggle
87 className={hookParsingFailed ? styles.ToggleError : null}
88 isChecked={parseHookNamesOptimistic}
packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+9 -12
@@ -16,7 +16,6 @@ import {
16 useRef,
17 useState,
18 } from 'react';
19 -import {enableHookNameParsing} from 'react-devtools-feature-flags';
19 import {useSubscription} from '../hooks';
20 import {StoreContext} from '../context';
21 import Button from '../Button';
@@ -262,17 +261,15 @@ export default function ComponentsSettings(_: {||}) {
261 Expand component tree by default
262 </label>
263
265 - {enableHookNameParsing && (
266 - <label className={styles.Setting}>
267 - <input
268 - type="checkbox"
269 - checked={parseHookNames}
270 - onChange={updateParseHookNames}
271 - />{' '}
272 - Always parse hook names from source{' '}
273 - <span className={styles.Warning}>(may be slow)</span>
274 - </label>
275 - )}
264 + <label className={styles.Setting}>
265 + <input
266 + type="checkbox"
267 + checked={parseHookNames}
268 + onChange={updateParseHookNames}
269 + />{' '}
270 + Always parse hook names from source{' '}
271 + <span className={styles.Warning}>(may be slow)</span>
272 + </label>
273
274 <div className={styles.Header}>Hide components where...</div>
275
packages/react-devtools-shared/src/hookNamesCache.js
-5
@@ -7,7 +7,6 @@
7 * @flow
8 */
9
10 -import {enableHookNameParsing} from 'react-devtools-feature-flags';
10 import {__DEBUG__} from 'react-devtools-shared/src/constants';
11
12 import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -70,10 +69,6 @@ export function loadHookNames(
69 hooksTree: HooksTree,
70 loadHookNamesFunction: (hookLog: HooksTree) => Thenable<HookNames>,
71 ): HookNames | null {
73 - if (!enableHookNameParsing) {
74 - return null;
75 - }
76 -
72 let record = map.get(element);
73
74 if (__DEBUG__) {