Skip to content

Commit 2104e77

Browse files
huntieRiccardo Cipolleschi
authored andcommitted
Add @react-native/metro-config package (#36502)
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
1 parent 8a1f167 commit 2104e77

File tree

10 files changed

+183
-106
lines changed

10 files changed

+183
-106
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"@definitelytyped/dtslint": "^0.0.127",
5858
"@jest/create-cache-key-function": "^29.2.1",
5959
"@reactions/component": "^2.0.2",
60+
"@react-native/metro-config": "^0.72.0",
6061
"@types/react": "^18.0.18",
6162
"@typescript-eslint/parser": "^5.30.5",
6263
"async": "^3.2.2",

packages/metro-config/index.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
* @noformat
9+
*/
10+
11+
/*:: import type {ConfigT} from 'metro-config'; */
12+
13+
const {getDefaultConfig: getBaseConfig, mergeConfig} = require('metro-config');
14+
15+
const INTERNAL_CALLSITES_REGEX = new RegExp(
16+
[
17+
'/Libraries/Renderer/implementations/.+\\.js$',
18+
'/Libraries/BatchedBridge/MessageQueue\\.js$',
19+
'/Libraries/YellowBox/.+\\.js$',
20+
'/Libraries/LogBox/.+\\.js$',
21+
'/Libraries/Core/Timers/.+\\.js$',
22+
'/Libraries/WebSocket/.+\\.js$',
23+
'/Libraries/vendor/.+\\.js$',
24+
'/node_modules/react-devtools-core/.+\\.js$',
25+
'/node_modules/react-refresh/.+\\.js$',
26+
'/node_modules/scheduler/.+\\.js$',
27+
'/node_modules/event-target-shim/.+\\.js$',
28+
'/node_modules/invariant/.+\\.js$',
29+
'/node_modules/react-native/index.js$',
30+
'/metro-runtime/.+\\.js$',
31+
'^\\[native code\\]$',
32+
].join('|'),
33+
);
34+
35+
/**
36+
* Get the base Metro configuration for a React Native project.
37+
*/
38+
function getDefaultConfig(
39+
projectRoot /*: string */
40+
) /*: ConfigT */ {
41+
const config = {
42+
resolver: {
43+
resolverMainFields: ['react-native', 'browser', 'main'],
44+
platforms: ['android', 'ios'],
45+
unstable_conditionNames: ['import', 'require', 'react-native'],
46+
},
47+
serializer: {
48+
getPolyfills: () => require('@react-native/js-polyfills')(),
49+
},
50+
server: {
51+
port: Number(process.env.RCT_METRO_PORT) || 8081,
52+
},
53+
symbolicator: {
54+
customizeFrame: (frame /*: $ReadOnly<{file: ?string, ...}>*/) => {
55+
const collapse = Boolean(
56+
frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
57+
);
58+
return {collapse};
59+
},
60+
},
61+
transformer: {
62+
allowOptionalDependencies: true,
63+
assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
64+
asyncRequireModulePath: require.resolve(
65+
'metro-runtime/src/modules/asyncRequire',
66+
),
67+
babelTransformerPath: require.resolve(
68+
'metro-react-native-babel-transformer',
69+
),
70+
getTransformOptions: async () => ({
71+
transform: {
72+
experimentalImportSupport: false,
73+
inlineRequires: true,
74+
},
75+
}),
76+
},
77+
watchFolders: [],
78+
};
79+
80+
return mergeConfig(
81+
getBaseConfig.getDefaultValues(projectRoot),
82+
config,
83+
);
84+
}
85+
86+
module.exports = {getDefaultConfig};

packages/metro-config/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "@react-native/metro-config",
3+
"version": "0.72.0",
4+
"description": "Metro configuration for React Native.",
5+
"repository": {
6+
"type": "git",
7+
"url": "[email protected]:facebook/react-native.git",
8+
"directory": "packages/metro-config"
9+
},
10+
"license": "MIT",
11+
"exports": "./index.js",
12+
"dependencies": {
13+
"@react-native/js-polyfills": "^0.72.1",
14+
"metro-config": "0.76.0",
15+
"metro-react-native-babel-transformer": "0.76.0",
16+
"metro-runtime": "0.76.0"
17+
}
18+
}

packages/react-native/metro.config.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99

1010
'use strict';
1111

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

1516
/**
1617
* This cli config is needed for development purposes, e.g. for running
1718
* integration tests during local development or on CI services.
1819
*/
19-
module.exports = {
20+
const config = {
2021
// Make Metro able to resolve required packages that might be imported from /packages/react-native
2122
watchFolders: [
2223
path.resolve(__dirname, '../../node_modules'),
@@ -31,7 +32,6 @@ module.exports = {
3132
'react-native': __dirname,
3233
},
3334
},
34-
serializer: {
35-
getPolyfills,
36-
},
3735
};
36+
37+
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

packages/react-native/package.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@
7979
},
8080
"dependencies": {
8181
"@jest/create-cache-key-function": "^29.2.1",
82-
"@react-native-community/cli": "11.0.0-alpha.0",
83-
"@react-native-community/cli-platform-android": "11.0.0-alpha.0",
84-
"@react-native-community/cli-platform-ios": "11.0.0-alpha.0",
82+
"@react-native-community/cli": "11.0.0",
83+
"@react-native-community/cli-platform-android": "11.0.0",
84+
"@react-native-community/cli-platform-ios": "11.0.0",
8585
"@react-native/assets-registry": "^0.72.0",
8686
"@react-native/codegen": "^0.72.4",
8787
"@react-native/gradle-plugin": "^0.72.6",
88-
"@react-native/js-polyfills": "^0.72.1",
88+
"@react-native/js-polyfills": "^0.72.0",
8989
"@react-native/normalize-colors": "^0.72.0",
9090
"@react-native/virtualized-lists": "^0.72.3",
9191
"abort-controller": "^3.0.0",
@@ -98,8 +98,9 @@
9898
"jest-environment-node": "^29.2.1",
9999
"jsc-android": "^250231.0.0",
100100
"memoize-one": "^5.0.0",
101-
"metro-runtime": "0.75.1",
102-
"metro-source-map": "0.75.1",
101+
"metro-react-native-babel-transformer": "0.76.0",
102+
"metro-runtime": "0.76.0",
103+
"metro-source-map": "0.76.0",
103104
"mkdirp": "^0.5.1",
104105
"nullthrows": "^1.1.1",
105106
"pretty-format": "^26.5.2",

packages/react-native/template/metro.config.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@
55
* @format
66
*/
77

8-
module.exports = {
9-
transformer: {
10-
getTransformOptions: async () => ({
11-
transform: {
12-
experimentalImportSupport: false,
13-
inlineRequires: true,
14-
},
15-
}),
16-
},
17-
};
8+
const {getDefaultConfig} = require('@react-native/metro-config');
9+
10+
const {mergeConfig} = require('metro-config');
11+
12+
/**
13+
* Metro configuration
14+
* https://facebook.github.io/metro/docs/configuration
15+
*
16+
* @type {import('metro-config').MetroConfig}
17+
*/
18+
const config = {};
19+
20+
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

packages/react-native/template/package.json

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,21 @@
1818
"@babel/preset-env": "^7.20.0",
1919
"@babel/runtime": "^7.12.5",
2020
"@react-native/eslint-config": "^0.72.1",
21+
"@react-native/metro-config": "^0.72.0",
2122
"@tsconfig/react-native": "^2.0.2",
23+
"@types/metro-config": "^0.76.1",
2224
"@types/react": "^18.0.24",
2325
"@types/react-test-renderer": "^18.0.0",
2426
"babel-jest": "^29.2.1",
2527
"eslint": "^8.19.0",
2628
"jest": "^29.2.1",
27-
"metro-react-native-babel-preset": "0.75.1",
29+
"metro-config": "0.76.0",
30+
"metro-react-native-babel-preset": "0.76.0",
2831
"prettier": "^2.4.1",
2932
"react-test-renderer": "18.2.0",
3033
"typescript": "4.8.4"
3134
},
3235
"engines": {
3336
"node": ">=16"
34-
},
35-
"overrides": {
36-
"@react-native-community/cli": "11.0.0-alpha.0",
37-
"@react-native-community/cli-platform-android": "11.0.0-alpha.0",
38-
"@react-native-community/cli-platform-ios": "11.0.0-alpha.0",
39-
"@react-native-community/cli-plugin-metro": "11.0.0-alpha.0"
40-
},
41-
"resolutions": {
42-
"@react-native-community/cli": "11.0.0-alpha.0",
43-
"@react-native-community/cli-platform-android": "11.0.0-alpha.0",
44-
"@react-native-community/cli-platform-ios": "11.0.0-alpha.0",
45-
"@react-native-community/cli-plugin-metro": "11.0.0-alpha.0"
4637
}
4738
}

packages/rn-tester/metro.config.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,17 @@
99

1010
'use strict';
1111

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

1516
/**
1617
* This cli config is needed for development purposes, e.g. for running
1718
* integration tests during local development or on CI services.
19+
*
20+
* @type {import('metro-config').MetroConfig}
1821
*/
19-
module.exports = {
22+
const config = {
2023
// Make Metro able to resolve required external dependencies
2124
watchFolders: [
2225
path.resolve(__dirname, '../../node_modules'),
@@ -32,7 +35,6 @@ module.exports = {
3235
'react-native': path.resolve(__dirname, '../react-native'),
3336
},
3437
},
35-
serializer: {
36-
getPolyfills,
37-
},
3838
};
39+
40+
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

packages/rn-tester/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
"clean-ios": "rm -rf build/generated/ios Pods Podfile.lock"
2121
},
2222
"dependencies": {
23+
"flow-enums-runtime": "^0.0.5",
2324
"invariant": "^2.2.4",
24-
"nullthrows": "^1.1.1",
25-
"flow-enums-runtime": "^0.0.5"
25+
"nullthrows": "^1.1.1"
2626
},
2727
"peerDependencies": {
2828
"react": "18.2.0",

0 commit comments

Comments
 (0)