react/compiler
Joseph Savona bcea86945c
[compiler][rfc] Enable more validations in playground. (#33777)
This is mostly to kick off conversation, i think we should go with a
modified version of the implemented approach that i'll describe here.

The playground currently serves two roles. The primary one we think
about is for verifying compiler output. We use it for this sometimes,
and developers frequently use it for this, including to send us repros
if they have a potential bug. The second mode is to help developers
learn about React. Part of that includes learning how to use React
correctly — where it's helpful to see feedback about problematic code —
and also to understand what kind of tools we provide compared to other
frameworks, to make an informed choice about what tools they want to
use.

Currently we primarily think about the first role, but I think we should
emphasize the second more. In this PR i'm doing the worst of both:
enabling all the validations used by both the compiler and the linter by
default. This means that code that would actually compile can fail with
validations, which isn't great.

What I think we should actually do is compile twice, one in
"compilation" mode and once in "linter" mode, and combine the results as
follows:
* If "compilation" mode succeeds, show the compiled output _and_ any
linter errors.
* If "compilation" mode fails, show only the compilation mode failures.

We should also distinguish which case it is when we show errors:
"Compilation succeeded", "Compilation succeeded with linter errors",
"Compilation failed".

This lets developers continue to verify compiler output, while also
turning the playground into a much more useful tool for learning React.
Thoughts?

---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/33777).
* #33981
* __->__ #33777
2025-07-24 15:52:45 -07:00
..
apps/playground [compiler][rfc] Enable more validations in playground. (#33777) 2025-07-24 15:52:45 -07:00
docs Update DEVELOPMENT_GUIDE.md (#32281) 2025-03-13 11:45:26 -04:00
fixtures [cleanup] Remove compiler runtime-compat fixture library (#31430) 2024-11-05 14:14:39 -05:00
packages [compiler][rfc] Enable more validations in playground. (#33777) 2025-07-24 15:52:45 -07:00
scripts Remove leftover Rust script (#33314) 2025-05-20 12:20:51 -04:00
.eslintrc.js
.gitignore Remove leftover Rust script (#33314) 2025-05-20 12:20:51 -04:00
CHANGELOG.md [compiler] Update changelog for 19.1.0-rc.2 (#33207) 2025-05-15 10:34:11 -04:00
package.json [compiler] Update rimraf (#32868) 2025-04-14 15:15:14 -04:00
README.md
yarn.lock [mcp] Fix package.json (#33101) 2025-05-02 13:56:01 -04:00

React Compiler

React Compiler is a compiler that optimizes React applications, ensuring that only the minimal parts of components and hooks will re-render when state changes. The compiler also validates that components and hooks follow the Rules of React.

More information about the design and architecture of the compiler are covered in the Design Goals.

More information about developing the compiler itself is covered in the Development Guide.