A hypertext extension to dispatch actions on events in the browser.

npm install --save-dev https://github.com/w-lfpup/superaction-js

Create a SuperAction instance with eventNames to dispatch actions.

The SuperAction below listens for click events. Event listeners are immediately connected to the document.

import { SuperAction } from "superaction";

const _superAction = new SuperAction({
	target: document,
	connected: true,
	eventNames: ["click"],
});

Add an attribute with the pattern event:=action. The #action event will always dispatch from the element with the event: attribute.

<button click:="decrement">-</button>
<button click:="increment">+</button>

addEventListener("#action", (e) => {
	let { action, sourceEvent } = e.actionParams;

	if ("decrement" === action) {
		// decrement something!
	}

	if ("increment" === action) {
		// increment something!
	}
});

I'm not trying to pollute your globals so if you want typed #action events, please add the following to your app somewhere thoughtful.

import type { ActionEventInterface } from "superaction";

declare global {
	interface GlobalEventHandlersEventMap {
		["#action"]: ActionEventInterface;
	}
}

Here are some examples to demonstrate how easy it is to work with SuperAction-js:

• a simple counter
• a small sketchpad using an offscreen canvas

SuperAction-js is released under the BSD-3 Clause License.