vatts 1.0.1 → 1.0.2-alpha.2

package/dist/builder.js

@@ -303,10 +303,14 @@ const smartAssetPlugin = (isProduction) => {
 function createRollupConfig(entryPoint, outdir, isProduction) {
     return {
         input: entryPoint,
+        // Para evitar bare imports no browser (sem import map), em DEV também bundle React/ReactDOM.
+        // O HMR evita "Invalid hook call" removendo o script antigo e recarregando main.js.
         external: nodeBuiltIns,
         // Otimização: Em prod usa 'recommended' para limpar código morto
         treeshake: isProduction ? 'recommended' : false,
-        cache: true,
+        // CORREÇÃO CRÍTICA: Desativa cache em desenvolvimento (watch mode)
+        // Isso previne que o Rollup emita "sucesso" baseado em um cache obsoleto quando o arquivo ainda tem erro.
+        cache: isProduction ? true : false,
         perf: false,
         plugins: [
             // CRÍTICO: 'replace' deve vir PRIMEIRO para injetar NODE_ENV antes que
@@ -417,7 +421,7 @@ async function build(entryPoint, outfile, isProduction = false) {
         const outputOptions = {
             file: outfile,
             format: 'iife',
-            name: 'HwebApp',
+            name: 'Vattsjs',
             sourcemap: !isProduction,
             inlineDynamicImports: true
         };
@@ -434,21 +438,33 @@ async function build(entryPoint, outfile, isProduction = false) {
  * Helper para lidar com notificações do Watcher
  */
 function handleWatcherEvents(watcher, hotReloadManager, resolveFirstBuild) {
-    let hasError = false;
+    // Controla o estado do build por "geração" para evitar END atrasado
+    // (ou múltiplos ciclos) emitirem sucesso após um erro.
+    let currentBuildId = 0;
+    let lastStartedBuildId = 0;
+    const erroredBuildIds = new Set();
+    // DEBUG: stack trace rate-limited
+    let lastTraceAt = 0;
     watcher.on('event', event => {
-        if (event.code === 'START')
-            hasError = false;
+        if (event.code === 'START') {
+            currentBuildId += 1;
+            lastStartedBuildId = currentBuildId;
+        }
         if (event.code === 'ERROR') {
-            hasError = true;
+            // Marca erro para o build atualmente em andamento.
+            erroredBuildIds.add(currentBuildId);
             const errDetails = {
                 message: event.error?.message || 'Unknown build error',
                 name: event.error?.name,
                 stack: event.error?.stack,
                 id: event.error?.id,
-                loc: event.error?.loc
+                loc: event.error?.loc,
+                buildId: currentBuildId
             };
-            if (hotReloadManager)
+            // Notifica erro imediatamente
+            if (hotReloadManager) {
                 hotReloadManager.onBuildComplete(false, errDetails);
+            }
             else
                 Console.error("Build Error:", event.error);
             if (resolveFirstBuild)
@@ -457,8 +473,22 @@ function handleWatcherEvents(watcher, hotReloadManager, resolveFirstBuild) {
         if (event.code === 'BUNDLE_END')
             event.result.close();
         if (event.code === 'END') {
-            if (!hasError && hotReloadManager)
-                hotReloadManager.onBuildComplete(true);
+            const endBuildId = currentBuildId;
+            const hadError = erroredBuildIds.has(endBuildId);
+            // Só emite sucesso se:
+            //  1) esse END é do build mais recentemente iniciado (evita END atrasado)
+            //  2) esse build não teve ERROR
+            if (endBuildId === lastStartedBuildId && !hadError) {
+                if (hotReloadManager) {
+                    hotReloadManager.onBuildComplete(true, { buildId: endBuildId });
+                }
+            }
+            // Limpa estados antigos pra não crescer sem limite.
+            // (qualquer build mais antigo que o último START não faz mais sentido manter)
+            for (const id of erroredBuildIds) {
+                if (id < lastStartedBuildId)
+                    erroredBuildIds.delete(id);
+            }
             if (resolveFirstBuild) {
                 resolveFirstBuild();
                 resolveFirstBuild = null;
@@ -476,10 +506,9 @@ async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
         const inputOptions = createRollupConfig(entryPoint, outdir, false);
         const outputOptions = {
             dir: outdir,
-            format: 'iife',
-            name: 'HwebApp',
+            // Em DEV usamos ESM para suportar externals como react/react-dom sem output.globals
+            format: 'es',
             entryFileNames: 'main.js',
-            inlineDynamicImports: true,
             sourcemap: true
         };
         const watchOptions = {
@@ -511,9 +540,8 @@ async function watch(entryPoint, outfile, hotReloadManager = null) {
         const inputOptions = createRollupConfig(entryPoint, outdir, false);
         const outputOptions = {
             file: outfile,
-            format: 'iife',
-            name: 'HwebApp',
-            inlineDynamicImports: true,
+            // Em DEV usamos ESM para suportar externals como react/react-dom sem output.globals
+            format: 'es',
             sourcemap: true
         };
         const watchOptions = {

package/dist/client/clientRouter.js

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-// Sistema de roteamento do lado do cliente para hweb-sdk
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.router = void 0;
 class Router {

package/dist/client/entry.client.d.ts

@@ -1 +1,6 @@
-export {};
+import { Root } from 'react-dom/client';
+declare global {
+    interface Window {
+        __VATTS_ROOT__?: Root;
+    }
+}

package/dist/client/entry.client.js

@@ -144,44 +144,16 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
         const handleHMRUpdate = async (event) => {
             const { file, timestamp } = event.detail;
             const fileName = file ? file.split('/').pop()?.split('\\').pop() : 'unknown';
-            console.log('🔥 HMR: Hot reloading...', fileName);
+            console.log('🔥 HMR: Component Update Triggered', fileName);
+            // Neste modelo onde o script main.js é recarregado por completo,
+            // a atualização real acontece via reinicialização do initializeClient.
+            // Este listener serve mais para feedback visual ou atualizações parciais se implementadas.
             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;
-                }
+                setHmrTimestamp(timestamp);
+                window.__HMR_SUCCESS__ = true;
+                setTimeout(() => {
+                    window.__HMR_SUCCESS__ = false;
+                }, 3000);
             }
             catch (error) {
                 console.error('❌ HMR Error:', error);
@@ -229,7 +201,7 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
     // para garantir que o ErrorModal apareça em qualquer estado.
     let resolvedContent;
     if (!CurrentPageComponent || initialComponentPath === '__404__') {
-        const NotFoundComponent = window.__HWEB_NOT_FOUND__;
+        const NotFoundComponent = window.__VATTS_NOT_FOUND__;
         if (NotFoundComponent) {
             const NotFoundContent = (0, jsx_runtime_1.jsx)(NotFoundComponent, {});
             resolvedContent = layoutComponent
@@ -237,7 +209,7 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
                 : NotFoundContent;
         }
         else {
-            const DefaultNotFound = window.__HWEB_DEFAULT_NOT_FOUND__;
+            const DefaultNotFound = window.__VATTS_DEFAULT_NOT_FOUND__;
             const NotFoundContent = (0, jsx_runtime_1.jsx)(DefaultNotFound, {});
             resolvedContent = layoutComponent
                 ? react_1.default.createElement(layoutComponent, { children: NotFoundContent })
@@ -289,20 +261,38 @@ function initializeClient() {
         // Cria o mapa de componentes dinamicamente a partir dos módulos carregados
         const componentMap = {};
         // Registra todos os componentes que foram importados
-        if (window.__HWEB_COMPONENTS__) {
-            Object.assign(componentMap, window.__HWEB_COMPONENTS__);
+        if (window.__VATTS_COMPONENTS__) {
+            Object.assign(componentMap, window.__VATTS_COMPONENTS__);
         }
         else {
-            console.warn('[Vatts] No components found in window.__HWEB_COMPONENTS__');
+            console.warn('[Vatts] No components found in window.__VATTS_COMPONENTS__');
         }
         const container = document.getElementById('root');
         if (!container) {
             console.error('[Vatts] Container #root not found.');
             return;
         }
+        // --- CORREÇÃO DO HOT RELOAD ---
+        // Verifica se já existe um root montado (acontece durante o reload do main.js)
+        if (window.__VATTS_ROOT__) {
+            // console.log('[Vatts] HMR: Unmounting previous root...');
+            try {
+                // Desmonta o app anterior para limpar event listeners e nós do DOM
+                // Isso evita o erro "NotFoundError: Failed to execute 'removeChild'"
+                window.__VATTS_ROOT__.unmount();
+                // Limpa o container explicitamente para garantir que o framer-motion/animações
+                // não deixaram lixo para trás que confunda o novo React
+                container.innerHTML = '';
+            }
+            catch (e) {
+                console.warn('[Vatts] Warning during unmount:', e);
+            }
+        }
         // Usar createRoot para render inicial (CSR)
         const root = (0, client_1.createRoot)(container);
-        root.render((0, jsx_runtime_1.jsx)(App, { componentMap: componentMap, routes: initialData.routes, initialComponentPath: initialData.initialComponentPath, initialParams: initialData.initialParams, layoutComponent: window.__HWEB_LAYOUT__ }));
+        // Salva a referência globalmente
+        window.__VATTS_ROOT__ = root;
+        root.render((0, jsx_runtime_1.jsx)(App, { componentMap: componentMap, routes: initialData.routes, initialComponentPath: initialData.initialComponentPath, initialParams: initialData.initialParams, layoutComponent: window.__VATTS_LAYOUT__ }));
     }
     catch (error) {
         console.error('[Watts] Critical Error rendering application:', error);
@@ -326,7 +316,7 @@ if (document.readyState === 'loading') {
 else {
     // ESM Hoisting Fix:
     // Como este arquivo é importado pelo arquivo gerado automaticamente, ele executa
-    // ANTES do corpo do arquivo gerado (onde window.__HWEB_COMPONENTS__ é definido).
+    // ANTES do corpo do arquivo gerado (onde window.__VATTS_COMPONENTS__ é definido).
     // Usamos setTimeout para garantir que a inicialização ocorra após as atribuições globais.
     setTimeout(initializeClient, 0);
 }

package/dist/helpers.js

@@ -315,13 +315,13 @@ const parseBody = (req) => {
 /**
  * Inicializa servidor nativo do Vatts.js usando HTTP ou HTTPS
  */
-async function initNativeServer(hwebApp, options, port, hostname) {
+async function initNativeServer(vattsApp, options, port, hostname) {
     const time = Date.now();
-    await hwebApp.prepare();
+    await vattsApp.prepare();
     const projectDir = options.dir || process.cwd();
     const phase = options.dev ? 'development' : 'production';
     const vattsConfig = await loadVattsConfig(projectDir, phase);
-    const handler = hwebApp.getRequestHandler();
+    const handler = vattsApp.getRequestHandler();
     const msg = console_1.default.dynamicLine(`${console_1.Colors.Bright}Starting Vatts.js on port ${options.port}${console_1.Colors.Reset}`);
     // --- LÓGICA DO LISTENER (REUTILIZÁVEL) ---
     // Extraímos a lógica principal para uma variável
@@ -461,7 +461,7 @@ async function initNativeServer(hwebApp, options, port, hostname) {
             ca: options.ssl.ca ? fs_1.default.readFileSync(options.ssl.ca) : undefined
         };
         // 1. Cria o servidor HTTPS principal
-        server = https_1.default.createServer(sslOptions, requestListener); // (any para contornar HWebIncomingMessage)
+        server = https_1.default.createServer(sslOptions, requestListener);
         // 2. Cria o servidor de REDIRECIONAMENTO (HTTP -> HTTPS)
         const httpRedirectPort = options.ssl.redirectPort;
         http_1.default.createServer((req, res) => {
@@ -490,7 +490,7 @@ async function initNativeServer(hwebApp, options, port, hostname) {
     else {
         // --- MODO HTTP (Original) ---
         // Cria o servidor HTTP nativo
-        server = http_1.default.createServer(requestListener); // (any para contornar HWebIncomingMessage)
+        server = http_1.default.createServer(requestListener);
     }
     // Configurações de segurança do servidor (usa configuração personalizada)
     server.setTimeout(vattsConfig.serverTimeout || 35000); // Timeout geral do servidor
@@ -502,26 +502,26 @@ async function initNativeServer(hwebApp, options, port, hostname) {
         msg.end(`${console_1.Colors.Bright}Ready on port ${console_1.Colors.BgGreen} ${options.port} ${console_1.Colors.Reset}${console_1.Colors.Bright} in ${Date.now() - time}ms${console_1.Colors.Reset}\n`);
     });
     // Configura WebSocket para hot reload (Comum a ambos)
-    hwebApp.setupWebSocket(server);
-    hwebApp.executeInstrumentation();
+    vattsApp.setupWebSocket(server);
+    vattsApp.executeInstrumentation();
     return server;
 }
 // --- Função Principal ---
 function app(options = {}) {
     const framework = options.framework || 'native';
     index_1.FrameworkAdapterFactory.setFramework(framework);
-    // Tipando a app principal do hweb
-    const hwebApp = (0, index_1.default)(options);
+    // Tipando a app principal do vatts
+    const vattsApp = (0, index_1.default)(options);
     return {
-        ...hwebApp,
+        ...vattsApp,
         /**
          * Integra com uma aplicação de qualquer framework (Express, Fastify, etc)
          * O 'serverApp: any' é mantido para flexibilidade, já que pode ser de tipos diferentes.
          */
         integrate: async (serverApp) => {
-            await hwebApp.prepare();
-            const handler = hwebApp.getRequestHandler();
-            // O framework é setado nas opções do hweb, que deve
+            await vattsApp.prepare();
+            const handler = vattsApp.getRequestHandler();
+            // O framework é setado nas opções do vatts, que deve
             // retornar o handler correto em getRequestHandler()
             // A lógica de integração original parece correta.
             if (framework === 'express') {
@@ -536,7 +536,7 @@ function app(options = {}) {
                 serverApp.use(express.json());
                 serverApp.use(express.urlencoded({ extended: true }));
                 serverApp.use(handler);
-                hwebApp.setupWebSocket(serverApp);
+                vattsApp.setupWebSocket(serverApp);
             }
             else if (framework === 'fastify') {
                 try {
@@ -554,14 +554,14 @@ function app(options = {}) {
                 await serverApp.register(async (fastify) => {
                     fastify.all('*', handler);
                 });
-                hwebApp.setupWebSocket(serverApp);
+                vattsApp.setupWebSocket(serverApp);
             }
             else {
                 // Generic integration (assume Express-like)
                 serverApp.use(handler);
-                hwebApp.setupWebSocket(serverApp);
+                vattsApp.setupWebSocket(serverApp);
             }
-            hwebApp.executeInstrumentation();
+            vattsApp.executeInstrumentation();
             return serverApp;
         },
         /**
@@ -602,7 +602,7 @@ ${console_1.Colors.Bright + console_1.Colors.FgRed}     \\/  /~~\\  |   |  .__/
             if (framework !== 'native') {
                 console_1.default.warn(`The "${framework}" framework was selected, but the init() method only works with the "native" framework. Starting native server...`);
             }
-            return await initNativeServer(hwebApp, options, actualPort, actualHostname);
+            return await initNativeServer(vattsApp, options, actualPort, actualHostname);
         }
     };
 }

package/dist/hotReload.d.ts

@@ -11,23 +11,32 @@ export declare class HotReloadManager {
     private customHotReloadListener;
     private isBuilding;
     private buildCompleteResolve;
-    private lastBuildError;
+    private lastFrontendErrorBuildId;
+    private get buildState();
+    private set buildState(value);
     constructor(projectDir: string);
     start(): Promise<void>;
     handleUpgrade(request: IncomingMessage, socket: any, head: Buffer): void;
     private setupWebSocketServer;
+    private broadcastCurrentState;
     private cleanupClient;
     private setupWatchers;
     private debounce;
+    private setBackendError;
     private handleAnySrcChange;
+    private notifyStatusChange;
     private notifyClients;
-    private restartServer;
     getClientScript(): string;
     private clearBackendCache;
     onBackendApiChange(callback: () => void): void;
     onFrontendChange(callback: () => void): void;
     setHotReloadListener(listener: (file: string) => Promise<void> | void): void;
     removeHotReloadListener(): void;
+    private lastBuildCompleteTraceAt;
+    private traceBuildComplete;
     onBuildComplete(success: boolean, error?: any): void;
     stop(): void;
+    private lastTypecheckAt;
+    private lastTypecheckResult;
+    private typecheckFrontend;
 }