As a result of decisions made at the recent Vue.js Developer Summit, a new library will serve as the canonical, shared Vue.js user-interface component library as future development standard in MediaWiki. This library will be collaboratively built by the Wikimedia Foundation, Wikimedia Deutschland, and volunteer developers.
The ultimate goal of this task is to enable code contributions to the library.
Order of operations
1. Create a new repository for the shared library
- Create a subtask for this (@Catrope)
- Create the new repository in Gerrit. (Eventually, we may consider moving to GitLab.)
- Document it on Phabricator by creating a new tag or workboard for the library
2. Set up tooling
The following items require setup and configuration (and npm scripts, if applicable):
- Linters and code formatters
- Vue 3.x and the first Vue component (Button)
- CSS tooling and define guidelines for authoring styles
- Docker configuration for local development and production releases (or maybe we should just add a task for this and do it later so it doesn't block this epic)
- git hooks
3a. Create a stable design token setup
- Create a subtask for this once the details – T288383 – are finalized (@Volker_E)
- Set up and document design token architecture and standards. This should be finalized and stable to enable easier contributions.
Note that documenting design tokens on the demo site could be completed as part of step 4, or separately from this epic at a later date.
3b. Set up docs site and basic documentation structure
- Create a subtask for this once T290912 is resolved (@AnneT)
- Set up basic functionality of the demo tool
- Set up basic documentation structure: introduction, for developers, contributing, etc.
- Document the Button component as an example
4a. Document basic usage and developer guidelines
- Add basic usage info to the README in the repository root, and to the docs intro page
- Add developer docs covering
4b. Document contribution guidelines and guiding principles
- Add contributing guidelines to the library (see T291417)
- Add library guiding principle to the library (see T288380)
- Make them visible in the demo site
5. Determine contribution process for existing library code
- Agree with key library stakeholders how we will add and review code from existing libraries (e.g. WVUI and WiKit) (see T291416)
Definition of Done
- New repository is created in Gerrit for the library
- Associated Phab artifacts are created
- Vue 3, Vite, TypeScript, Jest, linters, and all other tooling described in part 4 of this list are installed and configured
- CSS pre- or postprocessor is implemented
- Demo tool is installed and configured for development and documentation
- README.md, contributing guidelines CONTRIBUTING.md, and developer guidelines DEVELOPERS.md are written and visible in the demo tool
- Design token architecture is determined and anything related is configured in the library
- We have a plan for adding existing components to the new library