Improve naming

dist/phlex.d.ts

@@ -1 +1,7 @@
+interface Event {
+	readonly targetNode: Element | null;
+	readonly newNode: Element | null;
+}
 export declare function init(): void;
+export declare function defineAction(name: string, action: (event: Event) => void): void;
+export {};

src/phlex.ts

@@ -2,55 +2,13 @@ import { morph } from "morphlex";
 
 type ActionMap = Map<string, (event: Event) => void>;
 
-const Actions: ActionMap = new Map();
-
-Actions.set("morph", ({ target, node }) => {
-	if (target && node) {
-		morph(target, node);
-	}
-});
-
-Actions.set("replace", ({ target, node }) => {
-	if (target && node) {
-		target.replaceWith(node);
-	}
-});
-
-Actions.set("append", ({ target, node }) => {
-	if (target && node) {
-		target.appendChild(node);
-	}
-});
-
-Actions.set("prepend", ({ target, node }) => {
-	if (target && node) {
-		target.prepend(node);
-	}
-});
-
-Actions.set("refresh", () => {
-	fetch(document.location.href).then((response) => {
-		if (response.ok) {
-			response.text().then((text) => {
-				morph(document.documentElement, text);
-			});
-		}
-	});
-});
-
-Actions.set("remove", ({ target }) => {
-	target?.remove();
-});
-
-Actions.set("navigate", ({ node }) => {
-	if (node) morph(document.documentElement, node);
-});
-
 interface Event {
-	readonly node: Element | null;
-	readonly target: HTMLElement | null;
+	readonly targetNode: Element | null;
+	readonly newNode: Element | null;
 }
 
+const Actions: ActionMap = new Map();
+
 export function init(): void {
 	// document.addEventListener("submit", (event) => {
 	// 	if (event.target instanceof HTMLFormElement) {
@@ -70,9 +28,9 @@ export function init(): void {
 			}
 
 			const href = link.href;
-			const action = link.dataset.action;
-			const targetId = link.dataset.target;
-			const fragment = link.dataset.fragment;
+			const action = link.getAttribute("phlex-action");
+			const targetId = link.getAttribute("phlex-target");
+			const fragment = link.getAttribute("phlex-fragment");
 
 			if (action) {
 				event.preventDefault();
@@ -89,7 +47,7 @@ export function init(): void {
 	});
 }
 
-async function createEvent(href: string, targetId: string | undefined, fragment: string | undefined): Promise<Event> {
+async function createEvent(href: string, targetId: string | null, fragment: string | null): Promise<Event> {
 	const headers = new Headers();
 	if (fragment) headers.append("X-Fragment", fragment);
 
@@ -100,12 +58,47 @@ async function createEvent(href: string, targetId: string | undefined, fragment:
 			const node = template.content.firstElementChild;
 			const target = targetId ? document.getElementById(targetId) : null;
 
-			return {
-				target,
-				node,
-			};
+			return { targetNode: target, newNode: node };
 		});
 	});
 
 	return event;
 }
+
+export function defineAction(name: string, action: (event: Event) => void): void {
+	Actions.set(name, action);
+}
+
+defineAction("morph", ({ targetNode: target, newNode: node }) => {
+	if (target && node) morph(target, node);
+});
+
+defineAction("replace", ({ targetNode: target, newNode: node }) => {
+	if (node) target?.replaceWith(node);
+});
+
+defineAction("append", ({ targetNode: target, newNode: node }) => {
+	if (node) target?.appendChild(node);
+});
+
+defineAction("prepend", ({ targetNode: target, newNode: node }) => {
+	if (node) target?.prepend(node);
+});
+
+defineAction("refresh", () => {
+	fetch(document.location.href).then((response) => {
+		if (response.ok) {
+			response.text().then((text) => {
+				morph(document.documentElement, text);
+			});
+		}
+	});
+});
+
+defineAction("remove", ({ targetNode: target }) => {
+	target?.remove();
+});
+
+defineAction("navigate", ({ newNode: node }) => {
+	if (node) morph(document.documentElement, node);
+});