Skip to content

Commit

Permalink
Bump RN CLI, add @react-native/metro-config to template (#36623)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #36623

Changelog:
[General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps.

~~`react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).~~

#publish-packages-to-npm

## 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 (which previewed the CLI bump) here: #36502

## Changes

NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after react-native-community/cli#1875 is merged.

- Upgrade `react-native-community/cli` to `11.0.0`, upgrade all `metro` packages to `0.76.0` (version distributed in this CLI release).
- Update the `metro.config.js` file in `packages/react-native/template/`.
    - Now merges defaults from `react-native/metro-config`, and can be used with CLI >= 11.0.0.
- Update the `metro.config.js` files for `packages/react-native/` and `packages/rn-tester/` (these are integration test locations).
    - Now merges defaults from `react-native/metro-config`, and can be used with CLI >= 11.0.0.

Changes to `react-native/metro-config` — `0.72.1` (prepared but not depended on yet):

- Export `mergeConfig` util (removing direct `metro-config` dependency in consuming projects).
- Explicitly depend on `metro-react-native-babel-transformer` and `metro-runtime` (transitively included today).

Reviewed By: cortinico, blakef

Differential Revision: D44099691

fbshipit-source-id: 405635dd69fd50a1e9548279eaeda3c932b5b167
  • Loading branch information
huntie authored and facebook-github-bot committed Mar 30, 2023
1 parent d1277df commit c5a47ab
Show file tree
Hide file tree
Showing 11 changed files with 291 additions and 270 deletions.
22 changes: 18 additions & 4 deletions jest/preprocessor.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,26 @@ const nodeFiles = new RegExp(
].join('|'),
);

// Use metro-babel-register to build the Babel configuration we need for Node
// files, but Jest takes care of hooking require so we don't actually register
// Babel here.
// Get Babel config from metro-babel-register, without registering against
// `require`. This is used below to configure babelTransformSync under Jest.
const nodeOptions = babelRegisterOnly.config([nodeFiles]);

const transformer = require('metro-react-native-babel-transformer');
let transformer;

try {
transformer = require('metro-react-native-babel-transformer');
} catch (e) {
if (e.name !== 'SyntaxError') {
throw e;
}

// [fbsource only] When Metro dependency versions match the latest release,
// they are loaded from source (facebook/metro lives inside Meta's monorepo).
// We need babel-register to use the transformer in this configuration file.
babelRegisterOnly([]);
transformer = require('metro-react-native-babel-transformer');
}

module.exports = {
process(src /*: string */, file /*: string */) /*: {code: string, ...} */ {
if (nodeFiles.test(file)) {
Expand Down
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"@definitelytyped/dtslint": "^0.0.127",
"@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 @@ -83,9 +84,9 @@
"jest": "^29.2.1",
"jest-junit": "^10.0.0",
"jscodeshift": "^0.14.0",
"metro-babel-register": "0.75.1",
"metro-memory-fs": "0.75.1",
"metro-react-native-babel-transformer": "0.75.1",
"metro-babel-register": "0.76.0",
"metro-memory-fs": "0.76.0",
"metro-react-native-babel-transformer": "0.76.0",
"mkdirp": "^0.5.1",
"mock-fs": "^5.1.4",
"prettier": "^2.4.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/metro-config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,4 @@ function getDefaultConfig(
);
}

module.exports = {getDefaultConfig};
module.exports = {getDefaultConfig, mergeConfig};
6 changes: 4 additions & 2 deletions packages/metro-config/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@react-native/metro-config",
"version": "0.72.0",
"version": "0.72.1",
"description": "Metro configuration for React Native.",
"repository": {
"type": "git",
Expand All @@ -11,6 +11,8 @@
"exports": "./index.js",
"dependencies": {
"@react-native/js-polyfills": "^0.72.1",
"metro-config": "0.75.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);
11 changes: 6 additions & 5 deletions packages/react-native/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@
},
"dependencies": {
"@jest/create-cache-key-function": "^29.2.1",
"@react-native-community/cli": "11.0.0-alpha.2",
"@react-native-community/cli-platform-android": "11.0.0-alpha.2",
"@react-native-community/cli-platform-ios": "11.0.0-alpha.2",
"@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.3",
"@react-native/gradle-plugin": "^0.72.5",
Expand All @@ -98,8 +98,9 @@
"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
21 changes: 8 additions & 13 deletions packages/react-native/template/metro.config.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
const {getDefaultConfig} = require('@react-native/metro-config');
const {mergeConfig} = require('metro-config');

/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
* Metro configuration
* https://facebook.github.io/metro/docs/configuration
*
* @format
* @type {import('metro-config').MetroConfig}
*/
const config = {};

module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
17 changes: 4 additions & 13 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",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.75.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
Loading

0 comments on commit c5a47ab

Please sign in to comment.