Skip to content

Commit

Permalink
Add @react-native/metro-config package (#36502)
Browse files Browse the repository at this point in the history
Summary:
Changelog:
[General][Added] - Add `react-native/metro-config` package

Pull Request resolved: #36502

## Context

### React Native Metro config → React Native repo (#36502)

We (the React Native team) are aiming to relocate the default Metro config for React Native out of `react-native-community/cli-plugin-metro` and **into the React Native repo + app template** as a new `react-native/metro-config` package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

**See full motivation, design, and test plan here: #36502

## Changes

- This PR adds the new `react-native/metro-config` package, reproduces all static values previously defined in RN CLI. The values which remain in RN CLI are dynamic values derived from CLI options passed by the user.

{F906910591}

Reviewed By: cortinico

Differential Revision: D44099692

fbshipit-source-id: 672a67e19d866ac2c64fc84983b5d82c604918c6
  • Loading branch information
huntie authored and Riccardo Cipolleschi committed Mar 28, 2023
1 parent 8a1f167 commit 63566d0
Show file tree
Hide file tree
Showing 11 changed files with 194 additions and 113 deletions.
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,9 @@
"@babel/generator": "^7.20.0",
"@babel/plugin-transform-regenerator": "^7.0.0",
"@definitelytyped/dtslint": "^0.0.127",
"@jest/create-cache-key-function": "^29.2.1",
"@jest/create-cache-key-function": "29.2.1",
"@reactions/component": "^2.0.2",
"@react-native/metro-config": "^0.72.0",
"@types/react": "^18.0.18",
"@typescript-eslint/parser": "^5.30.5",
"async": "^3.2.2",
Expand All @@ -81,7 +82,7 @@
"flow-bin": "^0.202.0",
"hermes-eslint": "0.8.0",
"inquirer": "^7.1.0",
"jest": "^29.2.1",
"jest": "29.2.1",
"jest-junit": "^10.0.0",
"jscodeshift": "^0.14.0",
"metro-babel-register": "0.75.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/hermes-inspector-msggen/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/preset-flow": "^7.18.0",
"jest": "^29.2.1"
"jest": "29.2.1"
},
"jest": {
"transform": {
Expand Down
86 changes: 86 additions & 0 deletions packages/metro-config/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/**
* 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
* @noformat
*/

/*:: import type {ConfigT} from 'metro-config'; */

const {getDefaultConfig: getBaseConfig, mergeConfig} = require('metro-config');

const INTERNAL_CALLSITES_REGEX = new RegExp(
[
'/Libraries/Renderer/implementations/.+\\.js$',
'/Libraries/BatchedBridge/MessageQueue\\.js$',
'/Libraries/YellowBox/.+\\.js$',
'/Libraries/LogBox/.+\\.js$',
'/Libraries/Core/Timers/.+\\.js$',
'/Libraries/WebSocket/.+\\.js$',
'/Libraries/vendor/.+\\.js$',
'/node_modules/react-devtools-core/.+\\.js$',
'/node_modules/react-refresh/.+\\.js$',
'/node_modules/scheduler/.+\\.js$',
'/node_modules/event-target-shim/.+\\.js$',
'/node_modules/invariant/.+\\.js$',
'/node_modules/react-native/index.js$',
'/metro-runtime/.+\\.js$',
'^\\[native code\\]$',
].join('|'),
);

/**
* Get the base Metro configuration for a React Native project.
*/
function getDefaultConfig(
projectRoot /*: string */
) /*: ConfigT */ {
const config = {
resolver: {
resolverMainFields: ['react-native', 'browser', 'main'],
platforms: ['android', 'ios'],
unstable_conditionNames: ['import', 'require', 'react-native'],
},
serializer: {
getPolyfills: () => require('@react-native/js-polyfills')(),
},
server: {
port: Number(process.env.RCT_METRO_PORT) || 8081,
},
symbolicator: {
customizeFrame: (frame /*: $ReadOnly<{file: ?string, ...}>*/) => {
const collapse = Boolean(
frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
);
return {collapse};
},
},
transformer: {
allowOptionalDependencies: true,
assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
asyncRequireModulePath: require.resolve(
'metro-runtime/src/modules/asyncRequire',
),
babelTransformerPath: require.resolve(
'metro-react-native-babel-transformer',
),
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
watchFolders: [],
};

return mergeConfig(
getBaseConfig.getDefaultValues(projectRoot),
config,
);
}

module.exports = {getDefaultConfig};
18 changes: 18 additions & 0 deletions packages/metro-config/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"name": "@react-native/metro-config",
"version": "0.72.0",
"description": "Metro configuration for React Native.",
"repository": {
"type": "git",
"url": "git@github.com:facebook/react-native.git",
"directory": "packages/metro-config"
},
"license": "MIT",
"exports": "./index.js",
"dependencies": {
"@react-native/js-polyfills": "^0.72.1",
"metro-config": "0.76.0",
"metro-react-native-babel-transformer": "0.76.0",
"metro-runtime": "0.76.0"
}
}
10 changes: 5 additions & 5 deletions packages/react-native/metro.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@

'use strict';

const {getDefaultConfig} = require('@react-native/metro-config');
const {mergeConfig} = require('metro-config');
const path = require('path');
const getPolyfills = require('./rn-get-polyfills');

/**
* This cli config is needed for development purposes, e.g. for running
* integration tests during local development or on CI services.
*/
module.exports = {
const config = {
// Make Metro able to resolve required packages that might be imported from /packages/react-native
watchFolders: [
path.resolve(__dirname, '../../node_modules'),
Expand All @@ -31,7 +32,6 @@ module.exports = {
'react-native': __dirname,
},
},
serializer: {
getPolyfills,
},
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
21 changes: 13 additions & 8 deletions packages/react-native/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,14 @@
"react": "18.2.0"
},
"dependencies": {
"@jest/create-cache-key-function": "^29.2.1",
"@react-native-community/cli": "11.0.0-alpha.0",
"@react-native-community/cli-platform-android": "11.0.0-alpha.0",
"@react-native-community/cli-platform-ios": "11.0.0-alpha.0",
"@jest/create-cache-key-function": "29.2.1",
"@react-native-community/cli": "11.0.0",
"@react-native-community/cli-platform-android": "11.0.0",
"@react-native-community/cli-platform-ios": "11.0.0",
"@react-native/assets-registry": "^0.72.0",
"@react-native/codegen": "^0.72.4",
"@react-native/gradle-plugin": "^0.72.6",
"@react-native/js-polyfills": "^0.72.1",
"@react-native/js-polyfills": "^0.72.0",
"@react-native/normalize-colors": "^0.72.0",
"@react-native/virtualized-lists": "^0.72.3",
"abort-controller": "^3.0.0",
Expand All @@ -95,11 +95,12 @@
"event-target-shim": "^5.0.1",
"flow-enums-runtime": "^0.0.5",
"invariant": "^2.2.4",
"jest-environment-node": "^29.2.1",
"jest-environment-node": "29.2.1",
"jsc-android": "^250231.0.0",
"memoize-one": "^5.0.0",
"metro-runtime": "0.75.1",
"metro-source-map": "0.75.1",
"metro-react-native-babel-transformer": "0.76.0",
"metro-runtime": "0.76.0",
"metro-source-map": "0.76.0",
"mkdirp": "^0.5.1",
"nullthrows": "^1.1.1",
"pretty-format": "^26.5.2",
Expand Down Expand Up @@ -132,5 +133,9 @@
"jsSrcsDir": "Libraries"
}
]
},
"resolutions": {
"@jest/create-cache-key-function": "29.2.1",
"jest-environment-node": "29.2.1"
}
}
23 changes: 13 additions & 10 deletions packages/react-native/template/metro.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@
* @format
*/

module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
const {getDefaultConfig} = require('@react-native/metro-config');

const {mergeConfig} = require('metro-config');

/**
* Metro configuration
* https://facebook.github.io/metro/docs/configuration
*
* @type {import('metro-config').MetroConfig}
*/
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
21 changes: 6 additions & 15 deletions packages/react-native/template/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,21 @@
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.12.5",
"@react-native/eslint-config": "^0.72.1",
"@react-native/metro-config": "^0.72.0",
"@tsconfig/react-native": "^2.0.2",
"@types/metro-config": "^0.76.1",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"babel-jest": "29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.75.1",
"jest": "29.2.1",
"metro-config": "0.76.0",
"metro-react-native-babel-preset": "0.76.0",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"engines": {
"node": ">=16"
},
"overrides": {
"@react-native-community/cli": "11.0.0-alpha.0",
"@react-native-community/cli-platform-android": "11.0.0-alpha.0",
"@react-native-community/cli-platform-ios": "11.0.0-alpha.0",
"@react-native-community/cli-plugin-metro": "11.0.0-alpha.0"
},
"resolutions": {
"@react-native-community/cli": "11.0.0-alpha.0",
"@react-native-community/cli-platform-android": "11.0.0-alpha.0",
"@react-native-community/cli-platform-ios": "11.0.0-alpha.0",
"@react-native-community/cli-plugin-metro": "11.0.0-alpha.0"
}
}
12 changes: 7 additions & 5 deletions packages/rn-tester/metro.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,17 @@

'use strict';

const {getDefaultConfig} = require('@react-native/metro-config');
const {mergeConfig} = require('metro-config');
const path = require('path');
const getPolyfills = require('../react-native/rn-get-polyfills');

/**
* This cli config is needed for development purposes, e.g. for running
* integration tests during local development or on CI services.
*
* @type {import('metro-config').MetroConfig}
*/
module.exports = {
const config = {
// Make Metro able to resolve required external dependencies
watchFolders: [
path.resolve(__dirname, '../../node_modules'),
Expand All @@ -32,7 +35,6 @@ module.exports = {
'react-native': path.resolve(__dirname, '../react-native'),
},
},
serializer: {
getPolyfills,
},
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
4 changes: 2 additions & 2 deletions packages/rn-tester/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
"clean-ios": "rm -rf build/generated/ios Pods Podfile.lock"
},
"dependencies": {
"flow-enums-runtime": "^0.0.5",
"invariant": "^2.2.4",
"nullthrows": "^1.1.1",
"flow-enums-runtime": "^0.0.5"
"nullthrows": "^1.1.1"
},
"peerDependencies": {
"react": "18.2.0",
Expand Down

0 comments on commit 63566d0

Please sign in to comment.