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
This commit is contained in:
pac7
2025-09-21 18:42:36 +00:00
committed by pacnpal
parent 0153af7339
commit bddcc62ee6

View File

@@ -3,18 +3,28 @@
* Enhanced components matching React frontend functionality * Enhanced components matching React frontend functionality
*/ */
// Flag to prevent duplicate component registration
let componentsRegistered = false;
// Debug logging to see what's happening // Debug logging to see what's happening
console.log('Alpine components script is loading...'); console.log('Alpine components script is loading...');
console.log('Alpine available?', typeof window.Alpine !== 'undefined');
// Try multiple approaches to ensure components register // Try multiple approaches to ensure components register
function registerComponents() { function registerComponents() {
console.log('Registering components - Alpine available:', typeof Alpine !== 'undefined'); // Prevent duplicate registration
if (componentsRegistered) {
if (typeof Alpine === 'undefined') {
console.error('Alpine still not available when trying to register components!');
return; 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 // Theme Toggle Component
Alpine.data('themeToggle', () => ({ 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 // Try multiple registration approaches
@@ -615,8 +625,7 @@ document.addEventListener('DOMContentLoaded', registerComponents);
// Fallback - try after a delay // Fallback - try after a delay
setTimeout(() => { setTimeout(() => {
if (typeof Alpine !== 'undefined') { if (typeof Alpine !== 'undefined' && !componentsRegistered) {
console.log('Fallback registration triggered');
registerComponents(); registerComponents();
} }
}, 100); }, 100);