Update source repo URL for debugger-frontend, require branch arg (#41118

)

Summary:
Pull Request resolved: #41118

Updates the release process and guidance for `debugger-frontend`, now that the source [facebookexperimental/rn-chrome-devtools-frontend](https://github.com/facebookexperimental/rn-chrome-devtools-frontend) repo is published.

The `sync-and-build` script now requires a `--branch` argument, allowing us to match release branches across repos for hotfixes (e.g. `0.73-stable`).

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D50496327

fbshipit-source-id: 671fd1581e23032eec0a419a6e50dac6c76feeb0

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:

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
+
+### 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
+```
 
-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.
+By default, this will clone and build from [facebookexperimental/rn-chrome-devtools-frontend](https://github.com/facebookexperimental/rn-chrome-devtools-frontend).

scripts/debugger-frontend/sync-and-build.js

@@ -25,15 +25,15 @@ 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');
 
 const config = {
   allowPositionals: true,
   options: {
+    branch: {type: 'string'},
     'keep-scratch': {type: 'boolean'},
     nohooks: {type: 'boolean'},
     help: {type: 'boolean'},
@@ -43,24 +43,21 @@ 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.
+    showHelp();
+    process.exitCode = 0;
+    return;
+  }
 
-  By default, checks out the currently pinned revision of the DevTools frontend.
-  If an existing checkout path is provided, builds it instead.
+  const localCheckoutPath = positionals?.[0];
 
-  Options:
-    --nohooks          Don't run gclient hooks in the devtools checkout (useful
-                       for existing checkouts).
-    --keep-scratch     Don't clean up temporary files.
-`);
-    process.exitCode = 0;
+  if (branch == null && !localCheckoutPath?.length) {
+    console.error(chalk.red('Error: Missing option --branch'));
+    showHelp();
+    process.exitCode = 1;
     return;
   }
 
@@ -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,17 +119,18 @@ 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) {
     const scratchCheckoutPath = path.join(scratchPath, 'devtools-frontend');
 
     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): ',