ruff/playground
David Peter 761749cb50
[playground] New default program (#17277)
## Summary

This PR proposes to change the default example program in the
playground. I realize that this is somewhat underwhelming, but I found
it rather difficult to come up with something that circumvented missing
support for overloads/generics/self-type, while still looking like
(easy!) code that someone might actually write, and demonstrating some
Red Knot features. One thing that I wanted to capture was the experience
of adding type constraints to an untyped program. And I wanted something
that could be executed in the Playground once all errors are fixed.

Happy for any suggestions on what we could do instead. I had a lot of
different ideas, but always ran into one or another limitation. So I
guess we can also iterate on this as we add more features to Red Knot.

Try it here:
https://playknot.ruff.rs/8e3a96af-f35d-4488-840a-2abee6c0512d
```py
from typing import Literal

type Style = Literal["italic", "bold", "underline"]

# Add parameter annotations `line: str, word: str, style: Style` and a return
# type annotation `-> str` to see if you can find the mistakes in this program.

def with_style(line, word, style):
    if style == "italic":
        return line.replace(word, f"*{word}*")
    elif style == "bold":
        return line.replace(word, f"__{word}__")

    position = line.find(word)
    output = line + "\n"
    output += " " * position
    output += "-" * len(word)


print(with_style("Red Knot is a fast type checker for Python.", "fast", "underlined"))
```

closes https://github.com/astral-sh/ruff/issues/17267
2025-04-07 21:52:07 +02:00
..
api [playground] Use cursor for clickable elements (#16833) 2025-03-18 18:06:00 +01:00
knot [playground] New default program (#17277) 2025-04-07 21:52:07 +02:00
ruff [playground] Provide fallback monospace-font (#17242) 2025-04-06 21:57:20 +01:00
shared [playground] Add Reset button (#17236) 2025-04-06 17:09:56 +00:00
.gitignore Remove all useEffect usages (#12659) 2024-08-08 13:16:38 +02:00
.prettierignore Red Knot Playground (#12681) 2025-03-18 17:17:11 +01:00
eslint.config.mjs Red Knot Playground (#12681) 2025-03-18 17:17:11 +01:00
package-lock.json Update dependency pyodide to v0.27.5 (#17250) 2025-04-06 22:01:57 -04:00
package.json Red Knot Playground (#12681) 2025-03-18 17:17:11 +01:00
README.md Red Knot Playground (#12681) 2025-03-18 17:17:11 +01:00
tsconfig.json Red Knot Playground (#12681) 2025-03-18 17:17:11 +01:00
tsconfig.node.json Red Knot Playground (#12681) 2025-03-18 17:17:11 +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 --workspace ruff-playground or npm start --workspace knot-playground. You may need to restart the server after making changes to Ruff or Red Knot 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.

Known issues

Stack overflows

If you see stack overflows in the playground, build the WASM module in release mode: npm run --workspace knot-playground build:wasm.