Open-Source Wikis

/

React

/

How to contribute

/

Tooling

facebook/react

Tooling

A guided tour of the build, lint, format, and release scripts that live under scripts/. Most of them are invoked through package.json scripts; understanding what each one actually does makes it much easier to debug the rare CI failure that says "the lint-build step is angry".

Rollup (scripts/rollup/)

yarn build runs scripts/rollup/build-all-release-channels.js, which runs scripts/rollup/build.js once per release channel, which in turn calls Rollup once per (bundle × bundle-type) entry in scripts/rollup/bundles.js.

Key files:

  • scripts/rollup/bundles.js — central registry of every npm-published bundle. Each entry has bundleTypes, moduleType, entry, name, global, externals, etc.
  • scripts/rollup/build.js — the per-channel orchestrator. Resolves which forks apply (e.g. ReactFiberConfigReactFiberConfigDOM), wires up Babel + Flow strip-types + the prod-error-message rewriter + Closure Compiler.
  • scripts/rollup/plugins/ — custom Rollup plugins, including the most magical one: the fork resolver, which rewrites imports of react-reconciler/src/ReactFiberConfig.js to packages/react-reconciler/src/forks/ReactFiberConfig.<renderer>.js based on the bundle being built.
  • scripts/rollup/validate/index.js — the yarn lint-build entry point. Verifies that built bundles still typecheck and that every package's package.json exports field references files that actually exist.

After a build, output lives in:

build/
  oss-stable/<package>/...        # what gets published to npm latest tag (after a stable release)
  oss-experimental/<package>/...  # what gets published as react@experimental
  facebook-www/...                # internal Facebook bundle
  facebook-react-native/...       # internal RN bundle

Jest harness (scripts/jest/)

yarn test is node ./scripts/jest/jest-cli.js. The CLI:

  1. Parses flags (--build, --release-channel, --variant, --persistent, etc.).
  2. Picks one of scripts/jest/config.source.js, config.source-www.js, config.build.js, config.build-devtools.js, ...
  3. Sets __DEV__, __PROFILE__, __EXPERIMENTAL__, __VARIANT__ globals via setupTests.js so tests run as if they were inside a built bundle.
  4. Hands the resulting Jest config off to Jest.

scripts/jest/setupTests.js also installs the @gate and gate(...) helpers (see testing).

Flow (scripts/flow/)

Flow is the runtime's type checker. Each renderer needs its own Flow config because the host config types differ. scripts/flow/createFlowConfigs.js runs at postinstall time and generates per-renderer config files (packages/react-reconciler/.flowconfig.dom, etc.) from the templates in flow-typed/ and scripts/flow/.

yarn flow            # Flow check for the runtime
yarn flow-ci         # CI-wrapped variant

Flow runs against packages/**/*.js only. The compiler workspace uses tsc instead.

ESLint (scripts/eslint-rules/)

scripts/eslint-rules/index.js exports a custom plugin (consumed as eslint-plugin-react-internal via the resolution in package.json). The rules enforce React-internal invariants that aren't possible to express in stock ESLint:

  • no-cross-fork-imports.js — you can't import another package's forks/ directory.
  • no-production-logging.jsconsole.log outside __DEV__ blocks is forbidden.
  • prod-error-codes.js — every throw new Error(literal) must have a code in scripts/error-codes/codes.json.
  • safe-string-coercion.js — coercion of unknown values to strings via String(x) is restricted to keep error messages from leaking objects.
  • no-primitive-constructors.jsnew Boolean(x) and friends are forbidden.

Plus the standard eslint-plugin-react, eslint-plugin-react-hooks (the published one, dogfooded against itself), eslint-plugin-jest, and a few more. Configuration: .eslintrc.js.

Error codes (scripts/error-codes/)

Already covered in development-workflow, but in summary:

  • scripts/error-codes/codes.json{ "0": "<>", "1": "Hooks ...", ... }.
  • yarn extract-errors — finds new throw new Error(literal)s, assigns the next free code, writes back to codes.json.
  • The Babel transform scripts/error-codes/transform-error-messages.js rewrites prod bundles to use formatProdErrorMessage.

Prettier (scripts/prettier/)

Two Prettier wrappers:

  • yarn prettier (= node ./scripts/prettier/index.js write-changed) — only changed files.
  • yarn prettier-all (= ... write) — every file. Used after big mechanical refactors.

The compiler workspace runs Prettier separately; from the root, yarn prettier-all does both.

Bundle size (dangerfile.js)

dangerfile.js is a Danger.js script that runs in CI. It diffs the current PR's bundle sizes against main (using artifacts produced by runtime_build_and_test.yml) and posts a Markdown table comment to the PR. The same data is used to fail a PR if a critical bundle grew too much.

Release scripts (scripts/release/)

The full README is at scripts/release/README.md. Highlights:

  • prepare-release-from-ci.js — downloads pre-built bundles from a CI run for a given commit SHA.
  • prepare-release-from-npm.js — promotes a next prerelease to a stable latest release (interactive — prompts for new version numbers).
  • publish.js — actually publishes to npm. Has a --dry mode.
  • build-release-locally.js — last-resort escape hatch for building a release tarball from local HEAD.
  • download-experimental-build.js — convenience to grab a CI-built experimental tarball for local testing (yarn download-build).

CI (.github/workflows/)

The most important workflows:

  • runtime_build_and_test.yml — the matrix that runs every test channel against every push. The largest workflow file in the repo (~38 KB).
  • runtime_commit_artifacts.yml — automated commits of generated files (e.g. react-native-renderer artifacts) on schedule.
  • runtime_prereleases.yml, runtime_prereleases_nightly.yml, runtime_prereleases_manual.yml — the daily/manual prerelease publishing pipeline.
  • compiler_typescript.yml — TypeScript build/check for the compiler workspace.
  • compiler_prereleases*.yml — compiler prerelease publishing.
  • devtools_regression_tests.yml — DevTools E2E regression suite.
  • shared_lint.yml, shared_check_maintainer.yml, shared_label_core_team_prs.yml — shared cross-cutting workflows.

Other scripts worth knowing

  • scripts/tasks/eslint.js, scripts/tasks/flow.js, scripts/tasks/linc.js — wrappers around the underlying tools that respect the repo's release-channel awareness.
  • scripts/print-warnings/print-warnings.js — prints every dev-only console.error message in the runtime. Useful for auditing what users actually see.
  • scripts/flags/flags.js (= yarn flags) — prints the feature-flag matrix per channel.
  • scripts/tasks/version-check.js (= yarn version-check) — verifies that ReactVersions.js and per-package package.json versions agree.
  • scripts/tasks/generate-changelog/index.js (= yarn generate-changelog) — generates a draft CHANGELOG.md entry from the last release tag.

VS Code workspace

react.code-workspace opens both the runtime root and compiler/ as separate workspace folders so that each one's TypeScript / Flow / ESLint config is picked up correctly without fighting the other.

Built by Factory AutoWiki from public repository content. It is a generated preview for codebase exploration, not source-maintained documentation.

Tooling – React wiki | Factory