Page MenuHomePhabricator

[QS-GUI] Port Wikidata Query UI to a modern build system
Open, Needs TriagePublic

Description

The Wikidata Query UI is currently built using a rather dated pipeline of Grunt tasks, including now-unmaintained ones like grunt-usemin. (See T274626: wikidata-query-gui build tooling uses outdated packages (via grunt) for some details.) We should port it to some modern build system, such as Webpack or (more likely, in light of recent tasks like T276366) Rollup.

To keep the scope of this task down, we should try to do this with as little changes to the code as possible. In other words, this is not the task for abandoning jQuery, using async/await, or other sweeping modernizations. Let’s start with the build system only.

It would be nice if one result of this was a version of the code that we can publish to npm with little extra effort (basically, include lib-level code in wikibase/queryService/, while excluding application-level code like wikibase/init.js); however, since the current build system has nothing like this either (compare T267836), I don’t think this should be a hard requirement.

Event Timeline

I volunteered some time and created a first version that uses rollup to build the main code: https://gerrit.wikimedia.org/r/c/wikidata/query/gui/+/875993

This now works for the main js of index.html.

Things that still need doing in this patch:

  • do the same for the embed entrypoint (should be simple)
  • fix tests
  • figure out how to do bundle the npm/vendor dependencies with rollup, too (maybe a separate change?)

Things to do in follow-up changes:

  • actually start to use import/export or at least require and stop writing into the global state
  • parse .less files and bundle css outside of Grunt
  • copy everything to the right place without Grunt
  • make sure we have only hashed versions of js/css files in production, without using Grunt for this
  • drop Grunt

One other thing I noticed:

  • the embedInit entrypoint seems to include all the js for the query helper and examples, etc. But it can't be used there, right?
ItamarWMDE renamed this task from Port Wikidata Query UI to a modern build system to [QS-GUI] Port Wikidata Query UI to a modern build system.Sep 20 2023, 3:02 PM
ItamarWMDE moved this task from Incoming to [QT] By Project on the wmde-wikidata-tech board.