vatts 2.2.5 → 2.3.0-canary

package/README.md

@@ -1,13 +1,13 @@
 <div align="center">  
   <picture>  
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/mfrazlab/vatts-docs/master/public/logo.png">  
-      <img alt="Vatts.js logo" src="https://raw.githubusercontent.com/mfrazlab/vatts-docs/master/public/logo.png" width="128">  
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/murillo-frazao-cunha/vatts-docs/master/public/logo.png">  
+      <img alt="Vatts.js logo" src="https://raw.githubusercontent.com/murillo-frazao-cunha/vatts-docs/master/public/logo.png" width="128">  
     </picture>  
   <h1>Vatts.js</h1>  
 
 [![NPM](https://img.shields.io/npm/v/vatts.svg?style=for-the-badge&labelColor=000000)](https://www.npmjs.com/package/vatts)  
 [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg?style=for-the-badge&labelColor=000000)](./LICENSE)  
-[![GitHub](https://img.shields.io/badge/GitHub-mfrazlab/vatts.js-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/mfrazlab/vatts.js)
+[![GitHub](https://img.shields.io/badge/GitHub-murillo-frazao-cunha/vatts.js-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/murillo-frazao-cunha/vatts.js)
 
 [![HTTP/3 Supported](https://img.shields.io/badge/SUPPORTED-HTTP/3-brightgreen?style=for-the-badge&labelColor=000000)](#)
 </div>

package/dist/builder.js

@@ -22,8 +22,8 @@ const fs = require('fs');
 const { readdir, stat, rm, rename } = require("node:fs/promises");
 const { config } = require("./helpers");
 // Import Framework specific builders
-const { createReactConfig } = require('./react/react.build');
-const { createVueConfig } = require('./vue/vue.build');
+const { createReactConfig } = require('./frameworks/builds/react.build');
+const { createVueConfig } = require('./frameworks/builds/vue.build');
 const routerModule = require("./router");
 const excludedFiles = ['vatts.sock'];
 // --- Custom Plugin: Require Context (Adapted for Esbuild) ---
@@ -146,13 +146,19 @@ const virtualEntryPlugin = (options) => ({
                 .join('\n');
             const layoutImport = layout ? `import LayoutComponent from '${layout.componentPath.replace(/\\/g, '/')}';` : '';
             const notFoundImport = notFound ? `import NotFoundComponent from '${notFound.componentPath.replace(/\\/g, '/')}';` : '';
-            const defaultNotFoundPath = path.join(__dirname, framework, framework === 'vue' ? 'DefaultNotFound.vue' : 'DefaultNotFound.js').replace(/\\/g, '/');
+            const defaultNotFoundPath = path.join(__dirname, 'frameworks', 'themes', 'DefaultNotFound.js').replace(/\\/g, '/');
             let componentRegistration = routes
                 .map((route, index) => `  '${route.componentPath.replace(/\\/g, '/')}': (route${index} && route${index}.default) ? route${index}.default : route${index},`)
                 .join('\n');
             const layoutRegistration = layout ? `window.__VATTS_LAYOUT__ = LayoutComponent.default || LayoutComponent;` : `window.__VATTS_LAYOUT__ = null;`;
             const notFoundRegistration = notFound ? `window.__VATTS_NOT_FOUND__ = NotFoundComponent.default || NotFoundComponent;` : `window.__VATTS_NOT_FOUND__ = null;`;
-            const entryClientPath = path.join(__dirname, framework, 'entry.client.js').replace(/\\/g, '/');
+            // Mapeamos as rotas e injetamos globalmente na entry
+            const clientRoutes = routes.map(r => ({
+                pattern: r.pattern,
+                componentPath: r.componentPath,
+                metadata: r.metadata || {}
+            }));
+            const entryClientPath = path.join(__dirname, 'frameworks', framework, 'entry.client.js').replace(/\\/g, '/');
             const code = `
 ${imports}
 ${layoutImport}
@@ -163,6 +169,8 @@ window.__VATTS_COMPONENTS__ = {
 ${componentRegistration}
 };
 
+window.__VATTS_ROUTES__ = ${JSON.stringify(clientRoutes)};
+
 ${layoutRegistration}
 ${notFoundRegistration}
 window.__VATTS_DEFAULT_NOT_FOUND__ = DefaultNotFound;
@@ -296,12 +304,48 @@ async function getFrameworkConfig(vattsOptions, outdir, isProduction, isWatch =
     ];
     const pluginConfig = { prePlugins, postPlugins, isWatch };
     const entryPoint = 'virtual:vatts-entry';
+    let config;
     if (framework === 'vue') {
-        return await createVueConfig(entryPoint, outdir, isProduction, pluginConfig);
+        config = await createVueConfig(entryPoint, outdir, isProduction, pluginConfig);
     }
     else {
-        return await createReactConfig(entryPoint, outdir, isProduction, pluginConfig);
+        config = await createReactConfig(entryPoint, outdir, isProduction, pluginConfig);
+    }
+    // --- INÍCIO DA IMPLEMENTAÇÃO DE CHUNKS E OTIMIZAÇÃO MÁXIMA ---
+    const entryPoints = { 'main': entryPoint };
+    if (vattsOptions.layout) {
+        entryPoints['pages/layout'] = vattsOptions.layout.componentPath;
+    }
+    if (vattsOptions.notFound) {
+        entryPoints['pages/not-found'] = vattsOptions.notFound.componentPath;
+    }
+    if (vattsOptions.routes && Array.isArray(vattsOptions.routes)) {
+        vattsOptions.routes.forEach((route, index) => {
+            const fileName = path.basename(route.componentPath, path.extname(route.componentPath));
+            entryPoints[`pages/${fileName}-${index}`] = route.componentPath;
+        });
+    }
+    config.entryPoints = entryPoints;
+    config.format = 'esm';
+    config.splitting = true;
+    config.chunkNames = 'chunks/[name]-[hash]';
+    config.assetNames = 'assets/[name]-[hash]';
+    config.treeShaking = true;
+    config.legalComments = 'none';
+    config.define = {
+        ...(config.define || {}),
+        'process.env.NODE_ENV': isProduction ? '"production"' : '"development"'
+    };
+    if (isProduction) {
+        config.minify = true;
+        config.minifyWhitespace = true;
+        config.minifyIdentifiers = true;
+        config.minifySyntax = true;
+        config.target = ['es2020'];
     }
+    // --- FIM DA IMPLEMENTAÇÃO ---
+    config.entryNames = '[name]-[hash]';
+    return config;
 }
 async function buildWithChunks(vattsOptions, outdir, isProduction = false) {
     await cleanDirectoryExcept(outdir, excludedFiles);
@@ -313,24 +357,18 @@ async function buildWithChunks(vattsOptions, outdir, isProduction = false) {
             try {
                 const { runOptimizer } = require('./api/optimizer');
                 const optimizedDir = path.join(outdir, 'optimized');
-                runOptimizer({ targetDir: outdir, outputDir: optimizedDir, ignoredPatterns: ['assets'] });
-                const rootFiles = await readdir(outdir);
-                for (const file of rootFiles) {
-                    if ((file.startsWith('main') && file.endsWith('.js')) || file === 'chunks') {
-                        await rm(path.join(outdir, file), { recursive: true, force: true });
-                    }
-                }
+                runOptimizer({ targetDir: outdir, outputDir: optimizedDir, ignoredPatterns: ['assets', 'chunks', 'pages'] });
                 if (fs.existsSync(optimizedDir)) {
                     const optFiles = await readdir(optimizedDir);
                     for (const file of optFiles) {
                         const srcPath = path.join(optimizedDir, file);
                         const destPath = path.join(outdir, file);
-                        await rm(destPath, { recursive: true, force: true });
+                        await rm(destPath, { recursive: true, force: true }).catch(() => { });
                         await rename(srcPath, destPath);
                     }
-                    await rm(optimizedDir, { recursive: true, force: true });
+                    await rm(optimizedDir, { recursive: true, force: true }).catch(() => { });
                 }
-                Console.log("✅ Build successfully optimized with native optimizer.");
+                Console.log("✅ Build successfully optimized with heavy chunking enabled.");
             }
             catch (err) {
                 Console.error('Native optimization failed:', err);
@@ -351,7 +389,6 @@ async function watchWithChunks(vattsOptions, outdir, hotReloadManager = null) {
         config.plugins.push({
             name: 'watch-notifier',
             setup(build) {
-                // AGORA ELE AVISA O HOT RELOAD EXATAMENTE QUANDO O ESBUILD INICIA
                 build.onStart(() => {
                     if (hotReloadManager && typeof hotReloadManager.onBuildStart === 'function') {
                         hotReloadManager.onBuildStart();

package/dist/frameworks/FrontCore.d.ts

@@ -0,0 +1,34 @@
+export interface VattsBuildError {
+    message?: string;
+    name?: string;
+    stack?: string;
+    frame?: string;
+    id?: string;
+    plugin?: string;
+    pluginCode?: string;
+    loc?: any;
+    watchFiles?: any;
+    cause?: any;
+    ts?: number;
+}
+export interface RouteConfig {
+    pattern: string;
+    componentPath: string;
+    metadata?: any;
+}
+export declare function renderCriticalError(error: any, framework: string): void;
+export declare function findRouteForPath(path: string, routes: RouteConfig[]): {
+    componentPath: string;
+    params: {
+        [key: string]: string;
+    };
+    metadata: any;
+} | null;
+export declare function updateDocumentTitle(title?: string): void;
+export declare function copyBuildError(error: VattsBuildError | null): Promise<void>;
+export declare function setupBuildErrorEvents(onErr: (error: VattsBuildError) => void, onOk: () => void): () => void;
+export declare function setupHMREvents(onComponentUpdate: (file: string | null, timestamp: number) => void): () => void;
+export declare function dispatchHmrReady(pending: {
+    file: string | null;
+    timestamp: number;
+} | null): void;

package/dist/frameworks/FrontCore.js

@@ -0,0 +1,128 @@
+"use strict";
+/*
+ * This file is part of the Vatts.js Project.
+ * Copyright (c) 2026 mfraz
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * ...
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderCriticalError = renderCriticalError;
+exports.findRouteForPath = findRouteForPath;
+exports.updateDocumentTitle = updateDocumentTitle;
+exports.copyBuildError = copyBuildError;
+exports.setupBuildErrorEvents = setupBuildErrorEvents;
+exports.setupHMREvents = setupHMREvents;
+exports.dispatchHmrReady = dispatchHmrReady;
+// --- Funções de Dados e Inicialização ---
+function renderCriticalError(error, framework) {
+    console.error(`[Vatts Core] ❌ Critical Error rendering application (${framework}):`, error);
+    if (typeof document !== 'undefined') {
+        document.body.innerHTML = `
+            <div style="font-family: monospace; padding: 20px; color: #ff4444; background: #000000; min-height: 100vh;">
+                <h1>Vatts Client Error (${framework})</h1>
+                <p>A critical error occurred while initializing the application.</p>
+                <pre style="background: #0a0a0a; padding: 15px; border-radius: 5px; overflow: auto;">${error?.message || error}</pre>
+                <pre style="color: #666; font-size: 12px; margin-top: 10px;">${error?.stack || ''}</pre>
+            </div>
+        `;
+    }
+}
+// --- Roteamento e Utils ---
+function findRouteForPath(path, routes) {
+    for (const route of routes) {
+        const regexPattern = route.pattern
+            .replace(/\[\[\.\.\.(\w+)\]\]/g, '(?<$1>.+)?')
+            .replace(/\[\.\.\.(\w+)\]/g, '(?<$1>.+)')
+            .replace(/\/\[\[(\w+)\]\]/g, '(?:/(?<$1>[^/]+))?')
+            .replace(/\[\[(\w+)\]\]/g, '(?<$1>[^/]+)?')
+            .replace(/\[(\w+)\]/g, '(?<$1>[^/]+)');
+        const regex = new RegExp(`^${regexPattern}/?$`);
+        const match = path.match(regex);
+        if (match) {
+            return {
+                componentPath: route.componentPath,
+                params: match.groups || {},
+                metadata: route.metadata
+            };
+        }
+    }
+    return null;
+}
+function updateDocumentTitle(title) {
+    if (title != null) {
+        try {
+            window.document.title = decodeURIComponent(escape(title));
+        }
+        catch (e) {
+            window.document.title = title;
+        }
+    }
+}
+async function copyBuildError(error) {
+    try {
+        if (!error)
+            return;
+        const payload = JSON.stringify(error, null, 2);
+        await navigator.clipboard.writeText(payload);
+    }
+    catch {
+        console.error('[Vatts Core] ❌ Falha ao copiar o erro.');
+    }
+}
+// --- Gerenciadores de Eventos (HMR & Errors) ---
+function setupBuildErrorEvents(onErr, onOk) {
+    const handleErr = (ev) => {
+        const e = ev?.detail;
+        console.error('[Vatts Core] 🛑 Erro de build (vatts:build-error):', e);
+        window.__VATTS_HAD_BUILD_ERROR__ = true;
+        onErr(e);
+    };
+    const handleOk = () => {
+        const hadError = window.__VATTS_HAD_BUILD_ERROR__;
+        onOk();
+        if (hadError) {
+            window.__VATTS_HAD_BUILD_ERROR__ = false;
+            console.log('[Vatts Core] 🔄 Erro foi corrigido! Sincronizando dados de rotas com servidor...');
+            setTimeout(() => {
+                window.location.reload();
+            }, 300);
+        }
+    };
+    window.addEventListener('vatts:build-error', handleErr);
+    window.addEventListener('vatts:build-ok', handleOk);
+    return () => {
+        window.removeEventListener('vatts:build-error', handleErr);
+        window.removeEventListener('vatts:build-ok', handleOk);
+    };
+}
+function setupHMREvents(onComponentUpdate) {
+    window.__HWEB_HMR__ = true;
+    const handleHMRUpdate = (event) => {
+        const { file, timestamp } = event.detail;
+        const fileName = file ? file.split('/').pop()?.split('\\').pop() : 'unknown';
+        try {
+            const fileLower = (file || '').toLowerCase();
+            const isPageFile = fileLower.includes('page.tsx') || fileLower.includes('page.jsx') ||
+                fileLower.includes('page.ts') || fileLower.includes('page.js') ||
+                fileLower.includes('page.vue');
+            if (isPageFile) {
+                console.log('[Vatts Core] 📄 Page file HMR detected, reloading to sync route data...');
+                setTimeout(() => window.location.reload(), 300);
+                return;
+            }
+            console.log(`[Vatts Core] ⚡ HMR Update Triggered: ${fileName}`);
+            onComponentUpdate(file || null, timestamp);
+        }
+        catch (error) {
+            console.error('[Vatts Core] ❌ HMR Error:', error);
+        }
+    };
+    window.addEventListener('hmr:component-update', handleHMRUpdate);
+    return () => window.removeEventListener('hmr:component-update', handleHMRUpdate);
+}
+function dispatchHmrReady(pending) {
+    if (!pending)
+        return;
+    window.dispatchEvent(new CustomEvent('vatts:hmr-ready', { detail: pending }));
+}

package/dist/{vue → frameworks/builds}/vue.build.js

@@ -3,7 +3,7 @@
  * This file is part of the Vatts.js Project.
  * Copyright (c) 2026 mfraz
  */
-const Console = require("../api/console").default;
+const Console = require("../../api/console").default;
 /**
  * Cria a configuração do Esbuild otimizada para Vue
  */

package/dist/frameworks/react/client.d.ts

@@ -0,0 +1,8 @@
+export { Link } from './components/Link.tsx';
+export { RouteConfig, Metadata } from "../../types.ts";
+export { router } from '../../client/clientRouter.ts';
+export { requireDynamic } from '../../client/requireDynamic.ts';
+export { importServer } from '../../client/rpc.ts';
+export { importPhpServer } from '../../client/rpcPhp.ts';
+export { default as Image } from "./components/image/Image.tsx";
+export { default as VattsImage } from "./components/image/Image.tsx";

package/dist/{react → frameworks/react}/client.js

@@ -21,18 +21,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VattsImage = exports.Image = exports.importPhpServer = exports.importServer = exports.requireDynamic = exports.router = exports.Link = void 0;
 // Este arquivo exporta apenas código seguro para o cliente (navegador)
-var Link_1 = require("./Link");
-Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
-var clientRouter_1 = require("../client/clientRouter");
-Object.defineProperty(exports, "router", { enumerable: true, get: function () { return clientRouter_1.router; } });
-var requireDynamic_1 = require("../client/requireDynamic");
-Object.defineProperty(exports, "requireDynamic", { enumerable: true, get: function () { return requireDynamic_1.requireDynamic; } });
+var Link_tsx_1 = require("./components/Link.js");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_tsx_1.Link; } });
+var clientRouter_ts_1 = require("../../client/clientRouter.js");
+Object.defineProperty(exports, "router", { enumerable: true, get: function () { return clientRouter_ts_1.router; } });
+var requireDynamic_ts_1 = require("../../client/requireDynamic.js");
+Object.defineProperty(exports, "requireDynamic", { enumerable: true, get: function () { return requireDynamic_ts_1.requireDynamic; } });
 // RPC (client-side)
-var rpc_1 = require("../client/rpc");
-Object.defineProperty(exports, "importServer", { enumerable: true, get: function () { return rpc_1.importServer; } });
-var rpcPhp_1 = require("../client/rpcPhp");
-Object.defineProperty(exports, "importPhpServer", { enumerable: true, get: function () { return rpcPhp_1.importPhpServer; } });
-var Image_1 = require("./image/Image");
-Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
-var Image_2 = require("./image/Image");
-Object.defineProperty(exports, "VattsImage", { enumerable: true, get: function () { return __importDefault(Image_2).default; } });
+var rpc_ts_1 = require("../../client/rpc.js");
+Object.defineProperty(exports, "importServer", { enumerable: true, get: function () { return rpc_ts_1.importServer; } });
+var rpcPhp_ts_1 = require("../../client/rpcPhp.js");
+Object.defineProperty(exports, "importPhpServer", { enumerable: true, get: function () { return rpcPhp_ts_1.importPhpServer; } });
+var Image_tsx_1 = require("./components/image/Image.js");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_tsx_1).default; } });
+var Image_tsx_2 = require("./components/image/Image.js");
+Object.defineProperty(exports, "VattsImage", { enumerable: true, get: function () { return __importDefault(Image_tsx_2).default; } });

package/dist/{react → frameworks/react/components}/Link.js

@@ -21,12 +21,12 @@ exports.Link = Link;
  * limitations under the License.
  */
 const react_1 = __importDefault(require("react"));
-const clientRouter_1 = require("../client/clientRouter");
+const clientRouter_ts_1 = require("../../../client/clientRouter.js");
 function Link({ href, children, ...props }) {
     const handleClick = async (e) => {
         e.preventDefault();
         // Usa o novo sistema de router
-        await clientRouter_1.router.push(href);
+        await clientRouter_ts_1.router.push(href);
     };
     return (react_1.default.createElement("a", { href: href, ...props, onClick: handleClick }, children));
 }

package/dist/frameworks/react/entry.client.d.ts

@@ -0,0 +1,14 @@
+import { Root } from 'react-dom/client';
+import '../themes/VattsDevBadge';
+import '../themes/ErrorModal';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'vatts-dev-badge': any;
+            'vatts-error-modal': any;
+        }
+    }
+    interface Window {
+        __VATTS_ROOT__?: Root;
+    }
+}

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;