vatts 2.0.2 → 2.1.0-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/index.d.ts

@@ -1,5 +1,6 @@
 import { BackendHandler, BackendRouteConfig, VattsOptions, RequestHandler } from './types';
 import { VattsRequest, VattsResponse } from './api/http';
+export declare function printTotalStats(outDir: string, https: boolean): Promise<void>;
 export { VattsRequest, VattsResponse };
 export type { BackendRouteConfig, BackendHandler };
 export { ExpressAdapter } from './adapters/express';
@@ -10,7 +11,7 @@ export { app } from './helpers';
 export type { WebSocketContext, WebSocketHandler } from './types';
 export type { VattsConfig, VattsConfigFunction } from './types';
 export default function vatts(options: VattsOptions): {
-    prepare: () => Promise<void>;
+    prepare: (skipBuild?: boolean) => Promise<void>;
     executeInstrumentation: () => void;
     getRequestHandler: () => RequestHandler;
     setupWebSocket: (server: any) => void;

package/dist/index.js

@@ -53,9 +53,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.app = exports.FrameworkAdapterFactory = exports.FastifyAdapter = exports.ExpressAdapter = exports.VattsResponse = exports.VattsRequest = void 0;
+exports.printTotalStats = printTotalStats;
 exports.default = vatts;
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
+const promises_1 = __importDefault(require("fs/promises"));
 const crypto_1 = __importDefault(require("crypto")); // Adicionado para gerar hash do cache
 const express_1 = require("./adapters/express");
 const builder_1 = require("./builder");
@@ -225,6 +227,77 @@ async function handleImageOptimization(req, res, projectDir) {
         res.status(500).text('Image optimization failed');
     }
 }
+const node_zlib_1 = __importDefault(require("node:zlib")); // Certifique-se de ter este import no topo
+async function printTotalStats(outDir, https) {
+    let totalOrig = 0;
+    let totalGzip = 0;
+    let totalBr = 0;
+    // REMOVIDO: O loop que lia 'entries' para somar originais foi apagado.
+    // Walk recursivo no outDir pra somar .gz e .br e calcular o original reverso
+    async function walk(dir) {
+        let dirents;
+        try {
+            dirents = await promises_1.default.readdir(dir, { withFileTypes: true });
+        }
+        catch {
+            return;
+        }
+        for (const d of dirents) {
+            const full = path_1.default.join(dir, d.name);
+            if (d.isDirectory()) {
+                await walk(full);
+                continue;
+            }
+            if (!d.isFile())
+                continue;
+            let st;
+            try {
+                st = await promises_1.default.stat(full);
+            }
+            catch {
+                continue;
+            }
+            const name = d.name;
+            const isGz = name.endsWith(".gz");
+            const isBr = name.endsWith(".br");
+            if (isGz)
+                totalGzip += st.size;
+            else if (isBr)
+                totalBr += st.size;
+            // Lógica nova: Se o arquivo for do tipo que estamos priorizando (https = br, !https = gz),
+            // descomprimimos para pegar o tamanho original.
+            if ((https && isBr) || (!https && isGz)) {
+                try {
+                    const content = await promises_1.default.readFile(full);
+                    if (isBr) {
+                        // Descomprime Brotli síncrono para pegar tamanho
+                        totalOrig += node_zlib_1.default.brotliDecompressSync(content).length;
+                    }
+                    else {
+                        // Descomprime Gzip síncrono para pegar tamanho
+                        totalOrig += node_zlib_1.default.gunzipSync(content).length;
+                    }
+                }
+                catch (e) {
+                    // Ignora erro de descompressão se houver
+                }
+            }
+        }
+    }
+    await walk(outDir);
+    // O totalOrig agora é calculado baseado na descompressão, se for 0 não tem o que mostrar
+    if (totalOrig <= 0)
+        return;
+    const finalSize = https ? totalBr : totalGzip;
+    if (finalSize <= 0)
+        return;
+    const diff = totalOrig - finalSize;
+    const pct = (diff / totalOrig) * 100;
+    const original = `  Original : ${console_1.Colors.Bright}${console_1.Colors.FgGreen}${(totalOrig / 1024).toFixed(2)} KB`;
+    const finalStr = `  Final    : ${console_1.Colors.Bright}${console_1.Colors.FgGreen}${(finalSize / 1024).toFixed(2)} KB`;
+    const saved = `  Saved    : ${console_1.Colors.Bright}${console_1.Colors.FgGreen}${(diff / 1024).toFixed(2)} KB ${console_1.Colors.Reset}${console_1.Colors.FgGray}(${pct.toFixed(2)}%)${console_1.Colors.Reset} \n`;
+    console_1.default.logCustomLevel("", false, undefined, "", `${console_1.Colors.FgBlue}${console_1.Colors.Bright}Optimization summary:${console_1.Colors.Reset}`, original, finalStr, saved);
+}
 // Exporta os adapters para uso manual se necessário
 var express_2 = require("./adapters/express");
 Object.defineProperty(exports, "ExpressAdapter", { enumerable: true, get: function () { return express_2.ExpressAdapter; } });
@@ -275,7 +348,6 @@ function vatts(options) {
         notFound: null,
         framework: framework,
         projectDir: dir,
-        pathRouter: helpers_1.config?.pathRouter
     };
     const updateBuilderOptions = () => {
         const newFrontendRoutes = (0, router_1.loadRoutes)(userWebRoutesDir);
@@ -294,7 +366,7 @@ function vatts(options) {
         vattsBuilderOptions.notFound = newNotFound;
     };
     return {
-        prepare: async () => {
+        prepare: async (skipBuild = false) => {
             const isProduction = !dev;
             if (!isProduction) {
                 hotReloadManager = new hotReload_1.HotReloadManager(dir);
@@ -329,32 +401,45 @@ function vatts(options) {
             clearInterval(spinner1);
             timee.end(`Routes and components loaded in ${Date.now() - now}ms`);
             if (isProduction) {
-                const time = console_1.default.dynamicLine(`Starting client build`);
+                // Pula o build se skipBuild for true (usado quando já existe build)
+                if (!skipBuild) {
+                    const time = console_1.default.dynamicLine(`Starting client build`);
+                    const spinnerFrames = ['|', '/', '-', '\\'];
+                    let frameIndex = 0;
+                    const spinner = setInterval(() => {
+                        time.update(`    ${console_1.Colors.FgGreen}${spinnerFrames[frameIndex]}${console_1.Colors.Reset}  Building...`);
+                        frameIndex = (frameIndex + 1) % spinnerFrames.length;
+                    }, 100);
+                    const now = Date.now();
+                    // Passa o objeto de opções ao invés do caminho do arquivo
+                    await (0, builder_1.buildWithChunks)(vattsBuilderOptions, outDir, isProduction);
+                    const elapsed = Date.now() - now;
+                    clearInterval(spinner);
+                    time.update("");
+                    await printTotalStats(outDir, helpers_1.config?.ssl !== undefined && helpers_1.config.ssl !== null);
+                    time.end(`Client build completed in ${elapsed}ms`);
+                    if (hotReloadManager) {
+                        hotReloadManager.onBuildComplete(true);
+                    }
+                }
+            }
+            else {
+                const time = console_1.default.dynamicLine(`  ${console_1.Colors.BgYellow} watcher ${console_1.Colors.Reset}  Building initial assets`);
                 const spinnerFrames = ['|', '/', '-', '\\'];
                 let frameIndex = 0;
                 const spinner = setInterval(() => {
-                    time.update(`    ${console_1.Colors.FgGreen}${spinnerFrames[frameIndex]}${console_1.Colors.Reset}  Building...`);
+                    time.update(`    ${console_1.Colors.FgYellow}${spinnerFrames[frameIndex]}${console_1.Colors.Reset}  Building initial assets...`);
                     frameIndex = (frameIndex + 1) % spinnerFrames.length;
                 }, 100);
-                const now = Date.now();
-                // Passa o objeto de opções ao invés do caminho do arquivo
-                await (0, builder_1.buildWithChunks)(vattsBuilderOptions, outDir, isProduction);
-                const elapsed = Date.now() - now;
-                clearInterval(spinner);
-                time.update("");
-                time.end(`Client build completed in ${elapsed}ms`);
-                if (hotReloadManager) {
-                    hotReloadManager.onBuildComplete(true);
-                }
-            }
-            else {
-                const time = console_1.default.dynamicLine(`  ${console_1.Colors.BgYellow} watcher ${console_1.Colors.Reset}  Starting client watch`);
+                const buildStart = Date.now();
                 // @ts-ignore
                 // Passa o objeto de opções ao invés do caminho do arquivo
-                (0, builder_1.watchWithChunks)(vattsBuilderOptions, outDir, hotReloadManager).catch(err => {
+                // Aguarda o primeiro build completar para evitar lentidão na primeira requisição
+                await (0, builder_1.watchWithChunks)(vattsBuilderOptions, outDir, hotReloadManager).catch(err => {
                     console_1.default.error(`Error starting watch`, err);
                 });
-                time.end(`Client Watch started`);
+                clearInterval(spinner);
+                time.end(`Initial build complete in ${Date.now() - buildStart}ms - watching for changes...`);
             }
         },
         executeInstrumentation: () => {

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, {