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
*/
// 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);