vatts 1.1.0 → 1.1.2

package/dist/index.js

@@ -56,6 +56,7 @@ exports.app = exports.FrameworkAdapterFactory = exports.FastifyAdapter = exports
 exports.default = vatts;
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
+const crypto_1 = __importDefault(require("crypto")); // Adicionado para gerar hash do cache
 const express_1 = require("./adapters/express");
 const builder_1 = require("./builder");
 const router_1 = require("./router");
@@ -90,6 +91,139 @@ function resolveWithin(baseDir, unsafePath) {
         return null;
     return abs;
 }
+// Handler de Otimização de Imagem
+async function handleImageOptimization(req, res, projectDir) {
+    const urlObj = new URL(req.url, `http://localhost`);
+    const params = urlObj.searchParams;
+    const imageUrl = params.get('url');
+    const widthStr = params.get('w');
+    const heightStr = params.get('h');
+    const qualityStr = params.get('q');
+    if (!imageUrl) {
+        res.status(400).text('Missing "url" parameter');
+        return;
+    }
+    if (isSuspiciousPathname(imageUrl)) {
+        res.status(400).text('Invalid path');
+        return;
+    }
+    // Resolve o caminho do arquivo no disco
+    let filePath = null;
+    if (imageUrl.startsWith('/_vatts/')) {
+        // Arquivos de build (assets gerados pelo Rollup)
+        const relPath = imageUrl.replace('/_vatts/', '');
+        filePath = resolveWithin(path_1.default.join(projectDir, '.vatts'), relPath);
+    }
+    else {
+        // Arquivos públicos
+        filePath = resolveWithin(path_1.default.join(projectDir, 'public'), imageUrl);
+    }
+    if (!filePath || !fs_1.default.existsSync(filePath)) {
+        res.status(404).text('Image not found');
+        return;
+    }
+    // Cache headers agressivos (o navegador deve cachear isso por muito tempo)
+    res.header('Cache-Control', 'public, max-age=31536000, immutable');
+    res.header('Vary', 'Accept');
+    // Tenta carregar o sharp
+    let sharp;
+    try {
+        // @ts-ignore
+        sharp = require('sharp');
+    }
+    catch (e) {
+        // Se não tiver sharp, avisa uma vez e serve o arquivo original
+        if (!global.__vatts_sharp_warned) {
+            console_1.default.warn('Package "sharp" not found. Image optimization is disabled. Install it with: npm install sharp');
+            global.__vatts_sharp_warned = true;
+        }
+    }
+    // Se não tiver Sharp ou parâmetros, serve original
+    if (!sharp || (!widthStr && !heightStr && !qualityStr)) {
+        const ext = path_1.default.extname(filePath).toLowerCase();
+        const contentTypes = {
+            '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+            '.webp': 'image/webp', '.avif': 'image/avif', '.gif': 'image/gif',
+            '.svg': 'image/svg+xml'
+        };
+        res.header('Content-Type', contentTypes[ext] || 'application/octet-stream');
+        const fileBuffer = await fs_1.default.promises.readFile(filePath);
+        res.send(fileBuffer);
+        return;
+    }
+    try {
+        // --- SISTEMA DE CACHE EM DISCO (TEMPORÁRIO EM .vatts) ---
+        const cacheDir = path_1.default.join(projectDir, '.vatts', 'cache', 'images');
+        // Garante que a pasta existe (síncrono na primeira vez é ok, ou async)
+        if (!fs_1.default.existsSync(cacheDir)) {
+            fs_1.default.mkdirSync(cacheDir, { recursive: true });
+        }
+        const width = widthStr ? parseInt(widthStr, 10) : undefined;
+        const height = heightStr ? parseInt(heightStr, 10) : undefined;
+        const quality = qualityStr ? parseInt(qualityStr, 10) : 75;
+        // Gera um hash único baseado em TODOS os parâmetros
+        // Ex: /img.png?w=100&h=200&q=80 -> hash unico
+        const cacheKey = `${imageUrl}?w=${width}&h=${height}&q=${quality}`;
+        const hash = crypto_1.default.createHash('md5').update(cacheKey).digest('hex');
+        // Define a extensão do arquivo de cache
+        const extOriginal = path_1.default.extname(filePath).toLowerCase();
+        let extOutput = '.webp'; // Padrão é converter para WebP
+        // Exceções que não viram WebP
+        if (extOriginal === '.svg' || extOriginal === '.gif') {
+            extOutput = extOriginal;
+        }
+        const cachedFilePath = path_1.default.join(cacheDir, `${hash}${extOutput}`);
+        // 1. VERIFICA SE JÁ EXISTE NO CACHE
+        if (fs_1.default.existsSync(cachedFilePath)) {
+            // Serve direto do cache (Disco)
+            // console.log(`[Vatts] Serving cached image: ${imageUrl}`);
+            const contentTypes = {
+                '.webp': 'image/webp',
+                '.svg': 'image/svg+xml',
+                '.gif': 'image/gif'
+            };
+            res.header('Content-Type', contentTypes[extOutput] || 'application/octet-stream');
+            const cachedBuffer = await fs_1.default.promises.readFile(cachedFilePath);
+            res.send(cachedBuffer);
+            return;
+        }
+        // 2. SE NÃO EXISTIR, PROCESSA COM SHARP
+        // console.log(`[Vatts] Processing image: ${imageUrl}`);
+        const transformer = sharp(filePath);
+        transformer.rotate();
+        const isValidWidth = width && !isNaN(width);
+        const isValidHeight = height && !isNaN(height);
+        if (isValidWidth || isValidHeight) {
+            transformer.resize(isValidWidth ? width : null, isValidHeight ? height : null, { withoutEnlargement: true });
+        }
+        if (extOriginal === '.png' || extOriginal === '.jpg' || extOriginal === '.jpeg' || extOriginal === '.webp') {
+            transformer.webp({ quality });
+            res.header('Content-Type', 'image/webp');
+        }
+        else {
+            // Outros tipos mantêm original
+            const contentTypes = {
+                '.svg': 'image/svg+xml',
+                '.gif': 'image/gif'
+            };
+            res.header('Content-Type', contentTypes[extOriginal] || 'application/octet-stream');
+        }
+        const optimizedBuffer = await transformer.toBuffer();
+        // 3. SALVA NO CACHE PARA A PRÓXIMA VEZ
+        // Escreve em background para não bloquear totalmente, mas aguarda para segurança
+        try {
+            await fs_1.default.promises.writeFile(cachedFilePath, optimizedBuffer);
+        }
+        catch (writeErr) {
+            console_1.default.error('Failed to write image cache:', writeErr);
+        }
+        res.send(optimizedBuffer);
+    }
+    catch (error) {
+        console_1.default.error('Error optimizing image:', error);
+        res.status(500).text('Image optimization failed');
+    }
+}
 // Exporta os adapters para uso manual se necessário
 var express_2 = require("./adapters/express");
 Object.defineProperty(exports, "ExpressAdapter", { enumerable: true, get: function () { return express_2.ExpressAdapter; } });
@@ -332,7 +466,8 @@ function vatts(options) {
                 genericReq.hotReloadManager = hotReloadManager;
                 const { hostname } = req.headers;
                 const method = (genericReq.method || 'GET').toUpperCase();
-                const pathname = new URL(genericReq.url, `http://${hostname}:${port}`).pathname;
+                const urlObj = new URL(genericReq.url, `http://${hostname}:${port}`);
+                const pathname = urlObj.pathname;
                 if (pathname === types_1.RPC_ENDPOINT && method === 'POST') {
                     try {
                         const result = await (0, server_1.executeRpc)({
@@ -352,6 +487,12 @@ function vatts(options) {
                 if (pathname === '/hweb-hotreload/' && genericReq.headers.upgrade === 'websocket' && hotReloadManager) {
                     return;
                 }
+                // --- SISTEMA DE OTIMIZAÇÃO DE IMAGEM ---
+                if (pathname.includes('/_vatts/image')) {
+                    await handleImageOptimization(genericReq, genericRes, dir);
+                    return;
+                }
+                // ---------------------------------------
                 if (pathname !== '/' && !pathname.startsWith('/api/') && !pathname.startsWith('/.vatts')) {
                     const publicDir = path_1.default.join(dir, 'public');
                     if (!isSuspiciousPathname(pathname)) {

package/dist/renderer.js

@@ -10,6 +10,7 @@ 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("./client/BuildingPage"));
 // --- Helpers de Servidor ---
 // Função auxiliar para importar módulos ignorando CSS (mesma lógica do router.ts)
 function requireWithoutStyles(modulePath) {
@@ -241,8 +242,13 @@ async function renderAsStream({ req, res, route, params, allRoutes }) {
         if (!assets || assets.scripts.length === 0) {
             // Se falhar o build, restauramos o console para o erro aparecer se necessário
             restoreConsole();
-            res.setHeader('Content-Type', 'text/html');
-            res.end(getBuildingHTML());
+            // Usando stream para a tela de loading também, agora via React Component
+            const { pipe } = (0, server_1.renderToPipeableStream)((0, jsx_runtime_1.jsx)(BuildingPage_1.default, {}), {
+                onShellReady() {
+                    res.setHeader('Content-Type', 'text/html');
+                    pipe(res);
+                }
+            });
             return;
         }
         // 2. Preparar Layout
@@ -343,267 +349,3 @@ async function renderAsStream({ req, res, route, params, allRoutes }) {
 async function render(options) {
     return "";
 }
-// Função para retornar HTML de "Build em andamento" com auto-refresh
-function getBuildingHTML() {
-    let version = "1.0.0";
-    try {
-        version = require("../package.json").version;
-    }
-    catch (e) { }
-    return `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vatts.js | Building...</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-solid: #0d0d0d;
-            --card-bg: rgba(10, 10, 12, 0.95);
-            /* CORES ALTERADAS: Cyan para Laranja/Vermelho */
-            --primary: #ff6b35;
-            --primary-glow: rgba(255, 107, 53, 0.5);
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-        }
-
-        body {
-            margin: 0;
-            padding: 0;
-            width: 100vw;
-            height: 100vh;
-            background-color: var(--bg-solid);
-            font-family: 'Inter', sans-serif;
-            color: var(--text-main);
-            overflow: hidden;
-            position: relative;
-        }
-
-        /* Centralização Absoluta Perfeita */
-        .container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            pointer-events: none;
-        }
-
-        .build-card {
-            pointer-events: auto;
-            position: relative;
-            width: 100%;
-            max-width: 420px;
-            background: var(--card-bg);
-            /* COR ALTERADA: Borda laranja sutil */
-            box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.15), 0 40px 80px -20px rgba(0, 0, 0, 0.8);
-            border-radius: 20px;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-        }
-
-
-        .neon-line {
-            height: 1px;
-            width: 100%;
-            /* COR ALTERADA: Gradiente Laranja/Vermelho */
-            background: linear-gradient(90deg, transparent, #e85d04, #ff6b35, transparent);
-            box-shadow: 0 0 15px var(--primary-glow);
-        }
-
-        .content {
-            padding: 40px 32px;
-            width: 100%;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        /* Logo Animation */
-        .logo-wrapper {
-            position: relative;
-            margin-bottom: 24px;
-        }
-        
-        .logo-wrapper img {
-            width: 64px;
-            height: 64px;
-            object-fit: contain;
-            position: relative;
-            z-index: 2;
-        }
-
-        .logo-glow {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 100%;
-            height: 100%;
-            /* COR ALTERADA: Brilho da logo */
-            background: var(--primary);
-            filter: blur(25px);
-            opacity: 0.2;
-            border-radius: 50%;
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        h1 {
-            margin: 0;
-            font-size: 2rem;
-            font-weight: 800;
-            letter-spacing: -0.03em;
-            background: linear-gradient(180deg, #ffffff 0%, #94a3b8 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        h1 span {
-            /* COR ALTERADA: ".js" */
-            color: var(--primary);
-            -webkit-text-fill-color: var(--primary);
-        }
-
-        p {
-            margin: 8px 0 32px 0;
-            color: var(--text-muted);
-            font-size: 0.9rem;
-            font-weight: 500;
-        }
-
-        /* Terminal de Progresso Falso */
-        .terminal-box {
-            width: 100%;
-            background: rgba(0, 0, 0, 0.4);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            border-radius: 12px;
-            padding: 16px;
-            text-align: left;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.75rem;
-            color: #64748b;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .term-line {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .term-spinner {
-            width: 10px;
-            height: 10px;
-            /* COR ALTERADA: Spinner animado */
-            border: 2px solid rgba(255, 107, 53, 0.2);
-            border-top-color: var(--primary);
-            border-radius: 50%;
-            animation: spin 0.6s linear infinite;
-        }
-
-        .file-name { color: var(--text-muted); }
-        /* COR ALTERADA: Texto de destaque no terminal */
-        .accent { color: var(--primary); }
-
-        /* Footer Status */
-        .card-footer {
-            width: 100%;
-            padding: 12px 32px;
-            background: rgba(0,0,0,0.3);
-            border-top: 1px solid rgba(255,255,255,0.03);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 11px;
-            color: rgba(255,255,255,0.2);
-            box-sizing: border-box;
-        }
-
-        .status-active {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            /* COR ALTERADA: Texto Hot Reload */
-            color: var(--primary);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        .dot {
-            width: 6px;
-            height: 6px;
-            /* COR ALTERADA: Pontinho brilhante */
-            background-color: var(--primary);
-            border-radius: 50%;
-            box-shadow: 0 0 8px var(--primary);
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
-            50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.2); }
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="build-card">
-            <div class="neon-line"></div>
-            
-            <div class="content">
-                <div class="logo-wrapper">
-                    <div class="logo-glow"></div>
-                    <img src="https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo-v.png" alt="Vatts Logo">
-                </div>
-
-                <h1>Vatts<span>.js</span></h1>
-                <p>Building your masterpiece...</p>
-
-                <div class="terminal-box">
-                    <div class="term-line">
-                        <div class="term-spinner"></div>
-                        <span class="file-name">Compiling <span class="accent">src/vatts.ts</span>...</span>
-                    </div>
-                    <div class="term-line" style="opacity: 0.5;">
-                        <span>✓</span>
-                        <span class="file-name">Optimizing assets</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="card-footer">
-                <span>Building...</span>
-                <div class="status-active">
-                    <div class="dot"></div>
-                    v${version}
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        setTimeout(() => {
-            window.location.reload();
-        }, 2500);
-    </script>
-</body>
-</html>`;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vatts",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "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",
@@ -80,6 +80,7 @@
     "commander": "^14.0.2",
     "rollup": "^4.55.2",
     "rollup-plugin-esbuild": "^6.2.1",
+    "sharp": "^0.34.5",
     "ts-loader": "9.5.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
@@ -94,7 +95,8 @@
     "@types/express": "^4.17.25",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@types/ws": "^8.18.1"
+    "@types/ws": "^8.18.1",
+    "image-size": "^2.0.2"
   },
   "scripts": {
     "build": "tsc"