From bddcc62ee66c7945336c026186a8915fb8a7e905 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 18:42:36 +0000
Subject: [PATCH] Improve how JavaScript components are loaded and registered

Prevent duplicate registration of Alpine.js components by introducing a flag and ensure components are registered only once, even with multiple registration attempts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9bc9dd7a-5328-4cb7-91de-b3cb33a0c48c
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
---
 backend/static/js/alpine-components.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/backend/static/js/alpine-components.js b/backend/static/js/alpine-components.js
index 54a4fdbf..f2776d26 100644
--- a/backend/static/js/alpine-components.js
+++ b/backend/static/js/alpine-components.js
@@ -3,18 +3,28 @@
  * Enhanced components matching React frontend functionality
  */
 
+// Flag to prevent duplicate component registration
+let componentsRegistered = false;
+
 // Debug logging to see what's happening
 console.log('Alpine components script is loading...');
-console.log('Alpine available?', typeof window.Alpine !== 'undefined');
 
 // Try multiple approaches to ensure components register
 function registerComponents() {
-  console.log('Registering components - Alpine available:', typeof Alpine !== 'undefined');
-  
-  if (typeof Alpine === 'undefined') {
-    console.error('Alpine still not available when trying to register components!');
+  // Prevent duplicate registration
+  if (componentsRegistered) {
     return;
   }
+  
+  if (typeof Alpine === 'undefined') {
+    console.warn('Alpine.js not available yet, registration will retry');
+    return;
+  }
+  
+  console.log('Registering Alpine.js components...');
+  
+  // Mark as registered at the start to prevent race conditions
+  componentsRegistered = true;
 
 // Theme Toggle Component
 Alpine.data('themeToggle', () => ({
@@ -606,7 +616,7 @@ Alpine.store('toast', {
   }
 });
 
-  console.log('All Alpine.js components registered successfully');
+  console.log('Alpine.js components registered successfully');
 }
 
 // Try multiple registration approaches
@@ -615,8 +625,7 @@ document.addEventListener('DOMContentLoaded', registerComponents);
 
 // Fallback - try after a delay
 setTimeout(() => {
-  if (typeof Alpine !== 'undefined') {
-    console.log('Fallback registration triggered');
+  if (typeof Alpine !== 'undefined' && !componentsRegistered) {
     registerComponents();
   }
 }, 100);