From d2bfc522349b88ebcd5bd1fce07d5240ba1e32de Mon Sep 17 00:00:00 2001 From: Juan Tejada Date: Tue, 14 Sep 2021 17:56:47 -0400 Subject: [PATCH 1/4] [DevTools] Enable hook names in standalone app --- packages/react-devtools-core/hookNames.js | 1 + packages/react-devtools-core/package.json | 3 +- packages/react-devtools-core/src/hookNames.js | 16 ++++++ .../react-devtools-core/src/standalone.js | 6 ++ .../react-devtools-core/webpack.standalone.js | 4 +- .../config/DevToolsFeatureFlags.core-fb.js | 2 +- .../config/DevToolsFeatureFlags.core-oss.js | 2 +- .../parseHookNames/parseSourceAndMetadata.js | 57 +++++++++++-------- packages/react-devtools/app.js | 1 + 9 files changed, 64 insertions(+), 28 deletions(-) create mode 100644 packages/react-devtools-core/hookNames.js create mode 100644 packages/react-devtools-core/src/hookNames.js diff --git a/packages/react-devtools-core/hookNames.js b/packages/react-devtools-core/hookNames.js new file mode 100644 index 0000000000000..6a319e2de30b5 --- /dev/null +++ b/packages/react-devtools-core/hookNames.js @@ -0,0 +1 @@ +module.exports = require('./dist/hookNames'); diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json index 4d1ebdd9db8a4..85209b5eab92a 100644 --- a/packages/react-devtools-core/package.json +++ b/packages/react-devtools-core/package.json @@ -13,7 +13,8 @@ "dist", "backend.js", "build-info.json", - "standalone.js" + "standalone.js", + "hookNames.js" ], "scripts": { "build": "yarn build:backend && yarn build:standalone", diff --git a/packages/react-devtools-core/src/hookNames.js b/packages/react-devtools-core/src/hookNames.js new file mode 100644 index 0000000000000..91b84f1f2194e --- /dev/null +++ b/packages/react-devtools-core/src/hookNames.js @@ -0,0 +1,16 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import { + parseHookNames, + parseSourceAndMetadata, + purgeCachedMetadata, +} from 'react-devtools-shared/src/hooks/parseHookNames'; + +export {parseHookNames, parseSourceAndMetadata, purgeCachedMetadata}; diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 35d21b3a8a2ee..7f4909cec78c5 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -43,6 +43,11 @@ let nodeWaitingToConnectHTML: string = ''; let projectRoots: Array = []; let statusListener: StatusListener = (message: string) => {}; +// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration. +function hookNamesModuleLoaderFunction() { + return import('./hookNames'); +} + function setContentDOMNode(value: HTMLElement) { node = value; @@ -100,6 +105,7 @@ function reload() { createElement(DevTools, { bridge: ((bridge: any): FrontendBridge), canViewElementSourceFunction, + hookNamesModuleLoaderFunction, showTabBar: true, store: ((store: any): Store), warnIfLegacyBackendDetected: true, diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js index 8f17efe9c28b1..65414a36b7f23 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/packages/react-devtools-core/webpack.standalone.js @@ -38,14 +38,16 @@ const babelOptions = { module.exports = { mode: __DEV__ ? 'development' : 'production', - devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map', + devtool: __DEV__ ? 'cheap-source-map' : 'source-map', target: 'electron-main', entry: { standalone: './src/standalone.js', + hookNames: './src/hookNames.js', }, output: { path: __dirname + '/dist', filename: '[name].js', + chunkFilename: '[name].chunk.js', library: '[name]', libraryTarget: 'commonjs2', }, diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js index b6b7a1d0cd369..f0278aa0804a7 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js @@ -15,7 +15,7 @@ export const enableProfilerChangedHookIndices = true; export const isInternalFacebookBuild = true; -export const enableNamedHooksFeature = false; +export const enableNamedHooksFeature = true; export const enableLogger = false; export const consoleManagedByDevToolsDuringStrictMode = false; diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js index 6eb0f71ef9f93..b71d9501c6fb0 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js @@ -15,7 +15,7 @@ export const enableProfilerChangedHookIndices = false; export const isInternalFacebookBuild = false; -export const enableNamedHooksFeature = false; +export const enableNamedHooksFeature = true; export const enableLogger = false; export const consoleManagedByDevToolsDuringStrictMode = false; diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js index b6c069d0dcdca..e9425b47b4492 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js @@ -394,33 +394,42 @@ function parseSourceAST( hookParsedMetadata.originalSourceCode = sourceMetadata.originalSourceCode; } else { - // TypeScript is the most commonly used typed JS variant so let's default to it - // unless we detect explicit Flow usage via the "@flow" pragma. - const plugin = - originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript'; - - // TODO (named hooks) This is probably where we should check max source length, - // rather than in loadSourceAndMetatada -> loadSourceFiles(). - const originalSourceAST = withSyncPerfMeasurements( - '[@babel/parser] parse(originalSourceCode)', - () => - parse(originalSourceCode, { - sourceType: 'unambiguous', - plugins: ['jsx', plugin], - }), - ); - hookParsedMetadata.originalSourceAST = originalSourceAST; + try { + // TypeScript is the most commonly used typed JS variant so let's default to it + // unless we detect explicit Flow usage via the "@flow" pragma. + const plugin = + originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript'; + + // TODO (named hooks) This is probably where we should check max source length, + // rather than in loadSourceAndMetatada -> loadSourceFiles(). + // TODO(#22319): Support source files that are html files with inline script tags. + const originalSourceAST = withSyncPerfMeasurements( + '[@babel/parser] parse(originalSourceCode)', + () => + parse(originalSourceCode, { + errorRecovery: true, + sourceType: 'unambiguous', + plugins: ['jsx', plugin], + }), + ); + hookParsedMetadata.originalSourceAST = originalSourceAST; - if (__DEBUG__) { - console.log( - `parseSourceAST() Caching source metadata for "${originalSourceURL}"`, + if (__DEBUG__) { + console.log( + `parseSourceAST() Caching source metadata for "${originalSourceURL}"`, + ); + } + + originalURLToMetadataCache.set(originalSourceURL, { + originalSourceAST, + originalSourceCode, + }); + } catch (error) { + throw new Error( + `Failed to parse source file: ${originalSourceURL}\n\n` + + `Original error: ${error}`, ); } - - originalURLToMetadataCache.set(originalSourceURL, { - originalSourceAST, - originalSourceCode, - }); } }, ); diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js index 174766490cc47..e33a425633448 100644 --- a/packages/react-devtools/app.js +++ b/packages/react-devtools/app.js @@ -30,6 +30,7 @@ app.on('ready', function() { //titleBarStyle: 'customButtonsOnHover', webPreferences: { nodeIntegration: true, + nodeIntegrationInWorker: true, }, }); From 8a4bf9436d1667e1afbe601737d11fbdeb41ae40 Mon Sep 17 00:00:00 2001 From: Juan Tejada Date: Wed, 15 Sep 2021 14:39:54 -0400 Subject: [PATCH 2/4] Properly build bundle for parseHookNames + rm unintended change in webpack config --- packages/react-devtools-core/package.json | 3 +-- packages/react-devtools-core/src/standalone.js | 4 +++- packages/react-devtools-core/webpack.standalone.js | 3 +-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json index 85209b5eab92a..4d1ebdd9db8a4 100644 --- a/packages/react-devtools-core/package.json +++ b/packages/react-devtools-core/package.json @@ -13,8 +13,7 @@ "dist", "backend.js", "build-info.json", - "standalone.js", - "hookNames.js" + "standalone.js" ], "scripts": { "build": "yarn build:backend && yarn build:standalone", diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 7f4909cec78c5..bb6bd3d0c4cfa 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -45,7 +45,9 @@ let statusListener: StatusListener = (message: string) => {}; // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration. function hookNamesModuleLoaderFunction() { - return import('./hookNames'); + return import( + /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames' + ); } function setContentDOMNode(value: HTMLElement) { diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js index 65414a36b7f23..2994035c937b9 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/packages/react-devtools-core/webpack.standalone.js @@ -38,11 +38,10 @@ const babelOptions = { module.exports = { mode: __DEV__ ? 'development' : 'production', - devtool: __DEV__ ? 'cheap-source-map' : 'source-map', + devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map', target: 'electron-main', entry: { standalone: './src/standalone.js', - hookNames: './src/hookNames.js', }, output: { path: __dirname + '/dist', From 3ad960a3c3cc957478c8dbd61bf4a25b22f9bfe4 Mon Sep 17 00:00:00 2001 From: Juan Tejada Date: Wed, 15 Sep 2021 15:58:04 -0400 Subject: [PATCH 3/4] Remove errorRecovery option --- .../src/hooks/parseHookNames/parseSourceAndMetadata.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js index e9425b47b4492..6f87b351a014a 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js @@ -407,7 +407,6 @@ function parseSourceAST( '[@babel/parser] parse(originalSourceCode)', () => parse(originalSourceCode, { - errorRecovery: true, sourceType: 'unambiguous', plugins: ['jsx', plugin], }), From 84f70e8387456da2e5b1b46a0bc4335a4a581d4f Mon Sep 17 00:00:00 2001 From: Juan Tejada Date: Thu, 16 Sep 2021 11:28:14 -0400 Subject: [PATCH 4/4] Remove unnecessary hookNames files (webpack entrypoint was removed) --- packages/react-devtools-core/hookNames.js | 1 - packages/react-devtools-core/src/hookNames.js | 16 ---------------- 2 files changed, 17 deletions(-) delete mode 100644 packages/react-devtools-core/hookNames.js delete mode 100644 packages/react-devtools-core/src/hookNames.js diff --git a/packages/react-devtools-core/hookNames.js b/packages/react-devtools-core/hookNames.js deleted file mode 100644 index 6a319e2de30b5..0000000000000 --- a/packages/react-devtools-core/hookNames.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/hookNames'); diff --git a/packages/react-devtools-core/src/hookNames.js b/packages/react-devtools-core/src/hookNames.js deleted file mode 100644 index 91b84f1f2194e..0000000000000 --- a/packages/react-devtools-core/src/hookNames.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import { - parseHookNames, - parseSourceAndMetadata, - purgeCachedMetadata, -} from 'react-devtools-shared/src/hooks/parseHookNames'; - -export {parseHookNames, parseSourceAndMetadata, purgeCachedMetadata};