[dev] [JS] Move JavaScript to package modules

Move all Vector JavaScript to ResourceLoader `packageFiles`[0] which are
much more compatible with modern development practices:

- The entrypoint is the first `packageFiles` entry (unless specified
  otherwise). All other JavaScript must be explicitly executed.

- Remove a level of indentation due to IIFEs from every JavaScript file.
  Regretfully, ESLint does not support modules except in ES6+ so the
  otherwise useful `no-implicit-globals` rule must be disable. The
  change comes with a comment so we always remember.

- IDEs and other tooling understand Node.js-like `module.exports` /
  `require()`.

This change seemed the most sensible way to start developing new
JavaScript in Vector needed by the collapsible sidebar.

[0]: https://www.mediawiki.org/wiki/ResourceLoader/Package_modules

Change-Id: I287e604d5b1055aa97b5f987c24872755757ea1a

.eslintrc.json

@@ -5,7 +5,13 @@
 		"wikimedia/jquery",
 		"wikimedia/mediawiki"
 	],
+	"globals": {
+		"require": "readonly",
+		"module": "readonly"
+	},
 	"rules": {
-		"one-var": "off"
+		"one-var": "off",
+		"//": ["off", "ResourceLoader's `packageFiles` do not require wrapping but the `module` option is only available in ES6+."],
+		"no-implicit-globals": "off"
 	}
 }

resources/skins.vector.js/collapsibleTabs.js

@@ -1,5 +1,5 @@
 /** @interface CollapsibleTabsOptions */
-( function () {
+function init() {
 	/** @type {boolean|undefined} */ var boundEvent;
 	var isRTL = document.documentElement.dir === 'rtl';
 	var rAF = window.requestAnimationFrame || setTimeout;
@@ -220,4 +220,6 @@
 			return 0;
 		}
 	};
-}() );
+}
+
+module.exports = Object.freeze( { init: init } );

resources/skins.vector.js/index.js

@@ -0,0 +1,10 @@
+var
+	collapsibleTabs = require( './collapsibleTabs.js' ),
+	vector = require( './vector.js' );
+
+function main() {
+	collapsibleTabs.init();
+	$( vector.init );
+}
+
+main();

resources/skins.vector.js/vector.js

@@ -1,10 +1,10 @@
 /**
  * Collapsible tabs for Vector
  */
-/* eslint-disable no-jquery/no-global-selector */
-$( function () {
-
+function init() {
+	// eslint-disable-next-line no-jquery/no-global-selector
 	var $cactions = $( '#p-cactions' ),
+		// eslint-disable-next-line no-jquery/no-global-selector
 		$tabContainer = $( '#p-views ul' ),
 		initialCactionsWidth = function () {
 			// HACK: This depends on a discouraged feature of jQuery width().
@@ -113,4 +113,6 @@ $( function () {
 				return doCollapse;
 			}
 		} );
-} );
+}
+
+module.exports = Object.freeze( { init: init } );

skin.json

@@ -69,7 +69,8 @@
 			"styles": [ "resources/skins.vector.styles.responsive.less" ]
 		},
 		"skins.vector.js": {
-			"scripts": [
+			"packageFiles": [
+				"resources/skins.vector.js/index.js",
 				"resources/skins.vector.js/collapsibleTabs.js",
 				"resources/skins.vector.js/vector.js"
 			],