a1da9da0ef
## Summary On page load, the playground very briefly flickers a JSON parse error. Due to our use of `useDeferredValue`, we attempt to parse the empty JSON string settings, since after `const initialized = ruffVersion != null;` returns true, we get one render with the stale deferred value. This PR refactors the state, such that we start by storing `null` for the `Source`, and use the `Source` itself to determine initialization status. ## Test Plan Set a breakpoint in the `catch` path in `Editor`; verified that it no longer triggers on load (but did on `main`). |
||
|---|---|---|
| .. | ||
| api | ||
| public | ||
| src | ||
| .eslintrc | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc.json | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.cjs | ||
| README.md | ||
| tailwind.config.cjs | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
playground
In-browser playground for Ruff. Available https://play.ruff.rs/.
Getting started
First, build the WASM module by running npm run build:wasm from the ./playground directory.
Then, install TypeScript dependencies with npm install, and run the development server with
npm run dev.
To run the datastore, which is based on Workers KV,
install the Wrangler CLI,
then run npx wrangler dev --local from the ./playground/db 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 can 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 Rome Tools Playground.