mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Eugene Choi
0eebd37041
Fixed two small issues with the config panel in the compiler playground: 1. Object descriptions were being confined in the config box and most of it would not be visible upon hover 2. Changed it so that "Applied Configs" would only display a valid set of configs, rather than switching between "Invalid Configs" and the set of options. This would be less visually jarring for users as the Output panel already displays errors. Additionally, if users want to see the list of config options but have a currently broken config, they would previously not know how to fix it. Object hover before: <img width="702" height="481" alt="Screenshot 2025-09-26 at 10 41 03 AM" src="https://github.com/user-attachments/assets/b2ddec2f-16ba-41a1-be1f-96211f46764c" /> Hover after: <img width="702" height="481" alt="Screenshot 2025-09-26 at 10 40 37 AM" src="https://github.com/user-attachments/assets/dc713a22-4710-46a8-a5d7-485060cc9074" /> Applied Configs always displays the last valid set of configs: https://github.com/user-attachments/assets/2fb9232f-7388-4488-9b7a-bb48bf09e4ca
React Compiler Playground
An interactive playground to demonstrate, test, and have fun with React Compiler.
Setup
# Build React Compiler from source and install Playground dependencies.
$ yarn
# Or similarly
$ npm install
Development
# Start the local development server with
$ yarn dev
# Or
$ npm run dev
# Rerun the following (in a separate terminal window) when React Compiler
# is changed locally to keep Playground in sync.
$ yarn
Testing
# Install playwright browser binaries
$ npx playwright install --with-deps
# Run tests
$ yarn test
Deployment
This project has been deployed using Vercel. Vercel does the exact same thing as we would
locally, by running yarn at the install step in the Playground directory to build
React Compiler from source and symlink it as its dependency.
This means that Playground is automatically deployed on every push and pull requests will reflect
the behaviors of React Compiler of that commit.