vatts 1.0.2-alpha.3 → 1.0.2-alpha.5

package/dist/renderer.js

@@ -3,56 +3,70 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAsStream = renderAsStream;
 exports.render = render;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
 const router_1 = require("./router");
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
-// Função para gerar todas as meta tags
+// --- Helpers de Servidor ---
+// Função auxiliar para importar módulos ignorando CSS (mesma lógica do router.ts)
+function requireWithoutStyles(modulePath) {
+    const extensions = ['.css', '.scss', '.sass', '.less', '.png', '.jpg', '.jpeg', '.gif', '.svg'];
+    const originalHandlers = {};
+    extensions.forEach(ext => {
+        originalHandlers[ext] = require.extensions[ext];
+        require.extensions[ext] = (m, filename) => {
+            m.exports = {};
+        };
+    });
+    try {
+        const resolved = require.resolve(modulePath);
+        if (require.cache[resolved])
+            delete require.cache[resolved];
+        return require(modulePath);
+    }
+    catch (e) {
+        return require(modulePath);
+    }
+    finally {
+        extensions.forEach(ext => {
+            if (originalHandlers[ext]) {
+                require.extensions[ext] = originalHandlers[ext];
+            }
+            else {
+                delete require.extensions[ext];
+            }
+        });
+    }
+}
+// --- Funções de Metadata e Scripts ---
 function generateMetaTags(metadata) {
     const tags = [];
-    // Charset
     tags.push(`<meta charset="${metadata.charset || 'UTF-8'}">`);
-    // Viewport
     tags.push(`<meta name="viewport" content="${metadata.viewport || 'width=device-width, initial-scale=1.0'}">`);
-    // Description
-    if (metadata.description) {
+    if (metadata.description)
         tags.push(`<meta name="description" content="${metadata.description}">`);
-    }
-    // Keywords
     if (metadata.keywords) {
-        const keywordsStr = Array.isArray(metadata.keywords)
-            ? metadata.keywords.join(', ')
-            : metadata.keywords;
+        const keywordsStr = Array.isArray(metadata.keywords) ? metadata.keywords.join(', ') : metadata.keywords;
         tags.push(`<meta name="keywords" content="${keywordsStr}">`);
     }
-    // Author
-    if (metadata.author) {
+    if (metadata.author)
         tags.push(`<meta name="author" content="${metadata.author}">`);
-    }
-    // Theme color
-    if (metadata.themeColor) {
+    if (metadata.themeColor)
         tags.push(`<meta name="theme-color" content="${metadata.themeColor}">`);
-    }
-    // Robots
-    if (metadata.robots) {
+    if (metadata.robots)
         tags.push(`<meta name="robots" content="${metadata.robots}">`);
-    }
-    // Canonical
-    if (metadata.canonical) {
+    if (metadata.canonical)
         tags.push(`<link rel="canonical" href="${metadata.canonical}">`);
-    }
-    // Favicon
-    if (metadata.favicon) {
+    if (metadata.favicon)
         tags.push(`<link rel="icon" href="${metadata.favicon}">`);
-    }
-    // Apple Touch Icon
-    if (metadata.appleTouchIcon) {
+    // Apple & Manifest
+    if (metadata.appleTouchIcon)
         tags.push(`<link rel="apple-touch-icon" href="${metadata.appleTouchIcon}">`);
-    }
-    // Manifest
-    if (metadata.manifest) {
+    if (metadata.manifest)
         tags.push(`<link rel="manifest" href="${metadata.manifest}">`);
-    }
     // Open Graph
     if (metadata.openGraph) {
         const og = metadata.openGraph;
@@ -69,11 +83,9 @@ function generateMetaTags(metadata) {
         if (og.locale)
             tags.push(`<meta property="og:locale" content="${og.locale}">`);
         if (og.image) {
-            if (typeof og.image === 'string') {
-                tags.push(`<meta property="og:image" content="${og.image}">`);
-            }
-            else {
-                tags.push(`<meta property="og:image" content="${og.image.url}">`);
+            const imgUrl = typeof og.image === 'string' ? og.image : og.image.url;
+            tags.push(`<meta property="og:image" content="${imgUrl}">`);
+            if (typeof og.image !== 'string') {
                 if (og.image.width)
                     tags.push(`<meta property="og:image:width" content="${og.image.width}">`);
                 if (og.image.height)
@@ -101,7 +113,7 @@ function generateMetaTags(metadata) {
         if (tw.imageAlt)
             tags.push(`<meta name="twitter:image:alt" content="${tw.imageAlt}">`);
     }
-    // Custom meta tags
+    // Custom Meta Tags
     if (metadata.other) {
         for (const [key, value] of Object.entries(metadata.other)) {
             tags.push(`<meta name="${key}" content="${value}">`);
@@ -109,39 +121,83 @@ function generateMetaTags(metadata) {
     }
     return tags.join('\n');
 }
-// Função para ofuscar dados (não é criptografia, apenas ofuscação)
 function obfuscateData(data) {
-    // 1. Serializa para JSON minificado
     const jsonStr = JSON.stringify(data);
-    // 2. Converte para base64
     const base64 = Buffer.from(jsonStr).toString('base64');
-    // 3. Adiciona um hash fake no início para parecer um token
     const hash = Buffer.from(Date.now().toString()).toString('base64').substring(0, 8);
     return `${hash}.${base64}`;
 }
-// Função para criar script ofuscado
-function createInitialDataScript(data) {
-    const obfuscated = obfuscateData(data);
-    // Usa um atributo data-* ao invés de JSON visível
-    return `<script id="__vatts_data__" type="text/plain" data-h="${obfuscated}"></script>`;
+// 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) {
+    const projectDir = process.cwd();
+    const distDir = path_1.default.join(projectDir, '.vatts');
+    if (!fs_1.default.existsSync(distDir))
+        return null;
+    try {
+        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;
+        }
+        else {
+            const jsFiles = fs_1.default.readdirSync(distDir)
+                .filter(file => file.endsWith('.js') && !file.endsWith('.map'))
+                .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;
+        }
+    }
+    catch {
+        return null;
+    }
+}
+function ServerRoot({ lang, title, metaTagsHtml, initialDataScript, hotReloadScript, dataScript, children }) {
+    return ((0, jsx_runtime_1.jsxs)("html", { lang: lang, children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("title", { children: title }), (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: initialDataScript } }), (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: metaTagsHtml } })] }), (0, jsx_runtime_1.jsxs)("body", { children: [dataScript, (0, jsx_runtime_1.jsx)("div", { id: "root", children: children }), hotReloadScript && (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: hotReloadScript } })] })] }));
 }
-async function render({ req, route, params, allRoutes }) {
+async function renderAsStream({ req, res, route, params, allRoutes }) {
     const { generateMetadata } = route;
-    // Pega a opção dev e hot reload manager do req
     const isProduction = !req.hwebDev;
     const hotReloadManager = req.hotReloadManager;
-    // Pega o layout se existir
-    const layout = (0, router_1.getLayout)();
-    let metadata = { title: 'App hweb' };
-    // Primeiro usa o metadata do layout se existir
-    if (layout && layout.metadata) {
-        metadata = { ...metadata, ...layout.metadata };
+    // 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;
+        }
+        catch (e) {
+            console.error("Error loading layout component for SSR:", e);
+        }
+    }
+    // 3. Preparar Metadata
+    let metadata = { title: 'Vatts App' };
+    if (layoutInfo && layoutInfo.metadata) {
+        metadata = { ...metadata, ...layoutInfo.metadata };
     }
-    // Depois sobrescreve com metadata específico da rota se existir
     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) {
@@ -153,99 +209,61 @@ async function render({ req, route, params, allRoutes }) {
             metadata: routeMeta,
         };
     }));
-    // Prepara os dados para injetar na janela do navegador
     const initialData = {
         routes: results,
         initialComponentPath: route.componentPath,
         initialParams: params,
     };
-    // Cria script JSON limpo
-    const initialDataScript = createInitialDataScript(initialData);
-    // Script de hot reload apenas em desenvolvimento
-    const hotReloadScript = !isProduction && hotReloadManager
-        ? hotReloadManager.getClientScript()
-        : '';
-    // Gera todas as meta tags
-    const metaTags = generateMetaTags(metadata);
-    // Determina quais arquivos JavaScript carregar
-    const jsFiles = getJavaScriptFiles(req);
+    // Scripts
+    const obfuscatedData = obfuscateData(initialData);
+    const hotReloadScript = !isProduction && hotReloadManager ? hotReloadManager.getClientScript() : '';
+    const metaTagsHtml = generateMetaTags(metadata);
     const htmlLang = metadata.language || 'pt-BR';
-    // HTML base sem SSR - apenas o container e scripts para client-side rendering
-    return `<!DOCTYPE html>
-<html lang="${htmlLang}">
-<head>
-${metaTags}
-<title>${metadata.title || 'Vatts.js'}</title>
-</head>
-<body>
-<div id="root"></div>
-${initialDataScript}
-${jsFiles}
-${hotReloadScript}
-</body>
-</html>`;
-}
-// Função para determinar quais arquivos JavaScript carregar
-function getJavaScriptFiles(req) {
-    const projectDir = process.cwd();
-    const distDir = path_1.default.join(projectDir, '.vatts');
-    // Verifica se o diretório de build existe
-    if (!fs_1.default.existsSync(distDir)) {
-        // Diretório não existe - build ainda não foi executado
-        return getBuildingHTML();
+    // 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 });
     }
-    try {
-        // Verifica se existe um manifesto de chunks (gerado pelo ESBuild com splitting)
-        const manifestPath = path_1.default.join(distDir, 'manifest.json');
-        if (fs_1.default.existsSync(manifestPath)) {
-            // Modo chunks - carrega todos os arquivos necessários
-            const manifest = JSON.parse(fs_1.default.readFileSync(manifestPath, 'utf8'));
-            const scripts = Object.values(manifest)
-                .filter((file) => file.endsWith('.js'))
-                .map((file) => `<script type="module" src="/_vatts/${file}"></script>`)
-                .join('');
-            // Se não há arquivos JS no manifesto, build em andamento
-            if (!scripts) {
-                return getBuildingHTML();
-            }
-            return scripts;
-        }
-        else {
-            // Verifica se existem múltiplos arquivos JS (chunks sem manifesto)
-            const jsFiles = fs_1.default.readdirSync(distDir)
-                .filter(file => file.endsWith('.js') && !file.endsWith('.map'))
-                .sort((a, b) => {
-                // Ordena para carregar arquivos principais primeiro
-                if (a.includes('main'))
-                    return -1;
-                if (b.includes('main'))
-                    return 1;
-                if (a.includes('vendor') || a.includes('react'))
-                    return -1;
-                if (b.includes('vendor') || b.includes('react'))
-                    return 1;
-                return a.localeCompare(b);
-            });
-            // @ts-ignore
-            if (jsFiles.length >= 1) {
-                // Modo chunks sem manifesto
-                return jsFiles
-                    .map(file => `<script type="module" src="/_vatts/${file}"></script>`)
-                    .join('');
+    // 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);
             }
-            else {
-                // Nenhum arquivo JS encontrado - build em andamento ou erro
-                return getBuildingHTML();
-            }
-        }
-    }
-    catch (error) {
-        // Erro ao ler diretório - build em andamento ou erro
-        return getBuildingHTML();
-    }
+        });
+    });
+}
+// Mantemos a função antiga para compatibilidade
+async function render(options) {
+    return "";
 }
 // Função para retornar HTML de "Build em andamento" com auto-refresh
 function getBuildingHTML() {
+    let version = "1.0.0";
+    try {
+        version = require("../package.json").version;
+    }
+    catch (e) { }
     return `
 <!DOCTYPE html>
 <html lang="en">
@@ -489,7 +507,7 @@ function getBuildingHTML() {
                 <span>Building...</span>
                 <div class="status-active">
                     <div class="dot"></div>
-                    v${require("../package.json").version}
+                    v${version}
                 </div>
             </div>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vatts",
-  "version": "1.0.2-alpha.3",
+  "version": "1.0.2-alpha.5",
   "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",