Release Process and CI/CD

Relevant source files

• .github/workflows/compiler_discord_notify.yml
• .github/workflows/compiler_playground.yml
• .github/workflows/compiler_prereleases.yml
• .github/workflows/compiler_prereleases_manual.yml
• .github/workflows/compiler_prereleases_nightly.yml
• .github/workflows/compiler_rust.yml
• .github/workflows/compiler_typescript.yml
• .github/workflows/devtools_discord_notify.yml
• .github/workflows/devtools_regression_tests.yml
• .github/workflows/runtime_build_and_test.yml
• .github/workflows/runtime_commit_artifacts.yml
• .github/workflows/runtime_discord_notify.yml
• .github/workflows/runtime_eslint_plugin_e2e.yml
• .github/workflows/runtime_fuzz_tests.yml
• .github/workflows/shared_check_maintainer.yml
• .github/workflows/shared_close_direct_sync_branch_prs.yml
• .github/workflows/shared_label_core_team_prs.yml
• .github/workflows/shared_lint.yml
• .github/workflows/shared_stale.yml
• ReactVersions.js
• compiler/packages/babel-plugin-react-compiler-rust/package.json
• compiler/packages/babel-plugin-react-compiler/tsup.config.ts
• compiler/packages/make-read-only-util/tsup.config.ts
• compiler/packages/react-compiler-runtime/README.md
• compiler/packages/react-compiler-runtime/tsup.config.ts
• compiler/scripts/release/ci-npmrc
• compiler/scripts/release/publish.js
• compiler/scripts/release/shared/build-packages.js
• compiler/scripts/release/shared/packages.js
• compiler/scripts/release/shared/utils.js
• dangerfile.js
• packages/react/src/__tests__/ReactClassEquivalence-test.js
• scripts/release/README.md
• scripts/release/download-experimental-build-commands/print-summary.js
• scripts/release/download-experimental-build.js
• scripts/release/package.json
• scripts/release/prepare-release-from-ci.js
• scripts/release/publish-commands/confirm-version-and-tags.js
• scripts/release/publish-commands/parse-params.js
• scripts/release/publish-commands/publish-to-npm.js
• scripts/release/publish-commands/validate-tags.js
• scripts/release/publish.js
• scripts/release/shared-commands/download-build-artifacts.js
• scripts/release/shared-commands/parse-params.js
• scripts/release/theme.js
• scripts/release/utils.js
• scripts/release/yarn.lock
• scripts/rollup/build-all-release-channels.js
• scripts/rollup/stats.js
• scripts/tasks/danger.js

The React release pipeline is a multi-stage system designed to ensure high stability for production users while allowing rapid iteration for experimental features. The process transitions from automated continuous integration (CI) on every pull request to automated prereleases and manual promotion for stable versions.

1. Version Management

React uses a centralized versioning configuration in ReactVersions.js. This file acts as the single source of truth for all packages published to npm ReactVersions.js3-7

Versioning Schemes

The repository supports three primary release channels:

Channel	Format	Example
Latest	X.Y.Z	19.3.0
Canary	X.Y.Z-<label>-<sha>-<date>	19.3.0-canary-a1c2d3e4-20240320
Experimental	0.0.0-experimental-<sha>-<date>	0.0.0-experimental-241c4467e-20200129

Source: ReactVersions.js8-19 scripts/rollup/build-all-release-channels.js46-47

Key Configuration Entities

• ReactVersion: The base semver for core packages ReactVersions.js21
• canaryChannelLabel: The label used for prereleases (e.g., "canary", "rc", "alpha") ReactVersions.js29
• rcNumber: Used when the label is "rc" to generate versions like 19.0.0-rc.0 ReactVersions.js31-33
• stablePackages: A map of package names to their specific semver versions ReactVersions.js35-51
• experimentalPackages: A list of packages that only exist in the experimental channel (e.g., react-markup) ReactVersions.js56

Sources: ReactVersions.js1-65 scripts/rollup/build-all-release-channels.js11-17

---

2. CI Pipeline and GitHub Actions

The CI infrastructure is divided into runtime, compiler, and DevTools workflows to manage the monorepo's distinct subsystems.

2.1 Runtime Build and Test

The runtime_build_and_test.yml workflow is the primary gatekeeper for core React packages. It runs on every push to main and all pull requests .github/workflows/runtime_build_and_test.yml4-10

Core Stages:

1. Dependency Caching: Uses actions/cache to centralize node_modules for the runtime and compiler, preventing race conditions .github/workflows/runtime_build_and_test.yml33-80
2. Flow Checks: Executes static type checking across various host configurations (DOM, Native, etc.) defined in inlinedHostConfigs.js via the flow-ci task .github/workflows/runtime_build_and_test.yml82-126
3. Fizz Runtime Validation: Confirms the generated inline Fizz runtime is up to date by running yarn generate-inline-fizz-runtime and checking for git diffs .github/workflows/runtime_build_and_test.yml128-154
4. Test Sharding: Runs the Jest suite across multiple shards and environments (Stable vs. Experimental, Development vs. Production) .github/workflows/runtime_build_and_test.yml181-192

2.2 DevTools Regression Testing

DevTools utilizes a specialized regression suite that tests the current DevTools against multiple previous versions of React (e.g., 16.0, 17.0, 18.0) .github/workflows/devtools_regression_tests.yml113-121 This ensures that changes to the DevTools backend or frontend do not break compatibility with older Fiber trees. The workflow downloads base builds using download-experimental-build.js and runs tests via jest-cli.js with the --project devtools flag .github/workflows/devtools_regression_tests.yml47-140

2.3 Danger.js PR Checks

The dangerfile.js provides automated feedback on Pull Requests, specifically focusing on bundle size regressions.

• Critical Artifacts: It monitors specific production bundles like react-dom.production.js and facebook-www/ReactDOM-prod.modern.js dangerfile.js43-52
• Thresholds: Changes exceeding 2% (CRITICAL_THRESHOLD) are highlighted as significant dangerfile.js41-222
• Data Flow: It compares the HEAD build against a BASE_DIR build using statSync and gzip-size to calculate differences dangerfile.js142-175

Sources: .github/workflows/runtime_build_and_test.yml1-192 .github/workflows/devtools_regression_tests.yml1-195 dangerfile.js1-223

---

3. The Release Pipeline

React releases follow a "Build Once, Publish Anywhere" philosophy where artifacts are built in CI and then consumed by release scripts.

3.1 Release Data Flow

The following diagram illustrates how code moves from a commit to an NPM publication.

Code to Artifact Pipeline

Sources: scripts/release/README.md20-36 scripts/release/shared-commands/download-build-artifacts.js67-118 scripts/release/publish-commands/publish-to-npm.js10-44

3.2 Build Script (build-all-release-channels.js)

This script orchestrates the Rollup build for both stable and experimental channels scripts/rollup/build-all-release-channels.js21-22

• Placeholder Versioning: It writes a placeholder version (containing the SHA and date) to packages/shared/ReactVersion.js to ensure the build artifacts have unique identities scripts/rollup/build-all-release-channels.js46-54
• Channel Processing:
  • processStable(): Generates oss-stable (canary), oss-stable-semver (latest), and optionally oss-stable-rc artifacts scripts/rollup/build-all-release-channels.js179-190
  • processExperimental(): Generates artifacts for the experimental channel scripts/rollup/build-all-release-channels.js120
• Version Replacement: After the build, it performs a string replace to swap the placeholder with the correct version per channel using updatePlaceholderReactVersionInCompiledArtifacts scripts/rollup/build-all-release-channels.js209-213

3.3 Artifact Promotion

Stable releases are always promoted from existing "canary" builds. This ensures that the exact bits tested in the prerelease channel are what production users receive scripts/release/README.md48-50

Release Promotion Logic

Sources: scripts/release/utils.js207-214 scripts/release/shared-commands/download-build-artifacts.js215-221 scripts/release/publish-commands/publish-to-npm.js10-12

---

4. Meta-Internal Sync (WWW and fbsource)

React maintains a specific pipeline for syncing builds to Meta's internal repositories (facebook-www and fbsource).

4.1 Artifact Processing

The runtime_commit_artifacts.yml workflow processes builds specifically for internal consumption:

• Header Injection: Strips @license and inserts internal @headers (e.g., @noformat, @nolint, @lightSyntaxTransform, @preventMunge, @oncall react_core) into files like eslint-plugin-react-hooks and react-refresh using sed .github/workflows/runtime_commit_artifacts.yml115-126
• Directory Mapping: Moves files into the specific structure required by internal build systems. For example, facebook-www artifacts are moved to ./compiled/facebook-www and test utilities like ReactAllWarnings.js are relocated to specific internal test paths .github/workflows/runtime_commit_artifacts.yml127-135
• Version Tracking: Compares current versions against VERSION_CLASSIC and VERSION_MODERN to track what is currently deployed in Meta's infrastructure .github/workflows/runtime_commit_artifacts.yml82-91

4.2 Automated Notifications

The repository uses Discord webhooks to notify core team members of new PRs affecting critical paths.

• Runtime: Filters out DevTools and Compiler paths to notify the core team via runtime_discord_notify.yml .github/workflows/runtime_discord_notify.yml6-10
• Compiler: Specifically watches the compiler/ directory and notifies via a dedicated webhook in compiler_discord_notify.yml .github/workflows/compiler_discord_notify.yml6-43

Sources: .github/workflows/runtime_commit_artifacts.yml1-156 .github/workflows/runtime_discord_notify.yml1-52 .github/workflows/compiler_discord_notify.yml1-50