javierbrea / eslint-plugin-boundaries / 43199311423

100%

master: 100%

push

github

feat: Website playground (#649)

The website gets a playground at `/playground/`: sketch a project and its boundaries config, and see how each file is classified and which of its dependencies are allowed, evaluated in the browser by the same `@boundaries/config` and `@boundaries/policies` as the plugin. It was designed in [RFC #538](https://github.com/javierbrea/eslint-plugin-boundaries/discussions/538) and is tracked in #539 (milestone [Playground](https://github.com/javierbrea/eslint-plugin-boundaries/milestone/45)). Each part was reviewed in its own PR into `feat/539/playground`, listed below.

### For users

- The files of a project are sketched as a tree or as text, the `settings` and `rules` of `eslint.config.js` are written in a JSON5 editor that lints them, and dependencies are added through a picker and shown as import statements.
- Each dependency shows its verdict and the policy that decided it. The inspector describes the file and the dependency in focus as the selectors see them, and the problems panel lists the disallowed dependencies and the config errors.
- The evaluation runs in a web worker, so a slow project never blocks the page.
- A link holds the whole project, so it can be shared. The top bar has examples, Help, Reset and Share.
- The docs have a Playground guide and Open in playground buttons on the Quick start, the Overview, the Policies page and the `boundaries/dependencies` rule page, in `docs/` and in the 7.4.1 snapshot. The bug report template asks for a playground link.
- Desktop only: below 997 px the page shows a note and never loads the playground chunk.

### Projects

- `packages/playground` (`@boundaries/playground`, private): the component, host-agnostic through `ProjectSource` and `StateStore`, with the `/share` entry for the docs and the `/playwright` entry for browser specs. Its layering is lint-enforced; `packages/playground/AGENTS.md` and the `playground-components` and `playground-testing` rules describe it.
-... (continued)

2166 of 2166 branches covered (100.0%)

Branch coverage included in aggregate %.

2714 of 2714 relevant lines covered (100.0%)

942.37 hits per line