vatts 1.0.2-alpha.3 → 1.0.2-alpha.4

package/dist/index.js

@@ -59,7 +59,7 @@ const fs_1 = __importDefault(require("fs"));
 const express_1 = require("./adapters/express");
 const builder_1 = require("./builder");
 const router_1 = require("./router");
-const renderer_1 = require("./renderer");
+const renderer_1 = require("./renderer"); // Usando a nova função de streaming
 const http_1 = require("./api/http");
 Object.defineProperty(exports, "VattsRequest", { enumerable: true, get: function () { return http_1.VattsRequest; } });
 Object.defineProperty(exports, "VattsResponse", { enumerable: true, get: function () { return http_1.VattsResponse; } });
@@ -121,13 +121,9 @@ function isLargeProject(projectDir) {
             }
         }
         scanDirectory(srcDir);
-        // Considera projeto grande se:
-        // - Mais de 20 arquivos de frontend/style
-        // - Ou tamanho total > 500KB
         return totalFiles > 20 || totalSize > 500 * 1024;
     }
     catch (error) {
-        // Em caso de erro, assume que não é um projeto grande
         return false;
     }
 }
@@ -137,44 +133,32 @@ function createEntryFile(projectDir, routes) {
         const tempDir = path_1.default.join(projectDir, '.vatts', '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.__VATTS_LAYOUT__ = LayoutComponent.default || LayoutComponent;`
             : `window.__VATTS_LAYOUT__ = null;`;
-        // Registra o notFound se existir
         const notFoundRegistration = notFound
             ? `window.__VATTS_NOT_FOUND__ = NotFoundComponent.default || NotFoundComponent;`
             : `window.__VATTS_NOT_FOUND__ = null;`;
-        // Caminho correto para o entry.client
-        // IMPORTANT: quando o pacote é instalado via npm, bundlers (Rollup/Vite/etc.) não transpilam TSX em node_modules.
-        // Por isso, aqui a gente sempre aponta para os artefatos compilados em dist/.
-        const sdkDir = path_1.default.dirname(__dirname); // pasta do pacote (pai de dist/ e src/)
+        const sdkDir = path_1.default.dirname(__dirname);
         const entryClientPath = path_1.default.join(sdkDir, 'dist', 'client', 'entry.client.js');
         const relativeEntryPath = path_1.default.relative(tempDir, entryClientPath).replace(/\\/g, '/');
-        // Import do DefaultNotFound do SDK (compilado)
         const defaultNotFoundPath = path_1.default.join(sdkDir, 'dist', 'client', 'DefaultNotFound.js');
         const relativeDefaultNotFoundPath = path_1.default.relative(tempDir, defaultNotFoundPath).replace(/\\/g, '/');
         const entryContent = `// Arquivo gerado automaticamente pelo vatts
@@ -183,28 +167,22 @@ ${layoutImport}
 ${notFoundImport}
 import DefaultNotFound from '${relativeDefaultNotFoundPath}';
 
-// Registra os componentes para o cliente
 window.__VATTS_COMPONENTS__ = {
 ${componentRegistration}
 };
 
-// Registra o layout se existir
 ${layoutRegistration}
-
-// Registra o notFound se existir
 ${notFoundRegistration}
 
-
 window.__VATTS_DEFAULT_NOT_FOUND__ = DefaultNotFound;
 
-// Importa e executa o entry.client.tsx
 import '${relativeEntryPath}';
 `;
         try {
             fs_1.default.writeFileSync(entryFilePath, entryContent);
         }
         catch (e) {
-            console.error("sdfijnsdfnijfsdijnfsdnijsdfnijfsdnijfsdnijfsdn", e);
+            console.error("Error writing entry file", e);
         }
         return entryFilePath;
     }
@@ -218,74 +196,54 @@ function vatts(options) {
     (0, env_1.loadEnv)({ dir, dev, envFiles });
     // @ts-ignore
     process.vatts = options;
+    // @ts-ignore
+    process.env.PORT = options.port;
     const userWebDir = path_1.default.join(dir, 'src', 'web');
     const userWebRoutesDir = path_1.default.join(userWebDir, '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
-     * @param finalHandler Handler final da rota
-     * @param request Requisição do Vatts.js
-     * @param params Parâmetros da rota
-     * @returns Resposta do middleware ou handler final
-     */
     async function executeMiddlewareChain(middlewares, finalHandler, request, params) {
         if (!middlewares || middlewares.length === 0) {
-            // Não há middlewares, executa diretamente o handler final
             return await finalHandler(request, params);
         }
         let currentIndex = 0;
-        // Função next que será chamada pelos middlewares
         const next = async () => {
             if (currentIndex < middlewares.length) {
-                // Ainda há middlewares para executar
                 const currentMiddleware = middlewares[currentIndex];
                 currentIndex++;
                 return await currentMiddleware(request, params, next);
             }
             else {
-                // Todos os middlewares foram executados, chama o handler final
                 return await finalHandler(request, params);
             }
         };
-        // Inicia a cadeia de execução
         return await next();
     }
     let frontendRoutes = [];
     let hotReloadManager = null;
     let entryPoint;
-    let outfile;
-    // Função para regenerar o entry file
     const regenerateEntryFile = () => {
-        // Recarrega todas as rotas e componentes
         const newFrontendRoutes = (0, router_1.loadRoutes)(userWebRoutesDir);
         const newLayout = (0, router_1.loadLayout)(userWebDir);
         const newNotFound = (0, router_1.loadNotFound)(userWebDir);
-        // Se nada mudou, não reescreve o entry file (evita disparar rebuild extra)
         const oldKey = frontendRoutes.map(r => `${r.pattern ?? ''}:${r.componentPath}`).join('|');
         const newKey = newFrontendRoutes.map(r => `${r.pattern ?? ''}:${r.componentPath}`).join('|');
         if (oldKey === newKey) {
-            // Ainda atualiza refs internas de layout/notFound, mas evita re-gerar o entry.
             frontendRoutes = newFrontendRoutes;
             return;
         }
         frontendRoutes = newFrontendRoutes;
-        // Regenera o entry file
         entryPoint = createEntryFile(dir, frontendRoutes);
     };
     return {
         prepare: async () => {
             const isProduction = !dev;
             if (!isProduction) {
-                // Inicia hot reload apenas em desenvolvimento (com suporte ao main)
                 hotReloadManager = new hotReload_1.HotReloadManager(dir);
                 await hotReloadManager.start();
-                // Adiciona callback para recarregar TUDO quando qualquer arquivo mudar
                 hotReloadManager.onBackendApiChange(() => {
                     (0, router_1.loadBackendRoutes)(userBackendRoutesDir);
-                    (0, router_1.processWebSocketRoutes)(); // Processa rotas WS após recarregar backend
+                    (0, router_1.processWebSocketRoutes)();
                 });
-                // Adiciona callback para regenerar entry file quando frontend mudar
                 hotReloadManager.onFrontendChange(() => {
                     regenerateEntryFile();
                 });
@@ -297,13 +255,10 @@ function vatts(options) {
             const spinner1 = setInterval(() => {
                 timee.update(`   ${console_1.Colors.FgYellow}${spinnerFrames1[frameIndex1]}${console_1.Colors.Reset}  Loading routes and components...`);
                 frameIndex1 = (frameIndex1 + 1) % spinnerFrames1.length;
-            }, 100); // muda a cada 100ms
-            // ORDEM IMPORTANTE: Carrega TUDO antes de criar o arquivo de entrada
+            }, 100);
             frontendRoutes = (0, router_1.loadRoutes)(userWebRoutesDir);
             (0, router_1.loadBackendRoutes)(userBackendRoutesDir);
-            // Processa rotas WebSocket após carregar backend
             (0, router_1.processWebSocketRoutes)();
-            // Carrega layout.tsx ANTES de criar o entry file
             const layout = (0, router_1.loadLayout)(userWebDir);
             const notFound = (0, router_1.loadNotFound)(userWebDir);
             const outDir = path_1.default.join(dir, '.vatts');
@@ -313,20 +268,18 @@ function vatts(options) {
             timee.end(`Routes and components loaded in ${Date.now() - now}ms`);
             if (isProduction) {
                 const time = console_1.default.dynamicLine(`Starting client build`);
-                // Spinner
                 const spinnerFrames = ['|', '/', '-', '\\'];
                 let frameIndex = 0;
                 const spinner = setInterval(() => {
                     time.update(`    ${console_1.Colors.FgYellow}${spinnerFrames[frameIndex]}${console_1.Colors.Reset}  Building...`);
                     frameIndex = (frameIndex + 1) % spinnerFrames.length;
-                }, 100); // muda a cada 100ms
+                }, 100);
                 const now = Date.now();
                 await (0, builder_1.buildWithChunks)(entryPoint, outDir, isProduction);
                 const elapsed = Date.now() - now;
-                clearInterval(spinner); // para o spinner
-                time.update(""); // limpa a linha
+                clearInterval(spinner);
+                time.update("");
                 time.end(`Client build completed in ${elapsed}ms`);
-                // Notifica o hot reload manager que o build foi concluído
                 if (hotReloadManager) {
                     hotReloadManager.onBuildComplete(true);
                 }
@@ -341,13 +294,10 @@ function vatts(options) {
             }
         },
         executeInstrumentation: () => {
-            // verificar se dir/src/instrumentation.(tsx/jsx/js/ts) existe com regex
             const instrumentationFile = fs_1.default.readdirSync(path_1.default.join(dir, 'src')).find(file => /^vattsweb\.(tsx|jsx|js|ts)$/.test(file));
             if (instrumentationFile) {
                 const instrumentationPath = path_1.default.join(dir, 'src', instrumentationFile);
-                // dar require, e executar a função principal do arquivo
                 const instrumentation = require(instrumentationPath);
-                // Registra o listener de hot reload se existir
                 if (instrumentation.hotReloadListener && typeof instrumentation.hotReloadListener === 'function') {
                     if (hotReloadManager) {
                         hotReloadManager.setHotReloadListener(instrumentation.hotReloadListener);
@@ -366,17 +316,14 @@ function vatts(options) {
         },
         getRequestHandler: () => {
             return async (req, res) => {
-                // Detecta o framework e cria request/response genéricos
                 const adapter = factory_1.FrameworkAdapterFactory.detectFramework(req, res);
                 const genericReq = adapter.parseRequest(req);
                 const genericRes = adapter.createResponse(res);
-                // Adiciona informações do hweb na requisição genérica
                 genericReq.hwebDev = dev;
                 genericReq.hotReloadManager = hotReloadManager;
                 const { hostname } = req.headers;
                 const method = (genericReq.method || 'GET').toUpperCase();
                 const pathname = new URL(genericReq.url, `http://${hostname}:${port}`).pathname;
-                // RPC endpoint (antes das rotas de backend)
                 if (pathname === types_1.RPC_ENDPOINT && method === 'POST') {
                     try {
                         const result = await (0, server_1.executeRpc)({
@@ -393,12 +340,9 @@ function vatts(options) {
                         return;
                     }
                 }
-                // 1. Verifica se é WebSocket upgrade para hot reload
                 if (pathname === '/hweb-hotreload/' && genericReq.headers.upgrade === 'websocket' && hotReloadManager) {
-                    // Framework vai chamar o evento 'upgrade' do servidor HTTP
                     return;
                 }
-                // 2. Primeiro verifica se é um arquivo estático da pasta public
                 if (pathname !== '/' && !pathname.startsWith('/api/') && !pathname.startsWith('/.vatts')) {
                     const publicDir = path_1.default.join(dir, 'public');
                     if (!isSuspiciousPathname(pathname)) {
@@ -427,7 +371,6 @@ function vatts(options) {
                                 '.zip': 'application/zip'
                             };
                             genericRes.header('Content-Type', contentTypes[ext] || 'application/octet-stream');
-                            // Para arquivos estáticos, usamos o método nativo do framework
                             if (adapter.type === 'express') {
                                 res.sendFile(filePath);
                             }
@@ -456,7 +399,6 @@ function vatts(options) {
                                 '.map': 'application/json'
                             };
                             genericRes.header('Content-Type', contentTypes[ext] || 'text/plain');
-                            // Para arquivos estáticos, usamos o método nativo do framework
                             if (adapter.type === 'express') {
                                 res.sendFile(filePath);
                             }
@@ -472,18 +414,13 @@ function vatts(options) {
                         }
                     }
                 }
-                // 4. REMOVIDO: Verificação de arquivos React UMD - não precisamos mais
-                // O React agora será bundlado diretamente no main.js
-                // 5. Verifica se é uma rota de API (backend)
                 const backendMatch = (0, router_1.findMatchingBackendRoute)(pathname, method);
                 if (backendMatch) {
                     try {
                         const handler = backendMatch.route[method];
                         if (handler) {
                             const hwebReq = new http_1.VattsRequest(genericReq);
-                            // Executa middlewares e depois o handler final
                             const hwebRes = await executeMiddlewareChain(backendMatch.route.middleware, handler, hwebReq, backendMatch.params);
-                            // Aplica a resposta usando o adapter correto
                             hwebRes._applyTo(genericRes);
                             return;
                         }
@@ -494,24 +431,41 @@ function vatts(options) {
                         return;
                     }
                 }
-                // 6. Por último, tenta renderizar uma página (frontend) ou 404
+                // Renderização de Página (Frontend)
                 const pageMatch = (0, router_1.findMatchingRoute)(pathname);
+                // Determina o objeto de resposta "cru" para o stream do React
+                // Se for Fastify, o Writable stream está em res.raw. Se for Express/Native, é o próprio res.
+                const rawRes = (res.raw || res);
                 if (!pageMatch) {
-                    // Em vez de enviar texto simples, renderiza a página 404 React
                     try {
-                        // Cria uma "rota falsa" para a página 404
                         const notFoundRoute = {
                             pattern: '/__404__',
-                            component: () => null, // Componente vazio, será tratado no cliente
+                            component: () => null, // Será renderizado via SSR se tiver componente de 404 definido no Client
                             componentPath: '__404__'
                         };
-                        const html = await (0, renderer_1.render)({
+                        // Tenta usar componente 404 customizado se houver
+                        const notFound = (0, router_1.getNotFound)();
+                        if (notFound) {
+                            // Carrega o componente 404 real para o SSR funcionar
+                            try {
+                                const nfModule = require(path_1.default.resolve(process.cwd(), notFound.componentPath));
+                                // @ts-ignore
+                                notFoundRoute.component = nfModule.default || nfModule;
+                            }
+                            catch (e) { }
+                        }
+                        // Define status 404 antes de iniciar o stream
+                        if (rawRes.statusCode)
+                            rawRes.statusCode = 404; // Native/Fastify
+                        if (rawRes.status)
+                            rawRes.status(404); // Express (mas pode quebrar se for raw, melhor usar statusCode)
+                        await (0, renderer_1.renderAsStream)({
                             req: genericReq,
+                            res: rawRes,
                             route: notFoundRoute,
                             params: {},
                             allRoutes: frontendRoutes
                         });
-                        genericRes.status(404).header('Content-Type', 'text/html').send(html);
                         return;
                     }
                     catch (error) {
@@ -521,26 +475,28 @@ function vatts(options) {
                     }
                 }
                 try {
-                    const html = await (0, renderer_1.render)({
+                    // Renderização via Stream (SSR + Streaming)
+                    await (0, renderer_1.renderAsStream)({
                         req: genericReq,
+                        res: rawRes,
                         route: pageMatch.route,
                         params: pageMatch.params,
                         allRoutes: frontendRoutes
                     });
-                    genericRes.status(200).header('Content-Type', 'text/html').send(html);
                 }
                 catch (error) {
                     console_1.default.error(`Error rendering page ${pathname}:`, error);
-                    genericRes.status(500).text('Internal server error');
+                    // Se o stream já começou, não dá pra enviar erro 500 limpo.
+                    // O renderAsStream tenta lidar com isso no onError.
+                    if (!rawRes.headersSent) {
+                        genericRes.status(500).text('Internal server error');
+                    }
                 }
             };
         },
-        // Método para configurar WebSocket upgrade nos servidores Express e Fastify
         setupWebSocket: (server) => {
-            // Detecta se é um servidor Express ou Fastify
             const isExpressServer = factory_1.FrameworkAdapterFactory.getCurrentAdapter() instanceof express_1.ExpressAdapter;
             const actualServer = isExpressServer ? server : (server.server || server);
-            // Usa o sistema coordenado de WebSocket upgrade que integra hot-reload e rotas de usuário
             (0, router_1.setupWebSocketUpgrade)(actualServer, hotReloadManager);
         },
         stop: () => {

package/dist/renderer.d.ts

@@ -2,6 +2,7 @@ import { RouteConfig } from './types';
 import type { GenericRequest } from './types/framework';
 interface RenderOptions {
     req: GenericRequest;
+    res: any;
     route: RouteConfig & {
         componentPath: string;
     };
@@ -10,5 +11,6 @@ interface RenderOptions {
         componentPath: string;
     })[];
 }
-export declare function render({ req, route, params, allRoutes }: RenderOptions): Promise<string>;
+export declare function renderAsStream({ req, res, route, params, allRoutes }: RenderOptions): Promise<void>;
+export declare function render(options: any): Promise<string>;
 export {};