Page MenuHomePhabricator

Overhaul frontend tech stack
Open, Needs TriagePublic

Description

We're long overdue for a bump to the various JS libraries we use. In doing so, we should probably also modernize our frontend stack. This task documents various maintenance and clean up that can be done to get us out of being a "legacy" JS application.

  • Include all assets in the repo itself, removing reliance on https://cdnjs.toolforge.org/. It's rare, but occasionally tools-static.wmflabs.org will go down and it causes all of XTools to go down with it.
    • Can be locally stored in /assets/vendor/ for now, as opposed to using an NPM module
  • Change our manually included vendor assets to use NPM modules
  • Bump packages to stable, secure versions
  • Stop using the global scope in our JS
    • Likely very difficult to fix.
    • Some Twig templates like globalContribs/result.html.twig pass data to the JS via the xtools global. We'll need to find a different means to give the client this server-generated data.
  • Add ESLint

Event Timeline

On the global scope: if it's from twig we want to communicate:

  • worst case we can put the JSON.stringify()'d (or whatever the equivalent of that's called in PHP/twig) data in a display:none element. This would mean moving out all the code currently in a xtools.method = into a if ($("#data-container-id").length) {.
  • if you don't like that, we can put the stringified stuff in localStorage (though perhaps it'd be a misuse of that given that IIRC localStorage's purpose is for data we want to keep in different pages; but then again IDK if putting data as text in a hidden element isn't a misuse too).

About all the global charts, this SO question gives us a good way to find back instances without having to keep them in global scope. We need to check how .destroy() affects that, though; if we're lucky, destroyed instances are removed from Chart.instances.

On MW JS coding conventions: taking a quick peek at the list, I think the most common things we'll have to change (though we'll get to see when we add eslint) will be:

  • retabbing, right now we're on four spaces and mw says tabs;
  • spaces in function call parens; (what we've used up to now explicitly forbade this)
  • strict equality;
  • and variable naming.
MusikAnimal changed the task status from Open to In Progress.Apr 25 2025, 4:05 AM
MusikAnimal claimed this task.
MusikAnimal changed the task status from In Progress to Open.May 2 2025, 7:39 AM
MusikAnimal removed MusikAnimal as the assignee of this task.

This is not a good time to be doing this, hehe. I don't want to cause conflicts while @Alien333 is kicking ass fixing all these bugs :)

I put a few hours into this the other day, and ended up where I was ~2 years ago with an almost identical attempt. The problem is we can't really do this in tiny steps, as I was hoping. I will revisit this effort at a later time.

I've enjoy getting eslint-config-wikimedia set up on various JS tools such as Twinkle and AFC Helper Script. When the time is right, let me know if you'd like another set of eyes!