kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2026-06-09 03:34:51 +00:00
Code Issues Projects Releases Wiki Activity

refactor: use ES module imports in browser core (#4158)

Browse Source 
With these changes a few browser-side core files now use native ES
modules. `Loader`, `MMSocket`, `Module` and `MM` can be imported
directly instead of being read off `window`. `main.js` and `loader.js`
are no longer wrapped in IIFEs - they're just normal modules now.

`Module`, `MM` and `MMSocket` are still exposed as globals, so
third-party modules that use the old API keep working.

The changes are mostly structural, behavior should stay the same. A few
internal helpers in `main.js` got an underscore prefix because their
names clashed with public `MM` methods.

## Why

The old setup relied a lot on script order: a file could use `Loader` or
`MMSocket` only because another script happened to put it on `window`
first. Imports make that explicit.

The bigger goal is to move away from the legacy script-loading patterns
- making it easier to understand and easier to test - in other words:
easier to maintain.

More of the core could be "cleaned up" the same way, but that would blow
up this PR.

For reviewing, I recommend to hide the whitespace changes.
This commit is contained in:
Kristjan ESPERANTO
2026-05-18 19:58:44 +02:00
committed by GitHub
parent 4425f52bda
commit d4a5ebe273
8 changed files with 1084 additions and 984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
tests/e2e/translations_spec.js
View File

@@ -1,5 +1,6 @@
const fs = require("node:fs");
const path = require("node:path");
const { pathToFileURL } = require("node:url");
const helmet = require("helmet");
const { JSDOM } = require("jsdom");
const express = require("express");
@@ -54,23 +55,47 @@ describe("translations", () => {
describe("loadTranslations", () => {
let dom;
beforeEach(() => {
beforeEach(async () => {
// Create a new translation test environment for each test
const env = createTranslationTestEnvironment();
const window = env.window;
// Load module.js content directly for loadTranslations tests
const moduleJs = fs.readFileSync(path.join(__dirname, "..", "..", "js", "module.js"), "utf-8");
// Bridge JSDOM globals to Node.js so module.js (ES module) can access them
global.Log = window.Log;
global.Translator = window.Translator;
global.config = { language: "de" };
global.window = { name: "", mmVersion: "2.0.0" };
global.MM = { hideModule: () => {}, showModule: () => {}, sendNotification: () => {}, updateDom: () => {} };
global.nunjucks = {
Environment () {
this.addFilter = () => {};
this.renderString = () => "";
this.render = (_t, _d, cb) => cb(null, "");
},
WebLoader () {},
runtime: { markSafe: (str) => str }
};
// Execute the script in the JSDOM context
window.eval(moduleJs);
// Import Module directly — eval can't handle ES module syntax
const modulePath = pathToFileURL(path.join(__dirname, "..", "..", "js", "module.js")).href;
const { Module } = await import(`${modulePath}?test=${Date.now()}`);
window.Module = Module;
// Additional setup for loadTranslations tests
window.config = { language: "de" };
// Expose config on window so tests can modify dom.window.config
window.config = global.config;
dom = { window };
});
afterEach(() => {
delete global.Log;
delete global.Translator;
delete global.config;
delete global.window;
delete global.MM;
delete global.nunjucks;
});
it("should load translation file", async () => {
const { Translator, Module, config } = dom.window;
config.language = "en";