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:
- Missing RTL support and language integration. eg: T335371: Add RTL support on dialog transitions
- Missing image loading performance optimizations. eg: T335268: Improve image loading performance
- Missing static asset handling or proper pipeline, see relevant patch 923563
- 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:
- Host GrowthExperiments/MW domain components under the extension modules/<relevant_module> folder
- Declare them to RL in extension.json
- 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