From c9d5b2e4fb06c89d266825dd3bfb0561596b8683 Mon Sep 17 00:00:00 2001
From: Stephen Niedzielski <stephen@niedzielski.com>
Date: Fri, 10 Apr 2020 09:24:13 -0600
Subject: [PATCH] [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                               |  8 +++++++-
 resources/skins.vector.js/collapsibleTabs.js |  6 ++++--
 resources/skins.vector.js/index.js           | 10 ++++++++++
 resources/skins.vector.js/vector.js          | 10 ++++++----
 skin.json                                    |  3 ++-
 5 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 resources/skins.vector.js/index.js

diff --git a/.eslintrc.json b/.eslintrc.json
index bb170bb..4185f85 100644
--- a/.eslintrc.json
+++ b/.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"
 	}
 }
diff --git a/resources/skins.vector.js/collapsibleTabs.js b/resources/skins.vector.js/collapsibleTabs.js
index 778499f..765270e 100644
--- a/resources/skins.vector.js/collapsibleTabs.js
+++ b/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 } );
diff --git a/resources/skins.vector.js/index.js b/resources/skins.vector.js/index.js
new file mode 100644
index 0000000..40eff8a
--- /dev/null
+++ b/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();
diff --git a/resources/skins.vector.js/vector.js b/resources/skins.vector.js/vector.js
index f1d36ab..c4f0d16 100644
--- a/resources/skins.vector.js/vector.js
+++ b/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 } );
diff --git a/skin.json b/skin.json
index f4620b9..51823cd 100644
--- a/skin.json
+++ b/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"
 			],