refactor: export Loader, MMSocket and Module as ES modules

Author: KristjanESPERANTO

index.html

@@ -51,11 +51,9 @@
     <script type="text/javascript" src="translations/translations.js"></script>
     <script type="text/javascript" src="js/translator.js"></script>
     <script type="text/javascript" src="config/basepath.js"></script>
-    <script type="text/javascript" src="js/module.js"></script>
-    <script type="text/javascript" src="js/loader.js"></script>
-    <script type="text/javascript" src="js/socketclient.js"></script>
     <script type="text/javascript" src="js/animateCSS.js"></script>
     <script type="text/javascript" src="js/positions.js"></script>
-    <script type="text/javascript" src="js/main.js"></script>
+    <script type="module" src="js/module.js"></script>
+    <script type="module" src="js/main.js"></script>
   </body>
 </html>

js/loader.js

@@ -1,6 +1,6 @@
 /* global defaultModules, vendor */
 
-const Loader = (function () {
+export const Loader = (function () {
 
 	/* Create helper variables */
 
@@ -294,5 +294,3 @@ const Loader = (function () {
 		}
 	};
 }());
-
-globalThis.Loader = Loader;

js/module.js

@@ -1,10 +1,15 @@
-/* global Loader, MMSocket, nunjucks */
+/* global nunjucks */
+
+// eslint-disable-next-line import-x/extensions
+import { Loader } from "./loader.js";
+// eslint-disable-next-line import-x/extensions
+import { MMSocket } from "./socketclient.js";
 
 /*
  * Module Blueprint.
  * @typedef {Object} Module
  */
-class Module {
+export class Module {
 
 	/**
 	 * Initializes per-instance mutable state.
@@ -412,6 +417,8 @@ class Module {
 	}
 }
 
+globalThis.Module = Module;
+
 /**
  * Merging MagicMirror² (or other) default/config script by `@bugsounet`
  * Merge 2 objects or/with array
@@ -499,16 +506,14 @@ Module.register = function (name, moduleDefinition) {
 	Module.definitions[name] = moduleDefinition;
 };
 
-window.Module = Module;
-
 /**
  * Compare two semantic version numbers and return the difference.
  * @param {string} a Version number a.
  * @param {string} b Version number b.
  * @returns {number} A positive number if a is larger than b, a negative
  * number if a is smaller and 0 if they are the same
  */
-function cmpVersions (a, b) {
+export function cmpVersions (a, b) {
 	const regExStrip0 = /(\.0+)+$/;
 	const segmentsA = a.replace(regExStrip0, "").split(".");
 	const segmentsB = b.replace(regExStrip0, "").split(".");
@@ -528,7 +533,7 @@ function cmpVersions (a, b) {
  * @param {object} obj Object to be cloned
  * @returns {object} the cloned object
  */
-function cloneObject (obj) {
+export function cloneObject (obj) {
 	if (obj === null || typeof obj !== "object") {
 		return obj;
 	}

js/socketclient.js

@@ -1,6 +1,6 @@
 /* global io */
 
-const MMSocket = function (moduleName) {
+export const MMSocket = function (moduleName) {
 	if (typeof moduleName !== "string") {
 		throw new Error("Please set the module name for the MMSocket.");
 	}
@@ -45,4 +45,5 @@ const MMSocket = function (moduleName) {
 	};
 };
 
-globalThis.MMSocket = MMSocket;
+// Legacy global bridge for third-party modules that reference MMSocket directly.
+if (!globalThis.MMSocket) globalThis.MMSocket = MMSocket;