[DevTools] Enable hook names in standalone app (#22320)
Juan committed
Sep 17, 2021 at 10:21 UTC
1090ccd019fda0d039e2ded0089465c05a0a5dcd
6 files changed
+44
-26
packages/react-devtools-core/src/standalone.js
+8
@@ -43,6 +43,13 @@ let nodeWaitingToConnectHTML: string = '';
43
let projectRoots: Array<string> = [];
44
let statusListener: StatusListener = (message: string) => {};
45
46
+// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
47
+function hookNamesModuleLoaderFunction() {
48
+ return import(
49
+ /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
50
+ );
51
+}
52
+
53
function setContentDOMNode(value: HTMLElement) {
54
node = value;
55
@@ -100,6 +107,7 @@ function reload() {
107
createElement(DevTools, {
108
bridge: ((bridge: any): FrontendBridge),
109
canViewElementSourceFunction,
110
+ hookNamesModuleLoaderFunction,
111
showTabBar: true,
112
store: ((store: any): Store),
113
warnIfLegacyBackendDetected: true,
packages/react-devtools-core/webpack.standalone.js
+1
@@ -46,6 +46,7 @@ module.exports = {
46
output: {
47
path: __dirname + '/dist',
48
filename: '[name].js',
49
+ chunkFilename: '[name].chunk.js',
50
library: '[name]',
51
libraryTarget: 'commonjs2',
52
},
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+1
-1
@@ -15,7 +15,7 @@
15
16
export const enableProfilerChangedHookIndices = true;
17
export const isInternalFacebookBuild = true;
18
-export const enableNamedHooksFeature = false;
18
+export const enableNamedHooksFeature = true;
19
export const enableLogger = false;
20
export const consoleManagedByDevToolsDuringStrictMode = false;
21
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+1
-1
@@ -15,7 +15,7 @@
15
16
export const enableProfilerChangedHookIndices = false;
17
export const isInternalFacebookBuild = false;
18
-export const enableNamedHooksFeature = false;
18
+export const enableNamedHooksFeature = true;
19
export const enableLogger = false;
20
export const consoleManagedByDevToolsDuringStrictMode = false;
21
packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
+32
-24
@@ -394,33 +394,41 @@ function parseSourceAST(
394
hookParsedMetadata.originalSourceCode =
395
sourceMetadata.originalSourceCode;
396
} else {
397
- // TypeScript is the most commonly used typed JS variant so let's default to it
398
- // unless we detect explicit Flow usage via the "@flow" pragma.
399
- const plugin =
400
- originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
401
-
402
- // TODO (named hooks) This is probably where we should check max source length,
403
- // rather than in loadSourceAndMetatada -> loadSourceFiles().
404
- const originalSourceAST = withSyncPerfMeasurements(
405
- '[@babel/parser] parse(originalSourceCode)',
406
- () =>
407
- parse(originalSourceCode, {
408
- sourceType: 'unambiguous',
409
- plugins: ['jsx', plugin],
410
- }),
411
- );
412
- hookParsedMetadata.originalSourceAST = originalSourceAST;
397
+ try {
398
+ // TypeScript is the most commonly used typed JS variant so let's default to it
399
+ // unless we detect explicit Flow usage via the "@flow" pragma.
400
+ const plugin =
401
+ originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
402
+
403
+ // TODO (named hooks) This is probably where we should check max source length,
404
+ // rather than in loadSourceAndMetatada -> loadSourceFiles().
405
+ // TODO(#22319): Support source files that are html files with inline script tags.
406
+ const originalSourceAST = withSyncPerfMeasurements(
407
+ '[@babel/parser] parse(originalSourceCode)',
408
+ () =>
409
+ parse(originalSourceCode, {
410
+ sourceType: 'unambiguous',
411
+ plugins: ['jsx', plugin],
412
+ }),
413
+ );
414
+ hookParsedMetadata.originalSourceAST = originalSourceAST;
415
414
- if (__DEBUG__) {
415
- console.log(
416
- `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
416
+ if (__DEBUG__) {
417
+ console.log(
418
+ `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
419
+ );
420
+ }
421
+
422
+ originalURLToMetadataCache.set(originalSourceURL, {
423
+ originalSourceAST,
424
+ originalSourceCode,
425
+ });
426
+ } catch (error) {
427
+ throw new Error(
428
+ `Failed to parse source file: ${originalSourceURL}\n\n` +
429
+ `Original error: ${error}`,
430
);
431
}
419
-
420
- originalURLToMetadataCache.set(originalSourceURL, {
421
- originalSourceAST,
422
- originalSourceCode,
423
- });
432
}
433
},
434
);
packages/react-devtools/app.js
+1
@@ -30,6 +30,7 @@ app.on('ready', function() {
30
//titleBarStyle: 'customButtonsOnHover',
31
webPreferences: {
32
nodeIntegration: true,
33
+ nodeIntegrationInWorker: true,
34
},
35
});
36