hightjs 0.3.4 → 0.4.0

package/README.md

@@ -34,7 +34,7 @@ Caso tenha alguma dúvida, entre em contato por uma das redes abaixo:
 
 ## ✨ Principais Recursos
 
-- **Roteamento automático** de páginas [`src/web/routes`] e APIs [`src/web/backend/routes`]
+- **Roteamento automático** de páginas [`src/web/routes`] e APIs [`src/backend/routes`]
 - **React 19** com client-side hydration
 - **TypeScript** first (totalmente tipado)
 - **WebSockets** nativo nas rotas backend

package/dist/api/console.js

@@ -185,7 +185,7 @@ class Console {
         }
     }
     static logWithout(level, colors, ...args) {
-        const color = colors || level === Levels.ERROR ? Colors.BgRed : level === Levels.WARN ? Colors.BgYellow : level === Levels.INFO ? Colors.BgMagenta : level === Levels.SUCCESS ? Colors.BgGreen : Colors.BgCyan;
+        const color = colors ? colors : level === Levels.ERROR ? Colors.BgRed : level === Levels.WARN ? Colors.BgYellow : level === Levels.INFO ? Colors.BgMagenta : level === Levels.SUCCESS ? Colors.BgGreen : Colors.BgCyan;
         let output = "";
         for (const arg of args) {
             let msg = (arg instanceof Error) ? arg.stack : (typeof arg === 'string') ? arg : JSON.stringify(arg, null, 2);

package/dist/bin/hightjs.js

@@ -113,11 +113,11 @@ program
         const app = teste.default({ dev: false, port: 3000, hostname: '0.0.0.0', framework: 'native' });
         await app.prepare();
         console.log('✅ Build complete\n');
-        // 3. Copia a pasta hweb-dist para exported
-        const distDir = path.join(projectDir, 'hweb-dist');
+        // 3. Copia a pasta .hight para exported
+        const distDir = path.join(projectDir, '.hight');
         if (fs.existsSync(distDir)) {
             console.log('📦 Copying JavaScript files...');
-            const exportDistDir = path.join(exportDir, 'hweb-dist');
+            const exportDistDir = path.join(exportDir, '.hight');
             fs.mkdirSync(exportDistDir, { recursive: true });
             const files = fs.readdirSync(distDir);
             files.forEach(file => {

package/dist/builder.js

@@ -19,6 +19,8 @@ const esbuild = require('esbuild');
 const path = require('path');
 const Console = require("./api/console").default;
 const fs = require('fs');
+const { readdir, stat } = require("node:fs/promises");
+const { rm } = require("fs-extra");
 // Lista de módulos nativos do Node.js para marcar como externos (apenas os built-ins do Node)
 const nodeBuiltIns = [
     'assert', 'buffer', 'child_process', 'cluster', 'crypto', 'dgram', 'dns',
@@ -175,6 +177,41 @@ const reactResolvePlugin = {
         });
     }
 };
+/**
+ * Plugin para adicionar suporte a HMR (Hot Module Replacement)
+ */
+const hmrPlugin = {
+    name: 'hmr-plugin',
+    setup(build) {
+        // Adiciona runtime de HMR para arquivos TSX/JSX
+        build.onLoad({ filter: /\.(tsx|jsx)$/ }, async (args) => {
+            // Ignora arquivos de node_modules
+            if (args.path.includes('node_modules')) {
+                return null;
+            }
+            const fs = require('fs');
+            const contents = await fs.promises.readFile(args.path, 'utf8');
+            // Adiciona código de HMR apenas em componentes de rota
+            if (args.path.includes('/routes/') || args.path.includes('\\routes\\')) {
+                const hmrCode = `
+// HMR Runtime
+if (typeof window !== 'undefined' && window.__HWEB_HMR__) {
+    const moduleId = ${JSON.stringify(args.path)};
+    if (!window.__HWEB_HMR_MODULES__) {
+        window.__HWEB_HMR_MODULES__ = new Map();
+    }
+    window.__HWEB_HMR_MODULES__.set(moduleId, module.exports);
+}
+`;
+                return {
+                    contents: contents + '\n' + hmrCode,
+                    loader: 'tsx'
+                };
+            }
+            return null;
+        });
+    }
+};
 /**
  * Builds with code splitting into multiple chunks based on module types.
  * @param {string} entryPoint - The path to the entry file.
@@ -183,8 +220,8 @@ const reactResolvePlugin = {
  * @returns {Promise<void>}
  */
 async function buildWithChunks(entryPoint, outdir, isProduction = false) {
-    // limpar diretorio
-    fs.rmSync(outdir, { recursive: true, force: true });
+    // limpar diretorio, menos a pasta temp
+    await cleanDirectoryExcept(outdir, 'temp');
     try {
         await esbuild.build({
             entryPoints: [entryPoint],
@@ -226,7 +263,7 @@ async function buildWithChunks(entryPoint, outdir, isProduction = false) {
  */
 async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
     // limpar diretorio
-    fs.rmSync(outdir, { recursive: true, force: true });
+    await cleanDirectoryExcept(outdir, 'temp');
     try {
         // Plugin para notificar quando o build termina
         const buildCompletePlugin = {
@@ -256,7 +293,7 @@ async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
             outdir: outdir,
             loader: { '.js': 'jsx', '.ts': 'tsx' },
             external: nodeBuiltIns,
-            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, buildCompletePlugin],
+            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, hmrPlugin, buildCompletePlugin],
             format: 'esm',
             jsx: 'automatic',
             define: {
@@ -289,7 +326,7 @@ async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
 async function build(entryPoint, outfile, isProduction = false) {
     // limpar diretorio do outfile
     const outdir = path.dirname(outfile);
-    fs.rmSync(outdir, { recursive: true, force: true });
+    await cleanDirectoryExcept(outdir, 'temp');
     try {
         await esbuild.build({
             entryPoints: [entryPoint],
@@ -388,4 +425,22 @@ async function watch(entryPoint, outfile, hotReloadManager = null) {
         throw error;
     }
 }
+/**
+ * Remove todo o conteúdo de um diretório,
+ * exceto a pasta (ou pastas) especificada(s) em excludeFolder.
+ *
+ * @param {string} dirPath - Caminho do diretório a limpar
+ * @param {string|string[]} excludeFolder - Nome ou nomes das pastas a manter
+ */
+async function cleanDirectoryExcept(dirPath, excludeFolder) {
+    const excludes = Array.isArray(excludeFolder) ? excludeFolder : [excludeFolder];
+    const items = await readdir(dirPath);
+    for (const item of items) {
+        if (excludes.includes(item))
+            continue; // pula as pastas excluídas
+        const itemPath = path.join(dirPath, item);
+        const info = await stat(itemPath);
+        await rm(itemPath, { recursive: info.isDirectory(), force: true });
+    }
+}
 module.exports = { build, watch, buildWithChunks, watchWithChunks };

package/dist/client/entry.client.js

@@ -55,6 +55,7 @@ const client_1 = require("react-dom/client");
 const clientRouter_1 = require("./clientRouter");
 function App({ componentMap, routes, initialComponentPath, initialParams, layoutComponent }) {
     // Estado que guarda o componente a ser renderizado atualmente
+    const [hmrTimestamp, setHmrTimestamp] = (0, react_1.useState)(Date.now());
     const [CurrentPageComponent, setCurrentPageComponent] = (0, react_1.useState)(() => {
         // Se for a rota especial __404__, não busca no componentMap
         if (initialComponentPath === '__404__') {
@@ -63,6 +64,62 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
         return componentMap[initialComponentPath];
     });
     const [params, setParams] = (0, react_1.useState)(initialParams);
+    // HMR: Escuta eventos de hot reload
+    (0, react_1.useEffect)(() => {
+        // Ativa o sistema de HMR
+        window.__HWEB_HMR__ = true;
+        const handleHMRUpdate = async (event) => {
+            const { file, timestamp } = event.detail;
+            const fileName = file ? file.split('/').pop()?.split('\\').pop() : 'unknown';
+            console.log('🔥 HMR: Hot reloading...', fileName);
+            try {
+                // Aguarda um pouco para o esbuild terminar de recompilar
+                await new Promise(resolve => setTimeout(resolve, 300));
+                // Re-importa o módulo principal com cache busting
+                const mainScript = document.querySelector('script[src*="main.js"]');
+                if (mainScript) {
+                    const mainSrc = mainScript.src.split('?')[0];
+                    const cacheBustedSrc = `${mainSrc}?t=${timestamp}`;
+                    // Cria novo script
+                    const newScript = document.createElement('script');
+                    newScript.type = 'module';
+                    newScript.src = cacheBustedSrc;
+                    // Quando o novo script carregar, força re-render
+                    newScript.onload = () => {
+                        console.log('✅ HMR: Modules reloaded');
+                        // Força re-render do componente
+                        setHmrTimestamp(timestamp);
+                        // Marca sucesso
+                        window.__HMR_SUCCESS__ = true;
+                        setTimeout(() => {
+                            window.__HMR_SUCCESS__ = false;
+                        }, 3000);
+                    };
+                    newScript.onerror = () => {
+                        console.error('❌ HMR: Failed to reload modules');
+                        window.__HMR_SUCCESS__ = false;
+                    };
+                    // Remove o script antigo e adiciona o novo
+                    // (não remove para não quebrar o app)
+                    document.head.appendChild(newScript);
+                }
+                else {
+                    // Se não encontrou o script, apenas força re-render
+                    console.log('⚡ HMR: Forcing re-render');
+                    setHmrTimestamp(timestamp);
+                    window.__HMR_SUCCESS__ = true;
+                }
+            }
+            catch (error) {
+                console.error('❌ HMR Error:', error);
+                window.__HMR_SUCCESS__ = false;
+            }
+        };
+        window.addEventListener('hmr:component-update', handleHMRUpdate);
+        return () => {
+            window.removeEventListener('hmr:component-update', handleHMRUpdate);
+        };
+    }, []);
     const findRouteForPath = (0, react_1.useCallback)((path) => {
         for (const route of routes) {
             const regexPattern = route.pattern
@@ -138,7 +195,8 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
         }
     }
     // Renderiza o componente atual (sem Context, usa o router diretamente)
-    const PageContent = (0, jsx_runtime_1.jsx)(CurrentPageComponent, { params: params });
+    // Usa key com timestamp para forçar re-mount durante HMR
+    const PageContent = (0, jsx_runtime_1.jsx)(CurrentPageComponent, { params: params }, `page-${hmrTimestamp}`);
     // SEMPRE usa o layout - se não existir, cria um wrapper padrão
     const content = layoutComponent
         ? react_1.default.createElement(layoutComponent, { children: PageContent })
@@ -157,10 +215,49 @@ const DEV_INDICATOR_CORNERS = [
 function DevIndicator() {
     const [corner, setCorner] = (0, react_1.useState)(3); // Canto atual (0-3)
     const [isDragging, setIsDragging] = (0, react_1.useState)(false); // Estado de arrastar
+    const [isBuilding, setIsBuilding] = (0, react_1.useState)(false); // Estado de build
     // Posição visual do indicador durante o arraste
     const [position, setPosition] = (0, react_1.useState)({ top: 0, left: 0 });
     const indicatorRef = (0, react_1.useRef)(null);
     const dragStartRef = (0, react_1.useRef)(null);
+    // Escuta eventos de hot reload para mostrar estado de build
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleHotReloadMessage = (event) => {
+            try {
+                const message = JSON.parse(event.data);
+                // Quando detecta mudança em arquivo, ativa loading
+                if (message.type === 'frontend-reload' ||
+                    message.type === 'backend-api-reload' ||
+                    message.type === 'src-reload') {
+                    setIsBuilding(true);
+                }
+                // Quando o build termina ou servidor fica pronto, desativa loading
+                if (message.type === 'server-ready' || message.type === 'build-complete') {
+                    setIsBuilding(false);
+                }
+            }
+            catch (e) {
+                // Ignora mensagens que não são JSON
+            }
+        };
+        // Intercepta mensagens WebSocket
+        const originalWebSocket = window.WebSocket;
+        window.WebSocket = class extends originalWebSocket {
+            constructor(url, protocols) {
+                super(url, protocols);
+                this.addEventListener('message', (event) => {
+                    if (url.toString().includes('hweb-hotreload')) {
+                        handleHotReloadMessage(event);
+                    }
+                });
+            }
+        };
+        return () => {
+            window.WebSocket = originalWebSocket;
+        };
+    }, []);
     // --- Estilos Dinâmicos ---
     const getIndicatorStyle = () => {
         const baseStyle = {
@@ -169,17 +266,22 @@ function DevIndicator() {
             width: DEV_INDICATOR_SIZE,
             height: DEV_INDICATOR_SIZE,
             borderRadius: '50%',
-            background: 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo
+            background: isBuilding
+                ? 'linear-gradient(135deg, #f093fb, #f5576c)' // Gradiente Rosa/Vermelho quando building
+                : 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo normal
             color: 'white',
             fontWeight: 'bold',
             fontSize: 28,
-            boxShadow: '0 4px 15px rgba(0,0,0,0.2)',
+            boxShadow: isBuilding
+                ? '0 4px 25px rgba(245, 87, 108, 0.6)' // Shadow mais forte quando building
+                : '0 4px 15px rgba(0,0,0,0.2)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             cursor: isDragging ? 'grabbing' : 'grab',
             userSelect: 'none',
-            transition: isDragging ? 'none' : 'all 0.3s ease-out', // Animação suave ao soltar
+            transition: isDragging ? 'none' : 'all 0.3s ease-out',
+            animation: isBuilding ? 'hweb-pulse 1.5s ease-in-out infinite' : 'none',
         };
         if (isDragging) {
             return {
@@ -259,13 +361,59 @@ function DevIndicator() {
             window.removeEventListener('mouseup', handleMouseUp);
         };
     }, [isDragging, handleMouseMove, handleMouseUp]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: indicatorRef, style: getIndicatorStyle(), onMouseDown: handleMouseDown, title: "Modo Dev HightJS", children: "H" }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                    @keyframes hweb-pulse {
+                        0%, 100% {
+                            transform: scale(1);
+                            opacity: 1;
+                        }
+                        50% {
+                            transform: scale(1.1);
+                            opacity: 0.8;
+                        }
+                    }
+                    
+                    @keyframes hweb-spin {
+                        from {
+                            transform: rotate(0deg);
+                        }
+                        to {
+                            transform: rotate(360deg);
+                        }
+                    }
+                ` }), (0, jsx_runtime_1.jsx)("div", { ref: indicatorRef, style: getIndicatorStyle(), onMouseDown: handleMouseDown, title: isBuilding ? "Building..." : "Modo Dev HightJS", children: isBuilding ? ((0, jsx_runtime_1.jsx)("span", { style: { animation: 'hweb-spin 1s linear infinite' }, children: "\u27F3" })) : ('H') })] }));
 }
 // --- Inicialização do Cliente (CSR - Client-Side Rendering) ---
+function deobfuscateData(obfuscated) {
+    try {
+        // Remove o hash fake
+        const parts = obfuscated.split('.');
+        const base64 = parts.length > 1 ? parts[1] : parts[0];
+        // Decodifica base64
+        const jsonStr = atob(base64);
+        // Parse JSON
+        return JSON.parse(jsonStr);
+    }
+    catch (error) {
+        console.error('[hweb] Failed to decode data:', error);
+        return null;
+    }
+}
 function initializeClient() {
-    const initialData = window.__HWEB_INITIAL_DATA__;
+    // Lê os dados do atributo data-h
+    const dataElement = document.getElementById('__hight_data__');
+    if (!dataElement) {
+        console.error('[hweb] Initial data script not found.');
+        return;
+    }
+    const obfuscated = dataElement.getAttribute('data-h');
+    if (!obfuscated) {
+        console.error('[hweb] Data attribute not found.');
+        return;
+    }
+    const initialData = deobfuscateData(obfuscated);
     if (!initialData) {
-        console.error('[hweb] Initial data not found on page.');
+        console.error('[hweb] Failed to parse initial data.');
         return;
     }
     // Cria o mapa de componentes dinamicamente a partir dos módulos carregados

package/dist/helpers.js

@@ -119,6 +119,7 @@ async function loadHightConfig(projectDir, phase) {
         serverTimeout: 35000,
         individualRequestTimeout: 30000,
         maxUrlLength: 2048,
+        accessLogging: true,
     };
     try {
         // Tenta primeiro .ts, depois .js
@@ -250,6 +251,9 @@ async function initNativeServer(hwebApp, options, port, hostname) {
     // Extraímos a lógica principal para uma variável
     // para que possa ser usada tanto pelo servidor HTTP quanto HTTPS.
     const requestListener = async (req, res) => {
+        const requestStartTime = Date.now();
+        const method = req.method || 'GET';
+        const url = req.url || '/';
         // Configurações de segurança básicas
         res.setHeader('X-Content-Type-Options', 'nosniff');
         res.setHeader('X-Frame-Options', 'DENY');
@@ -264,10 +268,45 @@ async function initNativeServer(hwebApp, options, port, hostname) {
         req.setTimeout(hightConfig.individualRequestTimeout || 30000, () => {
             res.statusCode = 408; // Request Timeout
             res.end('Request timeout');
+            // Log de timeout
+            if (hightConfig.accessLogging) {
+                const duration = Date.now() - requestStartTime;
+                console_1.default.info(`${console_1.Colors.FgYellow}${method}${console_1.Colors.Reset} ${url} ${console_1.Colors.FgRed}408${console_1.Colors.Reset} ${console_1.Colors.FgGray}${duration}ms${console_1.Colors.Reset}`);
+            }
         });
+        // Intercepta o método end() para logar quando a resposta for enviada
+        const originalEnd = res.end.bind(res);
+        let hasEnded = false;
+        res.end = function (...args) {
+            if (!hasEnded && hightConfig.accessLogging) {
+                hasEnded = true;
+                const duration = Date.now() - requestStartTime;
+                const statusCode = res.statusCode || 200;
+                // Define cor baseada no status code
+                let statusColor = console_1.Colors.FgGreen; // 2xx
+                if (statusCode >= 500)
+                    statusColor = console_1.Colors.FgRed; // 5xx
+                else if (statusCode >= 400)
+                    statusColor = console_1.Colors.FgYellow; // 4xx
+                else if (statusCode >= 300)
+                    statusColor = console_1.Colors.FgCyan; // 3xx
+                // Formata o método com cor
+                let methodColor = console_1.Colors.BgCyan;
+                if (method === 'POST')
+                    methodColor = console_1.Colors.BgGreen;
+                else if (method === 'PUT')
+                    methodColor = console_1.Colors.BgYellow;
+                else if (method === 'DELETE')
+                    methodColor = console_1.Colors.BgRed;
+                else if (method === 'PATCH')
+                    methodColor = console_1.Colors.BgMagenta;
+                console_1.default.logCustomLevel(method, true, methodColor, `${url} ${statusColor}${statusCode}${console_1.Colors.Reset} ${console_1.Colors.FgGray}${duration}ms${console_1.Colors.Reset}`);
+            }
+            // @ts-ignore
+            return originalEnd.apply(this, args);
+        };
         try {
             // Validação básica de URL (usa configuração personalizada)
-            const url = req.url || '/';
             const maxUrlLength = hightConfig.maxUrlLength || 2048;
             if (url.length > maxUrlLength) {
                 res.statusCode = 414; // URI Too Long

package/dist/hotReload.js

@@ -195,7 +195,7 @@ class HotReloadManager {
             filePath.includes('not-found.tsx') ||
             filePath.endsWith('.tsx') ||
             filePath.endsWith('.jsx');
-        const isBackendFile = filePath.includes(path.join('src', 'web', 'backend')) ||
+        const isBackendFile = filePath.includes(path.join('src', 'backend')) ||
             (filePath.includes(path.join('src', 'web')) && !isFrontendFile);
         // Limpa o cache do arquivo alterado
         (0, router_1.clearFileCache)(filePath);
@@ -312,19 +312,21 @@ class HotReloadManager {
             if (typeof window !== 'undefined') {
                 let ws;
                 let reconnectAttempts = 0;
-                let maxReconnectInterval = 30000; // 30 segundos max
-                let reconnectInterval = 1000; // Começa com 1 segundo
+                let maxReconnectInterval = 30000; 
+                let reconnectInterval = 1000;
                 let reconnectTimer;
                 let isConnected = false;
                 
                 function connect() {
-                    // Evita múltiplas tentativas simultâneas
+                    const url = window.location; // Objeto com info da URL atual
+                    const protocol = url.protocol === "https:" ? "wss:" : "ws:"; // Usa wss se for https
+                    const wsUrl = protocol + '//' + url.host + '/hweb-hotreload/';
                     if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
                         return;
                     }
 
                     try {
-                        ws = new WebSocket('ws://localhost:3000/hweb-hotreload/');
+                        ws = new WebSocket(wsUrl);
                         
                         ws.onopen = function() {
                             console.log('🔌 Hot-reload connected');
@@ -340,10 +342,11 @@ class HotReloadManager {
                                 
                                 switch(message.type) {
                                     case 'frontend-reload':
-                                        window.location.reload();
+                                        handleFrontendReload(message.data);
                                         break;
                                     case 'backend-api-reload':
-                                        // Recarrega apenas se necessário
+                                        // Backend sempre precisa recarregar
+                                        console.log('🔄 Backend changed, reloading...');
                                         window.location.reload();
                                         break;
                                     case 'server-restart':
@@ -355,12 +358,91 @@ class HotReloadManager {
                                     case 'frontend-error':
                                         console.error('❌ Frontend error:', message.data);
                                         break;
+                                    case 'hmr-update':
+                                        handleHMRUpdate(message.data);
+                                        break;
                                 }
                             } catch (e) {
                                 console.error('Erro ao processar mensagem do hot-reload:', e);
                             }
                         };
                         
+                        function handleFrontendReload(data) {
+                            if (!data || !data.file) {
+                                window.location.reload();
+                                return;
+                            }
+                            
+                            const file = data.file.toLowerCase();
+                            
+                            // Mudanças que exigem reload completo
+                            const needsFullReload = 
+                                file.includes('layout.tsx') ||
+                                file.includes('layout.jsx') ||
+                                file.includes('not-found.tsx') ||
+                                file.includes('not-found.jsx') ||
+                                file.endsWith('.css');
+                            
+                            if (needsFullReload) {
+                                console.log('⚡ Layout/CSS changed, full reload...');
+                                window.location.reload();
+                                return;
+                            }
+                            
+                            // Mudanças em rotas: tenta HMR
+                            if (file.includes('/routes/') || file.includes('\\\\routes\\\\')) {
+                                console.log('⚡ Route component changed, hot reloading...');
+                                
+                                // Dispara evento para forçar re-render
+                                const event = new CustomEvent('hmr:component-update', { 
+                                    detail: { file: data.file, timestamp: Date.now() } 
+                                });
+                                window.dispatchEvent(event);
+                                
+                                // Aguarda 500ms para ver se o HMR foi bem-sucedido
+                                setTimeout(() => {
+                                    const hmrSuccess = window.__HMR_SUCCESS__;
+                                    if (!hmrSuccess) {
+                                        console.log('⚠️ HMR failed, falling back to full reload');
+                                        window.location.reload();
+                                    } else {
+                                        console.log('✅ HMR successful!');
+                                    }
+                                }, 500);
+                            } else {
+                                // Outros arquivos: reload completo por segurança
+                                window.location.reload();
+                            }
+                        }
+                        
+                        function handleHMRUpdate(data) {
+                            console.log('🔥 HMR Update:', data);
+                            
+                            // Dispara evento customizado para o React capturar
+                            const event = new CustomEvent('hmr:update', { 
+                                detail: data 
+                            });
+                            window.dispatchEvent(event);
+                        }
+                        
+                        function attemptHMR(changedFile) {
+                            // Tenta fazer Hot Module Replacement
+                            // Dispara evento para o React App capturar
+                            const event = new CustomEvent('hmr:component-update', { 
+                                detail: { file: changedFile, timestamp: Date.now() } 
+                            });
+                            window.dispatchEvent(event);
+                            
+                            // Fallback: se após 2s não houve sucesso, reload
+                            setTimeout(() => {
+                                const hmrSuccess = window.__HMR_SUCCESS__;
+                                if (!hmrSuccess) {
+                                    console.log('⚠️ HMR failed, falling back to full reload');
+                                    window.location.reload();
+                                }
+                            }, 2000);
+                        }
+                        
                         ws.onclose = function(event) {
                             isConnected = false;
                             
@@ -454,6 +536,13 @@ class HotReloadManager {
             this.buildCompleteResolve = null;
         }
         this.isBuilding = false;
+        // Notifica os clientes que o build terminou
+        if (success) {
+            this.notifyClients('build-complete', { success: true });
+        }
+        else {
+            this.notifyClients('build-error', { success: false });
+        }
     }
 }
 exports.HotReloadManager = HotReloadManager;