This task encompasses the work to automatically detect common pitfalls and style inconsistencies in Vue.js components. This functionality is not yet available in eslint-config-wikimedia so this task may require upstream changes to add an initial eslint-plugin-vue or collaboration with WMDE, which is using eslint-config-wikimedia-typescript for their TypeScript Vue.js work (see T249304#6032440).
jQuery
MobileFrontend components are inseparable from jQuery. Its usage has encouraged building features in a way that is both verbose and challenging to reason about, and discourages composition. In some cases, the results of our best devs have been nearly incoherent. Additionally, the outputs of the API often return more API-specific types that imply further usage such that any interaction compounds. All of this and large jQuery runtime dependencies. For these reasons, new usages of jQuery should be the exception rather than a rule. Further, jQuery usage from within components should be totally forbidden to avoid the shortcomings of previous frameworks. If we don't make this change, we will miss severall important rationales given for migrating frameworks (see T225453).
eslint-config-wikimedia provides a eslint-plugin-no-jquery to minimize jQuery but this task posits a bolder approach for all new JavaScript written: no jQuery at all which seems more practical than ever given the Vue.js baseline.
Globals dependencies
The default for components is no dependencies needed until proven otherwise. Implicit global dependencies in general, such as mw, OO, $ should be intensely scrutinized to take the most minimal subset possible for shared components. These implicit global dependencies massively bloat the overall shared component library footprint which limits its relevance, shareability, and development abilties outside of the MediaWiki ecosystem. This was a major shortcoming of alternative frameworks considered and a requirement identified in T225572. Great pains should be taken to write components as plainly as possible and to avoid the classic dependencies and their pitfalls that are now well known.
Prototype exploration
- ESLint
- stylelint
- Test and autofix
Patch
Acceptance criteria
- If Vector is used, eslint-config-wikimedia is configured for Vue.js linting (likely just adding an extends). If a new project is started, an eslint-config-wikimedia dev dependency and configuration is added with Vue.js linting enabled.
- All components are linted.
- ESLint and stylelint is configured to forbid all jQuery interactions.
- Adding any jQuery anywhere else causes npm t to fail.
- The wiki is updated to clarify that jQuery and other traditionally implicit MediaWiki dependencies cannot be a dependency of components as a design goal. These dependencies may currently be available on every page load but they will never not be if they're embedded in the components. -- See https://www.mediawiki.org/wiki/Vue.js#Guidelines.
- Lint dist to ensure only ES5 sources are shipped. E.g., see Popups. -- See https://github.com/wikimedia/wvui/blob/master/dist/.eslintrc.json.
Open questions
- Are these Wikimedia-specific rules applicable for the project if it's built outside of ResourceLoader? Many rules assume RL usage so it may make sense to use the Vue plugin directly instead depending on how the project is built.