hightjs 0.3.5 → 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/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 })

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);
@@ -342,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':
@@ -357,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;
                             

package/dist/index.js

@@ -110,48 +110,49 @@ function isLargeProject(projectDir) {
 }
 // Função para gerar o arquivo de entrada para o esbuild
 function createEntryFile(projectDir, routes) {
-    const tempDir = path_1.default.join(projectDir, '.hweb');
-    fs_1.default.mkdirSync(tempDir, { recursive: true });
-    const entryFilePath = path_1.default.join(tempDir, 'entry.client.js');
-    // Verifica se há layout
-    const layout = (0, router_1.getLayout)();
-    // Verifica se há notFound personalizado
-    const notFound = (0, router_1.getNotFound)();
-    // Gera imports dinâmicos para cada componente
-    const imports = routes
-        .map((route, index) => {
-        const relativePath = path_1.default.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_1.default.relative(tempDir, layout.componentPath).replace(/\\/g, '/')}';`
-        : '';
-    // Import do notFound se existir
-    const notFoundImport = notFound
-        ? `import NotFoundComponent from '${path_1.default.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_1.default.dirname(__dirname); // Vai para a pasta pai de src (onde está o hweb-sdk)
-    const entryClientPath = path_1.default.join(sdkDir, 'src', 'client', 'entry.client.tsx');
-    const relativeEntryPath = path_1.default.relative(tempDir, entryClientPath).replace(/\\/g, '/');
-    // Import do DefaultNotFound do SDK
-    const defaultNotFoundPath = path_1.default.join(sdkDir, 'src', 'client', 'DefaultNotFound.tsx');
-    const relativeDefaultNotFoundPath = path_1.default.relative(tempDir, defaultNotFoundPath).replace(/\\/g, '/');
-    const entryContent = `// Arquivo gerado automaticamente pelo hweb
+    try {
+        const tempDir = path_1.default.join(projectDir, '.hight', 'temp');
+        fs_1.default.mkdirSync(tempDir, { recursive: true });
+        const entryFilePath = path_1.default.join(tempDir, 'entry.client.js');
+        // Verifica se há layout
+        const layout = (0, router_1.getLayout)();
+        // Verifica se há notFound personalizado
+        const notFound = (0, router_1.getNotFound)();
+        // Gera imports dinâmicos para cada componente
+        const imports = routes
+            .map((route, index) => {
+            const relativePath = path_1.default.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_1.default.relative(tempDir, layout.componentPath).replace(/\\/g, '/')}';`
+            : '';
+        // Import do notFound se existir
+        const notFoundImport = notFound
+            ? `import NotFoundComponent from '${path_1.default.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_1.default.dirname(__dirname); // Vai para a pasta pai de src (onde está o hweb-sdk)
+        const entryClientPath = path_1.default.join(sdkDir, 'src', 'client', 'entry.client.tsx');
+        const relativeEntryPath = path_1.default.relative(tempDir, entryClientPath).replace(/\\/g, '/');
+        // Import do DefaultNotFound do SDK
+        const defaultNotFoundPath = path_1.default.join(sdkDir, 'src', 'client', 'DefaultNotFound.tsx');
+        const relativeDefaultNotFoundPath = path_1.default.relative(tempDir, defaultNotFoundPath).replace(/\\/g, '/');
+        const entryContent = `// Arquivo gerado automaticamente pelo hweb
 ${imports}
 ${layoutImport}
 ${notFoundImport}
@@ -174,8 +175,18 @@ window.__HWEB_DEFAULT_NOT_FOUND__ = DefaultNotFound;
 // Importa e executa o entry.client.tsx
 import '${relativeEntryPath}';
 `;
-    fs_1.default.writeFileSync(entryFilePath, entryContent);
-    return entryFilePath;
+        try {
+            fs_1.default.writeFileSync(entryFilePath, entryContent);
+        }
+        catch (e) {
+            console.error("sdfijnsdfnijfsdijnfsdnijsdfnijfsdnijfsdnijfsdn", e);
+        }
+        return entryFilePath;
+    }
+    catch (e) {
+        console_1.default.error("Error creating entry file:", e);
+        throw e;
+    }
 }
 function hweb(options) {
     const { dev = true, dir = process.cwd(), port = 3000 } = options;
@@ -183,7 +194,7 @@ function hweb(options) {
     process.hight = options;
     const userWebDir = path_1.default.join(dir, 'src', 'web');
     const userWebRoutesDir = path_1.default.join(userWebDir, 'routes');
-    const userBackendRoutesDir = path_1.default.join(userWebDir, 'backend', 'routes');
+    const userBackendRoutesDir = path_1.default.join(dir, 'src', 'backend', 'routes');
     /**
      * Executa middlewares sequencialmente e depois o handler final
      * @param middlewares Array de middlewares para executar

package/docs/checklist.md

@@ -1,7 +1,7 @@
 # ✅ Checklist Mental
 
 1. Precisa de página? Crie em `src/web/routes/...`
-2. Precisa de endpoint? Crie em `src/web/backend/routes/...`
+2. Precisa de endpoint? Crie em `src/backend/routes/...`
 3. Precisa proteger? Use autenticação nas rotas
 4. Precisa middleware? `middleware.ts` ou `middleware: []` na rota
 5. Metadata? `generateMetadata` ou `metadata` no layout

package/docs/middlewares.md

@@ -17,7 +17,7 @@ export type HightMiddleware = (
 
 ## Exemplo por Pasta
 
-`src/web/backend/routes/middleware.ts`:
+`src/backend/routes/middleware.ts`:
 
 ```ts
 import {HightJSRequest, HightJSResponse} from 'hightjs';

package/docs/rotas-backend.md

@@ -1,11 +1,11 @@
 # 🌐 Rotas Backend
 
-Qualquer arquivo em `src/web/backend/routes` vira endpoint backend.  
+Qualquer arquivo em `src/backend/routes` vira endpoint backend.  
 O _pattern_ pode ser qualquer caminho, não só `/api/...`!
 
 ## Exemplo Simples
 
-`src/web/backend/routes/version.ts`:
+`src/backend/routes/version.ts`:
 
 ```ts
 import { HightJSRequest, HightJSResponse, BackendRouteConfig } from 'hightjs';
@@ -29,7 +29,7 @@ Defina `GET`, `POST`, `PUT`, `DELETE` (ou só os necessários).
 
 ## Rotas Dinâmicas Backend
 
-`src/web/backend/routes/users/[id].ts` → `/users/123`
+`src/backend/routes/users/[id].ts` → `/users/123`
 
 ```ts
 import { BackendRouteConfig, HightJSResponse } from "hightjs";

package/docs/websocket.md

@@ -4,7 +4,7 @@ O HightJS possui suporte nativo a WebSockets nas rotas do backend.
 
 ## Exemplo Prático
 
-`src/web/backend/routes/chat.ts`:
+`src/backend/routes/chat.ts`:
 
 ```ts
 import {BackendRouteConfig, HightJSResponse} from 'hightjs';

package/example/package-lock.json

@@ -25,7 +25,7 @@
     },
     "..": {
       "name": "hightjs",
-      "version": "0.3.4",
+      "version": "0.3.5",
       "license": "Apache-2.0",
       "dependencies": {
         "@fastify/cookie": "^11.0.2",

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

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

package/example/src/{web/backend → backend}/routes/version.ts

@@ -6,7 +6,7 @@ const route: BackendRouteConfig = {
         return HightJSResponse.json({
             success: true,
             version: "1.0.0",
-            name: "HightJS Example App"
+            name: "HightJS Example asdadsadsadsdas"
         })
     }
 }