The Vue migration team is pleased to announce that MediaWiki finally has built-in support for writing modern JavaScript with ES6.

Up until now, all JavaScript code in MediaWiki has been written in ES5 (a version of JavaScript standardized in 2009), because MediaWiki maintains support for some browsers that don't support ES6. Over the years this has become increasingly frustrating for developers, because ES6 (standardized in 2015) adds new language features that make writing code easier and more pleasant, but these features couldn't be used in MediaWiki. A lot of modern code and tools are now written in ES6, and browsers that don't support ES6 have become obsolete. At this point, the only significant non-ES6 browser that MediaWiki continues to support is Internet Explorer 11, whose usage is relatively low, but not yet quite low enough for us to drop support for it. In keeping with the IE11 announcement[1] from earlier this month, we will continue to support IE11, but some new features will not support it.

What this means for developers is that you can now use ES6 code in MediaWiki core, extensions, and skins, as long as it's in a feature that doesn't need to support IE11. ResourceLoader modules that use ES6 code have to be flagged as such, and you will need to put ES6 code in a separate directory so that different eslint rules can be applied. For detailed instructions on how to start using ES6 in your code, see https://www.mediawiki.org/wiki/ResourceLoader/ES6 .

Unfortunately, ES6 code is not yet supported in on-wiki JavaScript (Gadgets, user scripts, and site scripts), because we need to check that these scripts are syntactically valid, and our current validator only understands ES5 [2].

To make this possible, we added functionality[3] to ResourceLoader to allow modules to mark themselves as ES6-only, and prevent those modules from being loaded in browsers that don't support ES6. We also made significant changes[4] to our JavaScript minifier[5] to support the minification of ES6 code, which previously generated invalid output[6] when confronted with ES6 syntax. And we updated our eslint ruleset[7] to add a linter configuration for ES6 code[8]. Thank you to Timo Tijhof (Krinkle) and DannyS712 for code reviewing the ResourceLoader and minifier changes, to Lucas Werkmeister for finding a critical bug[9] in the minifier change, and to James Forrester and Ed Sanders for code reviewing the linter changes and releasing new versions of all these packages.

Roan Kattouw
On behalf of the Vue migration team (Anne Tomasevich, Eric Gardner, Volker Eckl, and myself)

[1] https://www.mediawiki.org/wiki/Compatibility/IE11
[2] https://phabricator.wikimedia.org/T75714
[3] https://gerrit.wikimedia.org/r/c/mediawiki/core/+/657953
[4] https://gerrit.wikimedia.org/r/c/mediawiki/libs/Minify/+/664700
[5] https://github.com/wikimedia/Minify/
[6] https://phabricator.wikimedia.org/T255556
[7] https://github.com/wikimedia/eslint-config-wikimedia
[8] https://github.com/wikimedia/eslint-config-wikimedia/pull/358
[9] https://phabricator.wikimedia.org/T277161