astro-altcha 0.1.5 → 0.2.0

package/dist/types/index.d.ts

@@ -46,15 +46,17 @@ export type AltchaChallengeOptions<Algo extends Algorithm> = Algo extends "Argon
 } : OmitCreateChallengeOptions & {
   algorithm: Exclude<Algorithm, "Argon2id" | "Scrypt">;
 };
-export type AstroAltchaHydrationStrategy = "onfocus" | "onload";
+export type AstroAltchaHydrationStrategy = "onfocus" | "onload" | "onhover";
 export type AltchaFormWidgetProps = {
   /** When the altcha-widget should be hydrated.
    *
    * `onfocus` - when the form is first focused
    *
    * `onload` - when the page first loads
+   *
+   * `onhover` - when the form is first hovered
    */
-  hydrationStrategy?: "onfocus" | "onload";
+  hydrationStrategy?: AstroAltchaHydrationStrategy;
   debug?: boolean;
 } & Omit<WidgetAttributes, "name">;
 export type AltchaFormProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-altcha",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Altcha integration for Astro",
   "type": "module",
   "sideEffects": false,

package/src/components/AltchaForm.astro

@@ -18,66 +18,70 @@ const {
 
 <form {...formProps}>
 	<slot />
-	<altcha-widget
-		data-astro-altcha="astro-altcha-form-widget"
-		{name}
-		{challenge}
-		{...widgetProps}
-	></altcha-widget>
-	<script
-		is:inline
-		data-astro-altcha="config"
-		type="application/json"
-		set:html={JSON.stringify({ hydrationStrategy,  debug})}
-	/>
+	<template
+		data-astro-altcha="form-widget"
+		data-hydration-strategy={hydrationStrategy}
+		data-debug={debug}
+	>
+		<altcha-widget {name} {challenge} {...widgetProps}></altcha-widget>
+	</template>
 </form>
 
 <script>
 import type { WidgetAttributes, WidgetMethods } from "altcha/types";
 import type { AstroAltchaHydrationStrategy } from "astro-altcha/types";
 
-const altchaWidgets = document.querySelectorAll("altcha-widget");
+const templates = document.querySelectorAll("template");
 
-for (const widget of altchaWidgets) {
-	if (widget.getAttribute("data-astro-altcha") !== "astro-altcha-form-widget") {
+for (const template of templates) {
+	if (template.dataset.astroAltcha !== "form-widget") {
 		continue;
 	}
 
-	const form = widget.closest("form");
+	const form = template.closest("form");
 	if (!form) {
-		throw new Error("Widget must be placed inside a form element");
+		continue;
 	}
 
-	const config = form.querySelector("script");
-	if (config?.getAttribute("data-astro-altcha") !== "config") continue;
+	const { hydrationStrategy, debug } = template.dataset;
+	const widget = template.content.querySelector("altcha-widget");
+	if (!widget) {
+		continue;
+	}
 
-	const {
-		hydrationStrategy,
-		debug,
-	}: {
-		hydrationStrategy: AstroAltchaHydrationStrategy;
-		debug: boolean;
-	} = JSON.parse(config.innerText);
-	if (hydrationStrategy === "onload") {
-		await loadAltcha(form, widget, debug);
-	} else {
-		form.addEventListener("focusin", () => loadAltcha(form, widget, debug), {
-			once: true,
-		});
+	const mount = () => mountWidget(form, template, widget, debug === "true");
+
+	switch (hydrationStrategy as AstroAltchaHydrationStrategy) {
+		case "onload":
+			void mount();
+			break;
+		case "onfocus":
+			form.addEventListener("focusin", mount, { once: true });
+			break;
+		case "onhover":
+			form.addEventListener("mouseenter", mount, { once: true });
+			break;
 	}
 }
 
-async function loadAltcha(
+async function mountWidget(
 	form: HTMLFormElement,
-	widget: WidgetAttributes & WidgetMethods & HTMLElement,
+	template: HTMLTemplateElement,
+	widget: HTMLElement & WidgetAttributes & WidgetMethods,
 	debug: boolean,
 ) {
 	await import("altcha");
-	widget.configure({ debug });
 
-	const configureEvent = new CustomEvent("astro-altcha:init", {
-		detail: { widget },
-	});
-	form.dispatchEvent(configureEvent);
+	const widgetReady = new Promise<void>((resolve) =>
+		widget.addEventListener("load", () => resolve(), { once: true }),
+	);
+
+	template.replaceWith(widget);
+	await widgetReady;
+
+	widget.configure({ debug });
+	form.dispatchEvent(
+		new CustomEvent("astro-altcha:init", { detail: { widget } }),
+	);
 }
 </script>