One of the ways developers can work on components locally is within the sandbox provided by Vite. This simple local dev environment is fast and no-frills, meaning component development can be done quickly and in an isolated environment (i.e. there are no styles potentially polluting the components, like in VitePress).
However, the sandbox could use some work:
- It's a single file containing all components, which is becoming unwieldy and disorganized
- It's being used to demo components in MediaWiki in the VueTest extension (it was manually copied there, but we might automate this in the future), which means the only thing being tested in a MediaWiki context is what we put in the Sandbox. We may want to consider what kinds of test cases should be included in the Sandbox to lead to adequate testing in MediaWiki.
- In general, there are no standards as far as whether a component must be included in the Sandbox, how it should be included, and how many examples should be included
Acceptance criteria
- Decide on and document standards for the sandbox during component development. These should be as lightweight as possible, and adding a full suite of test cases (if that's what we want) could happen in a subsequent task done by another developer, to ease the burden on the main developer
- Clean up and organize the sandbox according to those standards:
- Each demo gets its own wrapper component: <ButtonDemo />, <TabsDemo />, etc.
- Each demo component contains the simple, minimum demonstration of what a component does; more exhaustive demonstrations can live on the docs pages
- The sandbox page displays all the component demos in one long view; nothing is hidden inside of tabs, etc;
- Only components that have been included in a Codex release are included here
Future work: automate pulling the sandbox contents into Special:VueTest so it's kept up to date
Screenshot of the new demo layout:
