vatts 2.0.2 → 2.0.3-canary.1

package/dist/hotReload.js

@@ -412,211 +412,211 @@ class HotReloadManager {
     // ... (rest of methods like getClientScript, clearBackendCache keep unchanged or minimally adjusted)
     // Script do cliente otimizado com reconnection backoff
     getClientScript() {
-        return `
-        <script>
-        (function() {
-            if (typeof window !== 'undefined') {
-                let ws;
-                let reconnectAttempts = 0;
-                let maxReconnectInterval = 30000; 
-                let reconnectInterval = 1000;
-                let reconnectTimer;
-                let isConnected = false;
-                let lastBuildError = null;
-
-                function emitBuildError(error) {
-                    try {
-                        lastBuildError = error;
-                        // Não persistimos erro no client. Ele sempre vem do servidor via WebSocket.
-                        window.dispatchEvent(new CustomEvent('vatts:build-error', { detail: error }));
-                    } catch {}
-                }
-
-                function clearBuildError() {
-                    try {
-                        lastBuildError = null;
-                        window.dispatchEvent(new CustomEvent('vatts:build-ok', { detail: { ts: Date.now() } }));
-                    } catch {}
-                }
-
-                // Não faz bootstrap de erro salvo (sem sessionStorage/localStorage).
-
-                function notifyHotReloadState(state, payload) {
-                    try {
-                        window.__VATTS_HOT_RELOAD__ = { state: state, payload: payload || null, ts: Date.now() };
-                        const ev = new CustomEvent('vatts:hotreload', { detail: window.__VATTS_HOT_RELOAD__ });
-                        window.dispatchEvent(ev);
-                    } catch {}
-                }
-
-                function requestBuildStatus(reason) {
-                    try {
-                        if (!ws || ws.readyState !== WebSocket.OPEN) return;
-                        ws.send(JSON.stringify({ type: 'status-request', reason: reason || 'unknown', ts: Date.now() }));
-                    } catch {}
-                }
-
-                async function waitForMainToBeUpdated(timeoutMs, pollMs) {
-                    try {
-                        const script = document.querySelector('script[src*="main.js"]');
-                        if (!script || !script.src) return true;
-                        const mainUrl = script.src.split('?')[0];
-                        const start = Date.now();
-                        let baseline = '';
-                        try {
-                            const r0 = await fetch(mainUrl + '?t=' + Date.now(), { cache: 'no-store' });
-                            baseline = await r0.text();
-                        } catch { return true; }
-
-                        while (Date.now() - start < timeoutMs) {
-                            await new Promise(r => setTimeout(r, pollMs));
-                            try {
-                                const r = await fetch(mainUrl + '?t=' + Date.now(), { cache: 'no-store' });
-                                const txt = await r.text();
-                                if (txt && txt !== baseline) return true;
-                            } catch {}
-                        }
-                        return false;
-                    } catch { return true; }
-                }
-                
-                function connect() {
-                    const url = window.location;
-                    const protocol = url.protocol === "https:" ? "wss:" : "ws:";
-                    const wsUrl = protocol + '//' + url.host + '/hweb-hotreload/';
-                    if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) return;
-
-                    try {
-                        ws = new WebSocket(wsUrl);
-                        ws.onopen = function() {
-                            console.log('\u001b[32m[vatts]\u001b[0m Hot-reload connected');
-                            isConnected = true;
-                            reconnectAttempts = 0;
-                            clearTimeout(reconnectTimer);
-                            // Ao conectar, sempre pede o status atual ao servidor.
-                            requestBuildStatus('ws-open');
-                        };
-                        
-                        ws.onmessage = function(event) {
-                            try {
-                                const message = JSON.parse(event.data);
-                                switch(message.type) {
-                                    case 'frontend-reload':
-                                        handleFrontendReload(message.data);
-                                        break;
-                                    case 'backend-api-reload':
-                                        console.log('[vatts] Backend changed, reloading page...');
-                                        window.location.reload();
-                                        break;
-                                    case 'server-restart':
-                                        console.log('[vatts] Server restarting...');
-                                        break;
-                                    case 'server-ready':
-                                        setTimeout(() => window.location.reload(), 500);
-                                        break;
-                                    case 'build-error':
-                                        console.log('Erro detectado')
-                                        notifyHotReloadState('build-error', message.data);
-                                        emitBuildError(message.data);
-                                        break;
-                                    case 'build-complete':
-                                        notifyHotReloadState('idle', { build: 'ok' });
-                                        clearBuildError();
-                                        console.log('[vatts] Build complete');
-                                        break;
-                                }
-                            } catch (e) {
-                                console.error('[vatts] Error processing msg:', e);
-                            }
-                        };
-                        
-                        async function handleFrontendReload(data) {
-                            notifyHotReloadState('reloading', { type: 'frontend', data: data || null });
-                            if (!data || !data.file) {
-                                window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: null, timestamp: Date.now() } }));
-                                return;
-                            }
-                            const file = (data.file || '').toLowerCase();
-                            console.log('[vatts] Frontend changed:', data.file);
-                            const needsFullReload = file.includes('layout.tsx') || file.includes('not-found.tsx') || file.endsWith('.css');
-                            if (needsFullReload) {
-                                notifyHotReloadState('full-reload', { reason: 'layout/css', file: data.file });
-                                window.location.reload();
-                                return;
-                            }
-
-                            // Recarrega main.js (o bundle do app) com cache-busting.
-                            // Em DEV, React/ReactDOM agora são externos, então isso não duplica hooks.
-                            await waitForMainToBeUpdated(5000, 120);
-
-                            const script = document.querySelector('script[src*="main.js"]');
-                            if (script) {
-                                const mainUrl = (script.getAttribute('src') || script.src || '');
-                                const base = String(mainUrl).split('?')[0];
-
-                                // Remove scripts antigos de main.js para evitar múltiplas execuções do bundle
-                                try {
-                                    document.querySelectorAll('script[src*="main.js"]').forEach(s => {
-                                        if (s && s.parentNode) s.parentNode.removeChild(s);
-                                    });
-                                } catch {}
-
-                                const newScript = document.createElement('script');
-                                newScript.type = 'module';
-                                newScript.src = base + '?t=' + Date.now();
-
-                                newScript.onload = () => {
-                                    // depois de carregar o novo bundle, pede render/update
-                                    const ts = Date.now();
-                                    window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: data.file, timestamp: ts } }));
-                                    setTimeout(() => requestBuildStatus('after-frontend-reload'), 50);
-                                };
-
-                                newScript.onerror = () => {
-                                    window.location.reload();
-                                };
-
-                                document.head.appendChild(newScript);
-                            } else {
-                                // fallback
-                                const ts = Date.now();
-                                window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: data.file, timestamp: ts } }));
-                                setTimeout(() => requestBuildStatus('after-frontend-reload'), 50);
-                            }
-
-                            setTimeout(() => {
-                                if (window.__HMR_SUCCESS__) {
-                                    notifyHotReloadState('idle', { success: true, file: data.file });
-                                    requestBuildStatus('after-hmr-success');
-                                    return;
-                                }
-                 
-                                window.location.reload();
-                            }, 1600);
-                        }
-                        
-                        ws.onclose = function(event) {
-                            isConnected = false;
-                            if (event.code === 1000) return;
-                            scheduleReconnect();
-                        };
-                        ws.onerror = function() {};
-                    } catch (error) { scheduleReconnect(); }
-                }
-                
-                function scheduleReconnect() {
-                    if (reconnectTimer) clearTimeout(reconnectTimer);
-                    reconnectAttempts++;
-                    const baseInterval = Math.min(reconnectInterval * Math.pow(1.5, reconnectAttempts - 1), maxReconnectInterval);
-                    reconnectTimer = setTimeout(() => { if (!isConnected) connect(); }, baseInterval + Math.random() * 1000);
-                }
-                
-                window.addEventListener('beforeunload', function() { if (ws && ws.readyState === WebSocket.OPEN) ws.close(1000, 'Page unloading'); });
-                document.addEventListener('visibilitychange', function() { if (!document.hidden && !isConnected) { reconnectAttempts = 0; connect(); } });
-                connect();
-            }
-        })();
-        </script>
+        return `
+        <script>
+        (function() {
+            if (typeof window !== 'undefined') {
+                let ws;
+                let reconnectAttempts = 0;
+                let maxReconnectInterval = 30000; 
+                let reconnectInterval = 1000;
+                let reconnectTimer;
+                let isConnected = false;
+                let lastBuildError = null;
+
+                function emitBuildError(error) {
+                    try {
+                        lastBuildError = error;
+                        // Não persistimos erro no client. Ele sempre vem do servidor via WebSocket.
+                        window.dispatchEvent(new CustomEvent('vatts:build-error', { detail: error }));
+                    } catch {}
+                }
+
+                function clearBuildError() {
+                    try {
+                        lastBuildError = null;
+                        window.dispatchEvent(new CustomEvent('vatts:build-ok', { detail: { ts: Date.now() } }));
+                    } catch {}
+                }
+
+                // Não faz bootstrap de erro salvo (sem sessionStorage/localStorage).
+
+                function notifyHotReloadState(state, payload) {
+                    try {
+                        window.__VATTS_HOT_RELOAD__ = { state: state, payload: payload || null, ts: Date.now() };
+                        const ev = new CustomEvent('vatts:hotreload', { detail: window.__VATTS_HOT_RELOAD__ });
+                        window.dispatchEvent(ev);
+                    } catch {}
+                }
+
+                function requestBuildStatus(reason) {
+                    try {
+                        if (!ws || ws.readyState !== WebSocket.OPEN) return;
+                        ws.send(JSON.stringify({ type: 'status-request', reason: reason || 'unknown', ts: Date.now() }));
+                    } catch {}
+                }
+
+                async function waitForMainToBeUpdated(timeoutMs, pollMs) {
+                    try {
+                        const script = document.querySelector('script[src*="main.js"]');
+                        if (!script || !script.src) return true;
+                        const mainUrl = script.src.split('?')[0];
+                        const start = Date.now();
+                        let baseline = '';
+                        try {
+                            const r0 = await fetch(mainUrl + '?t=' + Date.now(), { cache: 'no-store' });
+                            baseline = await r0.text();
+                        } catch { return true; }
+
+                        while (Date.now() - start < timeoutMs) {
+                            await new Promise(r => setTimeout(r, pollMs));
+                            try {
+                                const r = await fetch(mainUrl + '?t=' + Date.now(), { cache: 'no-store' });
+                                const txt = await r.text();
+                                if (txt && txt !== baseline) return true;
+                            } catch {}
+                        }
+                        return false;
+                    } catch { return true; }
+                }
+                
+                function connect() {
+                    const url = window.location;
+                    const protocol = url.protocol === "https:" ? "wss:" : "ws:";
+                    const wsUrl = protocol + '//' + url.host + '/hweb-hotreload/';
+                    if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) return;
+
+                    try {
+                        ws = new WebSocket(wsUrl);
+                        ws.onopen = function() {
+                            console.log('\u001b[32m[vatts]\u001b[0m Hot-reload connected');
+                            isConnected = true;
+                            reconnectAttempts = 0;
+                            clearTimeout(reconnectTimer);
+                            // Ao conectar, sempre pede o status atual ao servidor.
+                            requestBuildStatus('ws-open');
+                        };
+                        
+                        ws.onmessage = function(event) {
+                            try {
+                                const message = JSON.parse(event.data);
+                                switch(message.type) {
+                                    case 'frontend-reload':
+                                        handleFrontendReload(message.data);
+                                        break;
+                                    case 'backend-api-reload':
+                                        console.log('[vatts] Backend changed, reloading page...');
+                                        window.location.reload();
+                                        break;
+                                    case 'server-restart':
+                                        console.log('[vatts] Server restarting...');
+                                        break;
+                                    case 'server-ready':
+                                        setTimeout(() => window.location.reload(), 500);
+                                        break;
+                                    case 'build-error':
+                                        console.log('Erro detectado')
+                                        notifyHotReloadState('build-error', message.data);
+                                        emitBuildError(message.data);
+                                        break;
+                                    case 'build-complete':
+                                        notifyHotReloadState('idle', { build: 'ok' });
+                                        clearBuildError();
+                                        console.log('[vatts] Build complete');
+                                        break;
+                                }
+                            } catch (e) {
+                                console.error('[vatts] Error processing msg:', e);
+                            }
+                        };
+                        
+                        async function handleFrontendReload(data) {
+                            notifyHotReloadState('reloading', { type: 'frontend', data: data || null });
+                            if (!data || !data.file) {
+                                window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: null, timestamp: Date.now() } }));
+                                return;
+                            }
+                            const file = (data.file || '').toLowerCase();
+                            console.log('[vatts] Frontend changed:', data.file);
+                            const needsFullReload = file.includes('layout.tsx') || file.includes('not-found.tsx') || file.endsWith('.css');
+                            if (needsFullReload) {
+                                notifyHotReloadState('full-reload', { reason: 'layout/css', file: data.file });
+                                window.location.reload();
+                                return;
+                            }
+
+                            // Recarrega main.js (o bundle do app) com cache-busting.
+                            // Em DEV, React/ReactDOM agora são externos, então isso não duplica hooks.
+                            await waitForMainToBeUpdated(5000, 120);
+
+                            const script = document.querySelector('script[src*="main.js"]');
+                            if (script) {
+                                const mainUrl = (script.getAttribute('src') || script.src || '');
+                                const base = String(mainUrl).split('?')[0];
+
+                                // Remove scripts antigos de main.js para evitar múltiplas execuções do bundle
+                                try {
+                                    document.querySelectorAll('script[src*="main.js"]').forEach(s => {
+                                        if (s && s.parentNode) s.parentNode.removeChild(s);
+                                    });
+                                } catch {}
+
+                                const newScript = document.createElement('script');
+                                newScript.type = 'module';
+                                newScript.src = base + '?t=' + Date.now();
+
+                                newScript.onload = () => {
+                                    // depois de carregar o novo bundle, pede render/update
+                                    const ts = Date.now();
+                                    window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: data.file, timestamp: ts } }));
+                                    setTimeout(() => requestBuildStatus('after-frontend-reload'), 50);
+                                };
+
+                                newScript.onerror = () => {
+                                    window.location.reload();
+                                };
+
+                                document.head.appendChild(newScript);
+                            } else {
+                                // fallback
+                                const ts = Date.now();
+                                window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: data.file, timestamp: ts } }));
+                                setTimeout(() => requestBuildStatus('after-frontend-reload'), 50);
+                            }
+
+                            setTimeout(() => {
+                                if (window.__HMR_SUCCESS__) {
+                                    notifyHotReloadState('idle', { success: true, file: data.file });
+                                    requestBuildStatus('after-hmr-success');
+                                    return;
+                                }
+                 
+                                window.location.reload();
+                            }, 1600);
+                        }
+                        
+                        ws.onclose = function(event) {
+                            isConnected = false;
+                            if (event.code === 1000) return;
+                            scheduleReconnect();
+                        };
+                        ws.onerror = function() {};
+                    } catch (error) { scheduleReconnect(); }
+                }
+                
+                function scheduleReconnect() {
+                    if (reconnectTimer) clearTimeout(reconnectTimer);
+                    reconnectAttempts++;
+                    const baseInterval = Math.min(reconnectInterval * Math.pow(1.5, reconnectAttempts - 1), maxReconnectInterval);
+                    reconnectTimer = setTimeout(() => { if (!isConnected) connect(); }, baseInterval + Math.random() * 1000);
+                }
+                
+                window.addEventListener('beforeunload', function() { if (ws && ws.readyState === WebSocket.OPEN) ws.close(1000, 'Page unloading'); });
+                document.addEventListener('visibilitychange', function() { if (!document.hidden && !isConnected) { reconnectAttempts = 0; connect(); } });
+                connect();
+            }
+        })();
+        </script>
         `;
     }
     // Mantendo métodos de cache iguais

package/dist/loaders.js

@@ -164,21 +164,21 @@ function registerLoaders(options = {}) {
                 }
             }
             // 4. Montagem do Código Final (ESM Virtual)
-            finalEsm = `
-                ${scriptContent}
-                ${templateContent}
-                
-                // Anexa a função de renderização SSR ao componente principal
-                if (typeof _sfc_main !== 'undefined') {
-                    if (typeof ssrRender !== 'undefined') {
-                        _sfc_main.ssrRender = ssrRender;
-                    }
-                    if (typeof render !== 'undefined') {
-                        _sfc_main.render = render;
-                    }
-                }
-                
-                export default _sfc_main;
+            finalEsm = `
+                ${scriptContent}
+                ${templateContent}
+                
+                // Anexa a função de renderização SSR ao componente principal
+                if (typeof _sfc_main !== 'undefined') {
+                    if (typeof ssrRender !== 'undefined') {
+                        _sfc_main.ssrRender = ssrRender;
+                    }
+                    if (typeof render !== 'undefined') {
+                        _sfc_main.render = render;
+                    }
+                }
+                
+                export default _sfc_main;
             `;
             // 5. Transformação final para CommonJS (Node.js) via Esbuild
             const result = esbuild.transformSync(finalEsm, {