The React Compiler ecosystem includes an integrated set of tools to bridge the compiler's analyses and transformations into developer workflows, provide interactive debugging environments, facilitate experimental AI-assisted development, and automate snapshot testing. This page details the ESLint integration, the browser-based interactive playground, the experimental Model Context Protocol (MCP) server that enables LLM interaction, snapshot testing utilities, and the VS Code LSP extension tooling.
eslint-plugin-react-compiler)The eslint-plugin-react-compiler package connects React Compiler's static validation and diagnostic engine into the ESLint infrastructure, enabling developers to receive compiler diagnostics in standard IDE tooling without necessarily transforming code.
Rule Definition: The core ESLint rule is implemented in ReactCompilerRule.ts. It accesses the React Compiler's LintRules to perform validation during ESLint linting. Each rule corresponds to a category in the compiler diagnostics. The primary entrypoint runs the compiler in a "lint" mode. compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts175-224
Diagnostic Collection and Reporting: When invoked, the ESLint plugin fetches the source text from the ESLint context, runs the React Compiler on this source via runReactCompiler, and collects validation events. Errors of the appropriate category for the rule are filtered and reported back to ESLint through context.report. compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts144-207
Source Location Extraction: To link diagnostics to precise source locations, the plugin normalizes legacy and new diagnostic formats and extracts the primary location to highlight in ESLint. compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts31-41
Suggestions and Autofixes: The plugin translates the compiler's CompilerSuggestion operations (InsertBefore, InsertAfter, Replace, Remove) into ESLint suggestions with fixers, enabling automated code fixes from the editor UI. compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts91-142
Flow Suppression Integration: It respects existing Flow suppression comments to avoid reporting diagnostics already handled by Flow, enhancing signal precision. compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts159-173
makeRule(rule: LintRule): Factory that creates an ESLint rule module from a React Compiler lint rule.getReactCompilerResult(context): Extracts code and filename from ESLint context and runs the React Compiler linter.printErrorMessage(source, error): Formats diagnostic messages with code frames for better developer feedback.makeSuggestions(detail): Translates compiler hint suggestions into ESLint fix descriptors.Sources:
The Playground is a full-featured Next.js web app that showcases the React Compiler's processes interactively for debugging and experimentation. It maps source text to various intermediate compiler passes (HIR, Reactive Functions) and final output, with detailed diagnostics.
Located in compiler/apps/playground, configured as a workspace and Next.js app. compiler/apps/playground/package.json1-65
Uses React components to manage state via a central Store and context, featuring:
Input.tsx).ConfigEditor.tsx).Output.tsx).EditorImpl.tsx to orchestrate compilation and merge linter diagnostics. compiler/apps/playground/components/Editor/EditorImpl.tsx20-69Uses the local compile function (lib/compilation.ts) to run the React Compiler Babel plugin in a mode that produces both code and rich diagnostics for rendering. The compiler is invoked twice—once for transformed code and once for linter diagnostics—and they are merged for display. compiler/apps/playground/lib/compilation.ts1-30
The Monaco editor integration (@monaco-editor/react) provides syntax highlighting, diffing, and fast editing experiences.
| Component | Role |
|---|---|
EditorImpl.tsx | Manages compiling source and lint output and state. |
Output.tsx | Formats compiler outputs into user-viewable tabs (HIR, reactive IR, errors). |
ConfigEditor.tsx | JSON5 configuration interface with debounced updates. |
StoreContext.tsx | Centralized React state store for source, errors, config. |
| Monaco Editor | Provides the code editor frontend with syntax highlighting and diffing. |
Sources:
react-mcp-server)The React MCP server is an experimental backend service enabling Large Language Models (LLMs) like Claude to interact programmatically with the React Compiler ecosystem. It exposes tools as JSON-RPC endpoints via the Model Context Protocol.
Built using @modelcontextprotocol/sdk which abstracts JSON-RPC over stdin/stdout (StdioServerTransport) and MCP server infrastructure (McpServer). compiler/packages/react-mcp-server/src/index.ts1-36
The MCP server registers tools that LLMs can call:
| Tool Name | Description | Implementation Details |
|---|---|---|
query-react-dev-docs | Search official React documentation (react.dev) via Algolia. | Uses queryAlgolia(), cheerio HTML parsing, and conversion to text. index.ts40-77 |
compile | Runs React Compiler on arbitrary code snippets. | Runs compiler with logging hooks to capture intermediate passes and diagnostics, returning textual IR or compiled code. index.ts78-200 |
runtime-perf | Measures runtime component performance metrics. | Utilizes measurePerformance() utilities. tools/runtimePerf.ts1-100 |
Sources:
snap)The snap package provides a CLI tool to automatically snapshot test the React compiler against a large suite of fixtures, ensuring correctness and regression coverage.
Worker Pool: Uses jest-worker for concurrency to distribute fixture processing across CPU cores asynchronously. compiler/packages/snap/src/runner.ts8-46
Watch Mode: Watches compiler source files, triggering rebuilds via tsup, and restarts tests automatically on file changes, optimizing development iteration. compiler/packages/snap/src/runner-watch.ts21-182
Rust Compiler Test Integration: Supports testing the experimental Rust port alongside the standard JS-based compiler by building the Rust toolchain and copying binary artifacts as needed, integrating Rust output validations. compiler/packages/snap/src/runner-watch.ts199-223
Sprout Evaluator: Provides a shared runtime environment (shared-runtime.ts) to evaluate compiled output in an isolated environment validating React runtime behavior correctness and effectfulness. compiler/packages/snap/src/sprout/shared-runtime.ts53-232
Sources:
react-forgive (LSP-based React Analyzer)While this page does not provide the source content for react-forgive, it integrates the React Compiler as an LSP server plugin offering interactive analysis and diagnostic reporting directly in VS Code.
The React Compiler tooling ecosystem shares a core compiler package but exposes functionality through multiple interfaces tailored to user workflows and experimental enhancements:
| Package | Primary Interface | Target Audience |
|---|---|---|
eslint-plugin-react-compiler | ESLint CLI / IDE plugin | Developers for local linting |
playground | Web UI (Next.js) | Compiler contributors/debugging |
react-mcp-server | Model Context Protocol / LLM integration | AI agents and LLM developers |
snap | CLI snapshot testing and runner | Compiler core team and validation |
react-forgive (LSP) | VS Code Language Server integration | IDE users and React developers |
This tooling ecosystem ensures that React Compiler's innovations in automatic memoization, reactive scope validation, and runtime optimization reach developers across the spectrum: from local code editors to AI-assisted code review environments.
Sources:
Refresh this wiki