Skip to content

Add shared monorepo build setup - #38240

Closed
huntie wants to merge 1 commit into
react:mainfrom
huntie:export-D46759508
Closed

Add shared monorepo build setup#38240
huntie wants to merge 1 commit into
react:mainfrom
huntie:export-D46759508

Conversation

@huntie

@huntiehuntie commented Jul 7, 2023•
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary:

Context

RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641

Changes

To support incoming new React Native packages around debugging (including migrating over @react-native-community/cli-plugin-metro) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the react-native monorepo.

The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:

  • yarn build
  • yarn clean
  • yarn watch
image

Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and packages are opted-in to requiring a build, configured in scripts/build.config.js.

constbuildConfig/*: BuildConfig */={// The packages to include for build and their build optionspackages: {'dev-middleware': {target: 'node'},},};

For now, there is a single target: 'node' option — this is necessary as react-native, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.

Current integration points

  • .circleci/config.yml — Added to run_yarn (with project install).
  • Root yarn start — Convenience for local developers.
  • yarn start within packages/rn-tester — Convenience for local developers.

Planned: I will be adding notes on yarn build to the following "Contributing" website pages:

This is not load bearing quite yet: There are not yet any built packages added to the dependencies of packages/react-native/, so this will be further tested in a later PR (internally stacked as the next change).

Alternative designs

Per-package config file

Replace scripts/build/config.js with a package-defined key in in package.json, similar to Jest's publishConfig.

"buildConfig": {
"type": "node"
},

This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is enableTypeScriptCodgeen.

Rollup

More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).

Lerna and Nx

  • Most sophisticated setup enabling caching and optimised cloud runs.
  • Probably the most likely thing we'll move towards at a later stage.

Changelog: [Internal]

Differential Revision: D46759508

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner fb-exported labels Jul 7, 2023
@facebook-github-bot

facebook-github-bot commented Jul 7, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

@github-actions

github-actionsBot commented Jul 7, 2023•
edited
Loading

Copy link
Copy Markdown
Warnings
⚠️🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 87edd0e

@huntiehuntie mentioned this pull request Jul 7, 2023
Merged
@huntie

This comment was marked as resolved.

Sign in to view
@analysis-bot

analysis-bot commented Jul 7, 2023•
edited
Loading

Copy link
Copy Markdown
PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,836,447+4
androidhermesarmeabi-v7a8,146,331+0
androidhermesx869,341,813+0
androidhermesx86_649,184,550+2
androidjscarm64-v8a9,448,262+3
androidjscarmeabi-v7a8,630,015+0
androidjscx869,530,933+0
androidjscx86_649,774,146+1

Base commit: 0cdb9e6
Branch: main

@facebook-github-bot

facebook-github-bot commented Jul 7, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

@huntie
huntieforce-pushed the export-D46759508 branch from dc788cf to 2f4e80aCompareJuly 7, 2023 16:41
Pranav-yadav
Pranav-yadav reviewed Jul 8, 2023
View reviewed changes
Comment threadpackages/dev-middleware/package.json Outdated
Comment on lines 21 to 26

@Pranav-yadavPranav-yadavJul 8, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we going to publish this package? If yes, how do we want to provide these scripts and devDeps. to consumer. Context: There's no "private": true field...

@huntiehuntieJul 10, 2023

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this package will be published (and depended on in upcoming changes). These scripts are now managed at the repo level.

@Pranav-yadavPranav-yadavJul 21, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. 👍

dmytrorykun pushed a commit to dmytrorykun/react-native that referenced this pull request Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b8d6219
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 80f0b59d13bdd42b1b857816e7329ac01f597ee6
dmytrorykun pushed a commit to dmytrorykun/react-native that referenced this pull request Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
7c3f167
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 16ce03a7135f461b1e7e7df91369d07c794fc61c
dmytrorykun pushed a commit to dmytrorykun/react-native that referenced this pull request Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
dc3f803
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e
@facebook-github-bot

facebook-github-bot commented Jul 10, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

dmytrorykun pushed a commit to dmytrorykun/react-native that referenced this pull request Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b7a8dcf
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee
@facebook-github-bot

facebook-github-bot commented Jul 10, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

@facebook-github-bot

facebook-github-bot commented Jul 11, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

@huntie
huntieforce-pushed the export-D46759508 branch 2 times, most recently from a16af8d to cccaa32CompareJuly 11, 2023 12:58
@facebook-github-bot

facebook-github-bot commented Jul 11, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

@facebook-github-bot

facebook-github-bot commented Jul 11, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

1 similar comment
@facebook-github-bot

facebook-github-bot commented Jul 13, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

@huntie@facebook-github-bot
Add shared monorepo build setup (#38240)
87edd0e
Summary:
Pull Request resolved: #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 4206f213caf6961969dcbdc6a6143cd938e33326
@facebook-github-bot

facebook-github-bot commented Jul 18, 2023

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D46759508

Pranav-yadav
Pranav-yadav reviewed Jul 21, 2023
View reviewed changes
Comment threadpackage.json
},
"scripts": {
"start": "cd packages/rn-tester && npm run start",
"postinstall": "yarn build",

@Pranav-yadavPranav-yadavJul 21, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will u pls explain how this is going to help ?

Pranav-yadav
Pranav-yadav reviewed Jul 21, 2023
View reviewed changes
Comment threadpackage.json
Comment on lines +17 to +19
"build": "node ./scripts/build/build.js",
"clean": "node ./scripts/build/clean.js",
"watch": "yarn build && node ./scripts/build/watch.js",

@Pranav-yadavPranav-yadavJul 21, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's no need for an extra watch script.
We can just have a "single build script" which takes --watch.
That would be awesome.
WDYT?

Pranav-yadav
Pranav-yadav reviewed Jul 21, 2023
View reviewed changes
Comment threadscripts/build/build.js
const config = {
allowPositionals: true,
options: {
help: {type: 'boolean'},

@Pranav-yadavPranav-yadavJul 21, 2023•
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here , adding watch option and calling watch() if provided, could make things better, as I said above.
Context: someCmd build --watch pattern is widely used for generations :)

Pranav-yadav
Pranav-yadav reviewed Jul 21, 2023
View reviewed changes
Comment threadscripts/build/clean.js
}

for (const packageName of Object.keys(buildConfig.packages)) {
fs.rmSync(path.join(PACKAGES_DIR, packageName, BUILD_DIR), {

@Pranav-yadavPranav-yadavJul 21, 2023•
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this fail or block, if the stuff it's trying to rm is in use? It's rmSync that's why...

@huntie

huntie commented Jul 25, 2023

Copy link
Copy Markdown
CollaboratorAuthor

Abandoning in favour of a runnable-from-source approach (that still includes build) — will be a separate PR replacing this.

@huntiehuntie closed this Jul 25, 2023
@huntie
huntie deleted the export-D46759508 branch July 25, 2023 16:31
@huntiehuntie mentioned this pull request Aug 1, 2023
Closed
facebook-github-bot pushed a commit that referenced this pull request Aug 3, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (#38718)
cd8f5d1
Summary:
Pull Request resolved: #38718
> NOTE: Replaces #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo:
- `yarn build` — Builds all configured packages. Functionally, this:
- Outputs a `dist/` directory with built files.
- Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth).
- `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`)
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
**Differences from the Metro setup**
- References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency.
## Current integration points
- **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs.
**New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack).
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47760330
fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@Pranav-yadavPranav-yadavPranav-yadav left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.fb-exportedp: FacebookPartner: FacebookPartner

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@huntie@facebook-github-bot@analysis-bot@Pranav-yadav
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Add shared monorepo build setup by huntie · Pull Request #38240 · react/react-native · GitHub
Skip to content
Add shared monorepo build setup - #38240
Closed
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Closed
Add shared monorepo build setup#38240
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Conversation
@huntie
@huntiehuntie
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Collaborator
Summary:
Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
Changes
To support incoming new React Native packages around debugging (including migrating over @react-native-community/cli-plugin-metro) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the react-native monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
  • yarn build
  • yarn clean
  • yarn watch
image
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and packages are opted-in to requiring a build, configured in scripts/build.config.js.
constbuildConfig/*: BuildConfig */={// The packages to include for build and their build optionspackages: {'dev-middleware': {target: 'node'},},};
For now, there is a single target: 'node' option — this is necessary as react-native, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
Current integration points
  • .circleci/config.yml — Added to run_yarn (with project install).
  • Root yarn start — Convenience for local developers.
  • yarn start within packages/rn-tester — Convenience for local developers.
Planned: I will be adding notes on yarn build to the following "Contributing" website pages:
This is not load bearing quite yet: There are not yet any built packages added to the dependencies of packages/react-native/, so this will be further tested in a later PR (internally stacked as the next change).
Alternative designs
Per-package config file
Replace scripts/build/config.js with a package-defined key in in package.json, similar to Jest's publishConfig.
"buildConfig": {
"type": "node"
},
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is enableTypeScriptCodgeen.
Rollup
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
Lerna and Nx
  • Most sophisticated setup enabling caching and optimised cloud runs.
  • Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
@facebook-github-botfacebook-github-bot
added

CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
p: Facebook
Partner: Facebook
Partner

fb-exported

labels
Jul 7, 2023
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@github-actions
github-actionsBot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Warnings
⚠️🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 87edd0e
@huntiehuntie
mentioned this pull request
Jul 7, 2023
 Merged

@huntie

This comment was marked as resolved.

Sign in to view
@analysis-bot
analysis-bot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,836,447+4
androidhermesarmeabi-v7a8,146,331+0
androidhermesx869,341,813+0
androidhermesx86_649,184,550+2
androidjscarm64-v8a9,448,262+3
androidjscarmeabi-v7a8,630,015+0
androidjscx869,530,933+0
androidjscx86_649,774,146+1
Base commit: 0cdb9e6

Branch: main
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
from
dc788cf to
2f4e80aCompareJuly 7, 2023 16:41
Pranav-yadav
Pranav-yadav
reviewed
Jul 8, 2023
View reviewed changes
Comment threadpackages/dev-middleware/package.json
Outdated


Comment on lines

21
 to 
26

@Pranav-yadavPranav-yadavJul 8, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we going to publish this package? If yes, how do we want to provide these scripts and devDeps. to consumer. Context: There's no "private": true field...
@huntiehuntieJul 10, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this package will be published (and depended on in upcoming changes). These scripts are now managed at the repo level.
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. 👍
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b8d6219
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 80f0b59d13bdd42b1b857816e7329ac01f597ee6
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
7c3f167
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 16ce03a7135f461b1e7e7df91369d07c794fc61c
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
dc3f803
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b7a8dcf
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
2 times, most recently
from
a16af8d to
cccaa32CompareJuly 11, 2023 12:58
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508

1 similar comment

@facebook-github-bot
facebook-github-bot
commented
Jul 13, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie@facebook-github-bot
Add shared monorepo build setup (#38240)
87edd0e
Summary:
Pull Request resolved: #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 4206f213caf6961969dcbdc6a6143cd938e33326
@facebook-github-bot
facebook-github-bot
commented
Jul 18, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json
 },
 "scripts": {
 "start": "cd packages/rn-tester && npm run start",
 "postinstall": "yarn build",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will u pls explain how this is going to help ?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json

Comment on lines

+17
 to 
+19

 "build": "node ./scripts/build/build.js",
 "clean": "node ./scripts/build/clean.js",
 "watch": "yarn build && node ./scripts/build/watch.js",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's no need for an extra watch script.

We can just have a "single build script" which takes --watch.

That would be awesome.

WDYT?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/build.js
const config = {
 allowPositionals: true,
 options: {
 help: {type: 'boolean'},
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here , adding watch option and calling watch() if provided, could make things better, as I said above.

Context: someCmd build --watch pattern is widely used for generations :)
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/clean.js
 }

 for (const packageName of Object.keys(buildConfig.packages)) {
 fs.rmSync(path.join(PACKAGES_DIR, packageName, BUILD_DIR), {
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this fail or block, if the stuff it's trying to rm is in use? It's rmSync that's why...
@huntie
huntie
commented
Jul 25, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Abandoning in favour of a runnable-from-source approach (that still includes build) — will be a separate PR replacing this.
@huntiehuntie
closed this
Jul 25, 2023
@huntie
huntie
deleted the

export-D46759508

branch
July 25, 2023 16:31
@huntiehuntie
mentioned this pull request
Aug 1, 2023
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Aug 3, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (#38718)
cd8f5d1
Summary:
Pull Request resolved: #38718
> NOTE: Replaces #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo:
- `yarn build` — Builds all configured packages. Functionally, this:
- Outputs a `dist/` directory with built files.
- Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth).
- `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`)
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
**Differences from the Metro setup**
- References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency.
## Current integration points
- **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs.
**New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack).
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47760330
fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


1 more reviewer

@Pranav-yadavPranav-yadavPranav-yadav left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.fb-exportedp: FacebookPartner: FacebookPartner

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@huntie@facebook-github-bot@analysis-bot@Pranav-yadav

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add shared monorepo build setup by huntie · Pull Request #38240 · react/react-native · GitHub
Skip to content
Add shared monorepo build setup - #38240
Closed
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Closed
Add shared monorepo build setup#38240
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Conversation
@huntie
@huntiehuntie
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Collaborator
Summary:
Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
Changes
To support incoming new React Native packages around debugging (including migrating over @react-native-community/cli-plugin-metro) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the react-native monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
  • yarn build
  • yarn clean
  • yarn watch
image
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and packages are opted-in to requiring a build, configured in scripts/build.config.js.
constbuildConfig/*: BuildConfig */={// The packages to include for build and their build optionspackages: {'dev-middleware': {target: 'node'},},};
For now, there is a single target: 'node' option — this is necessary as react-native, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
Current integration points
  • .circleci/config.yml — Added to run_yarn (with project install).
  • Root yarn start — Convenience for local developers.
  • yarn start within packages/rn-tester — Convenience for local developers.
Planned: I will be adding notes on yarn build to the following "Contributing" website pages:
This is not load bearing quite yet: There are not yet any built packages added to the dependencies of packages/react-native/, so this will be further tested in a later PR (internally stacked as the next change).
Alternative designs
Per-package config file
Replace scripts/build/config.js with a package-defined key in in package.json, similar to Jest's publishConfig.
"buildConfig": {
"type": "node"
},
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is enableTypeScriptCodgeen.
Rollup
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
Lerna and Nx
  • Most sophisticated setup enabling caching and optimised cloud runs.
  • Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
@facebook-github-botfacebook-github-bot
added

CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
p: Facebook
Partner: Facebook
Partner

fb-exported

labels
Jul 7, 2023
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@github-actions
github-actionsBot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Warnings
⚠️🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 87edd0e
@huntiehuntie
mentioned this pull request
Jul 7, 2023
 Merged

@huntie

This comment was marked as resolved.

Sign in to view
@analysis-bot
analysis-bot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,836,447+4
androidhermesarmeabi-v7a8,146,331+0
androidhermesx869,341,813+0
androidhermesx86_649,184,550+2
androidjscarm64-v8a9,448,262+3
androidjscarmeabi-v7a8,630,015+0
androidjscx869,530,933+0
androidjscx86_649,774,146+1
Base commit: 0cdb9e6

Branch: main
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
from
dc788cf to
2f4e80aCompareJuly 7, 2023 16:41
Pranav-yadav
Pranav-yadav
reviewed
Jul 8, 2023
View reviewed changes
Comment threadpackages/dev-middleware/package.json
Outdated


Comment on lines

21
 to 
26

@Pranav-yadavPranav-yadavJul 8, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we going to publish this package? If yes, how do we want to provide these scripts and devDeps. to consumer. Context: There's no "private": true field...
@huntiehuntieJul 10, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this package will be published (and depended on in upcoming changes). These scripts are now managed at the repo level.
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. 👍
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b8d6219
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 80f0b59d13bdd42b1b857816e7329ac01f597ee6
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
7c3f167
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 16ce03a7135f461b1e7e7df91369d07c794fc61c
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
dc3f803
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b7a8dcf
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
2 times, most recently
from
a16af8d to
cccaa32CompareJuly 11, 2023 12:58
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508

1 similar comment

@facebook-github-bot
facebook-github-bot
commented
Jul 13, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie@facebook-github-bot
Add shared monorepo build setup (#38240)
87edd0e
Summary:
Pull Request resolved: #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 4206f213caf6961969dcbdc6a6143cd938e33326
@facebook-github-bot
facebook-github-bot
commented
Jul 18, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json
 },
 "scripts": {
 "start": "cd packages/rn-tester && npm run start",
 "postinstall": "yarn build",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will u pls explain how this is going to help ?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json

Comment on lines

+17
 to 
+19

 "build": "node ./scripts/build/build.js",
 "clean": "node ./scripts/build/clean.js",
 "watch": "yarn build && node ./scripts/build/watch.js",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's no need for an extra watch script.

We can just have a "single build script" which takes --watch.

That would be awesome.

WDYT?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/build.js
const config = {
 allowPositionals: true,
 options: {
 help: {type: 'boolean'},
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here , adding watch option and calling watch() if provided, could make things better, as I said above.

Context: someCmd build --watch pattern is widely used for generations :)
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/clean.js
 }

 for (const packageName of Object.keys(buildConfig.packages)) {
 fs.rmSync(path.join(PACKAGES_DIR, packageName, BUILD_DIR), {
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this fail or block, if the stuff it's trying to rm is in use? It's rmSync that's why...
@huntie
huntie
commented
Jul 25, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Abandoning in favour of a runnable-from-source approach (that still includes build) — will be a separate PR replacing this.
@huntiehuntie
closed this
Jul 25, 2023
@huntie
huntie
deleted the

export-D46759508

branch
July 25, 2023 16:31
@huntiehuntie
mentioned this pull request
Aug 1, 2023
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Aug 3, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (#38718)
cd8f5d1
Summary:
Pull Request resolved: #38718
> NOTE: Replaces #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo:
- `yarn build` — Builds all configured packages. Functionally, this:
- Outputs a `dist/` directory with built files.
- Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth).
- `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`)
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
**Differences from the Metro setup**
- References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency.
## Current integration points
- **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs.
**New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack).
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47760330
fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


1 more reviewer

@Pranav-yadavPranav-yadavPranav-yadav left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.fb-exportedp: FacebookPartner: FacebookPartner

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@huntie@facebook-github-bot@analysis-bot@Pranav-yadav

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add shared monorepo build setup by huntie · Pull Request #38240 · react/react-native · GitHub
Skip to content
Add shared monorepo build setup - #38240
Closed
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Closed
Add shared monorepo build setup#38240
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Conversation
@huntie
@huntiehuntie
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Collaborator
Summary:
Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
Changes
To support incoming new React Native packages around debugging (including migrating over @react-native-community/cli-plugin-metro) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the react-native monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
  • yarn build
  • yarn clean
  • yarn watch
image
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and packages are opted-in to requiring a build, configured in scripts/build.config.js.
constbuildConfig/*: BuildConfig */={// The packages to include for build and their build optionspackages: {'dev-middleware': {target: 'node'},},};
For now, there is a single target: 'node' option — this is necessary as react-native, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
Current integration points
  • .circleci/config.yml — Added to run_yarn (with project install).
  • Root yarn start — Convenience for local developers.
  • yarn start within packages/rn-tester — Convenience for local developers.
Planned: I will be adding notes on yarn build to the following "Contributing" website pages:
This is not load bearing quite yet: There are not yet any built packages added to the dependencies of packages/react-native/, so this will be further tested in a later PR (internally stacked as the next change).
Alternative designs
Per-package config file
Replace scripts/build/config.js with a package-defined key in in package.json, similar to Jest's publishConfig.
"buildConfig": {
"type": "node"
},
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is enableTypeScriptCodgeen.
Rollup
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
Lerna and Nx
  • Most sophisticated setup enabling caching and optimised cloud runs.
  • Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
@facebook-github-botfacebook-github-bot
added

CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
p: Facebook
Partner: Facebook
Partner

fb-exported

labels
Jul 7, 2023
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@github-actions
github-actionsBot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Warnings
⚠️🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 87edd0e
@huntiehuntie
mentioned this pull request
Jul 7, 2023
 Merged

@huntie

This comment was marked as resolved.

Sign in to view
@analysis-bot
analysis-bot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,836,447+4
androidhermesarmeabi-v7a8,146,331+0
androidhermesx869,341,813+0
androidhermesx86_649,184,550+2
androidjscarm64-v8a9,448,262+3
androidjscarmeabi-v7a8,630,015+0
androidjscx869,530,933+0
androidjscx86_649,774,146+1
Base commit: 0cdb9e6

Branch: main
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
from
dc788cf to
2f4e80aCompareJuly 7, 2023 16:41
Pranav-yadav
Pranav-yadav
reviewed
Jul 8, 2023
View reviewed changes
Comment threadpackages/dev-middleware/package.json
Outdated


Comment on lines

21
 to 
26

@Pranav-yadavPranav-yadavJul 8, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we going to publish this package? If yes, how do we want to provide these scripts and devDeps. to consumer. Context: There's no "private": true field...
@huntiehuntieJul 10, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this package will be published (and depended on in upcoming changes). These scripts are now managed at the repo level.
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. 👍
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b8d6219
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 80f0b59d13bdd42b1b857816e7329ac01f597ee6
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
7c3f167
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 16ce03a7135f461b1e7e7df91369d07c794fc61c
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
dc3f803
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b7a8dcf
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
2 times, most recently
from
a16af8d to
cccaa32CompareJuly 11, 2023 12:58
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508

1 similar comment

@facebook-github-bot
facebook-github-bot
commented
Jul 13, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie@facebook-github-bot
Add shared monorepo build setup (#38240)
87edd0e
Summary:
Pull Request resolved: #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 4206f213caf6961969dcbdc6a6143cd938e33326
@facebook-github-bot
facebook-github-bot
commented
Jul 18, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json
 },
 "scripts": {
 "start": "cd packages/rn-tester && npm run start",
 "postinstall": "yarn build",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will u pls explain how this is going to help ?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json

Comment on lines

+17
 to 
+19

 "build": "node ./scripts/build/build.js",
 "clean": "node ./scripts/build/clean.js",
 "watch": "yarn build && node ./scripts/build/watch.js",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's no need for an extra watch script.

We can just have a "single build script" which takes --watch.

That would be awesome.

WDYT?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/build.js
const config = {
 allowPositionals: true,
 options: {
 help: {type: 'boolean'},
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here , adding watch option and calling watch() if provided, could make things better, as I said above.

Context: someCmd build --watch pattern is widely used for generations :)
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/clean.js
 }

 for (const packageName of Object.keys(buildConfig.packages)) {
 fs.rmSync(path.join(PACKAGES_DIR, packageName, BUILD_DIR), {
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this fail or block, if the stuff it's trying to rm is in use? It's rmSync that's why...
@huntie
huntie
commented
Jul 25, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Abandoning in favour of a runnable-from-source approach (that still includes build) — will be a separate PR replacing this.
@huntiehuntie
closed this
Jul 25, 2023
@huntie
huntie
deleted the

export-D46759508

branch
July 25, 2023 16:31
@huntiehuntie
mentioned this pull request
Aug 1, 2023
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Aug 3, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (#38718)
cd8f5d1
Summary:
Pull Request resolved: #38718
> NOTE: Replaces #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo:
- `yarn build` — Builds all configured packages. Functionally, this:
- Outputs a `dist/` directory with built files.
- Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth).
- `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`)
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
**Differences from the Metro setup**
- References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency.
## Current integration points
- **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs.
**New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack).
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47760330
fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


1 more reviewer

@Pranav-yadavPranav-yadavPranav-yadav left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.fb-exportedp: FacebookPartner: FacebookPartner

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@huntie@facebook-github-bot@analysis-bot@Pranav-yadav

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Add shared monorepo build setup by huntie · Pull Request #38240 · react/react-native · GitHub
Skip to content
Add shared monorepo build setup - #38240
Closed
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Closed
Add shared monorepo build setup#38240
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Conversation
@huntie
@huntiehuntie
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Collaborator
Summary:
Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
Changes
To support incoming new React Native packages around debugging (including migrating over @react-native-community/cli-plugin-metro) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the react-native monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
  • yarn build
  • yarn clean
  • yarn watch
image
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and packages are opted-in to requiring a build, configured in scripts/build.config.js.
constbuildConfig/*: BuildConfig */={// The packages to include for build and their build optionspackages: {'dev-middleware': {target: 'node'},},};
For now, there is a single target: 'node' option — this is necessary as react-native, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
Current integration points
  • .circleci/config.yml — Added to run_yarn (with project install).
  • Root yarn start — Convenience for local developers.
  • yarn start within packages/rn-tester — Convenience for local developers.
Planned: I will be adding notes on yarn build to the following "Contributing" website pages:
This is not load bearing quite yet: There are not yet any built packages added to the dependencies of packages/react-native/, so this will be further tested in a later PR (internally stacked as the next change).
Alternative designs
Per-package config file
Replace scripts/build/config.js with a package-defined key in in package.json, similar to Jest's publishConfig.
"buildConfig": {
"type": "node"
},
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is enableTypeScriptCodgeen.
Rollup
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
Lerna and Nx
  • Most sophisticated setup enabling caching and optimised cloud runs.
  • Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
@facebook-github-botfacebook-github-bot
added

CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
p: Facebook
Partner: Facebook
Partner

fb-exported

labels
Jul 7, 2023
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@github-actions
github-actionsBot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Warnings
⚠️🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 87edd0e
@huntiehuntie
mentioned this pull request
Jul 7, 2023
 Merged

@huntie

This comment was marked as resolved.

Sign in to view
@analysis-bot
analysis-bot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,836,447+4
androidhermesarmeabi-v7a8,146,331+0
androidhermesx869,341,813+0
androidhermesx86_649,184,550+2
androidjscarm64-v8a9,448,262+3
androidjscarmeabi-v7a8,630,015+0
androidjscx869,530,933+0
androidjscx86_649,774,146+1
Base commit: 0cdb9e6

Branch: main
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
from
dc788cf to
2f4e80aCompareJuly 7, 2023 16:41
Pranav-yadav
Pranav-yadav
reviewed
Jul 8, 2023
View reviewed changes
Comment threadpackages/dev-middleware/package.json
Outdated


Comment on lines

21
 to 
26

@Pranav-yadavPranav-yadavJul 8, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we going to publish this package? If yes, how do we want to provide these scripts and devDeps. to consumer. Context: There's no "private": true field...
@huntiehuntieJul 10, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this package will be published (and depended on in upcoming changes). These scripts are now managed at the repo level.
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. 👍
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b8d6219
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 80f0b59d13bdd42b1b857816e7329ac01f597ee6
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
7c3f167
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 16ce03a7135f461b1e7e7df91369d07c794fc61c
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
dc3f803
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b7a8dcf
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
2 times, most recently
from
a16af8d to
cccaa32CompareJuly 11, 2023 12:58
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508

1 similar comment

@facebook-github-bot
facebook-github-bot
commented
Jul 13, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie@facebook-github-bot
Add shared monorepo build setup (#38240)
87edd0e
Summary:
Pull Request resolved: #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 4206f213caf6961969dcbdc6a6143cd938e33326
@facebook-github-bot
facebook-github-bot
commented
Jul 18, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json
 },
 "scripts": {
 "start": "cd packages/rn-tester && npm run start",
 "postinstall": "yarn build",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will u pls explain how this is going to help ?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json

Comment on lines

+17
 to 
+19

 "build": "node ./scripts/build/build.js",
 "clean": "node ./scripts/build/clean.js",
 "watch": "yarn build && node ./scripts/build/watch.js",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's no need for an extra watch script.

We can just have a "single build script" which takes --watch.

That would be awesome.

WDYT?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/build.js
const config = {
 allowPositionals: true,
 options: {
 help: {type: 'boolean'},
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here , adding watch option and calling watch() if provided, could make things better, as I said above.

Context: someCmd build --watch pattern is widely used for generations :)
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/clean.js
 }

 for (const packageName of Object.keys(buildConfig.packages)) {
 fs.rmSync(path.join(PACKAGES_DIR, packageName, BUILD_DIR), {
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this fail or block, if the stuff it's trying to rm is in use? It's rmSync that's why...
@huntie
huntie
commented
Jul 25, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Abandoning in favour of a runnable-from-source approach (that still includes build) — will be a separate PR replacing this.
@huntiehuntie
closed this
Jul 25, 2023
@huntie
huntie
deleted the

export-D46759508

branch
July 25, 2023 16:31
@huntiehuntie
mentioned this pull request
Aug 1, 2023
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Aug 3, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (#38718)
cd8f5d1
Summary:
Pull Request resolved: #38718
> NOTE: Replaces #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo:
- `yarn build` — Builds all configured packages. Functionally, this:
- Outputs a `dist/` directory with built files.
- Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth).
- `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`)
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
**Differences from the Metro setup**
- References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency.
## Current integration points
- **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs.
**New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack).
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47760330
fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


1 more reviewer

@Pranav-yadavPranav-yadavPranav-yadav left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.fb-exportedp: FacebookPartner: FacebookPartner

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@huntie@facebook-github-bot@analysis-bot@Pranav-yadav

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add shared monorepo build setup by huntie · Pull Request #38240 · react/react-native · GitHub
Skip to content
Add shared monorepo build setup - #38240
Closed
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Closed
Add shared monorepo build setup#38240
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Conversation
@huntie
@huntiehuntie
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Collaborator
Summary:
Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
Changes
To support incoming new React Native packages around debugging (including migrating over @react-native-community/cli-plugin-metro) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the react-native monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
  • yarn build
  • yarn clean
  • yarn watch
image
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and packages are opted-in to requiring a build, configured in scripts/build.config.js.
constbuildConfig/*: BuildConfig */={// The packages to include for build and their build optionspackages: {'dev-middleware': {target: 'node'},},};
For now, there is a single target: 'node' option — this is necessary as react-native, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
Current integration points
  • .circleci/config.yml — Added to run_yarn (with project install).
  • Root yarn start — Convenience for local developers.
  • yarn start within packages/rn-tester — Convenience for local developers.
Planned: I will be adding notes on yarn build to the following "Contributing" website pages:
This is not load bearing quite yet: There are not yet any built packages added to the dependencies of packages/react-native/, so this will be further tested in a later PR (internally stacked as the next change).
Alternative designs
Per-package config file
Replace scripts/build/config.js with a package-defined key in in package.json, similar to Jest's publishConfig.
"buildConfig": {
"type": "node"
},
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is enableTypeScriptCodgeen.
Rollup
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
Lerna and Nx
  • Most sophisticated setup enabling caching and optimised cloud runs.
  • Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
@facebook-github-botfacebook-github-bot
added

CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
p: Facebook
Partner: Facebook
Partner

fb-exported

labels
Jul 7, 2023
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@github-actions
github-actionsBot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Warnings
⚠️🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 87edd0e
@huntiehuntie
mentioned this pull request
Jul 7, 2023
 Merged

@huntie

This comment was marked as resolved.

Sign in to view
@analysis-bot
analysis-bot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,836,447+4
androidhermesarmeabi-v7a8,146,331+0
androidhermesx869,341,813+0
androidhermesx86_649,184,550+2
androidjscarm64-v8a9,448,262+3
androidjscarmeabi-v7a8,630,015+0
androidjscx869,530,933+0
androidjscx86_649,774,146+1
Base commit: 0cdb9e6

Branch: main
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
from
dc788cf to
2f4e80aCompareJuly 7, 2023 16:41
Pranav-yadav
Pranav-yadav
reviewed
Jul 8, 2023
View reviewed changes
Comment threadpackages/dev-middleware/package.json
Outdated


Comment on lines

21
 to 
26

@Pranav-yadavPranav-yadavJul 8, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we going to publish this package? If yes, how do we want to provide these scripts and devDeps. to consumer. Context: There's no "private": true field...
@huntiehuntieJul 10, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this package will be published (and depended on in upcoming changes). These scripts are now managed at the repo level.
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. 👍
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b8d6219
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 80f0b59d13bdd42b1b857816e7329ac01f597ee6
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
7c3f167
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 16ce03a7135f461b1e7e7df91369d07c794fc61c
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
dc3f803
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b7a8dcf
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
2 times, most recently
from
a16af8d to
cccaa32CompareJuly 11, 2023 12:58
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508

1 similar comment

@facebook-github-bot
facebook-github-bot
commented
Jul 13, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie@facebook-github-bot
Add shared monorepo build setup (#38240)
87edd0e
Summary:
Pull Request resolved: #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 4206f213caf6961969dcbdc6a6143cd938e33326
@facebook-github-bot
facebook-github-bot
commented
Jul 18, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json
 },
 "scripts": {
 "start": "cd packages/rn-tester && npm run start",
 "postinstall": "yarn build",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will u pls explain how this is going to help ?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json

Comment on lines

+17
 to 
+19

 "build": "node ./scripts/build/build.js",
 "clean": "node ./scripts/build/clean.js",
 "watch": "yarn build && node ./scripts/build/watch.js",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's no need for an extra watch script.

We can just have a "single build script" which takes --watch.

That would be awesome.

WDYT?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/build.js
const config = {
 allowPositionals: true,
 options: {
 help: {type: 'boolean'},
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here , adding watch option and calling watch() if provided, could make things better, as I said above.

Context: someCmd build --watch pattern is widely used for generations :)
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/clean.js
 }

 for (const packageName of Object.keys(buildConfig.packages)) {
 fs.rmSync(path.join(PACKAGES_DIR, packageName, BUILD_DIR), {
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this fail or block, if the stuff it's trying to rm is in use? It's rmSync that's why...
@huntie
huntie
commented
Jul 25, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Abandoning in favour of a runnable-from-source approach (that still includes build) — will be a separate PR replacing this.
@huntiehuntie
closed this
Jul 25, 2023
@huntie
huntie
deleted the

export-D46759508

branch
July 25, 2023 16:31
@huntiehuntie
mentioned this pull request
Aug 1, 2023
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Aug 3, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (#38718)
cd8f5d1
Summary:
Pull Request resolved: #38718
> NOTE: Replaces #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo:
- `yarn build` — Builds all configured packages. Functionally, this:
- Outputs a `dist/` directory with built files.
- Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth).
- `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`)
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
**Differences from the Metro setup**
- References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency.
## Current integration points
- **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs.
**New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack).
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47760330
fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


1 more reviewer

@Pranav-yadavPranav-yadavPranav-yadav left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.fb-exportedp: FacebookPartner: FacebookPartner

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@huntie@facebook-github-bot@analysis-bot@Pranav-yadav

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add shared monorepo build setup by huntie · Pull Request #38240 · react/react-native · GitHub
Skip to content
Add shared monorepo build setup - #38240
Closed
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Closed
Add shared monorepo build setup#38240
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Conversation
@huntie
@huntiehuntie
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Collaborator
Summary:
Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
Changes
To support incoming new React Native packages around debugging (including migrating over @react-native-community/cli-plugin-metro) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the react-native monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
  • yarn build
  • yarn clean
  • yarn watch
image
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and packages are opted-in to requiring a build, configured in scripts/build.config.js.
constbuildConfig/*: BuildConfig */={// The packages to include for build and their build optionspackages: {'dev-middleware': {target: 'node'},},};
For now, there is a single target: 'node' option — this is necessary as react-native, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
Current integration points
  • .circleci/config.yml — Added to run_yarn (with project install).
  • Root yarn start — Convenience for local developers.
  • yarn start within packages/rn-tester — Convenience for local developers.
Planned: I will be adding notes on yarn build to the following "Contributing" website pages:
This is not load bearing quite yet: There are not yet any built packages added to the dependencies of packages/react-native/, so this will be further tested in a later PR (internally stacked as the next change).
Alternative designs
Per-package config file
Replace scripts/build/config.js with a package-defined key in in package.json, similar to Jest's publishConfig.
"buildConfig": {
"type": "node"
},
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is enableTypeScriptCodgeen.
Rollup
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
Lerna and Nx
  • Most sophisticated setup enabling caching and optimised cloud runs.
  • Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
@facebook-github-botfacebook-github-bot
added

CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
p: Facebook
Partner: Facebook
Partner

fb-exported

labels
Jul 7, 2023
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@github-actions
github-actionsBot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Warnings
⚠️🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 87edd0e
@huntiehuntie
mentioned this pull request
Jul 7, 2023
 Merged

@huntie

This comment was marked as resolved.

Sign in to view
@analysis-bot
analysis-bot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,836,447+4
androidhermesarmeabi-v7a8,146,331+0
androidhermesx869,341,813+0
androidhermesx86_649,184,550+2
androidjscarm64-v8a9,448,262+3
androidjscarmeabi-v7a8,630,015+0
androidjscx869,530,933+0
androidjscx86_649,774,146+1
Base commit: 0cdb9e6

Branch: main
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
from
dc788cf to
2f4e80aCompareJuly 7, 2023 16:41
Pranav-yadav
Pranav-yadav
reviewed
Jul 8, 2023
View reviewed changes
Comment threadpackages/dev-middleware/package.json
Outdated


Comment on lines

21
 to 
26

@Pranav-yadavPranav-yadavJul 8, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we going to publish this package? If yes, how do we want to provide these scripts and devDeps. to consumer. Context: There's no "private": true field...
@huntiehuntieJul 10, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this package will be published (and depended on in upcoming changes). These scripts are now managed at the repo level.
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. 👍
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b8d6219
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 80f0b59d13bdd42b1b857816e7329ac01f597ee6
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
7c3f167
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 16ce03a7135f461b1e7e7df91369d07c794fc61c
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
dc3f803
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b7a8dcf
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
2 times, most recently
from
a16af8d to
cccaa32CompareJuly 11, 2023 12:58
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508

1 similar comment

@facebook-github-bot
facebook-github-bot
commented
Jul 13, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie@facebook-github-bot
Add shared monorepo build setup (#38240)
87edd0e
Summary:
Pull Request resolved: #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 4206f213caf6961969dcbdc6a6143cd938e33326
@facebook-github-bot
facebook-github-bot
commented
Jul 18, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json
 },
 "scripts": {
 "start": "cd packages/rn-tester && npm run start",
 "postinstall": "yarn build",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will u pls explain how this is going to help ?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json

Comment on lines

+17
 to 
+19

 "build": "node ./scripts/build/build.js",
 "clean": "node ./scripts/build/clean.js",
 "watch": "yarn build && node ./scripts/build/watch.js",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's no need for an extra watch script.

We can just have a "single build script" which takes --watch.

That would be awesome.

WDYT?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/build.js
const config = {
 allowPositionals: true,
 options: {
 help: {type: 'boolean'},
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here , adding watch option and calling watch() if provided, could make things better, as I said above.

Context: someCmd build --watch pattern is widely used for generations :)
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/clean.js
 }

 for (const packageName of Object.keys(buildConfig.packages)) {
 fs.rmSync(path.join(PACKAGES_DIR, packageName, BUILD_DIR), {
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this fail or block, if the stuff it's trying to rm is in use? It's rmSync that's why...
@huntie
huntie
commented
Jul 25, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Abandoning in favour of a runnable-from-source approach (that still includes build) — will be a separate PR replacing this.
@huntiehuntie
closed this
Jul 25, 2023
@huntie
huntie
deleted the

export-D46759508

branch
July 25, 2023 16:31
@huntiehuntie
mentioned this pull request
Aug 1, 2023
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Aug 3, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (#38718)
cd8f5d1
Summary:
Pull Request resolved: #38718
> NOTE: Replaces #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo:
- `yarn build` — Builds all configured packages. Functionally, this:
- Outputs a `dist/` directory with built files.
- Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth).
- `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`)
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
**Differences from the Metro setup**
- References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency.
## Current integration points
- **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs.
**New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack).
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47760330
fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


1 more reviewer

@Pranav-yadavPranav-yadavPranav-yadav left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.fb-exportedp: FacebookPartner: FacebookPartner

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@huntie@facebook-github-bot@analysis-bot@Pranav-yadav

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Add shared monorepo build setup by huntie · Pull Request #38240 · react/react-native · GitHub
Skip to content
Add shared monorepo build setup - #38240
Closed
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Closed
Add shared monorepo build setup#38240
huntie wants to merge 1 commit into
react:mainfrom 
huntie:export-D46759508
Conversation
@huntie
@huntiehuntie
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Collaborator
Summary:
Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
Changes
To support incoming new React Native packages around debugging (including migrating over @react-native-community/cli-plugin-metro) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the react-native monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
  • yarn build
  • yarn clean
  • yarn watch
image
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and packages are opted-in to requiring a build, configured in scripts/build.config.js.
constbuildConfig/*: BuildConfig */={// The packages to include for build and their build optionspackages: {'dev-middleware': {target: 'node'},},};
For now, there is a single target: 'node' option — this is necessary as react-native, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
Current integration points
  • .circleci/config.yml — Added to run_yarn (with project install).
  • Root yarn start — Convenience for local developers.
  • yarn start within packages/rn-tester — Convenience for local developers.
Planned: I will be adding notes on yarn build to the following "Contributing" website pages:
This is not load bearing quite yet: There are not yet any built packages added to the dependencies of packages/react-native/, so this will be further tested in a later PR (internally stacked as the next change).
Alternative designs
Per-package config file
Replace scripts/build/config.js with a package-defined key in in package.json, similar to Jest's publishConfig.
"buildConfig": {
"type": "node"
},
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is enableTypeScriptCodgeen.
Rollup
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
Lerna and Nx
  • Most sophisticated setup enabling caching and optimised cloud runs.
  • Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
@facebook-github-botfacebook-github-bot
added

CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
p: Facebook
Partner: Facebook
Partner

fb-exported

labels
Jul 7, 2023
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@github-actions
github-actionsBot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

Warnings
⚠️🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 87edd0e
@huntiehuntie
mentioned this pull request
Jul 7, 2023
 Merged

@huntie

This comment was marked as resolved.

Sign in to view
@analysis-bot
analysis-bot
commented
Jul 7, 2023•

edited

Loading

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,836,447+4
androidhermesarmeabi-v7a8,146,331+0
androidhermesx869,341,813+0
androidhermesx86_649,184,550+2
androidjscarm64-v8a9,448,262+3
androidjscarmeabi-v7a8,630,015+0
androidjscx869,530,933+0
androidjscx86_649,774,146+1
Base commit: 0cdb9e6

Branch: main
@facebook-github-bot
facebook-github-bot
commented
Jul 7, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
from
dc788cf to
2f4e80aCompareJuly 7, 2023 16:41
Pranav-yadav
Pranav-yadav
reviewed
Jul 8, 2023
View reviewed changes
Comment threadpackages/dev-middleware/package.json
Outdated


Comment on lines

21
 to 
26

@Pranav-yadavPranav-yadavJul 8, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we going to publish this package? If yes, how do we want to provide these scripts and devDeps. to consumer. Context: There's no "private": true field...
@huntiehuntieJul 10, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this package will be published (and depended on in upcoming changes). These scripts are now managed at the repo level.
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. 👍
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b8d6219
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 80f0b59d13bdd42b1b857816e7329ac01f597ee6
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
7c3f167
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 16ce03a7135f461b1e7e7df91369d07c794fc61c
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
dc3f803
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
dmytrorykun pushed a commit
to dmytrorykun/react-native
that referenced
this pull request
Jul 10, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (react#38240)
b7a8dcf
Summary:
Pull Request resolved: react#38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee
@facebook-github-bot
facebook-github-bot
commented
Jul 10, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie
huntieforce-pushed
the
export-D46759508
branch
2 times, most recently
from
a16af8d to
cccaa32CompareJuly 11, 2023 12:58
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@facebook-github-bot
facebook-github-bot
commented
Jul 11, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508

1 similar comment

@facebook-github-bot
facebook-github-bot
commented
Jul 13, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
@huntie@facebook-github-bot
Add shared monorepo build setup (#38240)
87edd0e
Summary:
Pull Request resolved: #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo:
- `yarn build`
- `yarn clean`
- `yarn watch`
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
## Current integration points
- `.circleci/config.yml` — Added to `run_yarn` (with project install).
- Root `yarn start` — Convenience for local developers.
- `yarn start` within `packages/rn-tester` — Convenience for local developers.
**Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages:
- https://reactnative.dev/contributing/overview#contributing-code
- https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes
**This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR.
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Differential Revision: D46759508
fbshipit-source-id: 4206f213caf6961969dcbdc6a6143cd938e33326
@facebook-github-bot
facebook-github-bot
commented
Jul 18, 2023

Copy link


Copy Markdown

Contributor
This pull request was exported from Phabricator. Differential Revision: D46759508
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json
 },
 "scripts": {
 "start": "cd packages/rn-tester && npm run start",
 "postinstall": "yarn build",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will u pls explain how this is going to help ?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadpackage.json

Comment on lines

+17
 to 
+19

 "build": "node ./scripts/build/build.js",
 "clean": "node ./scripts/build/clean.js",
 "watch": "yarn build && node ./scripts/build/watch.js",
@Pranav-yadavPranav-yadavJul 21, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's no need for an extra watch script.

We can just have a "single build script" which takes --watch.

That would be awesome.

WDYT?
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/build.js
const config = {
 allowPositionals: true,
 options: {
 help: {type: 'boolean'},
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here , adding watch option and calling watch() if provided, could make things better, as I said above.

Context: someCmd build --watch pattern is widely used for generations :)
Pranav-yadav
Pranav-yadav
reviewed
Jul 21, 2023
View reviewed changes
Comment threadscripts/build/clean.js
 }

 for (const packageName of Object.keys(buildConfig.packages)) {
 fs.rmSync(path.join(PACKAGES_DIR, packageName, BUILD_DIR), {
@Pranav-yadavPranav-yadavJul 21, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this fail or block, if the stuff it's trying to rm is in use? It's rmSync that's why...
@huntie
huntie
commented
Jul 25, 2023

Copy link


Copy Markdown

CollaboratorAuthor
Abandoning in favour of a runnable-from-source approach (that still includes build) — will be a separate PR replacing this.
@huntiehuntie
closed this
Jul 25, 2023
@huntie
huntie
deleted the

export-D46759508

branch
July 25, 2023 16:31
@huntiehuntie
mentioned this pull request
Aug 1, 2023
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Aug 3, 2023
@huntie@facebook-github-bot
Add shared monorepo build setup (#38718)
cd8f5d1
Summary:
Pull Request resolved: #38718
> NOTE: Replaces #38240
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo.
The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo:
- `yarn build` — Builds all configured packages. Functionally, this:
- Outputs a `dist/` directory with built files.
- Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth).
- `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`)
Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`.
```
const buildConfig /*: BuildConfig */ = {
// The packages to include for build and their build options
packages: {
'dev-middleware': {target: 'node'},
},
};
```
For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions.
{F1043312771}
**Differences from the Metro setup**
- References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency.
## Current integration points
- **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs.
**New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack).
### Alternative designs
**Per-package config file**
Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4).
```
"buildConfig": {
"type": "node"
},
```
This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`.
**Rollup**
More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well).
**Lerna and Nx**
- Most sophisticated setup enabling caching and optimised cloud runs.
- Probably the most likely thing we'll move towards at a later stage.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D47760330
fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


1 more reviewer

@Pranav-yadavPranav-yadavPranav-yadav left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.fb-exportedp: FacebookPartner: FacebookPartner

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@huntie@facebook-github-bot@analysis-bot@Pranav-yadav