@aegisjsproject/callback-registry 1.0.0

package/events.js

@@ -0,0 +1,269 @@
+import { hasCallback, getCallback } from './callbacks.js';
+
+const EVENT_PREFIX = 'data-aegis-event-on-';
+const EVENT_PREFIX_LENGTH = EVENT_PREFIX.length;
+const DATA_PREFIX = 'aegisEventOn';
+const DATA_PREFIX_LENGTH = DATA_PREFIX.length;
+
+const once = 'data-aegis-event-once',
+	passive = 'data-aegis-event-passive',
+	capture = 'data-aegis-event-capture';
+
+const eventAttrs = [
+	EVENT_PREFIX + 'abort',
+	EVENT_PREFIX + 'blur',
+	EVENT_PREFIX + 'focus',
+	EVENT_PREFIX + 'cancel',
+	EVENT_PREFIX + 'auxclick',
+	EVENT_PREFIX + 'beforeinput',
+	EVENT_PREFIX + 'beforetoggle',
+	EVENT_PREFIX + 'canplay',
+	EVENT_PREFIX + 'canplaythrough',
+	EVENT_PREFIX + 'change',
+	EVENT_PREFIX + 'click',
+	EVENT_PREFIX + 'close',
+	EVENT_PREFIX + 'contextmenu',
+	EVENT_PREFIX + 'copy',
+	EVENT_PREFIX + 'cuechange',
+	EVENT_PREFIX + 'cut',
+	EVENT_PREFIX + 'dblclick',
+	EVENT_PREFIX + 'drag',
+	EVENT_PREFIX + 'dragend',
+	EVENT_PREFIX + 'dragenter',
+	EVENT_PREFIX + 'dragexit',
+	EVENT_PREFIX + 'dragleave',
+	EVENT_PREFIX + 'dragover',
+	EVENT_PREFIX + 'dragstart',
+	EVENT_PREFIX + 'drop',
+	EVENT_PREFIX + 'durationchange',
+	EVENT_PREFIX + 'emptied',
+	EVENT_PREFIX + 'ended',
+	EVENT_PREFIX + 'formdata',
+	EVENT_PREFIX + 'input',
+	EVENT_PREFIX + 'invalid',
+	EVENT_PREFIX + 'keydown',
+	EVENT_PREFIX + 'keypress',
+	EVENT_PREFIX + 'keyup',
+	EVENT_PREFIX + 'load',
+	EVENT_PREFIX + 'loadeddata',
+	EVENT_PREFIX + 'loadedmetadata',
+	EVENT_PREFIX + 'loadstart',
+	EVENT_PREFIX + 'mousedown',
+	EVENT_PREFIX + 'mouseenter',
+	EVENT_PREFIX + 'mouseleave',
+	EVENT_PREFIX + 'mousemove',
+	EVENT_PREFIX + 'mouseout',
+	EVENT_PREFIX + 'mouseover',
+	EVENT_PREFIX + 'mouseup',
+	EVENT_PREFIX + 'wheel',
+	EVENT_PREFIX + 'paste',
+	EVENT_PREFIX + 'pause',
+	EVENT_PREFIX + 'play',
+	EVENT_PREFIX + 'playing',
+	EVENT_PREFIX + 'progress',
+	EVENT_PREFIX + 'ratechange',
+	EVENT_PREFIX + 'reset',
+	EVENT_PREFIX + 'resize',
+	EVENT_PREFIX + 'scroll',
+	EVENT_PREFIX + 'scrollend',
+	EVENT_PREFIX + 'securitypolicyviolation',
+	EVENT_PREFIX + 'seeked',
+	EVENT_PREFIX + 'seeking',
+	EVENT_PREFIX + 'select',
+	EVENT_PREFIX + 'slotchange',
+	EVENT_PREFIX + 'stalled',
+	EVENT_PREFIX + 'submit',
+	EVENT_PREFIX + 'suspend',
+	EVENT_PREFIX + 'timeupdate',
+	EVENT_PREFIX + 'volumechange',
+	EVENT_PREFIX + 'waiting',
+	EVENT_PREFIX + 'selectstart',
+	EVENT_PREFIX + 'selectionchange',
+	EVENT_PREFIX + 'toggle',
+	EVENT_PREFIX + 'pointercancel',
+	EVENT_PREFIX + 'pointerdown',
+	EVENT_PREFIX + 'pointerup',
+	EVENT_PREFIX + 'pointermove',
+	EVENT_PREFIX + 'pointerout',
+	EVENT_PREFIX + 'pointerover',
+	EVENT_PREFIX + 'pointerenter',
+	EVENT_PREFIX + 'pointerleave',
+	EVENT_PREFIX + 'gotpointercapture',
+	EVENT_PREFIX + 'lostpointercapture',
+	EVENT_PREFIX + 'mozfullscreenchange',
+	EVENT_PREFIX + 'mozfullscreenerror',
+	EVENT_PREFIX + 'animationcancel',
+	EVENT_PREFIX + 'animationend',
+	EVENT_PREFIX + 'animationiteration',
+	EVENT_PREFIX + 'animationstart',
+	EVENT_PREFIX + 'transitioncancel',
+	EVENT_PREFIX + 'transitionend',
+	EVENT_PREFIX + 'transitionrun',
+	EVENT_PREFIX + 'transitionstart',
+	EVENT_PREFIX + 'webkitanimationend',
+	EVENT_PREFIX + 'webkitanimationiteration',
+	EVENT_PREFIX + 'webkitanimationstart',
+	EVENT_PREFIX + 'webkittransitionend',
+	EVENT_PREFIX + 'error',
+];
+
+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 attrEntriesMap = attr => [attrToProp(attr), attr];
+
+const isEventDataAttr = ([name]) => name.startsWith(DATA_PREFIX);
+
+const DATA_EVENTS = Object.fromEntries([...eventAttrs].map(attrEntriesMap));
+
+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,
+				});
+			}
+		} catch(err) {
+			console.error(err);
+		}
+	}
+}
+
+const observer = 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),
+						}
+					);
+				}
+				break;
+		}
+	});
+});
+
+export const EVENTS = { ...DATA_EVENTS, 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
+ */
+export 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;
+}
+
+/**
+ * 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
+ */
+export 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;
+}
+/**
+ * Add a node to the `MutationObserver` to observe attributes and add/remove event listeners
+ *
+ * @param {Document|Element} root Element to observe attributes on
+ */
+export function observeEvents(root = document) {
+	attachListeners(root);
+	observer.observe(root, {
+		subtree: true,
+		childList:true,
+		attributes: true,
+		attributeOldValue: true,
+		attributeFilter: eventAttrs,
+	});
+}
+
+/**
+ * Disconnects the `MutationObserver`, disabling observing of all attribute changes
+ *
+ * @returns {void}
+ */
+export const disconnectEventsObserver = () => observer.disconnect();
+
+/**
+ * Register a global error handler callback
+ *
+ * @param {Function} callback Callback to register as a global error handler
+ * @param {EventInit} config Typical event listener config object
+ */
+export function setGlobalErrorHandler(callback, { capture, once, passive, signal } = {}) {
+	if (callback instanceof Function) {
+		globalThis.addEventListener('error', callback, { capture, once, passive, signal });
+	} else {
+		throw new TypeError('Callback is not a function.');
+	}
+}

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@aegisjsproject/callback-registry",
+  "version": "1.0.0",
+  "description": " A callback registry for AegisJSProject",
+  "keywords": [
+    "aegis",
+    "callback-registry",
+    "event-binding",
+    "declarative-dom"
+  ],
+  "type": "module",
+  "main": "./callbacks.cjs",
+  "module": "./callbackRegistry.js",
+  "unpkg": "./callbackRegistry.mjs",
+  "exports": {
+    ".": {
+      "import": "./callbackRegistry.js",
+      "require": "./callbacks.cjs"
+    },
+    "./*.js": {
+      "import": "./*.js",
+      "require": "./*.cjs"
+    },
+    "./*.mjs": {
+      "import": "./*.js",
+      "require": "./*.cjs"
+    },
+    "./*.cjs": {
+      "import": "./*.js",
+      "require": "./*.cjs"
+    },
+    "./*": {
+      "import": "./*.js",
+      "require": "./*.cjs"
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "private": false,
+  "scripts": {
+    "test": "npm run lint:js && npm run run:tests",
+    "preversion": "npm test && npm run build",
+    "prepare": "npm test && npm run build",
+    "lint:js": "eslint .",
+    "fix:js": "eslint . --fix",
+    "build": "npm run build:js",
+    "run:tests": "node --test",
+    "clean": "rm -f ./*.cjs",
+    "build:js": "npm run clean && rollup -c rollup.config.js",
+    "create:lock": "npm i --package-lock-only --ignore-scripts --no-audit --no-fund",
+    "version:bump": "npm run version:bump:patch",
+    "version:bump:patch": "npm version --no-git-tag-version patch && npm run create:lock",
+    "version:bump:minor": "npm version --no-git-tag-version minor && npm run create:lock",
+    "version:bump:major": "npm version --no-git-tag-version major && npm run create:lock"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AegisJSProject/callback-registry.git"
+  },
+  "author": "Chris Zuber <admin@kernvalley.us>",
+  "license": "MIT",
+  "funding": [
+    {
+      "type": "librepay",
+      "url": "https://liberapay.com/shgysk8zer0"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/shgysk8zer0"
+    }
+  ],
+  "bugs": {
+    "url": "https://github.com/AegisJSProject/callback-registry/issues"
+  },
+  "homepage": "https://github.com/AegisJSProject/callback-registry#readme",
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@shgysk8zer0/eslint-config": "^1.0.1",
+    "@shgysk8zer0/js-utils": "^1.0.2",
+    "@shgysk8zer0/npm-utils": "^1.1.3"
+  }
+}