From c32722135252858ce6297d137f0817c33a4c6341 Mon Sep 17 00:00:00 2001 From: Ricardo Date: Sat, 21 Feb 2026 22:40:34 +0100 Subject: [PATCH] fix: use Alpine.data() for comments component registration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Convert commentsSection from a global function to Alpine.data() registration via the alpine:init event. This is the proper Alpine.js pattern for reusable components — the component is registered in Alpine's internal registry before DOM processing begins, eliminating script loading order issues. Reverts the hacky approach of moving the script tag to . --- js/comments.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/js/comments.js b/js/comments.js index bb00b6d..afb8c46 100644 --- a/js/comments.js +++ b/js/comments.js @@ -1,10 +1,13 @@ /** * Client-side comments component (Alpine.js) * Handles IndieAuth flow, comment submission, and display + * + * Registered via Alpine.data() so the component is available + * regardless of script loading order. */ -function commentsSection(targetUrl) { - return { +document.addEventListener("alpine:init", () => { + Alpine.data("commentsSection", (targetUrl) => ({ targetUrl, user: null, meUrl: "", @@ -42,7 +45,11 @@ function commentsSection(targetUrl) { const authError = params.get("auth_error"); if (authError) { this.showStatus(`Authentication failed: ${authError}`, "error"); - window.history.replaceState({}, "", window.location.pathname + "#comments"); + window.history.replaceState( + {}, + "", + window.location.pathname + "#comments", + ); } }, @@ -139,5 +146,5 @@ function commentsSection(targetUrl) { this.statusMessage = ""; }, 5000); }, - }; -} + })); +});