Skip to content

Commit 13e6831

Browse files
Juanzhengjitf
authored andcommitted
[DevTools] Enable hook names in standalone app (facebook#22320)
1 parent 350b07b commit 13e6831

File tree

6 files changed

+44
-26
lines changed

6 files changed

+44
-26
lines changed

packages/react-devtools-core/src/standalone.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ let nodeWaitingToConnectHTML: string = '';
4343
let projectRoots: Array<string> = [];
4444
let statusListener: StatusListener = (message: string) => {};
4545

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+
4653
function setContentDOMNode(value: HTMLElement) {
4754
node = value;
4855

@@ -100,6 +107,7 @@ function reload() {
100107
createElement(DevTools, {
101108
bridge: ((bridge: any): FrontendBridge),
102109
canViewElementSourceFunction,
110+
hookNamesModuleLoaderFunction,
103111
showTabBar: true,
104112
store: ((store: any): Store),
105113
warnIfLegacyBackendDetected: true,

packages/react-devtools-core/webpack.standalone.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ module.exports = {
4646
output: {
4747
path: __dirname + '/dist',
4848
filename: '[name].js',
49+
chunkFilename: '[name].chunk.js',
4950
library: '[name]',
5051
libraryTarget: 'commonjs2',
5152
},

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
export const enableProfilerChangedHookIndices = true;
1717
export const isInternalFacebookBuild = true;
18-
export const enableNamedHooksFeature = false;
18+
export const enableNamedHooksFeature = true;
1919
export const enableLogger = false;
2020
export const consoleManagedByDevToolsDuringStrictMode = false;
2121

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
export const enableProfilerChangedHookIndices = false;
1717
export const isInternalFacebookBuild = false;
18-
export const enableNamedHooksFeature = false;
18+
export const enableNamedHooksFeature = true;
1919
export const enableLogger = false;
2020
export const consoleManagedByDevToolsDuringStrictMode = false;
2121

packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -394,33 +394,41 @@ function parseSourceAST(
394394
hookParsedMetadata.originalSourceCode =
395395
sourceMetadata.originalSourceCode;
396396
} 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;
413415

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}`,
417430
);
418431
}
419-
420-
originalURLToMetadataCache.set(originalSourceURL, {
421-
originalSourceAST,
422-
originalSourceCode,
423-
});
424432
}
425433
},
426434
);

packages/react-devtools/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ app.on('ready', function() {
3030
//titleBarStyle: 'customButtonsOnHover',
3131
webPreferences: {
3232
nodeIntegration: true,
33+
nodeIntegrationInWorker: true,
3334
},
3435
});
3536

0 commit comments

Comments
 (0)