From f6ec4661dbd76c53ab23f3b1565012b9df0a6ff0 Mon Sep 17 00:00:00 2001 From: Luna Ruan Date: Mon, 16 Aug 2021 13:46:46 -0700 Subject: [PATCH] make parseHookNames a separate bundle (#22102) --- .../src/__tests__/parseHookNames-test.js | 22 +---------- .../react-devtools-extensions/src/main.js | 38 ++++++++++--------- .../src/parseHookNames/index.js | 8 +--- .../webpack.config.js | 1 + 4 files changed, 25 insertions(+), 44 deletions(-) diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js index 52032b3723103..272f5ddf5a527 100644 --- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js +++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js @@ -62,7 +62,7 @@ describe('parseHookNames', () => { inspectHooks = require('react-debug-tools/src/ReactDebugHooks') .inspectHooks; - parseHookNames = require('../parseHookNames').parseHookNames; + parseHookNames = require('../parseHookNames/parseHookNames').parseHookNames; // Jest (jest-runner?) configures Errors to automatically account for source maps. // This changes behavior between our tests and the browser. @@ -718,22 +718,13 @@ describe('parseHookNames', () => { describe('parseHookNames worker', () => { let inspectHooks; let parseHookNames; - let originalParseHookNamesMock; let workerizedParseHookNamesMock; beforeEach(() => { window.Worker = undefined; - originalParseHookNamesMock = jest.fn(); workerizedParseHookNamesMock = jest.fn(); - jest.mock('../parseHookNames/parseHookNames.js', () => { - return { - __esModule: true, - parseHookNames: originalParseHookNamesMock, - }; - }); - jest.mock('../parseHookNames/parseHookNames.worker.js', () => { return { __esModule: true, @@ -757,7 +748,7 @@ describe('parseHookNames worker', () => { return hookNames; } - it('should use worker when available', async () => { + it('should use worker', async () => { const Component = require('./__source__/__untransformed__/ComponentWithUseState') .Component; @@ -769,13 +760,4 @@ describe('parseHookNames worker', () => { await getHookNamesForComponent(Component); expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(1); }); - - it('should use main thread when worker is not available', async () => { - const Component = require('./__source__/__untransformed__/ComponentWithUseState') - .Component; - - await getHookNamesForComponent(Component); - expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(0); - expect(originalParseHookNamesMock).toHaveBeenCalledTimes(1); - }); }); diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index 514e48514d785..7cb92c27b6cb9 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/packages/react-devtools-extensions/src/main.js @@ -12,7 +12,6 @@ import { getSavedComponentFilters, getShowInlineWarningsAndErrors, } from 'react-devtools-shared/src/utils'; -import {parseHookNames, purgeCachedMetadata} from './parseHookNames'; import { localStorageGetItem, localStorageRemoveItem, @@ -210,23 +209,26 @@ function createPanelIfReactLoaded() { render = (overrideTab = mostRecentOverrideTab) => { mostRecentOverrideTab = overrideTab; - - root.render( - createElement(DevTools, { - bridge, - browserTheme: getBrowserTheme(), - componentsPortalContainer, - enabledInspectedElementContextMenu: true, - loadHookNames: parseHookNames, - overrideTab, - profilerPortalContainer, - purgeCachedHookNamesMetadata: purgeCachedMetadata, - showTabBar: false, - store, - warnIfUnsupportedVersionDetected: true, - viewAttributeSourceFunction, - viewElementSourceFunction, - }), + import('./parseHookNames').then( + ({parseHookNames, purgeCachedMetadata}) => { + root.render( + createElement(DevTools, { + bridge, + browserTheme: getBrowserTheme(), + componentsPortalContainer, + enabledInspectedElementContextMenu: true, + loadHookNames: parseHookNames, + overrideTab, + profilerPortalContainer, + purgeCachedHookNamesMetadata: purgeCachedMetadata, + showTabBar: false, + store, + warnIfUnsupportedVersionDetected: true, + viewAttributeSourceFunction, + viewElementSourceFunction, + }), + ); + }, ); }; diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-extensions/src/parseHookNames/index.js index ed178c3f200b4..79b2cf1aae548 100644 --- a/packages/react-devtools-extensions/src/parseHookNames/index.js +++ b/packages/react-devtools-extensions/src/parseHookNames/index.js @@ -12,17 +12,13 @@ // This file uses workerize to load ./parseHookNames.worker as a webworker and instanciates it, // exposing flow typed functions that can be used on other files. -import * as parseHookNamesModule from './parseHookNames'; import WorkerizedParseHookNames from './parseHookNames.worker'; - -type ParseHookNamesModule = typeof parseHookNamesModule; +import typeof * as ParseHookNamesModule from './parseHookNames'; // $FlowFixMe const wasmMappingsURL = chrome.extension.getURL('mappings.wasm'); -const workerizedParseHookNames: ParseHookNamesModule = window.Worker - ? WorkerizedParseHookNames() - : parseHookNamesModule; +const workerizedParseHookNames: ParseHookNamesModule = WorkerizedParseHookNames(); type ParseHookNames = $PropertyType; diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index b3a92762ae6ca..664ec8267c353 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -41,6 +41,7 @@ module.exports = { }, output: { path: __dirname + '/build', + publicPath: '/build/', filename: '[name].js', }, node: {