vatts 2.2.6 → 2.3.0-canary.1

package/dist/frameworks/react/entry.client.js

@@ -0,0 +1,211 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * This file is part of the Vatts.js Project.
+ * ...
+ */
+const react_1 = __importStar(require("react"));
+const client_1 = require("react-dom/client");
+const clientRouter_ts_1 = require("../../client/clientRouter.js");
+const FrontCore_1 = require("../FrontCore");
+require("../themes/VattsDevBadge");
+require("../themes/ErrorModal");
+function App({ componentMap, routes, initialComponentPath, initialParams, layoutComponent }) {
+    const [hmrTimestamp, setHmrTimestamp] = (0, react_1.useState)(Date.now());
+    const pendingHmrReadyRef = (0, react_1.useRef)(null);
+    const [buildError, setBuildError] = (0, react_1.useState)(() => {
+        const initialError = window.__VATTS_BUILD_ERROR__ || null;
+        if (initialError)
+            console.warn('[Vatts React] ⚠️ Erro de build inicial detectado:', initialError);
+        return initialError;
+    });
+    const [isErrorOpen, setIsErrorOpen] = (0, react_1.useState)(() => !!window.__VATTS_BUILD_ERROR__);
+    const devBadgeRef = (0, react_1.useRef)(null);
+    const errorModalRef = (0, react_1.useRef)(null);
+    // Setup de eventos compartilhados
+    (0, react_1.useEffect)(() => {
+        const cleanupErrorEvents = (0, FrontCore_1.setupBuildErrorEvents)((err) => { setBuildError(err); setIsErrorOpen(true); }, () => { setBuildError(null); setIsErrorOpen(false); });
+        const cleanupHmrEvents = (0, FrontCore_1.setupHMREvents)((file, timestamp) => {
+            setHmrTimestamp(timestamp);
+            pendingHmrReadyRef.current = { file, timestamp };
+        });
+        return () => {
+            cleanupErrorEvents();
+            cleanupHmrEvents();
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        (0, FrontCore_1.dispatchHmrReady)(pendingHmrReadyRef.current);
+        pendingHmrReadyRef.current = null;
+    }, [hmrTimestamp]);
+    const handleCopyLog = (0, react_1.useCallback)(() => (0, FrontCore_1.copyBuildError)(buildError), [buildError]);
+    // Sincroniza refs dos Web Components
+    (0, react_1.useEffect)(() => {
+        const badge = devBadgeRef.current;
+        const modal = errorModalRef.current;
+        if (badge)
+            badge.setAttribute('has-build-error', buildError ? 'true' : 'false');
+        if (modal) {
+            modal.error = buildError;
+            modal.isOpen = isErrorOpen;
+        }
+    }, [buildError, isErrorOpen]);
+    (0, react_1.useEffect)(() => {
+        const badge = devBadgeRef.current;
+        const modal = errorModalRef.current;
+        const handleBadgeClick = () => setIsErrorOpen(true);
+        const handleModalClose = () => setIsErrorOpen(false);
+        if (badge)
+            badge.addEventListener('click-build-error', handleBadgeClick);
+        if (modal) {
+            modal.addEventListener('close-modal', handleModalClose);
+            modal.addEventListener('copy-log', handleCopyLog);
+        }
+        return () => {
+            if (badge)
+                badge.removeEventListener('click-build-error', handleBadgeClick);
+            if (modal) {
+                modal.removeEventListener('close-modal', handleModalClose);
+                modal.removeEventListener('copy-log', handleCopyLog);
+            }
+        };
+    }, [handleCopyLog]);
+    // Roteamento
+    const getMatch = (0, react_1.useCallback)((path) => (0, FrontCore_1.findRouteForPath)(path, routes), [routes]);
+    const [CurrentPageComponent, setCurrentPageComponent] = (0, react_1.useState)(() => {
+        const currentPath = window.location.pathname.replace("index.html", '');
+        const match = getMatch(currentPath);
+        return match ? componentMap[match.componentPath] : null;
+    });
+    const [params, setParams] = (0, react_1.useState)(() => {
+        const currentPath = window.location.pathname.replace("index.html", '');
+        const match = getMatch(currentPath);
+        return match ? match.params : {};
+    });
+    const updateRoute = (0, react_1.useCallback)(() => {
+        const currentPath = clientRouter_ts_1.router.pathname.replace("index.html", '');
+        const match = getMatch(currentPath);
+        if (match) {
+            setCurrentPageComponent(() => componentMap[match.componentPath]);
+            setParams(match.params);
+            (0, FrontCore_1.updateDocumentTitle)(match.metadata?.title);
+        }
+        else {
+            console.warn(`[Vatts React] ⚠️ Rota não encontrada (404): ${currentPath}`);
+            setCurrentPageComponent(null);
+            setParams({});
+        }
+    }, [clientRouter_ts_1.router.pathname, getMatch, componentMap]);
+    (0, react_1.useEffect)(() => {
+        const handlePopState = () => updateRoute();
+        window.addEventListener('popstate', handlePopState);
+        const unsubscribe = clientRouter_ts_1.router.subscribe(updateRoute);
+        return () => {
+            window.removeEventListener('popstate', handlePopState);
+            unsubscribe();
+        };
+    }, [updateRoute]);
+    // Renderização
+    let resolvedContent;
+    if (!CurrentPageComponent || initialComponentPath === '__404__') {
+        const NotFoundComponent = window.__VATTS_NOT_FOUND__;
+        let NotFoundContent;
+        if (NotFoundComponent) {
+            NotFoundContent = react_1.default.createElement(NotFoundComponent, null);
+        }
+        else {
+            const { getDefaultNotFound } = window.__VATTS_DEFAULT_NOT_FOUND__;
+            NotFoundContent = react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: getDefaultNotFound() } });
+        }
+        resolvedContent = typeof layoutComponent === "function"
+            ? react_1.default.createElement(layoutComponent, { children: NotFoundContent })
+            : NotFoundContent;
+    }
+    else {
+        const PageContent = react_1.default.createElement(CurrentPageComponent, { key: `page-${hmrTimestamp}`, params: params });
+        resolvedContent = typeof layoutComponent === "function"
+            ? react_1.default.createElement(layoutComponent, { children: PageContent })
+            : react_1.default.createElement("div", null, PageContent);
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        resolvedContent,
+        process.env.NODE_ENV !== 'production' ? (react_1.default.createElement("vatts-dev-badge", { ref: devBadgeRef })) : null,
+        react_1.default.createElement("vatts-error-modal", { ref: errorModalRef })));
+}
+// --- Inicialização do Cliente ---
+function initializeClient() {
+    try {
+        // Resolve a rota e params inicial calculando diretamente no lado do cliente
+        // a partir da injeção do esbuild!
+        const routes = window.__VATTS_ROUTES__ || [];
+        const currentPath = window.location.pathname.replace("index.html", '');
+        const match = (0, FrontCore_1.findRouteForPath)(currentPath, routes);
+        const initialComponentPath = match ? match.componentPath : '__404__';
+        const initialParams = match ? match.params : {};
+        const componentMap = {};
+        if (window.__VATTS_COMPONENTS__) {
+            Object.assign(componentMap, window.__VATTS_COMPONENTS__);
+        }
+        else {
+            console.warn('[Vatts React] ⚠️ No components found in window.__VATTS_COMPONENTS__');
+        }
+        const container = document.getElementById('root');
+        if (!container)
+            throw new Error('Container #root not found.');
+        if (window.__VATTS_ROOT__) {
+            console.log('[Vatts React] ♻️ HMR detectado: Limpando a root do React...');
+            try {
+                window.__VATTS_ROOT__.unmount();
+                container.innerHTML = '';
+            }
+            catch (e) {
+                console.warn('[Vatts React] ⚠️ Warning during unmount:', e);
+            }
+        }
+        const root = (0, client_1.createRoot)(container);
+        window.__VATTS_ROOT__ = root;
+        root.render(react_1.default.createElement(App, { componentMap: componentMap, routes: routes, initialComponentPath: initialComponentPath, initialParams: initialParams, layoutComponent: window.__VATTS_LAYOUT__ }));
+    }
+    catch (error) {
+        (0, FrontCore_1.renderCriticalError)(error, 'React');
+    }
+}
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeClient);
+}
+else {
+    setTimeout(initializeClient, 0);
+}

package/dist/frameworks/react/react-elements.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'vatts-dev-badge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | any;
+            'vatts-error-modal': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | any;
+        }
+    }
+}

package/dist/{react → frameworks/renderers}/renderer-react.d.ts

@@ -1,5 +1,5 @@
-import { RouteConfig } from '../types';
-import type { GenericRequest } from '../types/framework';
+import { RouteConfig } from '../../types.ts';
+import type { GenericRequest } from '../../types/framework.ts';
 interface RenderOptions {
     req: GenericRequest;
     res: any;

package/dist/{react → frameworks/renderers}/renderer-react.js

@@ -22,36 +22,35 @@ exports.render = render;
  */
 const react_1 = __importDefault(require("react"));
 const server_1 = require("react-dom/server");
-const router_1 = require("../router");
+const router_ts_1 = require("../../router.js");
 const path_1 = __importDefault(require("path"));
-const common_1 = require("../renderers/common");
-const BuildingPage_1 = __importDefault(require("../react/BuildingPage"));
-const server_error_1 = __importDefault(require("../react/server-error"));
+const common_ts_1 = require("../../renderers/common.js");
+// Importa os geradores de HTML Vanilla
+const BuildingPage_1 = require("../themes/BuildingPage");
+const ServerError_1 = require("../themes/ServerError");
 function buildShellHtml(options) {
-    const { lang, title, metaTagsHtml, stylesHtml, hotReloadScript, obfuscatedData, scriptsHtml } = options;
-    return `<!DOCTYPE html>
-<html lang="${lang}">
-<head>
-    <meta charset="utf-8" />
-    <title>${title}</title>
-    ${metaTagsHtml || ''}
-    ${stylesHtml || ''}
-</head>
-<body>
-    <script id="__vatts_data__" type="text/plain" data-h="${obfuscatedData}"></script>
-    <div id="root"></div>
-    ${scriptsHtml || ''}
-    ${hotReloadScript ? `<div style="display:none">${hotReloadScript}</div>` : ''}
-</body>
+    const { lang, title, metaTagsHtml, stylesHtml, hotReloadScript, scriptsHtml } = options;
+    return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+    <meta charset="utf-8" />
+    <title>${title}</title>
+    ${metaTagsHtml || ''}
+    ${stylesHtml || ''}
+</head>
+<body>
+    
+    <div id="root"></div>
+    ${scriptsHtml || ''}
+    ${hotReloadScript ? `<div style="display:none">${hotReloadScript}</div>` : ''}
+</body>
 </html>`;
 }
 async function sendReactSsrFallback(options) {
-    const { req, res, isProduction, error, assets, lang, title, metaTagsHtml, stylesHtml, hotReloadScript, obfuscatedData, } = options;
+    const { req, res, isProduction, error, assets, lang, title, metaTagsHtml, stylesHtml, hotReloadScript, } = options;
     const scriptsHtml = assets.scripts
         .map((src) => `<script type="module" src="${src}"></script>`)
         .join('\n');
-    // No DEV a gente remove scripts do head pra garantir que só aparece a página de erro.
-    const safeMetaTagsHtmlForDev = (0, common_1.stripScriptTags)(metaTagsHtml);
     if (res.headersSent) {
         try {
             res.end();
@@ -70,50 +69,41 @@ async function sendReactSsrFallback(options) {
             metaTagsHtml,
             stylesHtml,
             hotReloadScript: '',
-            obfuscatedData,
             scriptsHtml,
         }));
         return;
     }
-    const err = (0, common_1.toError)(error);
-    return new Promise((resolve) => {
-        const { pipe } = (0, server_1.renderToPipeableStream)(react_1.default.createElement(ServerRoot, { lang: lang, title: title, metaTagsHtml: safeMetaTagsHtmlForDev, stylesHtml: stylesHtml, initialDataScript: `/* Data Injection */`, hotReloadScript: '', dataScript: react_1.default.createElement("script", { id: "__vatts_data__", type: "text/plain", "data-h": obfuscatedData }) },
-            react_1.default.createElement(server_error_1.default, { error: err, requestUrl: (0, common_1.getRequestUrl)(req), hint: "SSR failed to render this route. See the error below." })), {
-            onAllReady() {
-                pipe(res);
-                resolve();
-            },
-            onError() {
-                // ignore (já estamos numa tela de erro)
-            },
-            onShellError() {
-                // fallback extremo
-                res.end('<h1>SSR Error</h1>');
-                resolve();
-            },
-        });
+    const err = (0, common_ts_1.toError)(error);
+    // Gera o HTML do Erro via Vanilla JS
+    let errorHtml = (0, ServerError_1.getServerErrorHtml)({
+        title: title || 'SSR Error',
+        error: err,
+        requestUrl: (0, common_ts_1.getRequestUrl)(req),
+        hint: "SSR failed to render this route. See the error below."
     });
+    // Injeta o script de Hot Reload no HTML cru para continuar escutando mudanças
+    if (hotReloadScript) {
+        errorHtml = errorHtml.replace('</body>', `<div style="display:none">${hotReloadScript}</div></body>`);
+    }
+    res.end(errorHtml);
+    return Promise.resolve();
 }
-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 || ''}
+function ServerRoot({ lang, title, metaTagsHtml, stylesHtml, initialDataScript, hotReloadScript, children }) {
+    const headContent = `
+        <meta charset="utf-8" />
+        <title>${title}</title>
+        ${initialDataScript ? `<script>${initialDataScript}</script>` : ''}
+        ${metaTagsHtml || ''}
+        ${stylesHtml || ''}
     `;
     return (react_1.default.createElement("html", { lang: lang },
         react_1.default.createElement("head", { dangerouslySetInnerHTML: { __html: headContent } }),
         react_1.default.createElement("body", null,
-            dataScript,
             react_1.default.createElement("div", { id: "root" }, children),
             hotReloadScript && (react_1.default.createElement("div", { style: { display: 'none' }, dangerouslySetInnerHTML: { __html: hotReloadScript } })))));
 }
 async function render({ req, res, route, params, allRoutes }) {
-    // ATENÇÃO: Polyfill executado aqui para garantir que window/document existam
-    // antes de qualquer lógica de componente ser executada.
-    (0, common_1.polyfillBrowserEnv)();
+    (0, common_ts_1.polyfillBrowserEnv)();
     const { generateMetadata } = route;
     const isProduction = !req.hwebDev;
     const hotReloadManager = req.hotReloadManager;
@@ -121,24 +111,19 @@ async function render({ req, res, route, params, allRoutes }) {
     let metadata = { title: 'Vatts App' };
     let layoutInfo = null;
     try {
-        // 1. Verificar Build - Se não tiver scripts, retorna tela de Loading
-        assets = (0, common_1.getBuildAssets)();
+        assets = (0, common_ts_1.getBuildAssets)();
+        // 1. Verificar Build - Envia a página pura em Vanilla JS se não terminou de compilar
         if (!assets || assets.scripts.length === 0) {
-            const { pipe } = (0, server_1.renderToPipeableStream)(react_1.default.createElement(BuildingPage_1.default, null), {
-                onShellReady() {
-                    res.setHeader('Content-Type', 'text/html; charset=utf-8');
-                    pipe(res);
-                },
-            });
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.end((0, BuildingPage_1.getBuildingScreenHtml)());
             return;
         }
         // 2. Preparar Layout
-        layoutInfo = (0, router_1.getLayout)();
+        layoutInfo = (0, router_ts_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 = (0, common_1.requireWithoutStyles)(path_1.default.resolve(process.cwd(), layoutInfo.componentPath));
+                const layoutModule = (0, common_ts_1.requireWithoutStyles)(path_1.default.resolve(process.cwd(), layoutInfo.componentPath));
                 LayoutComponent = layoutModule.default;
             }
             catch (e) {
@@ -173,12 +158,9 @@ async function render({ req, res, route, params, allRoutes }) {
             initialComponentPath: route.componentPath,
             initialParams: params,
         };
-        // Scripts e Estilos
-        const obfuscatedData = (0, common_1.obfuscateData)(initialData);
         const hotReloadScript = !isProduction && hotReloadManager ? hotReloadManager.getClientScript() : '';
-        const metaTagsHtml = (0, common_1.generateMetaTags)(metadata);
+        const metaTagsHtml = (0, common_ts_1.generateMetaTags)(metadata);
         const htmlLang = metadata.language || 'pt-BR';
-        // Gera tags de estilo para o head, garantindo a extensão .css no final para evitar strict MIME checks
         const stylesHtml = assets.styles.map(styleUrl => {
             const [basePath, query] = styleUrl.split('?');
             const finalUrl = !basePath.endsWith('.css') ? `${basePath}.css${query ? `?${query}` : ''}` : styleUrl;
@@ -186,16 +168,15 @@ async function render({ req, res, route, params, allRoutes }) {
         }).join('\n');
         // 5. Componente da Página Atual
         const PageComponent = route.component;
-        // Monta a árvore da aplicação
         let AppTree = react_1.default.createElement(PageComponent, { params: params });
         if (LayoutComponent) {
             AppTree = react_1.default.createElement(LayoutComponent, null, AppTree);
         }
-        // 6. Streaming (segura até onAllReady para conseguir fallback sem HTML parcial)
+        // 6. Streaming React
         return new Promise((resolve) => {
             let didError = false;
             let firstError = null;
-            const stream = (0, server_1.renderToPipeableStream)(react_1.default.createElement(ServerRoot, { lang: htmlLang, title: metadata.title || 'Vatts.js', metaTagsHtml: metaTagsHtml, stylesHtml: stylesHtml, initialDataScript: `/* Data Injection */`, hotReloadScript: hotReloadScript, dataScript: react_1.default.createElement("script", { id: "__vatts_data__", type: "text/plain", "data-h": obfuscatedData }) }, AppTree), {
+            const stream = (0, server_1.renderToPipeableStream)(react_1.default.createElement(ServerRoot, { lang: htmlLang, title: metadata.title || 'Vatts.js', metaTagsHtml: metaTagsHtml, stylesHtml: stylesHtml, initialDataScript: `/* Data Injection */`, hotReloadScript: hotReloadScript }, AppTree), {
                 bootstrapModules: assets.scripts,
                 onAllReady() {
                     if (didError) {
@@ -211,7 +192,6 @@ async function render({ req, res, route, params, allRoutes }) {
                             metaTagsHtml,
                             stylesHtml,
                             hotReloadScript,
-                            obfuscatedData,
                         }).then(resolve);
                         return;
                     }
@@ -235,11 +215,10 @@ async function render({ req, res, route, params, allRoutes }) {
     }
     catch (err) {
         if (!assets) {
-            // sem assets não dá pra montar shell completo; evita crash
             if (!res.headersSent) {
                 res.statusCode = 500;
                 res.setHeader('Content-Type', 'text/html; charset=utf-8');
-                res.end(isProduction ? '' : '<h1>SSR Error</h1>');
+                res.end(isProduction ? '' : (0, ServerError_1.getServerErrorHtml)({ error: err, title: 'Critical SSR Error' }));
             }
             return;
         }
@@ -253,7 +232,7 @@ async function render({ req, res, route, params, allRoutes }) {
             title: metadata.title || 'Vatts.js',
             metaTagsHtml: (() => {
                 try {
-                    return (0, common_1.generateMetaTags)(metadata);
+                    return (0, common_ts_1.generateMetaTags)(metadata);
                 }
                 catch {
                     return '';
@@ -265,18 +244,6 @@ async function render({ req, res, route, params, allRoutes }) {
                 return `<link rel="stylesheet" href="${finalUrl}">`;
             }).join('\n'),
             hotReloadScript: !isProduction && hotReloadManager ? hotReloadManager.getClientScript() : '',
-            obfuscatedData: (() => {
-                try {
-                    return (0, common_1.obfuscateData)({
-                        routes: [],
-                        initialComponentPath: route.componentPath,
-                        initialParams: params,
-                    });
-                }
-                catch {
-                    return '';
-                }
-            })(),
         });
     }
 }

package/dist/{vue → frameworks/renderers}/renderer.vue.d.ts

@@ -1,5 +1,5 @@
-import { RouteConfig } from '../types';
-import type { GenericRequest } from '../types/framework';
+import { RouteConfig } from '../../types.ts';
+import type { GenericRequest } from '../../types/framework.ts';
 interface RenderOptions {
     req: GenericRequest;
     res: any;