vatts 1.0.5-alpha.2 → 1.0.5-alpha.3

package/dist/renderer.js

@@ -41,6 +41,22 @@ function requireWithoutStyles(modulePath) {
         });
     }
 }
+// --- Gerenciamento de Console (Silenciador) ---
+const originalConsole = {
+    log: console.log,
+    info: console.info,
+    debug: console.debug
+};
+function silenceConsole() {
+    console.log = () => { };
+    console.info = () => { };
+    console.debug = () => { };
+}
+function restoreConsole() {
+    console.log = originalConsole.log;
+    console.info = originalConsole.info;
+    console.debug = originalConsole.debug;
+}
 // --- Funções de Metadata e Scripts ---
 function generateMetaTags(metadata) {
     const tags = [];
@@ -135,46 +151,81 @@ function obfuscateData(data) {
     const hash = Buffer.from(Date.now().toString()).toString('base64').substring(0, 8);
     return `${hash}.${base64}`;
 }
-// Retorna as URLs dos scripts para o bootstrapModules do React
-// Retorna null se não encontrar scripts (indica que o build ainda não terminou)
-function getJavaScriptUrls(req) {
+// Retorna as URLs dos scripts e CSS
+// Procura em .vatts/ e .vatts/assets/
+function getBuildAssets(req) {
     const projectDir = process.cwd();
     const distDir = path_1.default.join(projectDir, '.vatts');
+    const assetsDir = path_1.default.join(distDir, 'assets');
     if (!fs_1.default.existsSync(distDir))
         return null;
+    let scripts = [];
+    let styles = [];
+    // Helper para processar arquivos de um diretório
+    const processDirectory = (directory, urlPrefix) => {
+        if (!fs_1.default.existsSync(directory))
+            return;
+        const files = fs_1.default.readdirSync(directory);
+        files.forEach(file => {
+            if (file.endsWith('.map'))
+                return; // Ignora sourcemaps
+            const fullPath = path_1.default.join(directory, file);
+            const stat = fs_1.default.statSync(fullPath);
+            if (stat.isFile()) {
+                if (file.endsWith('.js')) {
+                    scripts.push(`${urlPrefix}/${file}`);
+                }
+                else if (file.endsWith('.css')) {
+                    styles.push(`${urlPrefix}/${file}`);
+                }
+            }
+        });
+    };
     try {
+        // 1. Verificar Manifesto (se existir)
         const manifestPath = path_1.default.join(distDir, 'manifest.json');
         if (fs_1.default.existsSync(manifestPath)) {
             const manifest = JSON.parse(fs_1.default.readFileSync(manifestPath, 'utf8'));
-            const files = Object.values(manifest)
-                .filter((file) => file.endsWith('.js'))
-                .map((file) => `/_vatts/${file}`);
-            return files.length > 0 ? files : null;
+            const manifestFiles = Object.values(manifest);
+            scripts = manifestFiles
+                .filter((f) => f.endsWith('.js'))
+                .map((f) => `/_vatts/${f}`);
+            styles = manifestFiles
+                .filter((f) => f.endsWith('.css'))
+                .map((f) => `/_vatts/${f}`);
         }
         else {
-            const jsFiles = fs_1.default.readdirSync(distDir)
-                .filter(file => file.endsWith('.js') && !file.endsWith('.map'))
-                .sort((a, b) => {
+            // 2. Fallback: Scan manual de diretórios
+            // Scan na raiz .vatts/ (Geralmente entry points)
+            processDirectory(distDir, '/_vatts');
+            // Scan em .vatts/assets/ (Assets estáticos, chunks, CSS extraído)
+            processDirectory(assetsDir, '/_vatts/assets');
+            // Ordenação básica para garantir que o main carregue
+            scripts.sort((a, b) => {
                 if (a.includes('main'))
                     return -1;
                 if (b.includes('main'))
                     return 1;
                 return a.localeCompare(b);
             });
-            return jsFiles.length > 0 ? jsFiles.map(file => `/_vatts/${file}`) : null;
         }
+        if (scripts.length === 0)
+            return null;
+        return { scripts, styles };
     }
-    catch {
+    catch (e) {
+        console.error("Error loading assets:", e);
         return null;
     }
 }
-function ServerRoot({ lang, title, metaTagsHtml, initialDataScript, hotReloadScript, dataScript, children }) {
+function ServerRoot({ lang, title, metaTagsHtml, stylesHtml, initialDataScript, hotReloadScript, dataScript, children }) {
     // Concatena tudo que vai no head em uma única string
     const headContent = `
         <meta charset="utf-8" />
         <title>${title}</title>
         ${initialDataScript ? `<script>${initialDataScript}</script>` : ''}
         ${metaTagsHtml || ''}
+        ${stylesHtml || ''}
     `;
     return ((0, jsx_runtime_1.jsxs)("html", { lang: lang, children: [(0, jsx_runtime_1.jsx)("head", { dangerouslySetInnerHTML: { __html: headContent } }), (0, jsx_runtime_1.jsxs)("body", { children: [dataScript, (0, jsx_runtime_1.jsx)("div", { id: "root", children: children }), hotReloadScript && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'none' }, dangerouslySetInnerHTML: { __html: hotReloadScript } }))] })] }));
 }
@@ -182,91 +233,111 @@ async function renderAsStream({ req, res, route, params, allRoutes }) {
     const { generateMetadata } = route;
     const isProduction = !req.hwebDev;
     const hotReloadManager = req.hotReloadManager;
-    // 1. Verificar Build - Se não tiver scripts, retorna tela de Loading
-    const bootstrapScripts = getJavaScriptUrls(req);
-    if (!bootstrapScripts) {
-        res.setHeader('Content-Type', 'text/html');
-        // Usamos .end() diretamente para garantir que a resposta seja enviada sem stream
-        res.end(getBuildingHTML());
-        return;
-    }
-    // 2. Preparar Layout
-    const layoutInfo = (0, router_1.getLayout)();
-    let LayoutComponent = null;
-    if (layoutInfo) {
-        try {
-            // Recarrega o componente de layout para ter acesso à função (o router só guarda metadata)
-            const layoutModule = requireWithoutStyles(path_1.default.resolve(process.cwd(), layoutInfo.componentPath));
-            LayoutComponent = layoutModule.default;
+    // SILENCIAR CONSOLE: Inicia o silêncio para evitar logs de renderização
+    silenceConsole();
+    try {
+        // 1. Verificar Build - Se não tiver scripts, retorna tela de Loading
+        const assets = getBuildAssets(req);
+        if (!assets || assets.scripts.length === 0) {
+            // Se falhar o build, restauramos o console para o erro aparecer se necessário
+            restoreConsole();
+            res.setHeader('Content-Type', 'text/html');
+            res.end(getBuildingHTML());
+            return;
         }
-        catch (e) {
-            console.error("Error loading layout component for SSR:", e);
+        // 2. Preparar Layout
+        const layoutInfo = (0, router_1.getLayout)();
+        let LayoutComponent = null;
+        if (layoutInfo) {
+            try {
+                // Recarrega o componente de layout para ter acesso à função (o router só guarda metadata)
+                const layoutModule = requireWithoutStyles(path_1.default.resolve(process.cwd(), layoutInfo.componentPath));
+                LayoutComponent = layoutModule.default;
+            }
+            catch (e) {
+                // Usamos console.error original aqui, pois erro de layout é crítico
+                restoreConsole();
+                console.error("Error loading layout component for SSR:", e);
+                silenceConsole(); // Volta a silenciar
+            }
         }
-    }
-    // 3. Preparar Metadata
-    let metadata = { title: 'Vatts App' };
-    if (layoutInfo && layoutInfo.metadata) {
-        metadata = { ...metadata, ...layoutInfo.metadata };
-    }
-    if (generateMetadata) {
-        const routeMetadata = await Promise.resolve(generateMetadata(params, req));
-        metadata = { ...metadata, ...routeMetadata };
-    }
-    // 4. Preparar Dados Iniciais
-    const results = await Promise.all(allRoutes.map(async (r) => {
-        let routeMeta = {};
-        if (r.generateMetadata) {
-            routeMeta = await r.generateMetadata(params, req);
+        // 3. Preparar Metadata
+        let metadata = { title: 'Vatts App' };
+        if (layoutInfo && layoutInfo.metadata) {
+            metadata = { ...metadata, ...layoutInfo.metadata };
         }
-        return {
-            pattern: r.pattern,
-            componentPath: r.componentPath,
-            metadata: routeMeta,
-        };
-    }));
-    const initialData = {
-        routes: results,
-        initialComponentPath: route.componentPath,
-        initialParams: params,
-    };
-    // Scripts
-    const obfuscatedData = obfuscateData(initialData);
-    const hotReloadScript = !isProduction && hotReloadManager ? hotReloadManager.getClientScript() : '';
-    const metaTagsHtml = generateMetaTags(metadata);
-    const htmlLang = metadata.language || 'pt-BR';
-    // 5. Componente da Página Atual
-    const PageComponent = route.component;
-    // Monta a árvore da aplicação
-    let AppTree = (0, jsx_runtime_1.jsx)(PageComponent, { params: params });
-    if (LayoutComponent) {
-        AppTree = (0, jsx_runtime_1.jsx)(LayoutComponent, { children: AppTree });
-    }
-    // 6. Streaming
-    return new Promise((resolve, reject) => {
-        let didError = false;
-        const { pipe } = (0, server_1.renderToPipeableStream)((0, jsx_runtime_1.jsx)(ServerRoot, { lang: htmlLang, title: metadata.title || 'Vatts.js', metaTagsHtml: metaTagsHtml, 
-            // Recriando o script de dados exatamente como o client espera
-            initialDataScript: `/* Data Injection */`, hotReloadScript: hotReloadScript, dataScript: (0, jsx_runtime_1.jsx)("script", { id: "__vatts_data__", type: "text/plain", "data-h": obfuscatedData }), children: AppTree }), {
-            // Usar bootstrapModules para scripts tipo módulo (ESM)
-            bootstrapModules: bootstrapScripts,
-            onShellReady() {
-                res.setHeader('Content-Type', 'text/html');
-                pipe(res);
-                resolve();
-            },
-            onShellError(error) {
-                console.error('Streaming Shell Error:', error);
-                res.statusCode = 500;
-                res.setHeader('Content-Type', 'text/html');
-                res.end('<h1>Internal Server Error</h1>');
-                resolve();
-            },
-            onError(error) {
-                didError = true;
-                console.error('Streaming Error:', error);
+        if (generateMetadata) {
+            const routeMetadata = await Promise.resolve(generateMetadata(params, req));
+            metadata = { ...metadata, ...routeMetadata };
+        }
+        // 4. Preparar Dados Iniciais
+        const results = await Promise.all(allRoutes.map(async (r) => {
+            let routeMeta = {};
+            if (r.generateMetadata) {
+                routeMeta = await r.generateMetadata(params, req);
             }
+            return {
+                pattern: r.pattern,
+                componentPath: r.componentPath,
+                metadata: routeMeta,
+            };
+        }));
+        const initialData = {
+            routes: results,
+            initialComponentPath: route.componentPath,
+            initialParams: params,
+        };
+        // Scripts e Estilos
+        const obfuscatedData = obfuscateData(initialData);
+        const hotReloadScript = !isProduction && hotReloadManager ? hotReloadManager.getClientScript() : '';
+        const metaTagsHtml = generateMetaTags(metadata);
+        const htmlLang = metadata.language || 'pt-BR';
+        // Gera tags de estilo para o head
+        const stylesHtml = assets.styles.map(styleUrl => `<link rel="stylesheet" href="${styleUrl}">`).join('\n');
+        // 5. Componente da Página Atual
+        const PageComponent = route.component;
+        // Monta a árvore da aplicação
+        let AppTree = (0, jsx_runtime_1.jsx)(PageComponent, { params: params });
+        if (LayoutComponent) {
+            AppTree = (0, jsx_runtime_1.jsx)(LayoutComponent, { children: AppTree });
+        }
+        // 6. Streaming
+        return new Promise((resolve, reject) => {
+            let didError = false;
+            const { pipe } = (0, server_1.renderToPipeableStream)((0, jsx_runtime_1.jsx)(ServerRoot, { lang: htmlLang, title: metadata.title || 'Vatts.js', metaTagsHtml: metaTagsHtml, stylesHtml: stylesHtml, 
+                // Recriando o script de dados exatamente como o client espera
+                initialDataScript: `/* Data Injection */`, hotReloadScript: hotReloadScript, dataScript: (0, jsx_runtime_1.jsx)("script", { id: "__vatts_data__", type: "text/plain", "data-h": obfuscatedData }), children: AppTree }), {
+                // Usar bootstrapModules para scripts tipo módulo (ESM)
+                bootstrapModules: assets.scripts,
+                onShellReady() {
+                    // Restaurar console assim que o shell estiver pronto (cabeçalho enviado)
+                    restoreConsole();
+                    res.setHeader('Content-Type', 'text/html');
+                    pipe(res);
+                    resolve();
+                },
+                onShellError(error) {
+                    restoreConsole(); // Restaura para mostrar o erro real
+                    console.error('Streaming Shell Error:', error);
+                    res.statusCode = 500;
+                    res.setHeader('Content-Type', 'text/html');
+                    res.end('<h1>Internal Server Error</h1>');
+                    resolve();
+                },
+                onError(error) {
+                    didError = true;
+                    // Log de erro de stream ainda é importante, mas podemos filtrar se quiser
+                    // Aqui mantemos o log de erro original do React que vai para stderr
+                    console.error('Streaming Error:', error);
+                }
+            });
         });
-    });
+    }
+    catch (err) {
+        restoreConsole();
+        console.error("Critical Render Error:", err);
+        throw err;
+    }
 }
 // Mantemos a função antiga para compatibilidade
 async function render(options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vatts",
-  "version": "1.0.5-alpha.2",
+  "version": "1.0.5-alpha.3",
   "description": "Vatts.js is a high-level framework for building web applications with ease and speed. It provides a robust set of tools and features to streamline development and enhance productivity.",
   "types": "dist/index.d.ts",
   "author": "itsmuzin",