Move metro-config package into monorepo build, enable TS generation (#…

…41836)

Summary:
This adds `react-native/metro-config` to the monorepo build tool and emits the missing typescript declarations.

Right now, we do have typescript declarations on `metro-config`, but not `react-native/metro-config`. Which makes everything a bit harder extend from "[the default React Native metro config](#36502)" in Expo.

> Note, I also added the same `exports` block from `react-native/dev-middleware` for conformity.

One open question here is, why aren't we exporting _all_ helper functions from `metro-config`? To me, its a bit weird that we need both `metro-config` _and_ `react-native/metro-config` as `loadConfig` isn't exported.

## Changelog:

[INTERNAL] [FIXED] - Emit typescript declaration files for `react-native/metro-config`

Pull Request resolved: #41836

Test Plan:
Run the build tool, and check if the typescript declarations are emitted for `react-native/metro-config`.

```
yarn build metro-config
```

Reviewed By: hoxyq

Differential Revision: D51943453

Pulled By: huntie

fbshipit-source-id: cfaffe5660053fc9a9fcbe3dacf7f6ccc2bde01b

packages/metro-config/.gitignore

@@ -0,0 +1,5 @@
+# Dependencies
+/node_modules
+
+# Build output
+/dist

packages/metro-config/package.json

@@ -18,7 +18,13 @@
   "engines": {
     "node": ">=18"
   },
-  "exports": "./index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@react-native/js-polyfills": "0.74.0",
     "@react-native/metro-babel-transformer": "0.74.0",

packages/metro-config/index.js → packages/metro-config/src/index.flow.js

@@ -4,13 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
- * @noformat
+ * @flow strict-local
+ * @format
+ * @oncall react_native
  */
 
-/*:: import type {ConfigT} from 'metro-config'; */
+import type {ConfigT} from 'metro-config';
 
-const {getDefaultConfig: getBaseConfig, mergeConfig} = require('metro-config');
+import {getDefaultConfig as getBaseConfig, mergeConfig} from 'metro-config';
 
 const INTERNAL_CALLSITES_REGEX = new RegExp(
   [
@@ -36,12 +37,12 @@ const INTERNAL_CALLSITES_REGEX = new RegExp(
   ].join('|'),
 );
 
+export {mergeConfig} from 'metro-config';
+
 /**
  * Get the base Metro configuration for a React Native project.
  */
-function getDefaultConfig(
-  projectRoot /*: string */
-) /*: ConfigT */ {
+export function getDefaultConfig(projectRoot: string): ConfigT {
   const config = {
     resolver: {
       resolverMainFields: ['react-native', 'browser', 'main'],
@@ -53,15 +54,16 @@ function getDefaultConfig(
       getModulesRunBeforeMainModule: () => [
         require.resolve('react-native/Libraries/Core/InitializeCore'),
       ],
+      // $FlowFixMe[untyped-import]
       getPolyfills: () => require('@react-native/js-polyfills')(),
     },
     server: {
       port: Number(process.env.RCT_METRO_PORT) || 8081,
     },
     symbolicator: {
-      customizeFrame: (frame /*: $ReadOnly<{file: ?string, ...}>*/) => {
+      customizeFrame: (frame: $ReadOnly<{file: ?string, ...}>) => {
         const collapse = Boolean(
-          frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
+          frame.file != null && INTERNAL_CALLSITES_REGEX.test(frame.file),
         );
         return {collapse};
       },
@@ -88,10 +90,5 @@ function getDefaultConfig(
   // Set global hook so that the CLI can detect when this config has been loaded
   global.__REACT_NATIVE_METRO_CONFIG_LOADED = true;
 
-  return mergeConfig(
-    getBaseConfig.getDefaultValues(projectRoot),
-    config,
-  );
+  return mergeConfig(getBaseConfig.getDefaultValues(projectRoot), config);
 }
-
-module.exports = {getDefaultConfig, mergeConfig};

packages/metro-config/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
+ * @format
+ * @oncall react_native
+ */
+
+/*::
+export type * from './index.flow';
+*/
+
+if (!process.env.BUILD_EXCLUDE_BABEL_REGISTER) {
+  require('../../../scripts/build/babel-register').registerForMonorepo();
+}
+
+export * from './index.flow';

scripts/build/config.js

@@ -49,6 +49,10 @@ const buildConfig /*: BuildConfig */ = {
       target: 'node',
       emitTypeScriptDefs: true,
     },
+    'metro-config': {
+      target: 'node',
+      emitTypeScriptDefs: true,
+    },
   },
 };