Bundle jquery.uls and use language-data as dependency

Changes ======= Introduce rollup based bundler to create single js, css files. This allows easy usage and no need to include every source code files explicitly. Fixes issue #326 Add language-data as dependency to the library Instead of using scripts to clone the language-data repo and then create our javascript files from it, directly use language-data as dev-dependency. The final bundle will include language-data. So it is not an external dependency for bundle. Approach ======== To avoid any breakage in consumers, no change in jquery plugins were introduced. No method signature change too. All plugin definitions moved to src/index.js. index.js also import the language-data and alias that to $.uls.data. So, jquery.uls.data.js and jquery.uls.data.utils.js files were deleted. The scripts to generate this files was also deleted. All other changes in jquery.uls.*.js is just indendation change because of the removal of IIFE. The resuling bundle will have IIFE. IIFE block has to be removed to expose the classes for exporting as modules. Examples were updated to refer javascript, css and styles from dist folder. Future steps ============ Introduction of build step allows * To modernize the codebase to new versions of javascript * To drop jquery dependency and optionally keep the jquery plugins * Remove grunt based CI system
wikimedia · Jul 17, 2021 · c919378 · c919378
1 parent 1615eea
commit c919378
Show file tree

Hide file tree

Showing 22 changed files with 23,230 additions and 13,382 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,3 @@
-src/jquery.uls.data.js
+src/jquery.uls.data.js
+dist/
+node_modules/
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,8 +4,19 @@
 		"wikimedia/client",
 		"wikimedia/jquery"
 	],
+	"parserOptions": {
+		"ecmaVersion": 12,
+		"sourceType": "module"
+    },
+	"env": {
+		"es6": true,
+		"browser": true,
+		"jquery": true,
+		"qunit": true,
+		"node": true
+	},
 	"globals": {
 		"jQuery": "readonly",
-		"$": "off"
+		"$": "readonly"
 	}
 }
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -14,11 +14,9 @@ module.exports = function ( grunt ) {
 			},
 			all: [
 				'**/*.{js,json,html}',
-				'!src/jquery.uls.data.js',
-				'!scripts/jquery.uls.data.template.js',
 				'!examples/resources/*.min.js',
 				'!node_modules/**',
-				'!vendor/**'
+				'!dist/**'
 			]
 		},
 		stylelint: {
@@ -27,7 +25,8 @@ module.exports = function ( grunt ) {
 			},
 			src: [
 				'**/*.css',
-				'!node_modules/**'
+				'!node_modules/**',
+				'!dist/**'
 			]
 		},
 		qunit: {

diff --git a/examples/index-i18n.html b/examples/index-i18n.html
@@ -4,20 +4,13 @@
 		<meta charset="utf-8">
 		<title>Universal Language Selector</title>
 		<meta name="author" content="Santhosh Thottingal">
-		<link href="../css/jquery.uls.css" rel="stylesheet">
-		<link href="../css/jquery.uls.grid.css" rel="stylesheet">
-		<link href="../css/jquery.uls.lcd.css" rel="stylesheet">
+		<link href="../styles/jquery.uls.css" rel="stylesheet">
 		<!-- demo -->
 		<link href="resources/demo.css" rel="stylesheet">
 		<!-- Libs -->
 		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 		<!-- Source -->
-		<script src="../src/jquery.uls.data.js"></script>
-		<script src="../src/jquery.uls.data.utils.js"></script>
-		<script src="../src/jquery.uls.lcd.js"></script>
-		<script src="../src/jquery.uls.languagefilter.js"></script>
-		<script src="../src/jquery.uls.core.js"></script>
-		<script src="resources/jquery.i18n.min.js"></script>
+		<script src="../jquery.uls.js"></script>
 		<script>
 			$( function () {
 				var i18n = $.i18n();

diff --git a/examples/index-mobile.html b/examples/index-mobile.html
@@ -14,20 +14,13 @@
 		<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
 		<!-- <meta name="description" content=""> -->
 		<meta name="author" content="Santhosh Thottingal, Pau Giner">
-		<link href="../css/jquery.uls.css" rel="stylesheet">
-		<link href="../css/jquery.uls.grid.css" rel="stylesheet">
-		<link href="../css/jquery.uls.lcd.css" rel="stylesheet">
-		<link href="../css/jquery.uls.mobile.css" rel="stylesheet">
+		<link href="../styles/jquery.uls.css" rel="stylesheet">
 		<!-- demo -->
 		<link href="resources/demo.css" rel="stylesheet">
 		<!-- Libs -->
 		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 		<!-- Source -->
-		<script src="../src/jquery.uls.data.js"></script>
-		<script src="../src/jquery.uls.data.utils.js"></script>
-		<script src="../src/jquery.uls.lcd.js"></script>
-		<script src="../src/jquery.uls.languagefilter.js"></script>
-		<script src="../src/jquery.uls.core.js"></script>
+		<script src="../jquery.uls.js"></script>
 		<script>
 			$( function () {
 				$( '.uls-trigger' ).uls( {

diff --git a/examples/index-narrow.html b/examples/index-narrow.html
@@ -4,19 +4,13 @@
 		<meta charset="utf-8">
 
 		<title>Universal Language Selector</title>
-		<link href="../css/jquery.uls.css" rel="stylesheet">
-		<link href="../css/jquery.uls.grid.css" rel="stylesheet">
-		<link href="../css/jquery.uls.lcd.css" rel="stylesheet">
+		<link href="../styles/jquery.uls.css" rel="stylesheet">
 		<!-- demo -->
 		<link href="resources/demo.css" rel="stylesheet">
 		<!-- Libs -->
 		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 		<!-- Source -->
-		<script src="../src/jquery.uls.data.js"></script>
-		<script src="../src/jquery.uls.data.utils.js"></script>
-		<script src="../src/jquery.uls.lcd.js"></script>
-		<script src="../src/jquery.uls.languagefilter.js"></script>
-		<script src="../src/jquery.uls.core.js"></script>
+		<script src="../jquery.uls.js"></script>
 		<script>
 			$( function () {
 				$( '.uls-trigger' ).uls( {

diff --git a/examples/index.html b/examples/index.html
@@ -14,19 +14,13 @@
 		<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
 		<!-- <meta name="description" content=""> -->
 		<meta name="author" content="Santhosh Thottingal">
-		<link href="../css/jquery.uls.css" rel="stylesheet">
-		<link href="../css/jquery.uls.grid.css" rel="stylesheet">
-		<link href="../css/jquery.uls.lcd.css" rel="stylesheet">
+		<link href="../styles/jquery.uls.css" rel="stylesheet">
 		<!-- demo -->
 		<link href="resources/demo.css" rel="stylesheet">
 		<!-- Libs -->
 		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 		<!-- Source -->
-		<script src="../src/jquery.uls.data.js"></script>
-		<script src="../src/jquery.uls.data.utils.js"></script>
-		<script src="../src/jquery.uls.lcd.js"></script>
-		<script src="../src/jquery.uls.languagefilter.js"></script>
-		<script src="../src/jquery.uls.core.js"></script>
+		<script src="../jquery.uls.js"></script>
 		<script>
 			$( function () {
 				$( '.uls-trigger' ).uls( {

diff --git a/examples/limitedLanguageList.html b/examples/limitedLanguageList.html
@@ -7,19 +7,13 @@
 
 		<title>Universal Language Selector</title>
 		<meta name="author" content="Santhosh Thottingal">
-		<link href="../css/jquery.uls.css" rel="stylesheet">
-		<link href="../css/jquery.uls.grid.css" rel="stylesheet">
-		<link href="../css/jquery.uls.lcd.css" rel="stylesheet">
+		<link href="../styles/jquery.uls.css" rel="stylesheet">
 		<!-- demo -->
 		<link href="resources/demo.css" rel="stylesheet">
 		<!-- Libs -->
 		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 		<!-- Source -->
-		<script src="../src/jquery.uls.data.js"></script>
-		<script src="../src/jquery.uls.data.utils.js"></script>
-		<script src="../src/jquery.uls.lcd.js"></script>
-		<script src="../src/jquery.uls.languagefilter.js"></script>
-		<script src="../src/jquery.uls.core.js"></script>
+		<script src="../sjquery.uls.js"></script>
 		<script>
 			$( function () {
 				$( '.uls-trigger' ).uls( {

diff --git a/examples/test-no-results.html b/examples/test-no-results.html
@@ -14,19 +14,13 @@
 		<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
 		<!-- <meta name="description" content=""> -->
 		<meta name="author" content="Santhosh Thottingal">
-		<link href="../css/jquery.uls.css" rel="stylesheet">
-		<link href="../css/jquery.uls.grid.css" rel="stylesheet">
-		<link href="../css/jquery.uls.lcd.css" rel="stylesheet">
+		<link href="../styles/jquery.uls.css" rel="stylesheet">
 		<!-- demo -->
 		<link href="resources/demo.css" rel="stylesheet">
 		<!-- Libs -->
 		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 		<!-- Source -->
-		<script src="../src/jquery.uls.data.js"></script>
-		<script src="../src/jquery.uls.data.utils.js"></script>
-		<script src="../src/jquery.uls.lcd.js"></script>
-		<script src="../src/jquery.uls.languagefilter.js"></script>
-		<script src="../src/jquery.uls.core.js"></script>
+		<script src="../jquery.uls.js"></script>
 		<script>
 			$( function () {
 				$( '.uls-trigger' ).uls( {