563374503f
## Summary This PR adds a [Workers KV](https://developers.cloudflare.com/workers/runtime-apis/kv/)-based database to the playground, which enables us to associate shared snippets with a stable ID, which in turn allows us to generate short URLs, rather than our existing extremely-long URLs. For now, the URLs are based on UUID, so they look like https://play.ruff.rs/a1c40d58-f643-4a3e-bc23-15021e16acef. (This URL isn't expected to work, as the playground isn't deployed; it's only included as an example.) There are no visible changes in the UI here -- you still click the "Share" button, which copies the link to your URL. There's no user-visible latency either -- KV is very fast. For context, with Workers KV, we provision a Workers KV store in our Cloudflare account (`wrangler kv:namespace create "PLAYGROUND"`), and then create a Cloudflare Worker that's bound to the KV store via the `wrangler.toml`: ```toml name = "db" main = "src/index.ts" compatibility_date = "2023-08-07" kv_namespaces = [ { binding = "PLAYGROUND", id = "672e16c4fb5e4887845973bf0e9f6021", preview_id = "0a96477e116540e5a6e1eab6d6e7523e" } ] ``` The KV store exists in perpetuity, while the Worker can be updated, deployed, removed, etc. independently of the KV store. The Worker itself has unfettered access to the KV store. The Worker is exposed publicly, and just does some basic verification against the request host.
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.