make parseHookNames a separate bundle (#22102)
Luna Ruan committed
Aug 16, 2021 at 13:46 UTC
f6ec4661dbd76c53ab23f3b1565012b9df0a6ff0
4 files changed
+25
-44
packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+2
-20
@@ -62,7 +62,7 @@ describe('parseHookNames', () => {
62
63
inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
64
.inspectHooks;
65
- parseHookNames = require('../parseHookNames').parseHookNames;
65
+ parseHookNames = require('../parseHookNames/parseHookNames').parseHookNames;
66
67
// Jest (jest-runner?) configures Errors to automatically account for source maps.
68
// This changes behavior between our tests and the browser.
@@ -718,22 +718,13 @@ describe('parseHookNames', () => {
718
describe('parseHookNames worker', () => {
719
let inspectHooks;
720
let parseHookNames;
721
- let originalParseHookNamesMock;
721
let workerizedParseHookNamesMock;
722
723
beforeEach(() => {
724
window.Worker = undefined;
725
727
- originalParseHookNamesMock = jest.fn();
726
workerizedParseHookNamesMock = jest.fn();
727
730
- jest.mock('../parseHookNames/parseHookNames.js', () => {
731
- return {
732
- __esModule: true,
733
- parseHookNames: originalParseHookNamesMock,
734
- };
735
- });
736
-
728
jest.mock('../parseHookNames/parseHookNames.worker.js', () => {
729
return {
730
__esModule: true,
@@ -757,7 +748,7 @@ describe('parseHookNames worker', () => {
748
return hookNames;
749
}
750
760
- it('should use worker when available', async () => {
751
+ it('should use worker', async () => {
752
const Component = require('./__source__/__untransformed__/ComponentWithUseState')
753
.Component;
754
@@ -769,13 +760,4 @@ describe('parseHookNames worker', () => {
760
await getHookNamesForComponent(Component);
761
expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(1);
762
});
772
-
773
- it('should use main thread when worker is not available', async () => {
774
- const Component = require('./__source__/__untransformed__/ComponentWithUseState')
775
- .Component;
776
-
777
- await getHookNamesForComponent(Component);
778
- expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(0);
779
- expect(originalParseHookNamesMock).toHaveBeenCalledTimes(1);
780
- });
763
});
packages/react-devtools-extensions/src/main.js
+20
-18
@@ -12,7 +12,6 @@ import {
12
getSavedComponentFilters,
13
getShowInlineWarningsAndErrors,
14
} from 'react-devtools-shared/src/utils';
15
-import {parseHookNames, purgeCachedMetadata} from './parseHookNames';
15
import {
16
localStorageGetItem,
17
localStorageRemoveItem,
@@ -210,23 +209,26 @@ function createPanelIfReactLoaded() {
209
210
render = (overrideTab = mostRecentOverrideTab) => {
211
mostRecentOverrideTab = overrideTab;
213
-
214
- root.render(
215
- createElement(DevTools, {
216
- bridge,
217
- browserTheme: getBrowserTheme(),
218
- componentsPortalContainer,
219
- enabledInspectedElementContextMenu: true,
220
- loadHookNames: parseHookNames,
221
- overrideTab,
222
- profilerPortalContainer,
223
- purgeCachedHookNamesMetadata: purgeCachedMetadata,
224
- showTabBar: false,
225
- store,
226
- warnIfUnsupportedVersionDetected: true,
227
- viewAttributeSourceFunction,
228
- viewElementSourceFunction,
229
- }),
212
+ import('./parseHookNames').then(
213
+ ({parseHookNames, purgeCachedMetadata}) => {
214
+ root.render(
215
+ createElement(DevTools, {
216
+ bridge,
217
+ browserTheme: getBrowserTheme(),
218
+ componentsPortalContainer,
219
+ enabledInspectedElementContextMenu: true,
220
+ loadHookNames: parseHookNames,
221
+ overrideTab,
222
+ profilerPortalContainer,
223
+ purgeCachedHookNamesMetadata: purgeCachedMetadata,
224
+ showTabBar: false,
225
+ store,
226
+ warnIfUnsupportedVersionDetected: true,
227
+ viewAttributeSourceFunction,
228
+ viewElementSourceFunction,
229
+ }),
230
+ );
231
+ },
232
);
233
};
234
packages/react-devtools-extensions/src/parseHookNames/index.js
+2
-6
@@ -12,17 +12,13 @@
12
// This file uses workerize to load ./parseHookNames.worker as a webworker and instanciates it,
13
// exposing flow typed functions that can be used on other files.
14
15
-import * as parseHookNamesModule from './parseHookNames';
15
import WorkerizedParseHookNames from './parseHookNames.worker';
17
-
18
-type ParseHookNamesModule = typeof parseHookNamesModule;
16
+import typeof * as ParseHookNamesModule from './parseHookNames';
17
18
// $FlowFixMe
19
const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
20
23
-const workerizedParseHookNames: ParseHookNamesModule = window.Worker
24
- ? WorkerizedParseHookNames()
25
- : parseHookNamesModule;
21
+const workerizedParseHookNames: ParseHookNamesModule = WorkerizedParseHookNames();
22
23
type ParseHookNames = $PropertyType<ParseHookNamesModule, 'parseHookNames'>;
24
packages/react-devtools-extensions/webpack.config.js
+1
@@ -41,6 +41,7 @@ module.exports = {
41
},
42
output: {
43
path: __dirname + '/build',
44
+ publicPath: '/build/',
45
filename: '[name].js',
46
},
47
node: {