Files
ruff/playground
Micha Reiser 90a8d92b2f [refactor] Convert playground to an NPM workspace (#16806)
## Summary

This is prep-work for the Red Knot playground. We'll have two
playgrounds, one for Red Knot and Ruff.
I want to share some components between the two, a "shared" NPM package
in a local workspace is a great fit for that.
I also want to share the dev dependencies and dev scripts. Again, NPM
workspaces are great for that.

This PR also sets up a CI workflow for the playground to prevent
surprises during the release.

## Test Plan

CI, local `npm install`, `npm start`, ...

I verified that the new CI step fails if there's a typescript or
formatting error.

* [Deployment test
run](https://github.com/astral-sh/ruff/actions/runs/13904914480/job/38905524353)
2025-03-17 17:56:45 +01:00
..
2025-03-04 09:36:35 -05:00
2025-03-03 09:59:57 +01:00

playground

In-browser playground for Ruff. Available https://play.ruff.rs/.

Getting started

Install the NPM dependencies with npm install, and run, and run the development server with npm start. You may need to restart the server after making changes to Ruff to re-build the WASM module.

To run the datastore, which is based on Workers KV, install the Wrangler CLI, then run npx wrangler dev --local from the ./playground/api directory. Note that the datastore is only required to generate shareable URLs for code snippets. The development datastore does not require Cloudflare authentication or login, but in turn only persists data locally.

Architecture

The playground is implemented as a single-page React application powered by Vite, with the editor experience itself powered by Monaco.

The playground stores state in localStorage, but supports persisting code snippets to a persistent datastore based on Workers KV and exposed via a Cloudflare Worker.

The playground design is originally based on Tailwind Play, with additional inspiration from the Biome Playground.