react/compiler/apps/playground/README.md
Aditya Subramanyam 579cc2a44c
[playground] Add support for "use no memo" (#31561)
Fixes #31331

## Summary
There is a bug in
playground(https://github.com/facebook/react/issues/31331) which doesnt
support 'use memo' or 'use no memo' directives. Its misleading while
debugging components in the playground

## How did you test this change?
Ran test cases and added a few extra test cases as well

## Changes
1) Adds support for 'use memo' and 'use no memo'
2) Cleanup E2E test cases a bit
3) Adds test cases for use memo
4) Added documentation to run test cases

## Implementation
`parseFunctions` returns a set of functions to be compiled. But, it
doesnt filter out/handle memoized opted/un-opted functions using
directives.

ive just created a `compile` flag to enable/disable compiling
[here](https://github.com/facebook/react/pull/31561/files#diff-305de47a3fe3ce778e22d5c5cf438419a59de8e7f785b45f659e7b41b1e30b03R113)

Then I am just skipping those functions from getting compile
[here](https://github.com/facebook/react/pull/31561/files#diff-305de47a3fe3ce778e22d5c5cf438419a59de8e7f785b45f659e7b41b1e30b03R253)
2024-11-18 15:38:22 -05:00

1.0 KiB

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.