michaelschiemer/scripts/debug/test-hot-reload.js

// Hot Reload Test JavaScript
document.addEventListener('DOMContentLoaded', function() {
    const statusDiv = document.getElementById('status');
    const logDiv = document.getElementById('log');
    
    function log(message, className = '') {
        const time = new Date().toLocaleTimeString();
        const p = document.createElement('p');
        p.innerHTML = `[${time}] ${message}`;
        if (className) {
            p.className = className;
        }
        logDiv.appendChild(p);
        logDiv.scrollTop = logDiv.scrollHeight;
        console.log(message);
    }
    
    log('Testing Hot Reload connection...');
    
    const eventSource = new EventSource('/dev-hot-reload-minimal.php');
    
    eventSource.addEventListener('open', function() {
        statusDiv.textContent = 'Connected to Hot Reload server!';
        statusDiv.className = 'connected';
        statusDiv.style.color = 'green';
        log('✅ Hot Reload connected', 'connected');
    });
    
    eventSource.addEventListener('message', function(event) {
        log('📨 Message: ' + event.data);
    });
    
    eventSource.addEventListener('connected', function(event) {
        const data = JSON.parse(event.data);
        log('🔗 Connected: ' + data.message, 'connected');
    });
    
    eventSource.addEventListener('reload', function(event) {
        const data = JSON.parse(event.data);
        log('🔄 Reload event: ' + data.message + ' (' + data.type + ')', 'warning');
        
        // Handle different reload types
        if (data.type === 'css') {
            log('♻️  Hot-reloading CSS...', 'connected');
            // Reload CSS files
            document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
                const href = link.href;
                link.href = href + (href.includes('?') ? '&' : '?') + 't=' + Date.now();
            });
        } else if (data.type === 'full') {
            log('🔄 Full page reload in 2 seconds...', 'warning');
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else if (data.type === 'hmr') {
            log('⚡ HMR update detected', 'connected');
            // HMR would be handled by build tools like Vite
        }
    });
    
    eventSource.addEventListener('heartbeat', function(event) {
        log('💓 Heartbeat received');
    });
    
    eventSource.addEventListener('error', function(error) {
        statusDiv.textContent = 'Connection error';
        statusDiv.className = 'error';
        statusDiv.style.color = 'red';
        log('❌ Connection error - retrying...', 'error');
    });
    
    // Test file change simulation after 3 seconds
    setTimeout(() => {
        log('🧪 Hot Reload system is ready! Try editing a PHP file in src/ to see live reloading.', 'connected');
    }, 3000);
    
    // Clean up on page unload
    window.addEventListener('beforeunload', function() {
        eventSource.close();
    });
});