Merge pull request #1342 from melonjs/chore/move-eventemitter-spec

EventEmitter: add native context support, fix removeAllListeners bug, move spec

Author: obiot

packages/melonjs/CHANGELOG.md

@@ -7,9 +7,15 @@
 - Tiled: new public `registerTiledObjectFactory(type, factory)` and `registerTiledObjectClass(name, Constructor)` APIs allowing plugins to register custom Tiled object handlers by class name without modifying engine code
 - Tiled: `detectObjectType()` now checks `settings.class` and `settings.name` against the factory registry before falling through to structural detection, enabling class-based dispatch for custom types
 
+### Changed
+- EventEmitter: native context parameter support — `addListener(event, fn, context)` and `addListenerOnce(event, fn, context)` now accept an optional context, eliminating `.bind()` closure overhead and enabling proper `removeListener()` by original function reference
+- EventEmitter: `event.on()` and `event.once()` no longer create `.bind()` closures when a context is provided
+
 ### Fixed
 - WebGLRenderer: `setBlendMode()` now tracks the `premultipliedAlpha` flag — previously only the mode name was checked, causing incorrect GL blend function when mixing PMA and non-PMA textures with the same blend mode
 - TMX: fix crash in `getObjects(false)` when a map contains an empty object group (Container.children lazily initialized)
+- EventEmitter: `removeAllListeners()` now correctly clears once-listeners (previously only cleared regular listeners)
+- Loader: fix undefined `crossOrigin` variable in script parser, unsafe regex match in video parser, missing error parameter in video/fontface error callbacks, `fetchData` Promise constructor antipattern and silent error swallowing
 
 ### Chore
 - Minimum Node.js version is now 24.0.0 (Node 18/20 EOL, Node 22 in maintenance)

packages/melonjs/src/application/application.ts

@@ -5,7 +5,7 @@ import state from "../state/state.ts";
 import * as device from "../system/device.js";
 import {
 	BLUR,
-	eventEmitter,
+	emit,
 	FOCUS,
 	GAME_AFTER_DRAW,
 	GAME_AFTER_UPDATE,
@@ -14,6 +14,7 @@ import {
 	GAME_INIT,
 	GAME_RESET,
 	GAME_UPDATE,
+	on,
 	STAGE_RESET,
 	STATE_CHANGE,
 	STATE_RESTART,
@@ -253,10 +254,10 @@ export default class Application {
 		}
 
 		// register to the channel
-		eventEmitter.addListener(WINDOW_ONRESIZE, () => {
+		on(WINDOW_ONRESIZE, () => {
 			onresize(this);
 		});
-		eventEmitter.addListener(WINDOW_ONORIENTATION_CHANGE, () => {
+		on(WINDOW_ONORIENTATION_CHANGE, () => {
 			onresize(this);
 		});
 
@@ -308,17 +309,19 @@ export default class Application {
 
 		this.isInitialized = true;
 
-		eventEmitter.emit(GAME_INIT);
-		eventEmitter.addListener(STATE_CHANGE, this.repaint.bind(this));
-		eventEmitter.addListener(STATE_RESTART, this.repaint.bind(this));
-		eventEmitter.addListener(STATE_RESUME, this.repaint.bind(this));
-		eventEmitter.addListener(STAGE_RESET, this.reset.bind(this));
-		eventEmitter.addListener(TICK, (time: number) => {
+		emit(GAME_INIT);
+		/* eslint-disable @typescript-eslint/unbound-method */
+		on(STATE_CHANGE, this.repaint, this);
+		on(STATE_RESTART, this.repaint, this);
+		on(STATE_RESUME, this.repaint, this);
+		on(STAGE_RESET, this.reset, this);
+		/* eslint-enable @typescript-eslint/unbound-method */
+		on(TICK, (time: number) => {
 			this.update(time);
 			this.draw();
 		});
 
-		eventEmitter.addListener(BLUR, () => {
+		on(BLUR, () => {
 			if (this.stopOnBlur) {
 				state.stop(true);
 			}
@@ -327,7 +330,7 @@ export default class Application {
 			}
 		});
 
-		eventEmitter.addListener(FOCUS, () => {
+		on(FOCUS, () => {
 			if (this.stopOnBlur) {
 				state.restart(true);
 			}
@@ -351,7 +354,7 @@ export default class Application {
 		}
 
 		// publish reset notification
-		eventEmitter.emit(GAME_RESET);
+		emit(GAME_RESET);
 
 		// Refresh internal variables for framerate  limiting
 		this.updateFrameRate();
@@ -424,7 +427,7 @@ export default class Application {
 			this.frameCounter = 0;
 
 			// publish notification
-			eventEmitter.emit(GAME_BEFORE_UPDATE, time);
+			emit(GAME_BEFORE_UPDATE, time);
 			this.accumulator += timer.getDelta();
 			this.accumulator = Math.min(this.accumulator, this.accumulatorMax);
 
@@ -441,7 +444,7 @@ export default class Application {
 
 				// game update event
 				if (!state.isPaused()) {
-					eventEmitter.emit(GAME_UPDATE, time);
+					emit(GAME_UPDATE, time);
 				}
 
 				// update all objects (and pass the elapsed time since last frame)
@@ -460,7 +463,7 @@ export default class Application {
 			}
 
 			// publish notification
-			eventEmitter.emit(GAME_AFTER_UPDATE, this.lastUpdate);
+			emit(GAME_AFTER_UPDATE, this.lastUpdate);
 		}
 	}
 
@@ -470,7 +473,7 @@ export default class Application {
 	draw(): void {
 		if (this.renderer.isContextValid && (this.isDirty || this.isAlwaysDirty)) {
 			// publish notification
-			eventEmitter.emit(GAME_BEFORE_DRAW, globalThis.performance.now());
+			emit(GAME_BEFORE_DRAW, globalThis.performance.now());
 
 			// prepare renderer to draw a new frame
 			this.renderer.clear();
@@ -485,7 +488,7 @@ export default class Application {
 			this.renderer.flush();
 
 			// publish notification
-			eventEmitter.emit(GAME_AFTER_DRAW, globalThis.performance.now());
+			emit(GAME_AFTER_DRAW, globalThis.performance.now());
 		}
 	}
 }

packages/melonjs/src/camera/camera2d.ts

@@ -12,8 +12,9 @@ import type Container from "./../renderable/container.js";
 import Renderable from "./../renderable/renderable.js";
 import {
 	CANVAS_ONRESIZE,
-	eventEmitter,
+	emit,
 	GAME_RESET,
+	on,
 	VIEWPORT_ONCHANGE,
 	VIEWPORT_ONRESIZE,
 } from "../system/event.ts";
@@ -274,9 +275,11 @@ export default class Camera2d extends Renderable {
 		this._updateProjectionMatrix();
 
 		// subscribe to the game reset event
-		eventEmitter.addListener(GAME_RESET, this.reset.bind(this));
+		// eslint-disable-next-line @typescript-eslint/unbound-method
+		on(GAME_RESET, this.reset, this);
 		// subscribe to the canvas resize event
-		eventEmitter.addListener(CANVAS_ONRESIZE, this.resize.bind(this));
+		// eslint-disable-next-line @typescript-eslint/unbound-method
+		on(CANVAS_ONRESIZE, this.resize, this);
 	}
 
 	// -- some private function ---
@@ -468,7 +471,7 @@ export default class Camera2d extends Renderable {
 		this._updateProjectionMatrix();
 
 		// publish the viewport resize event
-		eventEmitter.emit(VIEWPORT_ONRESIZE, this.width, this.height);
+		emit(VIEWPORT_ONRESIZE, this.width, this.height);
 
 		return this;
 	}
@@ -650,7 +653,7 @@ export default class Camera2d extends Renderable {
 
 		if (this.isDirty) {
 			//publish the corresponding message
-			eventEmitter.emit(VIEWPORT_ONCHANGE, this.pos);
+			emit(VIEWPORT_ONCHANGE, this.pos);
 		}
 
 		// check for fade/flash effect

packages/melonjs/src/index.js

@@ -48,7 +48,7 @@ import Stage from "./state/stage.js";
 import state from "./state/state.ts";
 import { initVisibilityEvents } from "./system/device.js";
 import { DOMContentLoaded } from "./system/dom.ts";
-import { BOOT, DOM_READY, eventEmitter } from "./system/event.ts";
+import { BOOT, DOM_READY, emit } from "./system/event.ts";
 import pool from "./system/legacy_pool.js";
 import save from "./system/save.ts";
 import timer from "./system/timer.ts";
@@ -239,7 +239,7 @@ export function boot() {
 	registerBuiltinTiledClass("ColorLayer", ColorLayer);
 
 	// publish Boot notification
-	eventEmitter.emit(BOOT);
+	emit(BOOT);
 
 	// enable/disable the cache
 	setNocache(getUriFragment().nocache || false);
@@ -254,7 +254,7 @@ export function boot() {
 	initialized = true;
 
 	// notify that the engine is ready
-	eventEmitter.emit(DOM_READY);
+	emit(DOM_READY);
 }
 
 // call the library init function when ready

packages/melonjs/src/input/gamepad.ts

@@ -1,9 +1,11 @@
 import {
-	eventEmitter,
+	emit,
 	GAME_BEFORE_UPDATE,
 	GAMEPAD_CONNECTED,
 	GAMEPAD_DISCONNECTED,
 	GAMEPAD_UPDATE,
+	has,
+	on,
 } from "../system/event.ts";
 import { getBindingKey, triggerKeyEvent } from "./keyboard.ts";
 
@@ -242,7 +244,7 @@ const updateGamepads = function (): void {
 				}
 			}
 
-			eventEmitter.emit(GAMEPAD_UPDATE, index, "buttons", +button, current);
+			emit(GAMEPAD_UPDATE, index, "buttons", +button, current);
 
 			// Edge detection
 			if (!last.pressed && current.pressed) {
@@ -286,7 +288,7 @@ const updateGamepads = function (): void {
 			const pressed =
 				Math.abs(value) >= deadzone + Math.abs(last[range].threshold || 0);
 
-			eventEmitter.emit(GAMEPAD_UPDATE, index, "axes", +axis, value as any);
+			emit(GAMEPAD_UPDATE, index, "axes", +axis, value as any);
 
 			// Edge detection
 			if (!last[range].pressed && pressed) {
@@ -322,7 +324,7 @@ if (
 	globalThis.addEventListener(
 		"gamepadconnected",
 		(e: GamepadEvent) => {
-			eventEmitter.emit(GAMEPAD_CONNECTED, e.gamepad);
+			emit(GAMEPAD_CONNECTED, e.gamepad);
 		},
 		false,
 	);
@@ -333,7 +335,7 @@ if (
 	globalThis.addEventListener(
 		"gamepaddisconnected",
 		(e: GamepadEvent) => {
-			eventEmitter.emit(GAMEPAD_DISCONNECTED, e.gamepad);
+			emit(GAMEPAD_DISCONNECTED, e.gamepad);
 		},
 		false,
 	);
@@ -437,10 +439,10 @@ export function bindGamepad(
 	// register to the the update event if not yet done and supported by the browser
 	// if not supported, the function will fail silently (-> update loop won't be called)
 	if (
-		!eventEmitter.hasListener(GAME_BEFORE_UPDATE, updateGamepads) &&
+		!has(GAME_BEFORE_UPDATE, updateGamepads) &&
 		typeof navigator.getGamepads === "function"
 	) {
-		eventEmitter.addListener(GAME_BEFORE_UPDATE, updateGamepads);
+		on(GAME_BEFORE_UPDATE, updateGamepads);
 	}
 
 	// Allocate bindings if not defined

packages/melonjs/src/input/keyboard.ts

@@ -1,4 +1,4 @@
-import { eventEmitter, KEYDOWN, KEYUP } from "../system/event.ts";
+import { emit, KEYDOWN, KEYUP } from "../system/event.ts";
 import { isMobile } from "../system/platform.ts";
 import { preventDefault as preventDefaultAction } from "./input.ts";
 
@@ -31,12 +31,7 @@ const keyDownEvent: KeyEventHandler = (options) => {
 	const { keyCode } = options;
 	const action = _keyBindings[keyCode];
 
-	eventEmitter.emit(
-		KEYDOWN,
-		action,
-		keyCode,
-		action ? !_keyLocked[action] : true,
-	);
+	emit(KEYDOWN, action, keyCode, action ? !_keyLocked[action] : true);
 
 	if (action) {
 		if (!_keyLocked[action]) {
@@ -58,7 +53,7 @@ const keyUpEvent: KeyEventHandler = (options) => {
 	const { keyCode } = options;
 	const action = _keyBindings[keyCode];
 
-	eventEmitter.emit(KEYUP, action, keyCode);
+	emit(KEYUP, action, keyCode);
 
 	if (action) {
 		const trigger =

packages/melonjs/src/input/pointerevent.ts

@@ -3,11 +3,7 @@ import { game } from "../index.js";
 import type { Vector2d } from "../math/vector2d.ts";
 import { vector2dPool } from "../math/vector2d.ts";
 import * as device from "./../system/device.js";
-import {
-	eventEmitter,
-	POINTERLOCKCHANGE,
-	POINTERMOVE,
-} from "../system/event.ts";
+import { emit, POINTERLOCKCHANGE, POINTERMOVE } from "../system/event.ts";
 import timer from "./../system/timer.ts";
 import { remove } from "./../utils/array.ts";
 import { throttle } from "./../utils/function.ts";
@@ -209,7 +205,7 @@ function enablePointerEvent(): void {
 					locked =
 						globalThis.document.pointerLockElement === game.getParentElement();
 					// emit the corresponding internal event
-					eventEmitter.emit(POINTERLOCKCHANGE, locked);
+					emit(POINTERLOCKCHANGE, locked);
 				},
 				true,
 			);
@@ -310,7 +306,7 @@ function dispatchEvent(normalizedEvents: Pointer[]): boolean {
 		if (POINTER_MOVE.includes(pointer.type!)) {
 			pointer.gameX = pointer.gameLocalX = pointer.gameScreenX;
 			pointer.gameY = pointer.gameLocalY = pointer.gameScreenY;
-			eventEmitter.emit(POINTERMOVE, pointer);
+			emit(POINTERMOVE, pointer);
 		}
 
 		// fetch valid candiates from the game world container

packages/melonjs/src/level/level.js

@@ -1,7 +1,7 @@
 import { game } from "../index.js";
 import { getTMX } from "./../loader/loader.js";
 import state from "./../state/state.ts";
-import { eventEmitter, LEVEL_LOADED } from "../system/event.ts";
+import { emit, LEVEL_LOADED } from "../system/event.ts";
 import { resetGUID } from "./../utils/utils.ts";
 import TMXTileMap from "./tiled/TMXTileMap.js";
 
@@ -39,7 +39,7 @@ function safeLoadLevel(levelId, options, restart) {
 	);
 
 	// publish the corresponding message
-	eventEmitter.emit(LEVEL_LOADED, levelId);
+	emit(LEVEL_LOADED, levelId);
 
 	// fire the callback
 	options.onLoaded(levelId);

packages/melonjs/src/level/tiled/TMXTileMap.js

@@ -3,7 +3,7 @@ import { warning } from "../../lang/console.js";
 import { vector2dPool } from "../../math/vector2d.ts";
 import { collision } from "../../physics/collision.js";
 import Container from "../../renderable/container.js";
-import { eventEmitter, VIEWPORT_ONRESIZE } from "../../system/event.ts";
+import { off, on, VIEWPORT_ONRESIZE } from "../../system/event.ts";
 import pool from "../../system/legacy_pool.js";
 import { checkVersion } from "../../utils/utils.ts";
 import { COLLISION_GROUP, TILED_SUPPORTED_VERSION } from "./constants.js";
@@ -432,11 +432,11 @@ export default class TMXTileMap {
 		}
 
 		if (setViewportBounds === true) {
-			eventEmitter.removeListener(VIEWPORT_ONRESIZE, _setBounds);
+			off(VIEWPORT_ONRESIZE, _setBounds);
 			// force viewport bounds update
 			_setBounds(game.viewport.width, game.viewport.height);
 			// Replace the resize handler
-			eventEmitter.addListener(VIEWPORT_ONRESIZE, _setBounds);
+			on(VIEWPORT_ONRESIZE, _setBounds);
 		}
 
 		//  set back auto-sort and auto-depth