hightjs 0.3.5 → 0.4.0

package/src/builder.js

@@ -18,6 +18,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', 
@@ -189,6 +191,45 @@ 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.
@@ -197,8 +238,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({
@@ -242,7 +283,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 = {
@@ -272,7 +313,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: {
@@ -306,7 +347,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({
@@ -407,5 +448,25 @@ 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/src/client/entry.client.tsx

@@ -30,7 +30,7 @@ interface AppProps {
 
 function App({ componentMap, routes, initialComponentPath, initialParams, layoutComponent }: AppProps) {
     // Estado que guarda o componente a ser renderizado atualmente
-
+    const [hmrTimestamp, setHmrTimestamp] = useState(Date.now());
     const [CurrentPageComponent, setCurrentPageComponent] = useState(() => {
         // Se for a rota especial __404__, não busca no componentMap
         if (initialComponentPath === '__404__') {
@@ -40,6 +40,72 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
     });
     const [params, setParams] = useState(initialParams);
 
+    // HMR: Escuta eventos de hot reload
+    useEffect(() => {
+        // Ativa o sistema de HMR
+        (window as any).__HWEB_HMR__ = true;
+
+        const handleHMRUpdate = async (event: CustomEvent) => {
+            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"]') as HTMLScriptElement;
+                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 as any).__HMR_SUCCESS__ = true;
+                        setTimeout(() => {
+                            (window as any).__HMR_SUCCESS__ = false;
+                        }, 3000);
+                    };
+
+                    newScript.onerror = () => {
+                        console.error('❌ HMR: Failed to reload modules');
+                        (window as any).__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 as any).__HMR_SUCCESS__ = true;
+                }
+            } catch (error) {
+                console.error('❌ HMR Error:', error);
+                (window as any).__HMR_SUCCESS__ = false;
+            }
+        };
+
+        window.addEventListener('hmr:component-update' as any, handleHMRUpdate);
+
+        return () => {
+            window.removeEventListener('hmr:component-update' as any, handleHMRUpdate);
+        };
+    }, []);
+
     const findRouteForPath = useCallback((path: string) => {
         for (const route of routes) {
             const regexPattern = route.pattern
@@ -123,7 +189,8 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
     }
 
     // Renderiza o componente atual (sem Context, usa o router diretamente)
-    const PageContent = <CurrentPageComponent params={params} />;
+    // Usa key com timestamp para forçar re-mount durante HMR
+    const PageContent = <CurrentPageComponent key={`page-${hmrTimestamp}`} params={params} />;
 
     // SEMPRE usa o layout - se não existir, cria um wrapper padrão
     const content = layoutComponent

package/src/hotReload.ts

@@ -195,7 +195,7 @@ export class HotReloadManager {
                                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
@@ -357,10 +357,11 @@ export 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':
@@ -372,12 +373,91 @@ export 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;
                             

package/src/index.ts

@@ -102,60 +102,61 @@ function isLargeProject(projectDir: string): boolean {
 
 // Função para gerar o arquivo de entrada para o esbuild
 function createEntryFile(projectDir: string, routes: (RouteConfig & { componentPath: string })[]): string {
-    const tempDir = path.join(projectDir, '.hweb');
-    fs.mkdirSync(tempDir, { recursive: true });
-
-    const entryFilePath = path.join(tempDir, 'entry.client.js');
-
-    // Verifica se há layout
-    const layout = getLayout();
-
-    // Verifica se há notFound personalizado
-    const notFound = getNotFound();
-
-    // Gera imports dinâmicos para cada componente
-    const imports = routes
-        .map((route, index) => {
-            const relativePath = path.relative(tempDir, route.componentPath).replace(/\\/g, '/');
-            return `import route${index} from '${relativePath}';`;
-        })
-        .join('\n');
-
-    // Import do layout se existir
-    const layoutImport = layout
-        ? `import LayoutComponent from '${path.relative(tempDir, layout.componentPath).replace(/\\/g, '/')}';`
-        : '';
-
-    // Import do notFound se existir
-    const notFoundImport = notFound
-        ? `import NotFoundComponent from '${path.relative(tempDir, notFound.componentPath).replace(/\\/g, '/')}';`
-        : '';
-
-    // Registra os componentes no window para o cliente acessar
-    const componentRegistration = routes
-        .map((route, index) => `  '${route.componentPath}': route${index}.component || route${index}.default?.component,`)
-        .join('\n');
-
-    // Registra o layout se existir
-    const layoutRegistration = layout
-        ? `window.__HWEB_LAYOUT__ = LayoutComponent.default || LayoutComponent;`
-        : `window.__HWEB_LAYOUT__ = null;`;
-
-    // Registra o notFound se existir
-    const notFoundRegistration = notFound
-        ? `window.__HWEB_NOT_FOUND__ = NotFoundComponent.default || NotFoundComponent;`
-        : `window.__HWEB_NOT_FOUND__ = null;`;
-
-    // Caminho correto para o entry.client.tsx
-    const sdkDir = path.dirname(__dirname); // Vai para a pasta pai de src (onde está o hweb-sdk)
-    const entryClientPath = path.join(sdkDir, 'src', 'client', 'entry.client.tsx');
-    const relativeEntryPath = path.relative(tempDir, entryClientPath).replace(/\\/g, '/');
-
-    // Import do DefaultNotFound do SDK
-    const defaultNotFoundPath = path.join(sdkDir, 'src', 'client', 'DefaultNotFound.tsx');
-    const relativeDefaultNotFoundPath = path.relative(tempDir, defaultNotFoundPath).replace(/\\/g, '/');
-
-    const entryContent = `// Arquivo gerado automaticamente pelo hweb
+    try {
+        const tempDir = path.join(projectDir, '.hight', 'temp');
+
+        fs.mkdirSync(tempDir, { recursive: true });
+
+        const entryFilePath = path.join(tempDir, 'entry.client.js');
+        // Verifica se há layout
+        const layout = getLayout();
+
+        // Verifica se há notFound personalizado
+        const notFound = getNotFound();
+
+        // Gera imports dinâmicos para cada componente
+        const imports = routes
+            .map((route, index) => {
+                const relativePath = path.relative(tempDir, route.componentPath).replace(/\\/g, '/');
+                return `import route${index} from '${relativePath}';`;
+            })
+            .join('\n');
+
+        // Import do layout se existir
+        const layoutImport = layout
+            ? `import LayoutComponent from '${path.relative(tempDir, layout.componentPath).replace(/\\/g, '/')}';`
+            : '';
+
+        // Import do notFound se existir
+        const notFoundImport = notFound
+            ? `import NotFoundComponent from '${path.relative(tempDir, notFound.componentPath).replace(/\\/g, '/')}';`
+            : '';
+
+        // Registra os componentes no window para o cliente acessar
+        const componentRegistration = routes
+            .map((route, index) => `  '${route.componentPath}': route${index}.component || route${index}.default?.component,`)
+            .join('\n');
+
+        // Registra o layout se existir
+        const layoutRegistration = layout
+            ? `window.__HWEB_LAYOUT__ = LayoutComponent.default || LayoutComponent;`
+            : `window.__HWEB_LAYOUT__ = null;`;
+
+        // Registra o notFound se existir
+        const notFoundRegistration = notFound
+            ? `window.__HWEB_NOT_FOUND__ = NotFoundComponent.default || NotFoundComponent;`
+            : `window.__HWEB_NOT_FOUND__ = null;`;
+
+        // Caminho correto para o entry.client.tsx
+        const sdkDir = path.dirname(__dirname); // Vai para a pasta pai de src (onde está o hweb-sdk)
+        const entryClientPath = path.join(sdkDir, 'src', 'client', 'entry.client.tsx');
+        const relativeEntryPath = path.relative(tempDir, entryClientPath).replace(/\\/g, '/');
+
+        // Import do DefaultNotFound do SDK
+        const defaultNotFoundPath = path.join(sdkDir, 'src', 'client', 'DefaultNotFound.tsx');
+        const relativeDefaultNotFoundPath = path.relative(tempDir, defaultNotFoundPath).replace(/\\/g, '/');
+
+        const entryContent = `// Arquivo gerado automaticamente pelo hweb
 ${imports}
 ${layoutImport}
 ${notFoundImport}
@@ -179,9 +180,17 @@ window.__HWEB_DEFAULT_NOT_FOUND__ = DefaultNotFound;
 import '${relativeEntryPath}';
 `;
 
-    fs.writeFileSync(entryFilePath, entryContent);
+        try {
+            fs.writeFileSync(entryFilePath, entryContent);
+        } catch (e) {
+            console.error("sdfijnsdfnijfsdijnfsdnijsdfnijfsdnijfsdnijfsdn", e)
+        }
 
-    return entryFilePath;
+        return entryFilePath;
+    }catch (e){
+        Console.error("Error creating entry file:", e);
+        throw e;
+    }
 }
 
 export default function hweb(options: HightJSOptions) {
@@ -190,7 +199,7 @@ export default function hweb(options: HightJSOptions) {
     process.hight = options;
     const userWebDir = path.join(dir, 'src', 'web');
     const userWebRoutesDir = path.join(userWebDir, 'routes');
-    const userBackendRoutesDir = path.join(userWebDir, 'backend', 'routes');
+    const userBackendRoutesDir = path.join(dir, 'src', 'backend', 'routes');
 
     /**
      * Executa middlewares sequencialmente e depois o handler final

package/example/src/web/backend/routes/auth.ts

@@ -1,3 +0,0 @@
-import {authRoutes} from "../../../auth";
-
-export default authRoutes