Change Details

This (currently placeholder) spike seeks to shed light on how to better share dependencies across projects both in the near- and long-term as is practical. Some initial considerations: - If Webpack is used, do we want or //need// to split the runtime out for sharing? If two projects are using Webpack (e.g., [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/deaaf0961b7ae8d28ef94023e04db1fb93a7724d/webpack.config.js | Popups ]]), are there any conflicts to be aware of? Do we need any test infrastructure for ensuring versions match? (E.g., if Popups and Vector are installed, `require` the `package.json` files of both and check that the major and minor versions match.) - How can we depend on Vue? Are there any concerns on simply using the Core ResourceLoader module (comes in both dev and prod flavors)? - Do we anticipate other libraries will be needed in the runtime? Do all of these get pushed into Core? The only //unusual// dependency I see in Popups and MobileFrontend are redux* and Vuex probably won't be needed for search. - How should we load Vue.js? E.g., as a RL module dependency in `skin.json` or [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/deaaf0961b7ae8d28ef94023e04db1fb93a7724d/resources/ext.popups/index.js#1 | defer loading until after initial render ]]? On input? Something else? - If two projects have the same dependencies, how are those shared in the context of ResourceLoader? - How do we load only the relevant search implementation for the configuration? mediawiki.searchSuggest is needed for the Legacy mode and Vue.js + the new search form itself will be needed for Latest (see T249051). They should not be both loaded. == Acceptance criteria - [] [[ https://www.mediawiki.org/wiki/Vue.js | Define versioning communication guidelines on wiki ]] for updating shared dependency. Initial understanding from @Volker_E, is that OOUI announces version breaking changes but clients are expected to update their own code.

The new Vue.js search will have at least the following dependencies: - Presentation styles - Client-only JavaScript - Vue.js itself It's expected that Vue.js will be the lion's share at [[ https://bundlephobia.com/result?p=vue@2.6.11 | 64 kilobytes minified ]] for the runtime only which is a significant increase in page size. The runtime + compiler is 91 kilobytes minified. According to [[ https://grafana.wikimedia.org/d/000000205/mobile-2g?panelId=76&fullscreen&orgId=1&from=now-30d&to=now | present desktop dashboards ]], the current JavaScript payload is 216 kilobytes. How should we load all this code? E.g., as a ResoureLoader module dependency in `skin.json` or [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/deaaf0961b7ae8d28ef94023e04db1fb93a7724d/resources/ext.popups/index.js#1 | defer loading until after initial render ]]? On input? Something else? That's what this task identifies. == Acceptance criteria - [] A loading strategy is proposed and any tasks needed are created. - [] The #performance-team is consulted or notified as needed. - [] T250336, T251544, and T244276 are updated as needed.

This (currently placeholder) spike seeks to shed light on how to better share dependencies across projects both in the near- and long-term as is practical.e new Vue.js search will have at least the following dependencies: Some initial considerations:- Presentation styles - If Webpack is used, do we want or //need// to split the runtime out for sharing? If two projects are using Webpack (e.g., [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/deaaf0961b7ae8d28ef94023e04db1fb93a7724d/webpack.config.js | Popups ]]), are there any conflicts to be aware of? Do we need any test infrastructure for ensuring versions match? (E.g., if Popups and Vector are installed, `require` the `package.json` files of both and check that the major and minor versions match.)Client-only JavaScript - How can we depend on Vue? Are there any concerns on simply using the Core ResourceLoader module (comes in both dev and prod flavors)? - Do we anticipate other libraries will be needed in the runtime?Vue.js itself It's expected that Vue.js will be the lion's share at [[ https://bundlephobia.com/result?p=vue@2.6.11 | 64 kilobytes minified ]] for the runtime only which is a significant increase in page size. Do all of these get pushed into Core?The runtime + compiler is 91 kilobytes minified. The only //unusual// dependency I see in Popups and MobileFrontend are redux* and Vuex probably won't be needed for search. - According to [[ https://grafana.wikimedia.org/d/000000205/mobile-2g?panelId=76&fullscreen&orgId=1&from=now-30d&to=now | present desktop dashboards ]], the current JavaScript payload is 216 kilobytes. How should we load Vue.jsall this code? E.g., as a RLesoureLoader module dependency in `skin.json` or [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/deaaf0961b7ae8d28ef94023e04db1fb93a7724d/resources/ext.popups/index.js#1 | defer loading until after initial render ]]? On input? Something else? - If two projects have the same dependencies, how are those shared in the context of ResourceLoader? - How do we load only the relevant search implementation for the configuration? mediawiki.searchSuggest is needed for the Legacy mode and Vue.js + the new search form itself will be needed for Latest (see T249051). They should not be both loadedThat's what this task identifies. == Acceptance criteria - [] [[ https://www.mediawiki.org/wiki/Vue.js | Define versioning communication guidelines on wiki ]] for updating shared dependency.A loading strategy is proposed and any tasks needed are created. - [] The #performance-team is consulted or notified as needed. - [] T250336, Initial understanding from @Volker_ET251544, is that OOUI announces version breaking changes but clients are expected toand T244276 are update their own coded as needed.