ruff/playground
Dhruv Manilawala 857cf0deb0
Revert tailwindcss v4 update (#16075)
## Summary

Revert the v4 update for now until the codebase is updated
(https://github.com/astral-sh/ruff/pull/16069).

Update renovate config to disable updating it.

## Test Plan

```console
$ npx --yes --package renovate -- renovate-config-validator
(node:98977) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 INFO: Validating .github/renovate.json5
 INFO: Config validated successfully
```

And run `npm run build` in the `playground/` directory.
2025-02-10 18:13:32 +05:30
..
api Update NPM Development dependencies (#16067) 2025-02-09 21:29:45 -05:00
public playground: Add left panel and use brand colors (#5838) 2023-07-19 16:33:32 +02:00
src Fix stale syntax errors in playground (#13888) 2024-10-23 12:30:10 +00:00
.eslintrc Add diagnostics panel and navigation features to playground (#13357) 2024-09-16 07:34:46 +00:00
.gitignore Remove all `useEffect` usages (#12659) 2024-08-08 13:16:38 +02:00
.prettierignore Upgrade playground dependencies (#5830) 2023-07-18 08:00:54 +02:00
.prettierrc.json Use trailingComma: 'all' (#1457) 2022-12-29 19:36:51 -05:00
README.md Remove all `useEffect` usages (#12659) 2024-08-08 13:16:38 +02:00
index.html playground: Add left panel and use brand colors (#5838) 2023-07-19 16:33:32 +02:00
package-lock.json Revert tailwindcss v4 update (#16075) 2025-02-10 18:13:32 +05:30
package.json Revert tailwindcss v4 update (#16075) 2025-02-10 18:13:32 +05:30
postcss.config.cjs Update Monaco (#10609) 2024-03-26 11:41:21 +00:00
tailwind.config.cjs playground: Add left panel and use brand colors (#5838) 2023-07-19 16:33:32 +02:00
tsconfig.json Web playground with WASM (#1279) 2022-12-26 12:09:17 -05:00
tsconfig.node.json Web playground with WASM (#1279) 2022-12-26 12:09:17 -05:00
vite.config.ts Web playground with WASM (#1279) 2022-12-26 12:09:17 -05:00

README.md

playground

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

Getting started

In order to build the WASM module install wasm-pack.

Next, build the WASM module by running npm run build:wasm (release build) or npm run dev:wasm (debug build) from the ./playground directory.

Finally, 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/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 Rome Tools Playground.