diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 35d21b3a8a2ee..bb6bd3d0c4cfa 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -43,6 +43,13 @@ 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( + /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames' + ); +} + function setContentDOMNode(value: HTMLElement) { node = value; @@ -100,6 +107,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..2994035c937b9 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/packages/react-devtools-core/webpack.standalone.js @@ -46,6 +46,7 @@ module.exports = { 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..6f87b351a014a 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js @@ -394,33 +394,41 @@ 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, { + 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, }, });