vatts 1.2.0-alpha.1 → 1.2.0-alpha.2

package/dist/react/entry.client.js

@@ -1,4 +1,41 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
 /*
  * This file is part of the Vatts.js Project.
  * Copyright (c) 2026 itsmuzin
@@ -15,20 +52,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useEffect, useCallback } from 'react';
-import { createRoot } from 'react-dom/client';
-import { router } from '../client/clientRouter';
-import { ErrorModal } from './ErrorModal';
-import DevIndicator from "./DevIndicator";
+const react_1 = __importStar(require("react"));
+const client_1 = require("react-dom/client");
+const clientRouter_1 = require("../client/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] = useState(Date.now());
+    const [hmrTimestamp, setHmrTimestamp] = (0, react_1.useState)(Date.now());
     // Estado de erro de build recebido pelo hot-reload (via eventos globais)
-    const [buildError, setBuildError] = useState(() => {
+    const [buildError, setBuildError] = (0, react_1.useState)(() => {
         return window.__VATTS_BUILD_ERROR__ || null;
     });
-    const [isErrorOpen, setIsErrorOpen] = useState(() => !!window.__VATTS_BUILD_ERROR__);
-    useEffect(() => {
+    const [isErrorOpen, setIsErrorOpen] = (0, react_1.useState)(() => !!window.__VATTS_BUILD_ERROR__);
+    (0, react_1.useEffect)(() => {
         const onErr = (ev) => {
             const e = ev?.detail;
             setBuildError(e || null);
@@ -45,7 +82,7 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
             window.removeEventListener('vatts:build-ok', onOk);
         };
     }, []);
-    const copyBuildError = useCallback(async () => {
+    const copyBuildError = (0, react_1.useCallback)(async () => {
         try {
             if (!buildError)
                 return;
@@ -57,7 +94,7 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
         }
     }, [buildError]);
     // Helper para encontrar rota baseado no path
-    const findRouteForPath = useCallback((path) => {
+    const findRouteForPath = (0, react_1.useCallback)((path) => {
         for (const route of routes) {
             const regexPattern = route.pattern
                 // [[...param]] → opcional catch-all
@@ -83,7 +120,7 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
         return null;
     }, [routes]);
     // Inicializa o componente e params baseado na URL ATUAL (não no initialComponentPath)
-    const [CurrentPageComponent, setCurrentPageComponent] = useState(() => {
+    const [CurrentPageComponent, setCurrentPageComponent] = (0, react_1.useState)(() => {
         // Pega a rota atual da URL
         const currentPath = window.location.pathname.replace("index.html", '');
         const match = findRouteForPath(currentPath);
@@ -93,14 +130,14 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
         // Se não encontrou rota, retorna null para mostrar 404
         return null;
     });
-    const [params, setParams] = useState(() => {
+    const [params, setParams] = (0, react_1.useState)(() => {
         // Pega os params da URL atual
         const currentPath = window.location.pathname.replace("index.html", '');
         const match = findRouteForPath(currentPath);
         return match ? match.params : {};
     });
     // HMR: Escuta eventos de hot reload
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         // Ativa o sistema de HMR
         window.__HWEB_HMR__ = true;
         const handleHMRUpdate = async (event) => {
@@ -127,8 +164,8 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
             window.removeEventListener('hmr:component-update', handleHMRUpdate);
         };
     }, []);
-    const updateRoute = useCallback(() => {
-        const currentPath = router.pathname.replace("index.html", '');
+    const updateRoute = (0, react_1.useCallback)(() => {
+        const currentPath = clientRouter_1.router.pathname.replace("index.html", '');
         const match = findRouteForPath(currentPath);
         if (match) {
             setCurrentPageComponent(() => componentMap[match.componentPath]);
@@ -145,15 +182,15 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
             setCurrentPageComponent(null);
             setParams({});
         }
-    }, [router.pathname, findRouteForPath, componentMap]);
+    }, [clientRouter_1.router.pathname, findRouteForPath, componentMap]);
     // Ouve os eventos de "voltar" e "avançar" do navegador
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const handlePopState = () => {
             updateRoute();
         };
         window.addEventListener('popstate', handlePopState);
         // Também se inscreve no router para mudanças de rota
-        const unsubscribe = router.subscribe(updateRoute);
+        const unsubscribe = clientRouter_1.router.subscribe(updateRoute);
         return () => {
             window.removeEventListener('popstate', handlePopState);
             unsubscribe();
@@ -165,26 +202,29 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
     if (!CurrentPageComponent || initialComponentPath === '__404__') {
         const NotFoundComponent = window.__VATTS_NOT_FOUND__;
         if (NotFoundComponent) {
-            const NotFoundContent = _jsx(NotFoundComponent, {});
+            const NotFoundContent = react_1.default.createElement(NotFoundComponent, null);
             resolvedContent = layoutComponent
-                ? React.createElement(layoutComponent, { children: NotFoundContent })
+                ? react_1.default.createElement(layoutComponent, { children: NotFoundContent })
                 : NotFoundContent;
         }
         else {
             const DefaultNotFound = window.__VATTS_DEFAULT_NOT_FOUND__;
-            const NotFoundContent = _jsx(DefaultNotFound, {});
+            const NotFoundContent = react_1.default.createElement(DefaultNotFound, null);
             resolvedContent = layoutComponent
-                ? React.createElement(layoutComponent, { children: NotFoundContent })
+                ? react_1.default.createElement(layoutComponent, { children: NotFoundContent })
                 : NotFoundContent;
         }
     }
     else {
-        const PageContent = _jsx(CurrentPageComponent, { params: params }, `page-${hmrTimestamp}`);
+        const PageContent = react_1.default.createElement(CurrentPageComponent, { key: `page-${hmrTimestamp}`, params: params });
         resolvedContent = layoutComponent
-            ? React.createElement(layoutComponent, { children: PageContent })
-            : _jsx("div", { children: PageContent });
+            ? react_1.default.createElement(layoutComponent, { children: PageContent })
+            : react_1.default.createElement("div", null, PageContent);
     }
-    return (_jsxs(_Fragment, { children: [resolvedContent, process.env.NODE_ENV !== 'production' && (_jsx(DevIndicator, { hasBuildError: !!buildError, onClickBuildError: () => setIsErrorOpen(true) })), _jsx(ErrorModal, { error: buildError, isOpen: isErrorOpen, onClose: () => setIsErrorOpen(false), onCopy: copyBuildError })] }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        resolvedContent,
+        process.env.NODE_ENV !== 'production' && (react_1.default.createElement(DevIndicator_1.default, { hasBuildError: !!buildError, onClickBuildError: () => setIsErrorOpen(true) })),
+        react_1.default.createElement(ErrorModal_1.ErrorModal, { error: buildError, isOpen: isErrorOpen, onClose: () => setIsErrorOpen(false), onCopy: copyBuildError })));
 }
 // --- Inicialização do Cliente (CSR - Client-Side Rendering) ---
 function deobfuscateData(obfuscated) {
@@ -251,10 +291,10 @@ function initializeClient() {
             }
         }
         // Usar createRoot para render inicial (CSR)
-        const root = createRoot(container);
+        const root = (0, client_1.createRoot)(container);
         // Salva a referência globalmente
         window.__VATTS_ROOT__ = root;
-        root.render(_jsx(App, { componentMap: componentMap, routes: initialData.routes, initialComponentPath: initialData.initialComponentPath, initialParams: initialData.initialParams, layoutComponent: window.__VATTS_LAYOUT__ }));
+        root.render(react_1.default.createElement(App, { componentMap: componentMap, routes: initialData.routes, initialComponentPath: initialData.initialComponentPath, initialParams: initialData.initialParams, layoutComponent: window.__VATTS_LAYOUT__ }));
     }
     catch (error) {
         console.error('[Watts] Critical Error rendering application:', error);

package/dist/react/image/Image.js

@@ -1,4 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
 const Image = ({ src, width, height, quality = 75, priority = false, className, style, alt = "", ...props }) => {
     function getBaseUrl() {
         if (typeof window === "undefined")
@@ -42,6 +47,6 @@ const Image = ({ src, width, height, quality = 75, priority = false, className,
         height: height ? (typeof height === 'number' ? `${height}px` : height) : 'auto',
         ...style,
     };
-    return (_jsx("img", { ...props, src: optimizedSrc, alt: alt, loading: priority ? 'eager' : 'lazy', decoding: priority ? 'sync' : 'async', width: typeof width === 'string' ? width.replace('px', '') : width, height: typeof height === 'string' ? height.replace('px', '') : height, className: `vatts-image ${className || ''}`, style: baseStyle }));
+    return (react_1.default.createElement("img", { ...props, src: optimizedSrc, alt: alt, loading: priority ? 'eager' : 'lazy', decoding: priority ? 'sync' : 'async', width: typeof width === 'string' ? width.replace('px', '') : width, height: typeof height === 'string' ? height.replace('px', '') : height, className: `vatts-image ${className || ''}`, style: baseStyle }));
 };
-export default Image;
+exports.default = Image;

package/dist/react/renderer-react.js

@@ -1,9 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { renderToPipeableStream } from 'react-dom/server';
-import { getLayout } from '../router';
-import fs from 'fs';
-import path from 'path';
-import BuildingScreen from "../react/BuildingPage";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = render;
+/*
+ * This file is part of the Vatts.js Project.
+ * Copyright (c) 2026 itsmuzin
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const react_1 = __importDefault(require("react"));
+const server_1 = require("react-dom/server");
+const router_1 = require("../router");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const BuildingPage_1 = __importDefault(require("../react/BuildingPage"));
 // --- Helpers de Servidor ---
 // Função auxiliar para importar módulos ignorando CSS (mesma lógica do router.ts)
 function requireWithoutStyles(modulePath) {
@@ -149,22 +171,22 @@ function obfuscateData(data) {
 // Procura em .vatts/ e .vatts/assets/
 function getBuildAssets(req) {
     const projectDir = process.cwd();
-    const distDir = path.join(projectDir, '.vatts');
-    const assetsDir = path.join(distDir, 'assets');
-    if (!fs.existsSync(distDir))
+    const distDir = path_1.default.join(projectDir, '.vatts');
+    const assetsDir = path_1.default.join(distDir, 'assets');
+    if (!fs_1.default.existsSync(distDir))
         return null;
     let scripts = [];
     let styles = [];
     // Helper para processar arquivos de um diretório
     const processDirectory = (directory, urlPrefix) => {
-        if (!fs.existsSync(directory))
+        if (!fs_1.default.existsSync(directory))
             return;
-        const files = fs.readdirSync(directory);
+        const files = fs_1.default.readdirSync(directory);
         files.forEach(file => {
             if (file.endsWith('.map'))
                 return; // Ignora sourcemaps
-            const fullPath = path.join(directory, file);
-            const stat = fs.statSync(fullPath);
+            const fullPath = path_1.default.join(directory, file);
+            const stat = fs_1.default.statSync(fullPath);
             if (stat.isFile()) {
                 if (file.endsWith('.js')) {
                     scripts.push(`${urlPrefix}/${file}`);
@@ -177,9 +199,9 @@ function getBuildAssets(req) {
     };
     try {
         // 1. Verificar Manifesto (se existir)
-        const manifestPath = path.join(distDir, 'manifest.json');
-        if (fs.existsSync(manifestPath)) {
-            const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+        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 manifestFiles = Object.values(manifest);
             scripts = manifestFiles
                 .filter((f) => f.endsWith('.js'))
@@ -221,9 +243,14 @@ function ServerRoot({ lang, title, metaTagsHtml, stylesHtml, initialDataScript,
         ${metaTagsHtml || ''}
         ${stylesHtml || ''}
     `;
-    return (_jsxs("html", { lang: lang, children: [_jsx("head", { dangerouslySetInnerHTML: { __html: headContent } }), _jsxs("body", { children: [dataScript, _jsx("div", { id: "root", children: children }), hotReloadScript && (_jsx("div", { style: { display: 'none' }, dangerouslySetInnerHTML: { __html: hotReloadScript } }))] })] }));
+    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 } })))));
 }
-export async function render({ req, res, route, params, allRoutes }) {
+async function render({ req, res, route, params, allRoutes }) {
     const { generateMetadata } = route;
     const isProduction = !req.hwebDev;
     const hotReloadManager = req.hotReloadManager;
@@ -236,7 +263,7 @@ export async function render({ req, res, route, params, allRoutes }) {
             // Se falhar o build, restauramos o console para o erro aparecer se necessário
             restoreConsole();
             // Usando stream para a tela de loading também, agora via React Component
-            const { pipe } = renderToPipeableStream(_jsx(BuildingScreen, {}), {
+            const { pipe } = (0, server_1.renderToPipeableStream)(react_1.default.createElement(BuildingPage_1.default, null), {
                 onShellReady() {
                     res.setHeader('Content-Type', 'text/html');
                     pipe(res);
@@ -245,12 +272,12 @@ export async function render({ req, res, route, params, allRoutes }) {
             return;
         }
         // 2. Preparar Layout
-        const layoutInfo = getLayout();
+        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.resolve(process.cwd(), layoutInfo.componentPath));
+                const layoutModule = requireWithoutStyles(path_1.default.resolve(process.cwd(), layoutInfo.componentPath));
                 LayoutComponent = layoutModule.default;
             }
             catch (e) {
@@ -299,16 +326,16 @@ export async function render({ req, res, route, params, allRoutes }) {
         // 5. Componente da Página Atual
         const PageComponent = route.component;
         // Monta a árvore da aplicação
-        let AppTree = _jsx(PageComponent, { params: params });
+        let AppTree = react_1.default.createElement(PageComponent, { params: params });
         if (LayoutComponent) {
-            AppTree = _jsx(LayoutComponent, { children: AppTree });
+            AppTree = react_1.default.createElement(LayoutComponent, null, AppTree);
         }
         // 6. Streaming
         return new Promise((resolve, reject) => {
             let didError = false;
-            const { pipe } = renderToPipeableStream(_jsx(ServerRoot, { lang: htmlLang, title: metadata.title || 'Vatts.js', metaTagsHtml: metaTagsHtml, stylesHtml: stylesHtml, 
+            const { pipe } = (0, server_1.renderToPipeableStream)(react_1.default.createElement(ServerRoot, { lang: htmlLang, title: metadata.title || 'Vatts.js', metaTagsHtml: metaTagsHtml, stylesHtml: stylesHtml, 
                 // Recriando o script de dados exatamente como o client espera
-                initialDataScript: `/* Data Injection */`, hotReloadScript: hotReloadScript, dataScript: _jsx("script", { id: "__vatts_data__", type: "text/plain", "data-h": obfuscatedData }), children: AppTree }), {
+                initialDataScript: `/* Data Injection */`, hotReloadScript: hotReloadScript, dataScript: react_1.default.createElement("script", { id: "__vatts_data__", type: "text/plain", "data-h": obfuscatedData }) }, AppTree), {
                 // Usar bootstrapModules para scripts tipo módulo (ESM)
                 bootstrapModules: assets.scripts,
                 onShellReady() {
@@ -341,3 +368,4 @@ export async function render({ req, res, route, params, allRoutes }) {
         throw err;
     }
 }
+// --- Componente de Tela de Building (Substituto do getBuildingHTML) ---

package/dist/renderer.d.ts

@@ -11,5 +11,9 @@ interface RenderOptions {
         componentPath: string;
     })[];
 }
+/**
+ * Renderiza a requisição como stream, carregando o driver apropriado dinamicamente.
+ * Isso evita erros de "Module Not Found" quando um dos frameworks não está instalado.
+ */
 export declare function renderAsStream(params: RenderOptions): Promise<void>;
 export {};

package/dist/renderer.js

@@ -1,11 +1,19 @@
-import { cachedFramework } from "./api/framework";
-import { render } from "./react/renderer-react";
-import { renderVue } from "./vue/renderer.vue";
-export async function renderAsStream(params) {
-    if (cachedFramework === 'react') {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAsStream = renderAsStream;
+const framework_1 = require("./api/framework");
+/**
+ * Renderiza a requisição como stream, carregando o driver apropriado dinamicamente.
+ * Isso evita erros de "Module Not Found" quando um dos frameworks não está instalado.
+ */
+async function renderAsStream(params) {
+    if (framework_1.cachedFramework === 'react') {
+        // Import dinâmico garante que o código do React só seja avaliado se necessário
+        const { render } = await import("./react/renderer-react.js");
         return await render(params);
     }
     else {
+        const { renderVue } = await import("./vue/renderer.vue.js");
         return await renderVue(params);
     }
 }