update shared build to strip Babel wrapper (#44339)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44339

We require the wrapper code for in repository calls to these packages directly from node (i.e. using CommonJS).  This wrapper code typically sits at the entrypoint of the build packages (i.e. `index.js`).

NOTE: This unblocks an issue preventing me from landing further work on the `helloworld` cli replacing the community template.

## Problem:
The [flow-api-translator](https://www.npmjs.com/package/flow-api-translator) library doesn't allow CommonJS `module.exports` when generating TypeScript Type Defintions.

## Change
1. At the built time, this strips out our wrapper code and sets up the dist/ folder appropriately for npm distribution.
2. Updated the `package.json` files to consistently share Flow types

Changelog: [Internal] refactor build packages output to remove wrapper.

NOTE: Added better error messages when users deviated from the current pattern:
{F1501571608}

Reviewed By: huntie

Differential Revision: D56762162

fbshipit-source-id: f110b31e4ad780998dbc81a2482891ac8d8c6458

packages/core-cli-utils/package.json

@@ -2,19 +2,18 @@
   "name": "@react-native/core-cli-utils",
   "version": "0.75.0-main",
   "description": "React Native CLI library for Frameworks to build on",
-  "main": "./src/index.flow.js",
   "license": "MIT",
+  "main": "./src/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/facebook/react-native.git",
     "directory": "packages/core-cli-utils"
   },
   "exports": {
-    ".": "./src/index.flow.js",
+    ".": "./src/index.js",
     "./package.json": "./package.json",
     "./version.js": "./src/public/version.js"
   },
-  "types": "./dist/index.flow.d.ts",
   "homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/core-cli-utils#readme",
   "keywords": [
     "cli-utils",
@@ -29,4 +28,4 @@
   ],
   "dependencies": {},
   "devDependencies": {}
-}
+}

packages/core-cli-utils/src/index.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+/*::
+export type * from './index.flow';
+*/
+
+if (process.env.BUILD_EXCLUDE_BABEL_REGISTER == null) {
+  require('../../../scripts/build/babel-register').registerForMonorepo();
+}
+
+module.exports = require('./index.flow');

packages/core-cli-utils/src/monorepo.js

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @oncall react_native
- */
-
-// Should only used when called in the monorepo when we don't want to use the `yarn run build`
-// step to transpile to project. When used as a vanilla npm package, it should be built and
-// exported with `dist/index.flow.js` as main.
-//
-// The reason for this workaround is that flow-api-translator can't understand ESM and CJS style
-// exports in the same file.  Throw in a bit of Flow in the mix and it all goes to hell.
-//
-// See packages/helloworld/cli.js for an example of how to swap this out in the monorepo.
-if (process.env.BUILD_EXCLUDE_BABEL_REGISTER == null) {
-  require('../../../scripts/build/babel-register').registerForMonorepo();
-}
-
-module.exports = require('./index.flow.js');

packages/core-cli-utils/src/public/version.flow.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+// Usage:
+//
+// > const semver = require('semver');
+// > semver.satisfies(process.env.ANDROID_SDK, android.ANDROID_SDK);
+// true
+//
+// The version of @react-native/core-cli-utils matches a particular version
+// of react-native.  For example:
+//
+// > npm info @react-native/core-cli-util@latest --json | jq '.version'
+// > "0.75.0"
+//
+// Means that:
+// > require('@react-native/core-cli-utils/versions.js').apple.XCODE
+// > ">= 12.x"
+//
+// For react-native@0.75.0 you have to have a version of XCode >= 12
+
+export const android = {
+  ANDROID_NDK: '>= 23.x',
+  ANDROID_SDK: '>= 33.x',
+};
+
+export const apple = {
+  COCOAPODS: '>= 1.10.0',
+  XCODE: '>= 12.x',
+};
+
+export const common = {
+  BUN: '>= 1.0.0',
+  JAVA: '>= 17 <= 20',
+  NODE_JS: '>= 18',
+  NPM: '>= 4.x',
+  RUBY: '>= 2.6.10',
+  YARN: '>= 1.10.x',
+};
+
+export const all = {
+  ...apple,
+  ...android,
+  ...common,
+};

packages/core-cli-utils/src/public/version.js

@@ -9,45 +9,12 @@
  * @oncall react_native
  */
 
-// Usage:
-//
-// > const semver = require('semver');
-// > semver.satisfies(process.env.ANDROID_SDK, android.ANDROID_SDK);
-// true
-//
-// The version of @react-native/core-cli-utils matches a particular version
-// of react-native.  For example:
-//
-// > npm info @react-native/core-cli-util@latest --json | jq '.version'
-// > "0.75.0"
-//
-// Means that:
-// > require('@react-native/core-cli-utils/versions.js').apple.XCODE
-// > ">= 12.x"
-//
-// For react-native@0.75.0 you have to have a version of XCode >= 12
+/*::
+export type * from './version.flow';
+*/
 
-export const android = {
-  ANDROID_NDK: '>= 23.x',
-  ANDROID_SDK: '>= 33.x',
-};
+if (process.env.BUILD_EXCLUDE_BABEL_REGISTER == null) {
+  require('../../../../scripts/build/babel-register').registerForMonorepo();
+}
 
-export const apple = {
-  COCOAPODS: '>= 1.10.0',
-  XCODE: '>= 12.x',
-};
-
-export const common = {
-  BUN: '>= 1.0.0',
-  JAVA: '>= 17 <= 20',
-  NODE_JS: '>= 18',
-  NPM: '>= 4.x',
-  RUBY: '>= 2.6.10',
-  YARN: '>= 1.10.x',
-};
-
-export const all = {
-  ...apple,
-  ...android,
-  ...common,
-};
+module.exports = require('./version.flow');

packages/metro-config/src/index.js

@@ -17,4 +17,4 @@ if (!process.env.BUILD_EXCLUDE_BABEL_REGISTER) {
   require('../../../scripts/build/babel-register').registerForMonorepo();
 }
 
-export * from './index.flow';
+module.exports = require('./index.flow');

scripts/build/build.js

@@ -20,7 +20,7 @@ const babel = require('@babel/core');
 const {parseArgs} = require('@pkgjs/parseargs');
 const chalk = require('chalk');
 const translate = require('flow-api-translator');
-const {promises: fs} = require('fs');
+const {accessSync, constants, promises: fs, readFileSync} = require('fs');
 const glob = require('glob');
 const micromatch = require('micromatch');
 const path = require('path');
@@ -71,20 +71,36 @@ async function build() {
   process.exitCode = 0;
 }
 
+function invert(map /*: Map<string, string>*/) /*: Map<string, string> */ {
+  const result /*: Map<string, string>*/ = new Map();
+  for (const [key, value] of map.entries()) {
+    result.set(value, key);
+  }
+  return result;
+}
+
 async function buildPackage(packageName /*: string */) {
   const {emitTypeScriptDefs} = getBuildOptions(packageName);
-  const files = glob.sync(
-    path.resolve(PACKAGES_DIR, packageName, SRC_DIR, '**/*'),
-    {nodir: true},
-  );
+  const entryPointRewrites = getEntryPoints(packageName);
+
+  const files = glob
+    .sync(path.resolve(PACKAGES_DIR, packageName, SRC_DIR, '**/*'), {
+      nodir: true,
+    })
+    .filter(file => !entryPointRewrites.has(file));
 
   process.stdout.write(
     `${packageName} ${chalk.dim('.').repeat(72 - packageName.length)} `,
   );
 
+  const invertedEntryPointRewrites = invert(entryPointRewrites);
+
   // Build all files matched for package
   for (const file of files) {
-    await buildFile(path.normalize(file), true);
+    await buildFile(path.normalize(file), {
+      silent: true,
+      destPath: invertedEntryPointRewrites.get(file),
+    });
   }
 
   // Validate program for emitted .d.ts files
@@ -98,9 +114,13 @@ async function buildPackage(packageName /*: string */) {
   process.stdout.write(chalk.reset.inverse.bold.green(' DONE ') + '\n');
 }
 
-async function buildFile(file /*: string */, silent /*: boolean */ = false) {
+async function buildFile(
+  file /*: string */,
+  options /*: {silent?: boolean, destPath?: string}*/ = {},
+) {
+  const {silent, destPath} = {silent: false, ...options};
   const packageName = getPackageName(file);
-  const buildPath = getBuildPath(file);
+  const buildPath = getBuildPath(destPath ?? file);
   const {emitFlowDefs, emitTypeScriptDefs} = getBuildOptions(packageName);
 
   const logResult = ({copied, desc} /*: {copied: boolean, desc?: string} */) =>
@@ -156,6 +176,81 @@ async function buildFile(file /*: string */, silent /*: boolean */ = false) {
   logResult({copied: true});
 }
 
+/*::
+type PackageJson = {
+  name: string,
+  exports?: {[lookup: string]: string},
+}
+*/
+
+// As a convention, we use a .js/.js.flow file pair for each package
+// entry point, with the .js file being a Babel wrapper that can be
+// used directly in the monorepo. On build, we drop this wrapper and
+// emit a single file from the .js.flow contents.
+// can be used directly within the repo. When built, this needs to be rewritten
+// and the wrapper dropped:
+//
+// index.js ──────►{remove wrapper}
+//              ┌─►index.js
+// index.flow.js├─►index.d.ts
+//              └─►index.flow.js
+function getEntryPoints(packageName /*: string*/) /*: Map<string, string> */ {
+  const pkg /*: PackageJson */ = JSON.parse(
+    readFileSync(
+      path.resolve(PACKAGES_DIR, packageName, 'package.json'),
+      'utf8',
+    ),
+  );
+
+  // Flow files we want transpiled in place of the wrapper js files
+  const pathMap /*: Map<string, string>*/ = new Map();
+
+  for (const packagePath in pkg.exports) {
+    const original = revertRewriteExportsTarget(pkg.exports[packagePath]);
+
+    // Exported json files shouldn't be considered
+    if (!original.endsWith('.js')) {
+      continue;
+    }
+
+    if (original.endsWith('.flow.js')) {
+      throw new Error(
+        `${chalk.bold(packageName)} has ${chalk.bold(
+          'exports.' + packagePath + ' = "' + original + '"',
+        )}. Expecting a .js wrapper file. See other monorepo packages for examples.`,
+      );
+    }
+
+    // Our special case for wrapper files that need to be stripped
+    const entryPoint = path.resolve(PACKAGES_DIR, packageName, original);
+
+    const {dir, name} = path.parse(entryPoint);
+    const entryPointFlow = path.join(dir, name + '.flow.js');
+
+    try {
+      accessSync(entryPointFlow, constants.F_OK);
+    } catch {
+      throw new Error(
+        `${chalk.bold(
+          entryPointFlow,
+        )} does not exist when building ${chalk.bold(packageName)}.
+
+The ${chalk.bold("package.json's")} ${chalk.bold(
+          'exports["' + packagePath + '"]',
+        )}:
+  - found:   ${chalk.bold.green(entryPoint)}
+  - missing: ${chalk.bold.red(entryPointFlow)}
+
+This is needed so users can directly import the file from the monorepo using Node.`,
+      );
+    }
+
+    pathMap.set(entryPoint, entryPointFlow);
+  }
+
+  return pathMap;
+}
+
 function getPackageName(file /*: string */) /*: string */ {
   return path.relative(PACKAGES_DIR, file).split(path.sep)[0];
 }
@@ -181,9 +276,12 @@ async function rewritePackageExports(packageName /*: string */) {
         'paths to built files in production.',
     );
   }
-
   pkg.exports = rewriteExportsField(pkg.exports);
 
+  if (pkg.main != null) {
+    pkg.main = rewriteExportsTarget(pkg.main);
+  }
+
   await fs.writeFile(packageJsonPath, JSON.stringify(pkg, null, 2) + '\n');
 }
 
@@ -215,6 +313,10 @@ function rewriteExportsTarget(target /*: string */) /*: string */ {
   return target.replace('./' + SRC_DIR + '/', './' + BUILD_DIR + '/');
 }
 
+function revertRewriteExportsTarget(target /*: string */) /*: string */ {
+  return target.replace('./' + BUILD_DIR + '/', './' + SRC_DIR + '/');
+}
+
 function validateTypeScriptDefs(packageName /*: string */) {
   const files = glob.sync(
     path.resolve(PACKAGES_DIR, packageName, BUILD_DIR, '**/*.d.ts'),