@w-lfpup/superaction 0.1.0

package/.github/workflows/build.yml

@@ -0,0 +1,16 @@
+name: Build and Test
+
+on:
+    push:
+        branches: ["main"]
+    pull_request:
+        branches: ["main"]
+
+jobs:
+    build_and_test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v5
+            - uses: actions/setup-node@v4
+            - name: Install
+              run: npm ci

package/.prettierignore

@@ -0,0 +1,5 @@
+dist/
+
+*.js
+*.html
+package-lock.json

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+	"trailingComma": "all",
+	"useTabs": true,
+	"tabWidth": 4
+}

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, Taylor Vann
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,96 @@
+# SuperAction-js
+
+A hypertext extension to dispatch meaningful actions from the DOM.
+
+## Install
+
+Install via npm.
+
+```sh
+npm install --save-dev @w-lfpup/superaction
+```
+
+Or install directly from github.
+
+```sh
+npm install --save-dev https://github.com/w-lfpup/superaction-js
+```
+
+## Setup
+
+Create a `SuperAction` instance dispatch action events.
+
+The `SuperAction` instance below listens for `click` events. Event listeners are immediately `connected` to the `document`.
+
+This enables the DOM to declaratively send meaningful messages to Javascript-land.
+
+```js
+import { SuperAction } from "superaction";
+
+const _superAction = new SuperAction({
+	host: document,
+	connected: true,
+	eventNames: ["click"],
+});
+```
+
+## Declare
+
+Add an attribute with the pattern `event:=action`. The `#action` event will dispatch from the `host` element
+
+```html
+<button click:="increment">+</button>
+```
+
+## Listen
+
+Now the `button` will dispatch an `ActionEvent` from the `host` when clicked.
+
+Add an event listener to connect action events from the UI to javascript-land.
+
+```js
+document.addEventListener("#action", (e) => {
+	let { action, sourceEvent, formData } = e.actionParams;
+
+	if ("increment" === action) {
+		// increment something!
+	}
+});
+```
+
+Form data is available when action events originate from form elements.
+
+Learn more about action events [here](./action_events.md).
+
+## Typescript
+
+I'm not trying to pollute your globals so if you want typed `#action` events, please add the following to your app somewhere thoughtful.
+
+```ts
+import type { ActionEventInterface } from "superaction";
+
+declare global {
+	interface GlobalEventHandlersEventMap {
+		["#action"]: ActionEventInterface;
+	}
+}
+```
+
+## Examples
+
+Here are some examples to demonstrate how easy it is to work with `SuperAction-js`:
+
+- a simple [counter](https://w-lfpup.github.io/superaction-js/examples/counter/)
+- a small [sketchpad](https://w-lfpup.github.io/superaction-js/examples/sketch/) using an offscreen canvas
+
+## Why do this?
+
+`Superaction` is inspired by the [elm](https://elm-lang.org) project.
+
+It turns HTML into a declarative and _explicit_ message generator and removes several layers of indirection between UI and app state.
+
+`Superaction` is a straightforward way to work with vanilla web technologies and escape the JSX rabbithole.
+
+## License
+
+`SuperAction-js` is released under the BSD-3 Clause License.

package/action_events.md

@@ -0,0 +1,76 @@
+# Action Events
+
+## Event stacking
+
+`Superaction-js` listens to any DOM event that bubbles. It also dispatches all actions found along the composed path of a DOM event.
+
+Turns out that's [all UI Events](https://www.w3.org/TR/uievents/#events-uievents). Which is a lot of events!
+
+Consider the following example:
+
+```html
+<body click:="A">
+	<div click:="B">
+		<button click:="C">hai :3</button>
+	</div>
+</body>
+```
+
+When a person clicks the button above, the order of action events is:
+
+- Action "C"
+- Action "B"
+- Action "A"
+
+## Propagation
+
+Action events propagate similar to DOM events. Their declarative API reflects their DOM Event counterpart:
+
+- `event:prevent-default`
+- `event:stop-propagation`
+- `event:stop-immediate-propagation`
+
+Consider the following example:
+
+```html
+<body
+	click:="A"
+	click:stop-immediate-propagation>
+	<form
+		click:="B"
+		click:prevent-default>
+		<button
+			type=submit
+			click:="C">
+			UwU
+		</button>
+		<button
+			type=submit
+			click:="D"
+			click:stop-propagation>
+			^_^
+		</button>
+	</form>
+</body>
+```
+
+So when a person clicks the buttons above, the order of actions is:
+
+Click button C:
+
+- Action "C" dispatched
+- `preventDefault()` is called on the original `HTMLSubmitEvent`
+- Action "B" dispatched
+- Action propagation is stopped similar to `event.stopImmediatePropagation()`
+- Action "A" does _not_ dispatch
+
+Click button D:
+
+- Action "D" dispatched
+- Action event propagation stopped similar to `event.stopPropagation()`
+
+## Why #action ?
+
+The `#action` event name, specifically the `#`, is used to prevent cyclical event disptaches.
+
+We can't _dynamically_ add attribtues to elements that start with `#`. And in this way, some of the infinite loop risk is mitigated.

package/dist/mod.d.ts

@@ -0,0 +1,28 @@
+export interface ActionInterface {
+    action: string;
+    formData?: FormData;
+    sourceEvent: Event;
+}
+export interface ActionEventInterface extends Event {
+    actionParams: ActionInterface;
+}
+export interface SuperActionParamsInterface {
+    connected?: boolean;
+    eventNames: string[];
+    host: EventTarget;
+    target?: EventTarget;
+}
+export interface SuperActionInterface {
+    connect(): void;
+    disconnect(): void;
+}
+export declare class ActionEvent extends Event implements ActionEventInterface {
+    actionParams: ActionInterface;
+    constructor(actionParams: ActionInterface, eventInit?: EventInit);
+}
+export declare class SuperAction implements SuperActionInterface {
+    #private;
+    constructor(params: SuperActionParamsInterface);
+    connect(): void;
+    disconnect(): void;
+}

package/dist/mod.js

@@ -0,0 +1,59 @@
+export class ActionEvent extends Event {
+    actionParams;
+    constructor(actionParams, eventInit) {
+        super("#action", eventInit);
+        this.actionParams = actionParams;
+    }
+}
+export class SuperAction {
+    #connected = false;
+    #boundDispatch;
+    #params;
+    #target;
+    constructor(params) {
+        this.#params = { ...params };
+        this.#target = params.target ?? params.host;
+        this.#boundDispatch = this.#dispatch.bind(this);
+        if (this.#params.connected)
+            this.connect();
+    }
+    connect() {
+        if (this.#connected)
+            return;
+        this.#connected = true;
+        let { host, eventNames } = this.#params;
+        for (let name of eventNames) {
+            host.addEventListener(name, this.#boundDispatch);
+        }
+    }
+    disconnect() {
+        let { host, eventNames } = this.#params;
+        for (let name of eventNames) {
+            host.removeEventListener(name, this.#boundDispatch);
+        }
+    }
+    #dispatch(sourceEvent) {
+        let { type, currentTarget, target } = sourceEvent;
+        if (!currentTarget)
+            return;
+        let formData;
+        if (target instanceof HTMLFormElement)
+            formData = new FormData(target);
+        for (let node of sourceEvent.composedPath()) {
+            if (node instanceof Element) {
+                if (node.hasAttribute(`${type}:prevent-default`))
+                    sourceEvent.preventDefault();
+                if (node.hasAttribute(`${type}:stop-immediate-propagation`))
+                    return;
+                let action = node.getAttribute(`${type}:`);
+                if (action) {
+                    let composed = node.hasAttribute(`${type}:composed`);
+                    let event = new ActionEvent({ action, sourceEvent, formData }, { bubbles: true, composed });
+                    this.#target.dispatchEvent(event);
+                }
+                if (node.hasAttribute(`${type}:stop-propagation`))
+                    return;
+            }
+        }
+    }
+}

package/examples/counter/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script type="importmap">
+			{
+				"imports": {
+					"superaction": "../../dist/mod.js"
+				}
+			}
+		</script>
+		<script type="module" src="./mod.js"></script>
+	</head>
+	<body>
+		<button click:="decrement">-</button>
+		<span count>42</span>
+		<button click:="increment">+</button>
+	</body>
+</html>

package/examples/counter/mod.js

@@ -0,0 +1,18 @@
+import { SuperAction } from "superaction";
+const _superAction = new SuperAction({
+    host: document,
+    connected: true,
+    eventNames: ["click"],
+});
+const countEl = document.querySelector("[count]");
+let count = parseFloat(countEl.textContent ?? "");
+addEventListener("#action", function (e) {
+    let { action } = e.actionParams;
+    if ("increment" === action) {
+        count += 1;
+    }
+    if ("decrement" === action) {
+        count -= 1;
+    }
+    countEl.textContent = count.toString();
+});

package/examples/counter/mod.ts

@@ -0,0 +1,32 @@
+import type { ActionEventInterface } from "superaction";
+
+import { SuperAction } from "superaction";
+
+declare global {
+	interface GlobalEventHandlersEventMap {
+		["#action"]: ActionEventInterface;
+	}
+}
+
+const _superAction = new SuperAction({
+	host: document,
+	connected: true,
+	eventNames: ["click"],
+});
+
+const countEl = document.querySelector("[count]")!;
+let count = parseFloat(countEl.textContent ?? "");
+
+addEventListener("#action", function (e) {
+	let { action } = e.actionParams;
+
+	if ("increment" === action) {
+		count += 1;
+	}
+
+	if ("decrement" === action) {
+		count -= 1;
+	}
+
+	countEl.textContent = count.toString();
+});

package/examples/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body>
+		<header></header>
+		<main>
+			<p>A <a href="./counter/index.html">counter</a> example.</p>
+			<p>A <a href="./sketch/index.html">canvas</a> example.</p>
+		</main>
+		<footer></footer>
+	</body>
+</html>

package/examples/sketch/actions.js

@@ -0,0 +1 @@
+export {};

package/examples/sketch/actions.ts

@@ -0,0 +1,51 @@
+export interface CanvasParams {
+	top: number;
+	left: number;
+	width: number;
+	height: number;
+}
+
+interface PenParams {
+	x: number;
+	y: number;
+	movementX: number;
+	movementY: number;
+}
+
+interface SetupCanvas {
+	action: "setup_canvas";
+	offscreenCanvas: OffscreenCanvas;
+}
+
+interface SetCanvasParams {
+	action: "set_canvas_params";
+	params: CanvasParams;
+}
+
+interface SetColor {
+	action: "set_color";
+	color: string;
+}
+
+interface MovePen {
+	action: "move_pen";
+	params: PenParams;
+}
+
+interface PressPen {
+	action: "press_pen";
+	params: PenParams;
+}
+
+interface LiftPen {
+	action: "lift_pen";
+	params: PenParams;
+}
+
+export type Actions =
+	| SetupCanvas
+	| SetCanvasParams
+	| SetColor
+	| MovePen
+	| PressPen
+	| LiftPen;

package/examples/sketch/index.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html pointerup:="lift_pen" pointerdown:="press_pen" pointermove:="move_pen">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script type="importmap">
+			{
+				"imports": {
+					"superaction": "../../dist/mod.js"
+				}
+			}
+		</script>
+		<script type="module" src="./mod.js"></script>
+		<style>
+			:root {
+				background-color: #d3d3d3;
+			}
+
+			body {
+				margin: 0;
+				display: grid;
+				grid-template-columns: 1fr min(80dvw, 80dvh) 1fr;
+				grid-template-rows: 1fr min(80dvw, 80dvh) 1fr;
+				block-size: 100dvh;
+			}
+
+			input {
+				grid-column-start: 1;
+				grid-row-start: 2;
+				align-self: flex-start;
+				justify-self: end;
+			}
+
+			canvas {
+				background-color: white;
+				grid-column-start: 2;
+				grid-row-start: 2;
+				block-size: 100%;
+				inline-size: 100%;
+			}
+		</style>
+	</head>
+	<body>
+		<menu>
+			<input type="color" input:="set_color" pointerdown:stop-propagation />
+		</menu>
+		<canvas></canvas>
+	</body>
+</html>

package/examples/sketch/mod.js

@@ -0,0 +1,50 @@
+import { SuperAction } from "superaction";
+const _superAction = new SuperAction({
+    host: document,
+    connected: true,
+    eventNames: ["input", "pointerdown", "pointerup", "pointermove"],
+});
+// Setup workers
+const worker = new Worker("worker.js", { type: "module" });
+const canvas = document.querySelector("canvas");
+const offscreenCanvas = canvas.transferControlToOffscreen();
+const resizeObserver = new ResizeObserver(sendCanvasParams);
+resizeObserver.observe(canvas);
+// Add reactions
+addEventListener("#action", function (e) {
+    let { action, sourceEvent } = e.actionParams;
+    // send actions to the offscreen canvas worker
+    // set color action needs input value
+    if ("set_color" === action &&
+        sourceEvent.target instanceof HTMLInputElement) {
+        worker.postMessage({
+            action,
+            color: sourceEvent.target.value,
+        });
+    }
+    // other pointer actions
+    if (sourceEvent instanceof PointerEvent) {
+        let { x, y, movementX, movementY } = sourceEvent;
+        worker.postMessage({
+            action,
+            params: { x, y, movementX, movementY },
+        });
+    }
+});
+// Initialize offscreen canvas
+function setupCanvas() {
+    worker.postMessage({
+        action: "setup_canvas",
+        offscreenCanvas,
+    }, [offscreenCanvas]);
+}
+function sendCanvasParams() {
+    let { top, left } = canvas.getBoundingClientRect();
+    let { clientWidth, clientHeight } = canvas;
+    worker.postMessage({
+        action: "set_canvas_params",
+        params: { top, left, width: clientWidth, height: clientHeight },
+    });
+}
+setupCanvas();
+sendCanvasParams();

package/examples/sketch/mod.ts

@@ -0,0 +1,74 @@
+import { SuperAction, ActionEventInterface } from "superaction";
+
+// Setup SuperAction
+declare global {
+	interface GlobalEventHandlersEventMap {
+		["#action"]: ActionEventInterface;
+	}
+}
+
+const _superAction = new SuperAction({
+	host: document,
+	connected: true,
+	eventNames: ["input", "pointerdown", "pointerup", "pointermove"],
+});
+
+// Setup workers
+const worker = new Worker("worker.js", { type: "module" });
+const canvas = document.querySelector("canvas")!;
+const offscreenCanvas = canvas.transferControlToOffscreen();
+
+const resizeObserver = new ResizeObserver(sendCanvasParams);
+resizeObserver.observe(canvas);
+
+// Add reactions
+addEventListener("#action", function (e: ActionEventInterface) {
+	let { action, sourceEvent } = e.actionParams;
+
+	// send actions to the offscreen canvas worker
+
+	// set color action needs input value
+	if (
+		"set_color" === action &&
+		sourceEvent.target instanceof HTMLInputElement
+	) {
+		worker.postMessage({
+			action,
+			color: sourceEvent.target.value,
+		});
+	}
+
+	// other pointer actions
+	if (sourceEvent instanceof PointerEvent) {
+		let { x, y, movementX, movementY } = sourceEvent;
+
+		worker.postMessage({
+			action,
+			params: { x, y, movementX, movementY },
+		});
+	}
+});
+
+// Initialize offscreen canvas
+function setupCanvas() {
+	worker.postMessage(
+		{
+			action: "setup_canvas",
+			offscreenCanvas,
+		},
+		[offscreenCanvas],
+	);
+}
+
+function sendCanvasParams() {
+	let { top, left } = canvas.getBoundingClientRect();
+	let { clientWidth, clientHeight } = canvas;
+
+	worker.postMessage({
+		action: "set_canvas_params",
+		params: { top, left, width: clientWidth, height: clientHeight },
+	});
+}
+
+setupCanvas();
+sendCanvasParams();

package/examples/sketch/worker.js

@@ -0,0 +1,59 @@
+let canvas;
+let ctx;
+let pen_to_paper = false;
+let canvasParams;
+self.addEventListener("message", function (e) {
+    let { data } = e;
+    if ("setup_canvas" === data.action) {
+        canvas = data.offscreenCanvas;
+        ctx = canvas.getContext("2d");
+    }
+    if ("set_canvas_params" === data.action) {
+        canvas.width = data.params.width;
+        canvas.height = data.params.height;
+        canvasParams = data.params;
+        if (ctx) {
+            ctx.lineWidth = 10;
+            ctx.lineCap = "round";
+        }
+    }
+    if ("set_color" === data.action) {
+        let { color } = data;
+        if (ctx) {
+            ctx.strokeStyle = color;
+            ctx.fillStyle = color;
+        }
+    }
+    if ("press_pen" === data.action) {
+        pen_to_paper = true;
+        if (ctx) {
+            // create first point
+            ctx.beginPath();
+            let { top, left } = canvasParams;
+            let { x, y } = data.params;
+            let dx = x - left;
+            let dy = y - top;
+            ctx.arc(dx, dy, ctx.lineWidth * 0.5, 0, 2 * Math.PI, true);
+            ctx.fill();
+            ctx.closePath();
+            // start a "line"
+            ctx.beginPath();
+        }
+    }
+    if ("move_pen" === data.action) {
+        if (ctx && pen_to_paper) {
+            let { top, left } = canvasParams;
+            let { movementY, movementX, x, y } = data.params;
+            let dx = x - left;
+            let dy = y - top;
+            ctx.moveTo(dx - movementX, dy - movementY);
+            ctx.lineTo(dx, dy);
+            ctx.stroke();
+        }
+    }
+    if ("lift_pen" === data.action) {
+        pen_to_paper = false;
+        ctx?.closePath();
+    }
+});
+export {};

package/examples/sketch/worker.ts

@@ -0,0 +1,72 @@
+import type { Actions, CanvasParams } from "./actions.ts";
+
+let canvas: OffscreenCanvas;
+let ctx: OffscreenCanvasRenderingContext2D | null;
+let pen_to_paper = false;
+let canvasParams: CanvasParams;
+
+self.addEventListener("message", function (e: MessageEvent<Actions>) {
+	let { data } = e;
+
+	if ("setup_canvas" === data.action) {
+		canvas = data.offscreenCanvas;
+		ctx = canvas.getContext("2d");
+	}
+
+	if ("set_canvas_params" === data.action) {
+		canvas.width = data.params.width;
+		canvas.height = data.params.height;
+		canvasParams = data.params;
+		if (ctx) {
+			ctx.lineWidth = 10;
+			ctx.lineCap = "round";
+		}
+	}
+
+	if ("set_color" === data.action) {
+		let { color } = data;
+		if (ctx) {
+			ctx.strokeStyle = color;
+			ctx.fillStyle = color;
+		}
+	}
+
+	if ("press_pen" === data.action) {
+		pen_to_paper = true;
+		if (ctx) {
+			// create first point
+			ctx.beginPath();
+			let { top, left } = canvasParams;
+			let { x, y } = data.params;
+
+			let dx = x - left;
+			let dy = y - top;
+
+			ctx.arc(dx, dy, ctx.lineWidth * 0.5, 0, 2 * Math.PI, true);
+			ctx.fill();
+			ctx.closePath();
+
+			// start a "line"
+			ctx.beginPath();
+		}
+	}
+
+	if ("move_pen" === data.action) {
+		if (ctx && pen_to_paper) {
+			let { top, left } = canvasParams;
+			let { movementY, movementX, x, y } = data.params;
+
+			let dx = x - left;
+			let dy = y - top;
+
+			ctx.moveTo(dx - movementX, dy - movementY);
+			ctx.lineTo(dx, dy);
+			ctx.stroke();
+		}
+	}
+
+	if ("lift_pen" === data.action) {
+		pen_to_paper = false;
+		ctx?.closePath();
+	}
+});

package/examples/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"declaration": false,
+		"paths": {
+			"superaction": ["../dist/mod.d.ts"]
+		}
+	}
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "@w-lfpup/superaction",
+	"type": "module",
+	"main": "dist/mod.js",
+	"description": "A hypertext extension to dispatch meaningful actions from the DOM",
+	"license": "BSD-3-Clause",
+	"version": "0.1.0",
+	"scripts": {
+		"prepare": "npm run build && npm run build:examples",
+		"build": "npx tsc --project ./src",
+		"build:examples": "npx tsc --project ./examples",
+		"format": "npx prettier ./ --write"
+	},
+	"devDependencies": {
+		"prettier": "^3.2.5",
+		"typescript": "^5.4.5"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/w-lfpup/superaction-js.git"
+	}
+}

package/src/mod.ts

@@ -0,0 +1,94 @@
+export interface ActionInterface {
+	action: string;
+	formData?: FormData;
+	sourceEvent: Event;
+}
+
+export interface ActionEventInterface extends Event {
+	actionParams: ActionInterface;
+}
+
+export interface SuperActionParamsInterface {
+	connected?: boolean;
+	eventNames: string[];
+	host: EventTarget;
+	target?: EventTarget;
+}
+
+export interface SuperActionInterface {
+	connect(): void;
+	disconnect(): void;
+}
+
+export class ActionEvent extends Event implements ActionEventInterface {
+	actionParams: ActionInterface;
+
+	constructor(actionParams: ActionInterface, eventInit?: EventInit) {
+		super("#action", eventInit);
+		this.actionParams = actionParams;
+	}
+}
+
+export class SuperAction implements SuperActionInterface {
+	#connected = false;
+
+	#boundDispatch: EventListenerOrEventListenerObject;
+	#params: SuperActionParamsInterface;
+	#target: EventTarget;
+
+	constructor(params: SuperActionParamsInterface) {
+		this.#params = { ...params };
+		this.#target = params.target ?? params.host;
+		this.#boundDispatch = this.#dispatch.bind(this);
+
+		if (this.#params.connected) this.connect();
+	}
+
+	connect() {
+		if (this.#connected) return;
+		this.#connected = true;
+
+		let { host, eventNames } = this.#params;
+		for (let name of eventNames) {
+			host.addEventListener(name, this.#boundDispatch);
+		}
+	}
+
+	disconnect() {
+		let { host, eventNames } = this.#params;
+		for (let name of eventNames) {
+			host.removeEventListener(name, this.#boundDispatch);
+		}
+	}
+
+	#dispatch(sourceEvent: Event) {
+		let { type, currentTarget, target } = sourceEvent;
+		if (!currentTarget) return;
+
+		let formData: FormData | undefined;
+		if (target instanceof HTMLFormElement) formData = new FormData(target);
+
+		for (let node of sourceEvent.composedPath()) {
+			if (node instanceof Element) {
+				if (node.hasAttribute(`${type}:prevent-default`))
+					sourceEvent.preventDefault();
+
+				if (node.hasAttribute(`${type}:stop-immediate-propagation`))
+					return;
+
+				let action = node.getAttribute(`${type}:`);
+				if (action) {
+					let composed = node.hasAttribute(`${type}:composed`);
+					let event = new ActionEvent(
+						{ action, sourceEvent, formData },
+						{ bubbles: true, composed },
+					);
+
+					this.#target.dispatchEvent(event);
+				}
+
+				if (node.hasAttribute(`${type}:stop-propagation`)) return;
+			}
+		}
+	}
+}

package/src/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"rootDir": "./",
+		"outDir": "../dist"
+	}
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"lib": ["DOM", "ESNext"],
+		"declaration": true,
+		"strict": true,
+		"module": "esnext",
+		"target": "esnext"
+	}
+}