Use native es6 modules instead of require js

package.json

@@ -1,5 +1,5 @@
 {
-  "private": true,
+  "type": "module",
   "scripts": {
     "serve": "http-server .",
     "test": "npm run test-unit-local",
@@ -12,6 +12,11 @@
   "engines": {
     "node": ">=10"
   },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "bootstrap": "^4.6.2",
+    "jquery": "^3.7.0"
+  },
   "devDependencies": {
     "eslint": "^8.42.0",
     "eslint-config-standard": "^17.1.0",
@@ -26,7 +31,6 @@
     "karma-requirejs": "^1.1.0",
     "karma-sauce-launcher": "^4.3.4",
     "nightwatch": "1.7.13",
-    "qunit": "^2.13.0",
-    "requirejs": "2.3.3"
+    "qunit": "^2.13.0"
   }
 }

www/index.html

@@ -722,14 +722,18 @@ <h3>Expert settings</h3>
                 </div>
             </footer>
         </section>
-
-        <!-- Using require.js, a module system for javascript, include the
-             js files. This loads "init.js", which in turn can load other
-             files, all handled by require.js:
-             https://requirejs.org/docs/api.html#jsfiles -->
-        <script type="text/javascript"
-            data-main="js/init.js"
-            src="js/lib/require.js">
-        </script>
-    </body>
+    <script type="importmap">
+        {
+            "imports": {
+                "bootstrap": "../node_modules/bootstrap/dist/js/bootstrap.bundle.js",
+                "jquery": "../node_modules/jquery/dist/jquery.slim.min.js",
+                "fontawesome": "../node_modules/@fortawesome/fontawesome-free/js/all.js"
+            }
+        }
+    </script>
+    <script type="text/javascript" src="js/init.js"></script>
+    <script type="module" defer src="js/app.js"></script>
+    <!-- <script type="module" src="js/lib/jquery-3.7.0.slim.min.js"></script>
+    <script type="text/javascript" src="js/lib/bootstrap.bundle.js"></script> -->
+</body>
 </html>

www/js/init.js

@@ -1,8 +1,8 @@
-/**
- * init.js : Configuration for the library require.js
- * This file handles the dependencies between javascript libraries
+/*!
+ * init.js : Configuration for the app
+ * This file sets the app's main parameters and variables
  *
- * Copyright 2013-2020 Mossroy and contributors
+ * Copyright 2013-2023 Mossroy, Jaifroid and contributors
  * License GPL v3:
  *
  * This file is part of Kiwix.
@@ -20,9 +20,8 @@
  * You should have received a copy of the GNU General Public License
  * along with Kiwix (file LICENSE-GPLv3.txt).  If not, see <http://www.gnu.org/licenses/>
  */
-'use strict';
 
-/* global requirejs */
+'use strict';
 
 /**
  * A global parameter object for storing variables that need to be remembered between page loads,
@@ -45,36 +44,6 @@ if (/PWA_launch=/.test(window.location.search)) {
     if (match[1] === 'success') localStorage.setItem(params.keyPrefix + 'defaultModeChangeAlertDisplayed', true);
     console.warn('Launch of PWA has been registered as "' + match[1] + '" by the extension. Exiting local code.');
 } else {
-    require.config({
-        baseUrl: 'js/lib',
-        paths: {
-            jquery: 'jquery-3.7.0.slim.min',
-            bootstrap: 'bootstrap.bundle',
-            webpHeroBundle: 'webpHeroBundle_0.0.2',
-            fontawesome: 'fontawesome/fontawesome',
-            'fontawesome-solid': 'fontawesome/solid'
-        },
-        shim: {
-            jquery: {
-                exports: '$'
-            },
-            bootstrap: {
-                deps: ['jquery', 'fontawesome', 'fontawesome-solid']
-            },
-            webpHeroBundle: ''
-        }
-    });
-
-    var req = ['bootstrap']; // Baseline Require array
-
-    // Add polyfills to the Require array only if needed
-    if (!('Promise' in self)) req.push('promisePolyfill');
-    if (!('from' in Array)) req.push('arrayFromPolyfill');
-
-    requirejs(req, function () {
-        requirejs(['../app']);
-    });
-
     // Test if WebP is natively supported, and if not, set webpMachine to true. The value of webpMachine
     // will determine whether the WebP Polyfills will be loaded (currently only used in uiUtil.js)
     var webpMachine = false;

www/js/lib/abstractFilesystemAccess.js

@@ -26,84 +26,67 @@
  */
 
 'use strict';
+function StorageFirefoxOS(storage) {
+    this._storage = storage;
+    this.storageName = storage.storageName;
+}
+/**
+ * Access the given file.
+ * @param {String} path absolute path to the file
+ * @return {Promise} Promise which is resolved with a HTML5 file object and
+ *         rejected with an error message.
+ */
+StorageFirefoxOS.prototype.get = function (path) {
+    var that = this;
+    return new Promise(function (resolve, reject) {
+        var request = that._storage.get(path);
+        request.onsuccess = function () { resolve(this.result); };
+        request.onerror = function () { reject(this.error.name); };
+    });
+};
 
-/* global define */
-
-define([], function () {
-    /**
-     * Storage implemented by Firefox OS
-     *
-     * @typedef StorageFirefoxOS
-     * @property {DeviceStorage} _storage DeviceStorage
-     * @property {String} storageName Name of the storage
-     */
-
-    /**
-     * Creates an abstraction layer around the FirefoxOS storage.
-     * @param storage FirefoxOS DeviceStorage object
-     */
-    function StorageFirefoxOS (storage) {
-        this._storage = storage;
-        this.storageName = storage.storageName;
-    };
-    /**
-     * Access the given file.
-     * @param {String} path absolute path to the file
-     * @return {Promise} Promise which is resolved with a HTML5 file object and
-     *         rejected with an error message.
-     */
-    StorageFirefoxOS.prototype.get = function (path) {
-        var that = this;
-        return new Promise(function (resolve, reject) {
-            var request = that._storage.get(path);
-            request.onsuccess = function () { resolve(this.result); };
-            request.onerror = function () { reject(this.error.name); };
-        });
-    };
-
-    // We try to match both a standalone ZIM file (.zim) or
-    // the first file of a split ZIM files collection (.zimaa)
-    var regexpZIMFileName = /\.zim(aa)?$/i;
+// We try to match both a standalone ZIM file (.zim) or
+// the first file of a split ZIM files collection (.zimaa)
+var regexpZIMFileName = /\.zim(aa)?$/i;
 
-    /**
-     * Searches for archive files or directories.
-     * @return {Promise} Promise which is resolved with an array of
-     *         paths and rejected with an error message.
-     */
-    StorageFirefoxOS.prototype.scanForArchives = function () {
-        var that = this;
-        return new Promise(function (resolve, reject) {
-            var directories = [];
-            var cursor = that._storage.enumerate();
-            cursor.onerror = function () {
-                reject(cursor.error);
-            };
-            cursor.onsuccess = function () {
-                if (!cursor.result) {
-                    resolve(directories);
-                    return;
-                }
-                var file = cursor.result;
+/**
+ * Searches for archive files or directories.
+ * @return {Promise} Promise which is resolved with an array of
+ *         paths and rejected with an error message.
+ */
+StorageFirefoxOS.prototype.scanForArchives = function () {
+    var that = this;
+    return new Promise(function (resolve, reject) {
+        var directories = [];
+        var cursor = that._storage.enumerate();
+        cursor.onerror = function () {
+            reject(cursor.error);
+        };
+        cursor.onsuccess = function () {
+            if (!cursor.result) {
+                resolve(directories);
+                return;
+            }
+            var file = cursor.result;
 
-                if (regexpZIMFileName.test(file.name)) {
-                    directories.push(file.name);
-                }
+            if (regexpZIMFileName.test(file.name)) {
+                directories.push(file.name);
+            }
 
-                cursor.continue();
-            };
-        });
-    };
+            cursor.continue();
+        };
+    });
+};
 
-    /**
-     * Browse a path through DeviceStorage API
-     * @param path Path where to look for files
-     * @return {DOMCursor} Cursor of files found in given path
-     */
-    StorageFirefoxOS.prototype.enumerate = function (path) {
-        return this._storage.enumerate();
-    };
+/**
+ * Browse a path through DeviceStorage API
+ * @param path Path where to look for files
+ * @return {DOMCursor} Cursor of files found in given path
+ */
+StorageFirefoxOS.prototype.enumerate = function (path) {
+    return this._storage.enumerate();
+};
 
-    return {
-        StorageFirefoxOS: StorageFirefoxOS
-    };
-});
+export default {
+    StorageFirefoxOS: StorageFirefoxOS
+};

www/js/lib/arrayFromPolyfill.js

@@ -9,7 +9,8 @@
 
 		var arNew = [],
 			k = [], // used for convert Set to an Array
-			i = 0;
+			i = 0,
+			v;
 
 		//if you do not need a Set object support then
 		//you can comment or delete the following if statement
@@ -21,11 +22,12 @@
 			arr = k;
 		}
 
-		for (; i < arr.length; i++)
+		for (; i < (arr.length || arr.size); i++) {
+			v = typeof arr[i] !== 'undefined' ? arr[i] : arr.get ? arr.get(i) : null;
 			arNew[i] = callbackFn ?
-			callbackFn.call(thisArg, arr[i], i, arr) :
-			arr[i];
-
+			callbackFn.call(thisArg, v, i, arr) : v;
+		}
+		
 		return arNew;
 	}
 	//You could also use it without the following line, but it is not recommended because native function is faster.