@aegisjsproject/callback-registry 1.0.1 → 1.0.2

package/callbacks.cjs

@@ -1,5 +1,506 @@
 'use strict';
 
+const PREFIX = 'data-aegis-event-';
+const EVENT_PREFIX = PREFIX + 'on-';
+const EVENT_PREFIX_LENGTH = EVENT_PREFIX.length;
+const DATA_PREFIX = 'aegisEventOn';
+const DATA_PREFIX_LENGTH = DATA_PREFIX.length;
+const signalSymbol = Symbol('aegis:signal');
+const signalRegistry = new Map();
+const controllerRegistry = new Map();
+
+const once = PREFIX + 'once';
+const passive = PREFIX + 'passive';
+const capture = PREFIX + 'capture';
+const signal = PREFIX + 'signal';
+const onAbort = EVENT_PREFIX + 'abort';
+const onBlur = EVENT_PREFIX + 'blur';
+const onFocus = EVENT_PREFIX + 'focus';
+const onCancel = EVENT_PREFIX + 'cancel';
+const onAuxclick = EVENT_PREFIX + 'auxclick';
+const onBeforeinput = EVENT_PREFIX + 'beforeinput';
+const onBeforetoggle = EVENT_PREFIX + 'beforetoggle';
+const onCanplay = EVENT_PREFIX + 'canplay';
+const onCanplaythrough = EVENT_PREFIX + 'canplaythrough';
+const onChange = EVENT_PREFIX + 'change';
+const onClick = EVENT_PREFIX + 'click';
+const onClose = EVENT_PREFIX + 'close';
+const onContextmenu = EVENT_PREFIX + 'contextmenu';
+const onCopy = EVENT_PREFIX + 'copy';
+const onCuechange = EVENT_PREFIX + 'cuechange';
+const onCut = EVENT_PREFIX + 'cut';
+const onDblclick = EVENT_PREFIX + 'dblclick';
+const onDrag = EVENT_PREFIX + 'drag';
+const onDragend = EVENT_PREFIX + 'dragend';
+const onDragenter = EVENT_PREFIX + 'dragenter';
+const onDragexit = EVENT_PREFIX + 'dragexit';
+const onDragleave = EVENT_PREFIX + 'dragleave';
+const onDragover = EVENT_PREFIX + 'dragover';
+const onDragstart = EVENT_PREFIX + 'dragstart';
+const onDrop = EVENT_PREFIX + 'drop';
+const onDurationchange = EVENT_PREFIX + 'durationchange';
+const onEmptied = EVENT_PREFIX + 'emptied';
+const onEnded = EVENT_PREFIX + 'ended';
+const onFormdata = EVENT_PREFIX + 'formdata';
+const onInput = EVENT_PREFIX + 'input';
+const onInvalid = EVENT_PREFIX + 'invalid';
+const onKeydown = EVENT_PREFIX + 'keydown';
+const onKeypress = EVENT_PREFIX + 'keypress';
+const onKeyup = EVENT_PREFIX + 'keyup';
+const onLoad = EVENT_PREFIX + 'load';
+const onLoadeddata = EVENT_PREFIX + 'loadeddata';
+const onLoadedmetadata = EVENT_PREFIX + 'loadedmetadata';
+const onLoadstart = EVENT_PREFIX + 'loadstart';
+const onMousedown = EVENT_PREFIX + 'mousedown';
+const onMouseenter = EVENT_PREFIX + 'mouseenter';
+const onMouseleave = EVENT_PREFIX + 'mouseleave';
+const onMousemove = EVENT_PREFIX + 'mousemove';
+const onMouseout = EVENT_PREFIX + 'mouseout';
+const onMouseover = EVENT_PREFIX + 'mouseover';
+const onMouseup = EVENT_PREFIX + 'mouseup';
+const onWheel = EVENT_PREFIX + 'wheel';
+const onPaste = EVENT_PREFIX + 'paste';
+const onPause = EVENT_PREFIX + 'pause';
+const onPlay = EVENT_PREFIX + 'play';
+const onPlaying = EVENT_PREFIX + 'playing';
+const onProgress = EVENT_PREFIX + 'progress';
+const onRatechange = EVENT_PREFIX + 'ratechange';
+const onReset = EVENT_PREFIX + 'reset';
+const onResize = EVENT_PREFIX + 'resize';
+const onScroll = EVENT_PREFIX + 'scroll';
+const onScrollend = EVENT_PREFIX + 'scrollend';
+const onSecuritypolicyviolation = EVENT_PREFIX + 'securitypolicyviolation';
+const onSeeked = EVENT_PREFIX + 'seeked';
+const onSeeking = EVENT_PREFIX + 'seeking';
+const onSelect = EVENT_PREFIX + 'select';
+const onSlotchange = EVENT_PREFIX + 'slotchange';
+const onStalled = EVENT_PREFIX + 'stalled';
+const onSubmit = EVENT_PREFIX + 'submit';
+const onSuspend = EVENT_PREFIX + 'suspend';
+const onTimeupdate = EVENT_PREFIX + 'timeupdate';
+const onVolumechange = EVENT_PREFIX + 'volumechange';
+const onWaiting = EVENT_PREFIX + 'waiting';
+const onSelectstart = EVENT_PREFIX + 'selectstart';
+const onSelectionchange = EVENT_PREFIX + 'selectionchange';
+const onToggle = EVENT_PREFIX + 'toggle';
+const onPointercancel = EVENT_PREFIX + 'pointercancel';
+const onPointerdown = EVENT_PREFIX + 'pointerdown';
+const onPointerup = EVENT_PREFIX + 'pointerup';
+const onPointermove = EVENT_PREFIX + 'pointermove';
+const onPointerout = EVENT_PREFIX + 'pointerout';
+const onPointerover = EVENT_PREFIX + 'pointerover';
+const onPointerenter = EVENT_PREFIX + 'pointerenter';
+const onPointerleave = EVENT_PREFIX + 'pointerleave';
+const onGotpointercapture = EVENT_PREFIX + 'gotpointercapture';
+const onLostpointercapture = EVENT_PREFIX + 'lostpointercapture';
+const onMozfullscreenchange = EVENT_PREFIX + 'mozfullscreenchange';
+const onMozfullscreenerror = EVENT_PREFIX + 'mozfullscreenerror';
+const onAnimationcancel = EVENT_PREFIX + 'animationcancel';
+const onAnimationend = EVENT_PREFIX + 'animationend';
+const onAnimationiteration = EVENT_PREFIX + 'animationiteration';
+const onAnimationstart = EVENT_PREFIX + 'animationstart';
+const onTransitioncancel = EVENT_PREFIX + 'transitioncancel';
+const onTransitionend = EVENT_PREFIX + 'transitionend';
+const onTransitionrun = EVENT_PREFIX + 'transitionrun';
+const onTransitionstart = EVENT_PREFIX + 'transitionstart';
+const onWebkitanimationend = EVENT_PREFIX + 'webkitanimationend';
+const onWebkitanimationiteration = EVENT_PREFIX + 'webkitanimationiteration';
+const onWebkitanimationstart = EVENT_PREFIX + 'webkitanimationstart';
+const onWebkittransitionend = EVENT_PREFIX + 'webkittransitionend';
+const onError = EVENT_PREFIX + 'error';
+
+const eventAttrs = [
+	onAbort,
+	onBlur,
+	onFocus,
+	onCancel,
+	onAuxclick,
+	onBeforeinput,
+	onBeforetoggle,
+	onCanplay,
+	onCanplaythrough,
+	onChange,
+	onClick,
+	onClose,
+	onContextmenu,
+	onCopy,
+	onCuechange,
+	onCut,
+	onDblclick,
+	onDrag,
+	onDragend,
+	onDragenter,
+	onDragexit,
+	onDragleave,
+	onDragover,
+	onDragstart,
+	onDrop,
+	onDurationchange,
+	onEmptied,
+	onEnded,
+	onFormdata,
+	onInput,
+	onInvalid,
+	onKeydown,
+	onKeypress,
+	onKeyup,
+	onLoad,
+	onLoadeddata,
+	onLoadedmetadata,
+	onLoadstart,
+	onMousedown,
+	onMouseenter,
+	onMouseleave,
+	onMousemove,
+	onMouseout,
+	onMouseover,
+	onMouseup,
+	onWheel,
+	onPaste,
+	onPause,
+	onPlay,
+	onPlaying,
+	onProgress,
+	onRatechange,
+	onReset,
+	onResize,
+	onScroll,
+	onScrollend,
+	onSecuritypolicyviolation,
+	onSeeked,
+	onSeeking,
+	onSelect,
+	onSlotchange,
+	onStalled,
+	onSubmit,
+	onSuspend,
+	onTimeupdate,
+	onVolumechange,
+	onWaiting,
+	onSelectstart,
+	onSelectionchange,
+	onToggle,
+	onPointercancel,
+	onPointerdown,
+	onPointerup,
+	onPointermove,
+	onPointerout,
+	onPointerover,
+	onPointerenter,
+	onPointerleave,
+	onGotpointercapture,
+	onLostpointercapture,
+	onMozfullscreenchange,
+	onMozfullscreenerror,
+	onAnimationcancel,
+	onAnimationend,
+	onAnimationiteration,
+	onAnimationstart,
+	onTransitioncancel,
+	onTransitionend,
+	onTransitionrun,
+	onTransitionstart,
+	onWebkitanimationend,
+	onWebkitanimationiteration,
+	onWebkitanimationstart,
+	onWebkittransitionend,
+	onError,
+];
+
+let selector = eventAttrs.map(attr => `[${CSS.escape(attr)}]`).join(', ');
+
+const attrToProp = attr => `on${attr[EVENT_PREFIX_LENGTH].toUpperCase()}${attr.substring(EVENT_PREFIX_LENGTH + 1)}`;
+
+const eventToProp = event => EVENT_PREFIX + event;
+
+const hasEventAttribute = event => eventAttrs.includes(EVENT_PREFIX + event);
+
+const isEventDataAttr = ([name]) => name.startsWith(DATA_PREFIX);
+
+function _addListeners(el, { signal, attrFilter = EVENTS } = {}) {
+	const dataset = el.dataset;
+
+	for (const [attr, val] of Object.entries(dataset).filter(isEventDataAttr)) {
+		try {
+			const event = 'on' + attr.substring(DATA_PREFIX_LENGTH);
+
+			if (attrFilter.hasOwnProperty(event) && hasCallback(val)) {
+				el.addEventListener(event.substring(2).toLowerCase(), getCallback(val), {
+					passive: dataset.hasOwnProperty('aegisEventPassive'),
+					capture: dataset.hasOwnProperty('aegisEventCapture'),
+					once: dataset.hasOwnProperty('aegisEventOnce'),
+					signal: dataset.hasOwnProperty('aegisEventSignal') ? getSignal(dataset.aegisEventSignal) : signal,
+				});
+			}
+		} catch(err) {
+			reportError(err);
+		}
+	}
+}
+
+new MutationObserver(records => {
+	records.forEach(record  => {
+		switch(record.type) {
+			case 'childList':
+				[...record.addedNodes]
+					.filter(node => node.nodeType === Node.ELEMENT_NODE)
+					.forEach(node => attachListeners(node));
+				break;
+
+			case 'attributes':
+				if (typeof record.oldValue === 'string' && hasCallback(record.oldValue)) {
+					record.target.removeEventListener(
+						record.attributeName.substring(EVENT_PREFIX_LENGTH),
+						getCallback(record.oldValue), {
+							once: record.target.hasAttribute(once),
+							capture: record.target.hasAttribute(capture),
+							passive: record.target.hasAttribute(passive),
+						}
+					);
+				}
+
+				if (
+					record.target.hasAttribute(record.attributeName)
+					&& hasCallback(record.target.getAttribute(record.attributeName))
+				) {
+					record.target.addEventListener(
+						record.attributeName.substring(EVENT_PREFIX_LENGTH),
+						getCallback(record.target.getAttribute(record.attributeName)), {
+							once: record.target.hasAttribute(once),
+							capture: record.target.hasAttribute(capture),
+							passive: record.target.hasAttribute(passive),
+							signal: record.target.hasAttribute(signal) ? getSignal(record.target.getAttribute(signal)) : undefined,
+						}
+					);
+				}
+				break;
+		}
+	});
+});
+
+const EVENTS = {
+	onAbort,
+	onBlur,
+	onFocus,
+	onCancel,
+	onAuxclick,
+	onBeforeinput,
+	onBeforetoggle,
+	onCanplay,
+	onCanplaythrough,
+	onChange,
+	onClick,
+	onClose,
+	onContextmenu,
+	onCopy,
+	onCuechange,
+	onCut,
+	onDblclick,
+	onDrag,
+	onDragend,
+	onDragenter,
+	onDragexit,
+	onDragleave,
+	onDragover,
+	onDragstart,
+	onDrop,
+	onDurationchange,
+	onEmptied,
+	onEnded,
+	onFormdata,
+	onInput,
+	onInvalid,
+	onKeydown,
+	onKeypress,
+	onKeyup,
+	onLoad,
+	onLoadeddata,
+	onLoadedmetadata,
+	onLoadstart,
+	onMousedown,
+	onMouseenter,
+	onMouseleave,
+	onMousemove,
+	onMouseout,
+	onMouseover,
+	onMouseup,
+	onWheel,
+	onPaste,
+	onPause,
+	onPlay,
+	onPlaying,
+	onProgress,
+	onRatechange,
+	onReset,
+	onResize,
+	onScroll,
+	onScrollend,
+	onSecuritypolicyviolation,
+	onSeeked,
+	onSeeking,
+	onSelect,
+	onSlotchange,
+	onStalled,
+	onSubmit,
+	onSuspend,
+	onTimeupdate,
+	onVolumechange,
+	onWaiting,
+	onSelectstart,
+	onSelectionchange,
+	onToggle,
+	onPointercancel,
+	onPointerdown,
+	onPointerup,
+	onPointermove,
+	onPointerout,
+	onPointerover,
+	onPointerenter,
+	onPointerleave,
+	onGotpointercapture,
+	onLostpointercapture,
+	onMozfullscreenchange,
+	onMozfullscreenerror,
+	onAnimationcancel,
+	onAnimationend,
+	onAnimationiteration,
+	onAnimationstart,
+	onTransitioncancel,
+	onTransitionend,
+	onTransitionrun,
+	onTransitionstart,
+	onWebkitanimationend,
+	onWebkitanimationiteration,
+	onWebkitanimationstart,
+	onWebkittransitionend,
+	onError,
+	once,
+	passive,
+	capture,
+};
+
+/**
+ * Register an attribute to observe for adding/removing event listeners
+ *
+ * @param {string} attr Name of the attribute to observe
+ * @param {object} options
+ * @param {boolean} [options.addListeners=false] Whether or not to automatically add listeners
+ * @param {Document|Element} [options.base=document.body] Root node to observe
+ * @param {AbortSignal} [options.signal] An abort signal to remove any listeners when aborted
+ * @returns {string} The resulting `data-*` attribute name
+ */
+function registerEventAttribute(attr, {
+	addListeners = false,
+	base = document.body,
+	signal,
+} = {}) {
+	const fullAttr = EVENT_PREFIX + attr.toLowerCase();
+
+	if (! eventAttrs.includes(fullAttr)) {
+		const sel = `[${CSS.escape(fullAttr)}]`;
+		const prop = attrToProp(fullAttr);
+		eventAttrs.push(fullAttr);
+		EVENTS[prop] = fullAttr;
+		selector += `, ${sel}`;
+
+		if (addListeners) {
+			requestAnimationFrame(() => {
+				const config = { attrFilter: { [prop]: sel }, signal };
+				[base, ...base.querySelectorAll(sel)].forEach(el => _addListeners(el, config));
+			});
+		}
+	}
+
+	return fullAttr;
+}
+
+/**
+ * Get a registetd controller from the registry
+ *
+ * @param {string} key Generated key with which the controller was registered
+ * @returns {AbortController|void} Any registered controller, if any
+ */
+const getController = key => controllerRegistry.get(key);
+
+function abortController(key, reason) {
+	const controller = getController(key);
+
+	if (! (controller instanceof AbortController)) {
+		return false;
+	} else if (typeof reason === 'string') {
+		controller.abort(new Error(reason));
+		return true;
+	} else {
+		controller.abort(reason);
+		return true;
+	}
+}
+
+/**
+ * Register an `AbortSignal` to be used in declarative HTML as a value for `data-aegis-event-signal`
+ *
+ * @param {AbortSignal} signal The signal to register
+ * @returns {string} The registered key
+ * @throws {TypeError} Thrown if not an `AbortSignal`
+ */
+function registerSignal(signal) {
+	if (! (signal instanceof AbortSignal)) {
+		throw new TypeError('Signal must be an `AbortSignal`.');
+	} else if (typeof signal[signalSymbol] === 'string') {
+		return signal[signalSymbol];
+	} else {
+		const key = 'aegis:event:signal:' + crypto.randomUUID();
+		Object.defineProperty(signal, signalSymbol, { value: key, writable: false, enumerable: false });
+		signalRegistry.set(key, signal);
+		signal.addEventListener('abort', ({ target }) => unregisterSignal(target[signalSymbol]), { once: true });
+
+		return key;
+	}
+}
+
+/**
+ * Gets and `AbortSignal` from the registry
+ *
+ * @param {string} key The registered key for the signal
+ * @returns {AbortSignal|void} The corresponding `AbortSignal`, if any
+ */
+const getSignal = key => signalRegistry.get(key);
+
+/**
+ * Removes an `AbortSignal` from the registry
+ *
+ * @param {AbortSignal|string} signal An `AbortSignal` or the registered key for one
+ * @returns {boolean} Whether or not the signal was sucessfully unregistered
+ * @throws {TypeError} Throws if `signal` is not an `AbortSignal` or the key for a registered signal
+ */
+function unregisterSignal(signal) {
+	if (signal instanceof AbortSignal) {
+		return signalRegistry.delete(signal[signalSymbol]);
+	} else if (typeof signal === 'string') {
+		return signalRegistry.delete(signal);
+	} else {
+		throw new TypeError('Signal must be an `AbortSignal` or registered key/attribute.');
+	}
+}
+
+/**
+ * Add listeners to an element and its children, matching a generated query based on registered attributes
+ *
+ * @param {Element|Document} target Root node to add listeners from
+ * @param {object} options
+ * @param {AbortSignal} [options.signal] Optional signal to remove event listeners
+ * @returns {Element|Document} Returns the passed target node
+ */
+function attachListeners(target, { signal } = {}) {
+	const nodes = target instanceof Element && target.matches(selector)
+		? [target, ...target.querySelectorAll(selector)]
+		: target.querySelectorAll(selector);
+
+	nodes.forEach(el => _addListeners(el, { signal }));
+
+	return target;
+}
+
 let _isRegistrationOpen = true;
 
 const $$ = (selector, base = document) => base.querySelectorAll(selector);
@@ -17,6 +518,7 @@ const FUNCS = {
 		back: 'aegis:navigate:back',
 		forward: 'aegis:navigate:forward',
 		reload: 'aegis:navigate:reload',
+		close: 'aegis:navigate:close',
 		link: 'aegis:navigate:go',
 		popup: 'aegis:navigate:popup',
 	},
@@ -34,6 +536,9 @@ const FUNCS = {
 		disable: 'aegis:ui:disable',
 		scrollTo: 'aegis:ui:scrollTo',
 		prevent: 'aegis:ui:prevent',
+		revokeObjectURL: 'aegis:ui:revokeObjectURL',
+		cancelAnimationFrame: 'aegis:ui:cancelAnimationFrame',
+		abortController: 'aegis:ui:controller:abort',
 	},
 };
 
@@ -45,6 +550,7 @@ const registry = new Map([
 	[FUNCS.navigate.back, () => history.back()],
 	[FUNCS.navigate.forward, () => history.forward()],
 	[FUNCS.navigate.reload, () => history.go(0)],
+	[FUNCS.navigate.close, () => globalThis.close()],
 	[FUNCS.navigate.link, event => {
 		if (event.isTrusted) {
 			event.preventDefault();
@@ -83,6 +589,11 @@ const registry = new Map([
 			});
 		}
 	}],
+	[FUNCS.ui.revokeObjectURL, ({ currentTarget }) => URL.revokeObjectURL(currentTarget.src)],
+	[FUNCS.ui.cancelAnimationFrame, ({ currentTarget }) => cancelAnimationFrame(parseInt(currentTarget.dataset.animationFrame))],
+	[FUNCS.ui.clearInterval, ({ currentTarget }) => clearInterval(parseInt(currentTarget.dataset.clearInterval))],
+	[FUNCS.ui.clearTimeout, ({ currentTarget }) => clearTimeout(parseInt(currentTarget.dataset.timeout))],
+	[FUNCS.ui.abortController, ({ currentTarget }) => abortController(currentTarget.dataset.aegisEventController, currentTarget.dataset.aegisControllerReason)],
 	[FUNCS.ui.showModal, ({ currentTarget }) => {
 		const target = $(currentTarget.dataset.showModalSelector);
 
@@ -240,6 +751,42 @@ function getHost(target) {
 	}
 }
 
+function on(event, callback, { capture: capture$1 = false, passive: passive$1 = false, once: once$1 = false, signal: signal$1 } = {}) {
+	if (callback instanceof Function) {
+		return on(event, createCallback(callback), { capture: capture$1, passive: passive$1, once: once$1, signal: signal$1 });
+	} else if (typeof callback !== 'string' || callback.length === 0) {
+		throw new TypeError('Callback must be a function or a registered callback string.');
+	} else if (typeof event !== 'string' || event.length === 0) {
+		throw new TypeError('Event must be a non-empty string.');
+	} else {
+		if (! hasEventAttribute(event)) {
+			registerEventAttribute(event);
+		}
+
+		const parts = [[eventToProp(event), callback]];
+
+		if (capture$1) {
+			parts.push([capture, '']);
+		}
+
+		if (passive$1) {
+			parts.push([passive, '']);
+		}
+
+		if (once$1) {
+			parts.push([once, '']);
+		}
+
+		if (signal$1 instanceof AbortSignal) {
+			parts.push([signal, registerSignal(signal$1)]);
+		} else if (typeof signal$1 === 'string') {
+			parts.push([signal, signal$1]);
+		}
+
+		return parts.map(([prop, val]) => `${prop}="${val}"`).join(' ');
+	}
+}
+
 exports.FUNCS = FUNCS;
 exports.callCallback = callCallback;
 exports.clearRegistry = clearRegistry;
@@ -250,5 +797,6 @@ exports.getHost = getHost;
 exports.hasCallback = hasCallback;
 exports.isRegistrationOpen = isRegistrationOpen;
 exports.listCallbacks = listCallbacks;
+exports.on = on;
 exports.registerCallback = registerCallback;
 exports.unregisterCallback = unregisterCallback;

package/callbacks.js

@@ -1,3 +1,8 @@
+import {
+	eventToProp, capture as captureAttr, once as onceAttr, passive as passiveAttr, signal as signalAttr,
+	registerEventAttribute, hasEventAttribute, registerSignal, abortController,
+} from './events.js';
+
 let _isRegistrationOpen = true;
 
 const $$ = (selector, base = document) => base.querySelectorAll(selector);
@@ -15,6 +20,7 @@ export const FUNCS = {
 		back: 'aegis:navigate:back',
 		forward: 'aegis:navigate:forward',
 		reload: 'aegis:navigate:reload',
+		close: 'aegis:navigate:close',
 		link: 'aegis:navigate:go',
 		popup: 'aegis:navigate:popup',
 	},
@@ -32,6 +38,9 @@ export const FUNCS = {
 		disable: 'aegis:ui:disable',
 		scrollTo: 'aegis:ui:scrollTo',
 		prevent: 'aegis:ui:prevent',
+		revokeObjectURL: 'aegis:ui:revokeObjectURL',
+		cancelAnimationFrame: 'aegis:ui:cancelAnimationFrame',
+		abortController: 'aegis:ui:controller:abort',
 	},
 };
 
@@ -43,6 +52,7 @@ const registry = new Map([
 	[FUNCS.navigate.back, () => history.back()],
 	[FUNCS.navigate.forward, () => history.forward()],
 	[FUNCS.navigate.reload, () => history.go(0)],
+	[FUNCS.navigate.close, () => globalThis.close()],
 	[FUNCS.navigate.link, event => {
 		if (event.isTrusted) {
 			event.preventDefault();
@@ -81,6 +91,11 @@ const registry = new Map([
 			});
 		}
 	}],
+	[FUNCS.ui.revokeObjectURL, ({ currentTarget }) => URL.revokeObjectURL(currentTarget.src)],
+	[FUNCS.ui.cancelAnimationFrame, ({ currentTarget }) => cancelAnimationFrame(parseInt(currentTarget.dataset.animationFrame))],
+	[FUNCS.ui.clearInterval, ({ currentTarget }) => clearInterval(parseInt(currentTarget.dataset.clearInterval))],
+	[FUNCS.ui.clearTimeout, ({ currentTarget }) => clearTimeout(parseInt(currentTarget.dataset.timeout))],
+	[FUNCS.ui.abortController, ({ currentTarget }) => abortController(currentTarget.dataset.aegisEventController, currentTarget.dataset.aegisControllerReason)],
 	[FUNCS.ui.showModal, ({ currentTarget }) => {
 		const target = $(currentTarget.dataset.showModalSelector);
 
@@ -237,3 +252,39 @@ export function getHost(target) {
 		return null;
 	}
 }
+
+export function on(event, callback, { capture = false, passive = false, once = false, signal } = {}) {
+	if (callback instanceof Function) {
+		return on(event, createCallback(callback), { capture, passive, once, signal });
+	} else if (typeof callback !== 'string' || callback.length === 0) {
+		throw new TypeError('Callback must be a function or a registered callback string.');
+	} else if (typeof event !== 'string' || event.length === 0) {
+		throw new TypeError('Event must be a non-empty string.');
+	} else {
+		if (! hasEventAttribute(event)) {
+			registerEventAttribute(event);
+		}
+
+		const parts = [[eventToProp(event), callback]];
+
+		if (capture) {
+			parts.push([captureAttr, '']);
+		}
+
+		if (passive) {
+			parts.push([passiveAttr, '']);
+		}
+
+		if (once) {
+			parts.push([onceAttr, '']);
+		}
+
+		if (signal instanceof AbortSignal) {
+			parts.push([signalAttr, registerSignal(signal)]);
+		} else if (typeof signal === 'string') {
+			parts.push([signalAttr, signal]);
+		}
+
+		return parts.map(([prop, val]) => `${prop}="${val}"`).join(' ');
+	}
+}