vatts 1.0.1 → 1.0.2-alpha.1

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
@@ -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/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);
@@ -300,8 +272,26 @@ function initializeClient() {
             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);
+        // 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.__HWEB_LAYOUT__ }));
     }
     catch (error) {

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;
 }