Design System Team/Vue.js Developer Summit 2021/Vue.js Developer Summit 2021 Documentation
This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date. |
At the 2021 Vue.js Developer Summit, representatives from the Wikimedia Foundation and Wikimedia Deutschland met to collectively make decisions about a future shared UI component library built in Vue.js. This page documents those decisions and links to Phabricator tasks for further reading.
Decisions
editWill the shared component library support IE11?
editSummary: No; IE11 users will get a no-JS experience.
The new shared Vue component library will be built using Vue 3, meaning that we will stop providing these (JS-based) features to users of legacy browsers like IE11. Instead, a non-JS fallback should be provided where necessary. The Design System Team will work with the Product Department to come up with a clear policy around where and how such no-JS fallback interfaces should be provided.
At some point in the near future, the copy of Vue.js shipped with MediaWiki will be updated to use the 3.2 compatibility build. When this happens, all Vue.js features will stop working in IE11 (and other ES5-only browsers).
JS features that do not use Vue (OOUI-based interfaces, VisualEditor, etc) will not be impacted and their ability to support legacy browsers is unchanged. However, we expect that over time more and more new features will follow suite in dropping JS legacy browser support, whether or not they are built using Vue.js.
See T286947 for full details.
Will the shared component library support Vue 2 or Vue 3?
editSummary: The library will support Vue 3.
The new shared component library will be built in Vue 3. At some point soon, MediaWiki will also upgrade its bundled copy of Vue.js to the 3.2 compatibility build (which also ends IE11 support for all code that uses the library). The compatibility build of Vue defaults to Vue 2 behavior, and individual projects will be able to opt-in to Vue 3 behavior on a component-by-component basis.
See T286947 for more details about what this means for legacy browser support.
See T286948 for full details.
How will TypeScript be used in the shared component library?
editSummary: The new library will be developed in TypeScript, details are forthcoming.
We will use Typescript to develop the new shared component library. The exact approach to how TS is used will be developed by the new task force that will spearhead initial development of the new library. This will likely focus on a gradual/progressive implementation, determining the ideal configuration for this use case, and documenting known difficulties with Vue and TypeScript to improve the learning curve for library developers.
See T286949 for full details.
How will the shared component library be built and distributed?
editSummary: Built with Vite with various bundles available.
The new shared library will be built using Vite. We will provide various bundles to support different use-cases (ES Modules, CommonJS, and browser script tag). An ES5 legacy bundle will not be provided (library will be in Vue 3 which requires ES6). We will continue using Storybook as a development tool.
We will continue to vendor a bundle of this shared library in MediaWiki. The future work around a front-end build step will also impact how developers consume this library in their own projects.
See T286950 for full details.
Where will the code for the shared component library live and how will it be governed?
editSummary: A new library will be created and governed according to the in-progress governance model and guiding principles.
Summit participants voted to begin a new shared component library from scratch in order for it to be a truly shared project. Neither WiKit nor WVUI will be converted into the canonical shared library, but existing code from both places may be adapted in some capacity. A dedicated task force that includes representatives from key teams at WMF and WMDE will spearhead the creation of this new shared library and will make some key decisions about where code is hosted, library name, contribution policies, etc (soon). This library will also implement the governance model developed by WMF and WMDE designers at the designer summit. Guiding principles were discussed and will be finalized asynchronously and documented in the library.
See T286953 for history and T288980 for details of future work.
Which CSS pre- or post-processor will be used?
editSummary: To be determined by task force
Participants at the summit decided to move forward with the creation of a new shared library from scratch (not WVUI or WiKit). A task force with representatives from key teams at WMF and WMDE will spearhead the creation of this new library and will make decisions around CSS architecture as part of that work. It may be possible to rely on PostCSS and new features of the CSS spec itself for desired features, rather than needing to continue depending on a specific pre-processor like Less or Sass.
See T286951 for full details.