pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 09:11:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve Alpine.js component registration and toast functionality

Browse Source 
Add more robust Alpine.js component registration with console logs and fallback mechanisms. Update toast container to use an empty x-data object, potentially simplifying its initialization.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/AvPcIbY
This commit is contained in:
pac7
2025-09-21 03:04:45 +00:00
committed by pacnpal
parent 4f14f5366f
commit 06e3efc603
2 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
backend/static/js/alpine-components.js
View File

@@ -3,9 +3,18 @@
* Enhanced components matching React frontend functionality * Enhanced components matching React frontend functionality
*/ */
// Wrap ALL code to wait for Alpine to be available // Debug logging to see what's happening
document.addEventListener('alpine:init', () => { console.log('Alpine components script is loading...');
console.log('Alpine is ready, registering components...'); 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!');
return;
}
// Theme Toggle Component // Theme Toggle Component
Alpine.data('themeToggle', () => ({ Alpine.data('themeToggle', () => ({
@@ -609,4 +618,16 @@ Alpine.store('toast', {
}); });
console.log('All Alpine.js components registered successfully'); console.log('All Alpine.js components registered successfully');
}); }
// Try multiple registration approaches
document.addEventListener('alpine:init', registerComponents);
document.addEventListener('DOMContentLoaded', registerComponents);
// Fallback - try after a delay
setTimeout(() => {
if (typeof Alpine !== 'undefined') {
console.log('Fallback registration triggered');
registerComponents();
}
}, 100);

2
backend/templates/components/ui/toast-container.html
View File

@@ -5,7 +5,7 @@ Matches React frontend toast functionality with Sonner-like behavior
<!-- Toast Container --> <!-- Toast Container -->
<div <div
x-data="toast" x-data="{}"
x-show="$store.toast.toasts.length > 0" x-show="$store.toast.toasts.length > 0"
class="fixed top-4 right-4 z-50 space-y-2" class="fixed top-4 right-4 z-50 space-y-2"
x-cloak x-cloak