Page MenuHomePhabricator

Move application components to GE modules folder
Open, Needs TriagePublic

Description

During the T329033: [Internship] Modernization of web interfaces using Vue.js process we made the decision to host components such as AddLinkDialog and AddImageDialog in documentation/frontend/components and make them part of the library build done with vite.

That has given two interesting advantages: (1) Be able to demo those components in the documentation site (2) Be able to use latest es6 syntax with import/export
But it has also posed several problems:

  1. Missing RTL support and language integration. eg: T335371: Add RTL support on dialog transitions
  2. Missing image loading performance optimizations. eg: T335268: Improve image loading performance
  3. Missing static asset handling or proper pipeline, see relevant patch 923563
  4. Creating a library bundle with application seems complicated to scale since each MW module would get unused application code unless the bundles are created on a per module basis

Conceptually it seems a wrong decision was taken when making "application" components (those which are bound to the MW or GrowthExperiments domain and require existing MW features) vs what in the documentation was names as "low-level" components.

This task is to undo that bad decision. The rough steps are:

  1. Host GrowthExperiments/MW domain components under the extension modules/<relevant_module> folder
  2. Declare them to RL in extension.json
  3. Remove the npm components:styles command and related lessc files

Nice to have

  • Instead of removing the application components demos, explore if they can be loaded from outside the VitePress root project with some vite config

Event Timeline

Conceptually it seems a wrong decision was taken when making "application" components (those which are bound to the MW or GrowthExperiments domain and require existing MW features) vs what in the documentation was names as "low-level" components.

I'm not sure about that. The desired end state for me is:

  • engineers can build Vue applications in an entirely static environment, using mock data. No MediaWiki setup necessary.
  • product / QA has a reference point for the application behavior. We can use this to easily check for regressions in UX as well use this for automated visual regression testing in CI
  • for integration with MW, we plug in real providers for e.g. i18n, event logging, and interaction with MW Action API or REST API.