vatts 1.0.0-alpha.3 → 1.0.1-alpha.1

package/dist/client/DefaultNotFound.js

@@ -168,5 +168,5 @@ function ErrorPage() {
                                     alignItems: 'center',
                                     fontSize: 11,
                                     color: 'rgba(255,255,255,0.2)'
-                                }, children: [(0, jsx_runtime_1.jsx)("span", { children: "Vatts Server" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "#f87171", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#f87171' }, children: "Not Found" })] })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://npmjs.com/package/vatts", target: "_blank", rel: "noopener noreferrer", style: brandStyle, onMouseEnter: (e) => e.currentTarget.style.opacity = '1', onMouseLeave: (e) => e.currentTarget.style.opacity = '0.4', children: [(0, jsx_runtime_1.jsx)("img", { src: "https://i.imgur.com/fz5N4jL.png", alt: "Vatts Logo", style: { width: 20, height: 20 } }), (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: 13, fontWeight: 600, color: primaryColor }, children: ["Vatts", (0, jsx_runtime_1.jsx)("span", { style: { color: "white" }, children: ".js" })] })] })] })] }));
+                                }, children: [(0, jsx_runtime_1.jsx)("span", { children: "Vatts Server" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "#f87171", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#f87171' }, children: "Not Found" })] })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://npmjs.com/package/vatts", target: "_blank", rel: "noopener noreferrer", style: brandStyle, onMouseEnter: (e) => e.currentTarget.style.opacity = '1', onMouseLeave: (e) => e.currentTarget.style.opacity = '0.4', children: [(0, jsx_runtime_1.jsx)("img", { src: "https://camo.githubusercontent.com/fb660fcaf57546d725dfeef3f081277f4bcefd83e8959f964985de44a7931064/68747470733a2f2f76617474732e6d6672617a2e6f76682f6c6f676f2d762e706e67", alt: "Vatts Logo", style: { width: 20, height: 20 } }), (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: 13, fontWeight: 600, color: primaryColor }, children: ["Vatts", (0, jsx_runtime_1.jsx)("span", { style: { color: "white" }, children: ".js" })] })] })] })] }));
 }

package/dist/client/DevIndicator.d.ts

@@ -0,0 +1,4 @@
+export default function DevIndicator({ hasBuildError, onClickBuildError, }: {
+    hasBuildError?: boolean;
+    onClickBuildError?: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/client/DevIndicator.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DevIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function DevIndicator({ hasBuildError = false, onClickBuildError, }) {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    const [hotState, setHotState] = (0, react_1.useState)('idle');
+    (0, react_1.useEffect)(() => {
+        const handler = (ev) => {
+            const detail = ev?.detail;
+            if (!detail || !detail.state)
+                return;
+            if (detail.state === 'reloading') {
+                setHotState('reloading');
+            }
+            if (detail.state === 'idle') {
+                setHotState('idle');
+            }
+            // Em casos de full reload, pode ficar como reloading até recarregar a página
+            if (detail.state === 'full-reload') {
+                setHotState('reloading');
+            }
+        };
+        window.addEventListener('vatts:hotreload', handler);
+        return () => window.removeEventListener('vatts:hotreload', handler);
+    }, []);
+    if (!isVisible)
+        return null;
+    const isReloading = hotState === 'reloading';
+    const isError = !!hasBuildError;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
+@keyframes vatts-pulse {
+  0% { opacity: 0.4; }
+  50% { opacity: 1; }
+  100% { opacity: 0.4; }
+}
+
+@keyframes vatts-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.vatts-dev-badge {
+position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 999999;
+  
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px;
+  background: rgba(15, 15, 20, 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+
+  border-radius: 10px;
+  color: #fff;
+  font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+
+  border: 1px solid rgba(255, 107, 53, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  transition: all 0.2s ease;
+  cursor: default;
+  user-select: none;
+}
+
+.vatts-dev-badge.clickable {
+  cursor: pointer;
+}
+
+.vatts-dev-badge:hover {
+  /* COR ALTERADA: Hover com brilho laranja */
+  border-color: rgba(255, 107, 53, 0.5);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 40px rgba(255, 107, 53, 0.15);
+}
+
+/* Mantemos as cores semânticas (Verde = OK, Vermelho = Erro) pois são padrões de status */
+.vatts-status-dot {
+  width: 8px;
+  height: 8px;
+  background: #10b981; /* Verde esmeralda */
+  border-radius: 50%;
+  box-shadow: 0 0 10px #10b981;
+  animation: vatts-pulse 2s infinite ease-in-out;
+}
+
+.vatts-status-dot.reloading {
+  background: #f59e0b; /* Amber */
+  box-shadow: 0 0 10px #f59e0b;
+}
+
+.vatts-status-dot.error {
+  background: #ef4444; /* Red */
+  box-shadow: 0 0 12px #ef4444;
+  animation: vatts-pulse 1.2s infinite ease-in-out;
+}
+
+.vatts-spinner {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid rgba(255,255,255,0.25);
+  border-top-color: rgba(255,255,255,0.85);
+  animation: vatts-spin 0.8s linear infinite;
+}
+
+.vatts-logo {
+  /* COR ALTERADA: Gradiente da Logo para Vermelho/Laranja */
+  background: linear-gradient(135deg, #ff6b35, #e85d04);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+}
+
+.vatts-error-pill {
+  margin-left: 6px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: rgba(239, 68, 68, 0.18);
+  border: 1px solid rgba(239, 68, 68, 0.35);
+  color: rgba(255,255,255,0.9);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+    ` }), (0, jsx_runtime_1.jsxs)("div", { className: `vatts-dev-badge${isError ? ' clickable' : ''}`, title: isError ? 'Build com erro — clique para ver detalhes' : undefined, onClick: () => {
+                    if (isError) {
+                        onClickBuildError?.();
+                    }
+                }, children: [isReloading ? ((0, jsx_runtime_1.jsx)("div", { className: "vatts-spinner" })) : ((0, jsx_runtime_1.jsx)("div", { className: `vatts-status-dot${isReloading ? ' reloading' : ''}${isError ? ' error' : ''}` })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "vatts-logo", children: "VATTS.JS" }), isError ? (0, jsx_runtime_1.jsx)("span", { className: "vatts-error-pill", children: "ERROR" }) : null] }), (0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            setIsVisible(false);
+                        }, style: {
+                            background: 'none',
+                            border: 'none',
+                            color: 'rgba(255,255,255,0.3)',
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                            padding: '0 0 0 4px',
+                            marginLeft: '4px'
+                        }, title: "Fechar", children: "\u00D7" })] })] }));
+}

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

@@ -1,4 +1 @@
-export declare function DevIndicator({ hasBuildError, onClickBuildError, }: {
-    hasBuildError?: boolean;
-    onClickBuildError?: () => void;
-}): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/client/entry.client.js

@@ -32,8 +32,10 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DevIndicator = DevIndicator;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /*
  * This file is part of the Vatts.js Project.
@@ -55,6 +57,7 @@ const react_1 = __importStar(require("react"));
 const client_1 = require("react-dom/client");
 const clientRouter_1 = require("./clientRouter");
 const ErrorModal_1 = require("./ErrorModal");
+const DevIndicator_1 = __importDefault(require("./DevIndicator"));
 function App({ componentMap, routes, initialComponentPath, initialParams, layoutComponent }) {
     // Estado que guarda o componente a ser renderizado atualmente
     const [hmrTimestamp, setHmrTimestamp] = (0, react_1.useState)(Date.now());
@@ -110,7 +113,8 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
             if (match) {
                 return {
                     componentPath: route.componentPath,
-                    params: match.groups || {}
+                    params: match.groups || {},
+                    metadata: route.metadata
                 };
             }
         }
@@ -195,6 +199,12 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
         if (match) {
             setCurrentPageComponent(() => componentMap[match.componentPath]);
             setParams(match.params);
+            // setar titulo
+            if (match.metadata) {
+                if (match.metadata?.title != null) {
+                    window.document.title = match.metadata?.title;
+                }
+            }
         }
         else {
             // Se não encontrou rota, define como null para mostrar 404
@@ -240,155 +250,7 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
             ? react_1.default.createElement(layoutComponent, { children: PageContent })
             : (0, jsx_runtime_1.jsx)("div", { children: PageContent });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [resolvedContent, process.env.NODE_ENV !== 'production' && ((0, jsx_runtime_1.jsx)(DevIndicator, { hasBuildError: !!buildError, onClickBuildError: () => setIsErrorOpen(true) })), (0, jsx_runtime_1.jsx)(ErrorModal_1.ErrorModal, { error: buildError, isOpen: isErrorOpen, onClose: () => setIsErrorOpen(false), onCopy: copyBuildError })] }));
-}
-function DevIndicator({ hasBuildError = false, onClickBuildError, }) {
-    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
-    const [hotState, setHotState] = (0, react_1.useState)('idle');
-    (0, react_1.useEffect)(() => {
-        const handler = (ev) => {
-            const detail = ev?.detail;
-            if (!detail || !detail.state)
-                return;
-            if (detail.state === 'reloading') {
-                setHotState('reloading');
-            }
-            if (detail.state === 'idle') {
-                setHotState('idle');
-            }
-            // Em casos de full reload, pode ficar como reloading até recarregar a página
-            if (detail.state === 'full-reload') {
-                setHotState('reloading');
-            }
-        };
-        window.addEventListener('vatts:hotreload', handler);
-        return () => window.removeEventListener('vatts:hotreload', handler);
-    }, []);
-    if (!isVisible)
-        return null;
-    const isReloading = hotState === 'reloading';
-    const isError = !!hasBuildError;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
-@keyframes vatts-pulse {
-  0% { opacity: 0.4; }
-  50% { opacity: 1; }
-  100% { opacity: 0.4; }
-}
-
-@keyframes vatts-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.vatts-dev-badge {
-  /* AQUI ESTÁ O QUE SEGURA ELE NA TELA: */
-  position: sticky;
-  bottom: 20px;
-  /* float e margens para forçar a direita no modo sticky */
-  float: right; 
-  margin-right: 20px;
-  z-index: 999999;
-  
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 14px;
-  background: rgba(15, 15, 20, 0.8);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-
-  border-radius: 10px;
-  color: #fff;
-  font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-
-  /* COR ALTERADA: Borda sutil laranja no badge */
-  border: 1px solid rgba(255, 107, 53, 0.1);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  transition: all 0.2s ease;
-  cursor: default;
-  user-select: none;
-}
-
-.vatts-dev-badge.clickable {
-  cursor: pointer;
-}
-
-.vatts-dev-badge:hover {
-  /* COR ALTERADA: Hover com brilho laranja */
-  border-color: rgba(255, 107, 53, 0.5);
-  transform: translateY(-2px);
-  box-shadow: 0 10px 40px rgba(255, 107, 53, 0.15);
-}
-
-/* Mantemos as cores semânticas (Verde = OK, Vermelho = Erro) pois são padrões de status */
-.vatts-status-dot {
-  width: 8px;
-  height: 8px;
-  background: #10b981; /* Verde esmeralda */
-  border-radius: 50%;
-  box-shadow: 0 0 10px #10b981;
-  animation: vatts-pulse 2s infinite ease-in-out;
-}
-
-.vatts-status-dot.reloading {
-  background: #f59e0b; /* Amber */
-  box-shadow: 0 0 10px #f59e0b;
-}
-
-.vatts-status-dot.error {
-  background: #ef4444; /* Red */
-  box-shadow: 0 0 12px #ef4444;
-  animation: vatts-pulse 1.2s infinite ease-in-out;
-}
-
-.vatts-spinner {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 2px solid rgba(255,255,255,0.25);
-  border-top-color: rgba(255,255,255,0.85);
-  animation: vatts-spin 0.8s linear infinite;
-}
-
-.vatts-logo {
-  /* COR ALTERADA: Gradiente da Logo para Vermelho/Laranja */
-  background: linear-gradient(135deg, #ff6b35, #e85d04);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-weight: 800;
-}
-
-.vatts-error-pill {
-  margin-left: 6px;
-  padding: 2px 6px;
-  border-radius: 999px;
-  background: rgba(239, 68, 68, 0.18);
-  border: 1px solid rgba(239, 68, 68, 0.35);
-  color: rgba(255,255,255,0.9);
-  font-size: 10px;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-    ` }), (0, jsx_runtime_1.jsxs)("div", { className: `vatts-dev-badge${isError ? ' clickable' : ''}`, title: isError ? 'Build com erro — clique para ver detalhes' : undefined, onClick: () => {
-                    if (isError) {
-                        onClickBuildError?.();
-                    }
-                }, children: [isReloading ? ((0, jsx_runtime_1.jsx)("div", { className: "vatts-spinner" })) : ((0, jsx_runtime_1.jsx)("div", { className: `vatts-status-dot${isReloading ? ' reloading' : ''}${isError ? ' error' : ''}` })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "vatts-logo", children: "VATTS.JS" }), isError ? (0, jsx_runtime_1.jsx)("span", { className: "vatts-error-pill", children: "ERROR" }) : null] }), (0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
-                            e.stopPropagation();
-                            setIsVisible(false);
-                        }, style: {
-                            background: 'none',
-                            border: 'none',
-                            color: 'rgba(255,255,255,0.3)',
-                            cursor: 'pointer',
-                            fontSize: '14px',
-                            padding: '0 0 0 4px',
-                            marginLeft: '4px'
-                        }, title: "Fechar", children: "\u00D7" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [resolvedContent, process.env.NODE_ENV !== 'production' && ((0, jsx_runtime_1.jsx)(DevIndicator_1.default, { hasBuildError: !!buildError, onClickBuildError: () => setIsErrorOpen(true) })), (0, jsx_runtime_1.jsx)(ErrorModal_1.ErrorModal, { error: buildError, isOpen: isErrorOpen, onClose: () => setIsErrorOpen(false), onCopy: copyBuildError })] }));
 }
 // --- Inicialização do Cliente (CSR - Client-Side Rendering) ---
 function deobfuscateData(obfuscated) {
@@ -402,7 +264,7 @@ function deobfuscateData(obfuscated) {
         return JSON.parse(jsonStr);
     }
     catch (error) {
-        console.error('[hweb] Failed to decode data:', error);
+        console.error('[Watts] Failed to decode data:', error);
         return null;
     }
 }
@@ -411,17 +273,17 @@ function initializeClient() {
         // Lê os dados do atributo data-h
         const dataElement = document.getElementById('__vatts_data__');
         if (!dataElement) {
-            console.error('[hweb] Initial data script not found (#__vatts_data__).');
+            console.error('[Watts] Initial data script not found (#__vatts_data__).');
             return;
         }
         const obfuscated = dataElement.getAttribute('data-h');
         if (!obfuscated) {
-            console.error('[hweb] Data attribute not found.');
+            console.error('[Watts] Data attribute not found.');
             return;
         }
         const initialData = deobfuscateData(obfuscated);
         if (!initialData) {
-            console.error('[hweb] Failed to parse initial data.');
+            console.error('[Vatts] Failed to parse initial data.');
             return;
         }
         // Cria o mapa de componentes dinamicamente a partir dos módulos carregados
@@ -443,7 +305,7 @@ function initializeClient() {
         root.render((0, jsx_runtime_1.jsx)(App, { componentMap: componentMap, routes: initialData.routes, initialComponentPath: initialData.initialComponentPath, initialParams: initialData.initialParams, layoutComponent: window.__HWEB_LAYOUT__ }));
     }
     catch (error) {
-        console.error('[hweb] Critical Error rendering application:', error);
+        console.error('[Watts] Critical Error rendering application:', error);
         // Exibe erro na tela caso algo crítico falhe
         if (typeof document !== 'undefined') {
             document.body.innerHTML = `

package/dist/renderer.js

@@ -142,9 +142,20 @@ async function render({ req, route, params, allRoutes }) {
         const routeMetadata = await Promise.resolve(generateMetadata(params, req));
         metadata = { ...metadata, ...routeMetadata };
     }
+    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,
+        };
+    }));
     // Prepara os dados para injetar na janela do navegador
     const initialData = {
-        routes: allRoutes.map(r => ({ pattern: r.pattern, componentPath: r.componentPath })),
+        routes: results,
         initialComponentPath: route.componentPath,
         initialParams: params,
     };
@@ -456,7 +467,7 @@ function getBuildingHTML() {
             <div class="content">
                 <div class="logo-wrapper">
                     <div class="logo-glow"></div>
-                    <img src="https://i.imgur.com/fz5N4jL.png" alt="Vatts Logo">
+                    <img src="https://camo.githubusercontent.com/fb660fcaf57546d725dfeef3f081277f4bcefd83e8959f964985de44a7931064/68747470733a2f2f76617474732e6d6672617a2e6f76682f6c6f676f2d762e706e67" alt="Vatts Logo">
                 </div>
 
                 <h1>Vatts<span>.js</span></h1>
@@ -475,10 +486,10 @@ function getBuildingHTML() {
             </div>
 
             <div class="card-footer">
-                <span>Vite</span>
+                <span>Building...</span>
                 <div class="status-active">
                     <div class="dot"></div>
-                    Hot Reload
+                    v${require("../package.json").version}
                 </div>
             </div>
         </div>

package/package.json

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