Page MenuHomePhabricator

Reconsider build step in Popups and MobileFrontend
Open, LowPublic

Description

Extension:Popups and Extension:MobileFrontend currently uses webpack to build its JS assets.

At some point we will need to reconsider this with 2 options

  1. Use whatever build step becomes the official build step (e.g. rollup)
  2. Switch to packageFiles in ResourceLoader

Switch to packageFiles in ResourceLoader

Steps required:

  1. Switch imports to requires - Semi-manual. Can use https://marketplace.visualstudio.com/items?itemName=tlevesque.import-to-require

and run eslint

  1. Replace SVG import with JS module exporting SVG
  2. Make build script for populating extension.json

Pros:

  • For many changes no build step is required
  • Works without npm install
  • More consistent with how other repos do things
  • It works
  • No minified code in the repo

Cons:

  • lose hot reloading
  • added developer friction - new files now need to be added to extension.json every time they are created.
  • must manually verify Redux and Redux Thunk are trusted - can't load from npm (but some may see this as an advantagE) - these would need to make use of foreign-resources.
  • Increases bytes shipped from 16.55kb => 18.08kb - dead code elimination and optimization becomes a manual process
  • restricted to writing older JS code using requires (e.g. https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1003805 not possible)

Event Timeline

Change 812973 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Popups@master] [POC] Use packageFiles for Popups

https://gerrit.wikimedia.org/r/812973

Change 812973 abandoned by Jdlrobson:

[mediawiki/extensions/Popups@master] [POC] Use packageFiles for Popups

Reason:

Converted to phabricator ticket

https://gerrit.wikimedia.org/r/812973

Change 812973 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Popups@master] [POC] Use packageFiles for Popups%%%

[…]

  • Increases bytes shipped from 16.55kb => 18.08kb

[…]

https://gerrit.wikimedia.org/r/812973

This is looking good. I'm glad to see the files are effectively drop-in compatible by now.

When I measure locally, I do see a different transfer size before and after.

Before, the added payload appears to be load.php?lang=en&modules=ext.popups.icons%2Cimages%2Cmain&skin=vector&version=1wdcu which amounts to 18.3KB transferred.

After, the payload is load.php?lang=en&modules=ext.popups.main%2Credux&skin=vector&version=5ykpi which totals 21.9KB. I note that if I change redux and redux-thunk to their minified versions (matching what we do with Vue in core), then the latter goes down to 19.6KB.

curl 'https://unpkg.com/redux@4.2.0/dist/redux.min.js' > resources/dist/redux.js
curl 'https://unpkg.com/redux-thunk@2.4.1/dist/redux-thunk.min.js' > resources/dist/redux-thunk.js

I think that limiting support to modern browsers via es6: true is fine for this feature. Nice to see the move away from webpack and towards a standard MW approach (while preserving most of the modern JS).

Jdlrobson added a project: patch-welcome.

Popups is currently ES6 only so patch welcome but currently not a web team priority.

Change 908912 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Popups@master] Prefer native JavaScript to jQuery

https://gerrit.wikimedia.org/r/908912

Change 812973 restored by Jdlrobson:

[mediawiki/extensions/Popups@master] [POC] Use packageFiles for Popups

https://gerrit.wikimedia.org/r/812973

Change 908912 merged by jenkins-bot:

[mediawiki/extensions/Popups@master] Prefer native JavaScript to jQuery

https://gerrit.wikimedia.org/r/908912

Change 812973 abandoned by Jdlrobson:

[mediawiki/extensions/Popups@master] [POC] Use packageFiles for Popups

Reason:

https://gerrit.wikimedia.org/r/812973

Jdlrobson renamed this task from Reconsider build step in Popups to Reconsider build step in Popups and MobileFrontend.Dec 12 2023, 4:43 PM
Jdlrobson updated the task description. (Show Details)

Change 1000045 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MobileFrontend@master] WIP: Try bundling using Vite

https://gerrit.wikimedia.org/r/1000045

Change #812973 restored by Esanders:

[mediawiki/extensions/Popups@master] [POC] Use packageFiles for Popups

https://gerrit.wikimedia.org/r/812973

Change #812973 abandoned by Jdlrobson:

[mediawiki/extensions/Popups@master] [POC] Use packageFiles for Popups

Reason:

Feel free to fork this patch if you need it for something - this is showing up on my work dashboard and I don't want it there.

Web team never really talked through the cons here to decide if the approach made sense so there's some conversation that needs to be had before making this ready for review.

https://gerrit.wikimedia.org/r/812973

Change #1024608 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/Popups@master] Use packageFiles for Popups

https://gerrit.wikimedia.org/r/1024608

Related patch from @simon04 that is stalled until we have more clarity around whether we should continue to use webpack: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1003805

I wonder whether Use packageFiles for Popups https://gerrit.wikimedia.org/r/1024608 would be a good first step to see whether packageFiles (in comparison to JavaScript bundlers such as webpack or rollup or vite) is a viable strategy. It seems that this patch is mostly ready?

Popups contains 101 export inside src/, MobileFrontend contains 84 module.exports inside src/.