diff --git a/packages/debugger-frontend/BUILD_INFO b/packages/debugger-frontend/BUILD_INFO index 67e1ea665da..a7a241d88cc 100644 --- a/packages/debugger-frontend/BUILD_INFO +++ b/packages/debugger-frontend/BUILD_INFO @@ -1,9 +1,9 @@ -@generated SignedSource<<7fdc9e65be03ba4c6654f14c6f23d645>> -Git revision: 18f202a1ae468a01afb44ffd2f71d28023126989 +@generated SignedSource<<7eb943488c9081fdcda0d8ba3ade3cbb>> +Git revision: a0baf9234e00b7a70155b7427542b69d0000c64e Built with --nohooks: false Is local checkout: false -Remote URL: https://github.com/motiz88/rn-chrome-devtools-frontend -Remote branch: rn-0.73-chromium-5845 +Remote URL: https://github.com/facebookexperimental/rn-chrome-devtools-frontend +Remote branch: main GN build args (overrides only): is_official_build = true Git status in checkout: diff --git a/packages/debugger-frontend/README.md b/packages/debugger-frontend/README.md index e9e228a6a6e..741ba72a301 100644 --- a/packages/debugger-frontend/README.md +++ b/packages/debugger-frontend/README.md @@ -11,12 +11,27 @@ This package is internal to React Native and is intended to be used via [`@react The package exports the absolute path to the directory containing the frontend assets. ```js - const frontendPath = require('@react-native/debugger-frontend'); // Pass frontendPath to a static server, etc ``` -## Updating the frontend assets +## Contributing -The compiled frontend assets are checked into the React Native repo. Run `node scripts/debugger-frontend/sync-and-build` from the root of your `react-native` checkout to update them. +### Source repo + +Source code for this package lives in the [facebookexperimental/rn-chrome-devtools-frontend](https://github.com/facebookexperimental/rn-chrome-devtools-frontend) repo. See below for how we build and check in changes. + +### Updating the frontend assets + +The compiled assets for the debugger frontend are periodically checked into this package under the `dist/` folder. To update these, run `node scripts/debugger-frontend/sync-and-build` from the root of your `react-native` checkout. + +```sh +# For main +node scripts/debugger-frontend/sync-and-build --branch main + +# For stable branches (e.g. '0.73-stable') +node scripts/debugger-frontend/sync-and-build --branch 0.73-stable +``` + +By default, this will clone and build from [facebookexperimental/rn-chrome-devtools-frontend](https://github.com/facebookexperimental/rn-chrome-devtools-frontend). diff --git a/scripts/debugger-frontend/sync-and-build.js b/scripts/debugger-frontend/sync-and-build.js index c72ce8a646d..2752efbffa4 100644 --- a/scripts/debugger-frontend/sync-and-build.js +++ b/scripts/debugger-frontend/sync-and-build.js @@ -25,8 +25,7 @@ const SignedSource = require('signedsource'); const supportsColor = require('supports-color'); const DEVTOOLS_FRONTEND_REPO_URL = - 'https://github.com/motiz88/rn-chrome-devtools-frontend'; -const DEVTOOLS_FRONTEND_REPO_BRANCH = 'rn-0.73-chromium-5845'; + 'https://github.com/facebookexperimental/rn-chrome-devtools-frontend'; const REPO_ROOT = path.resolve(__dirname, '../..'); const PACKAGES_DIR /*: string */ = path.join(REPO_ROOT, 'packages'); @@ -34,6 +33,7 @@ const PACKAGES_DIR /*: string */ = path.join(REPO_ROOT, 'packages'); const config = { allowPositionals: true, options: { + branch: {type: 'string'}, 'keep-scratch': {type: 'boolean'}, nohooks: {type: 'boolean'}, help: {type: 'boolean'}, @@ -43,27 +43,24 @@ const config = { async function main() { const { positionals, - values: {help, nohooks, 'keep-scratch': keepScratch}, + values: {help, branch, nohooks, 'keep-scratch': keepScratch}, } = parseArgs(config); if (help === true) { - console.log(` - Usage: node scripts/debugger-frontend/sync-and-build [OPTIONS] [checkout path] - - Sync and build the debugger frontend into @react-native/debugger-frontend. - - By default, checks out the currently pinned revision of the DevTools frontend. - If an existing checkout path is provided, builds it instead. - - Options: - --nohooks Don't run gclient hooks in the devtools checkout (useful - for existing checkouts). - --keep-scratch Don't clean up temporary files. -`); + showHelp(); process.exitCode = 0; return; } + const localCheckoutPath = positionals?.[0]; + + if (branch == null && !localCheckoutPath?.length) { + console.error(chalk.red('Error: Missing option --branch')); + showHelp(); + process.exitCode = 1; + return; + } + console.log('\n' + chalk.bold.inverse('Syncing debugger-frontend') + '\n'); const scratchPath = await fs.mkdtemp( @@ -72,8 +69,8 @@ async function main() { process.stdout.write(chalk.dim(`Scratch path: ${scratchPath}\n\n`)); await checkRequiredTools(); - const localCheckoutPath = positionals.length ? positionals[0] : undefined; await buildDebuggerFrontend(scratchPath, localCheckoutPath, { + branch: branch ?? '', gclientSyncOptions: {nohooks: nohooks === true}, }); await cleanup(scratchPath, keepScratch === true); @@ -83,6 +80,24 @@ async function main() { ); } +function showHelp() { + console.log(` + Usage: node scripts/debugger-frontend/sync-and-build [OPTIONS] [checkout path] + + Sync and build the debugger frontend into @react-native/debugger-frontend. + + By default, checks out the currently pinned revision of the DevTools frontend. + If an existing checkout path is provided, builds it instead. + + Options: + --branch The DevTools frontend branch to use. Ignored when + providing a local checkout path. + --nohooks Don't run gclient hooks in the devtools checkout (useful + for existing checkouts). + --keep-scratch Don't clean up temporary files. +`); +} + async function checkRequiredTools() { process.stdout.write('Checking that required tools are available' + '\n'); await spawnSafe('git', ['--version'], {stdio: 'ignore'}); @@ -104,9 +119,10 @@ async function checkRequiredTools() { async function buildDebuggerFrontend( scratchPath /*: string */, localCheckoutPath /*: ?string */, - { - gclientSyncOptions, - } /*: $ReadOnly<{gclientSyncOptions: $ReadOnly<{nohooks: boolean}>}>*/, + {branch, gclientSyncOptions} /*: $ReadOnly<{ + branch: string, + gclientSyncOptions: $ReadOnly<{nohooks: boolean}>, + }>*/, ) { let checkoutPath; if (localCheckoutPath == null) { @@ -114,7 +130,7 @@ async function buildDebuggerFrontend( await fs.mkdir(scratchPath, {recursive: true}); - await checkoutDevToolsFrontend(scratchCheckoutPath); + await checkoutDevToolsFrontend(scratchCheckoutPath, branch); checkoutPath = scratchCheckoutPath; } else { checkoutPath = localCheckoutPath; @@ -133,20 +149,24 @@ async function buildDebuggerFrontend( await generateBuildInfo({ checkoutPath, packagePath, + branch, isLocalCheckout: localCheckoutPath != null, gclientSyncOptions, gnArgsSummary, }); } -async function checkoutDevToolsFrontend(checkoutPath /*: string */) { +async function checkoutDevToolsFrontend( + checkoutPath /*: string */, + branch /*: string */, +) { process.stdout.write('Checking out devtools-frontend\n'); await fs.mkdir(checkoutPath, {recursive: true}); await spawnSafe('git', [ 'clone', DEVTOOLS_FRONTEND_REPO_URL, '--branch', - DEVTOOLS_FRONTEND_REPO_BRANCH, + branch, '--single-branch', '--depth', '1', @@ -262,6 +282,7 @@ async function generateBuildInfo( info /*: $ReadOnly<{ checkoutPath: string, isLocalCheckout: boolean, + branch: string, packagePath: string, gclientSyncOptions: $ReadOnly<{nohooks: boolean}>, gnArgsSummary: string, @@ -298,7 +319,7 @@ async function generateBuildInfo( ...(!info.isLocalCheckout ? [ 'Remote URL: ' + DEVTOOLS_FRONTEND_REPO_URL, - 'Remote branch: ' + DEVTOOLS_FRONTEND_REPO_BRANCH, + 'Remote branch: ' + info.branch, ] : ['Hostname: ' + hostname(), 'User: ' + userInfo().username]), 'GN build args (overrides only): ',