vatts 1.1.1 → 1.1.2

package/dist/builder.js

@@ -20,6 +20,14 @@ const path = require('path');
 const Console = require("./api/console").default;
 const fs = require('fs');
 const { readdir, stat, rm } = require("node:fs/promises");
+// Tenta carregar o Sharp para otimização de imagens
+let sharp;
+try {
+    sharp = require('sharp');
+}
+catch (e) {
+    Console.warn("Sharp não encontrado. Otimização de imagem (resize) desativada. Instale com: npm install sharp");
+}
 // Plugins Oficiais do Rollup
 const nodeResolve = require('@rollup/plugin-node-resolve').default;
 const commonjs = require('@rollup/plugin-commonjs').default;
@@ -202,8 +210,8 @@ const customPostCssPlugin = (isProduction) => {
     };
 };
 /**
- * Plugin Inteligente para Assets (Otimizado para RAM)
- * - Agora utiliza emissão de arquivos também em DEV para arquivos grandes.
+ * Plugin Inteligente para Assets (Otimizado para RAM e agora com Sharp)
+ * - Suporta redimensionamento via query params: import img from './image.png?w=200&h=200'
  */
 const smartAssetPlugin = (isProduction) => {
     // 4KB - Arquivos maiores que isso viram referência externa.
@@ -212,7 +220,8 @@ const smartAssetPlugin = (isProduction) => {
     return {
         name: 'smart-asset-loader',
         async load(id) {
-            const cleanId = id.split('?')[0];
+            // Separa o ID dos parâmetros de query
+            const [cleanId, queryParams] = id.split('?');
             if (cleanId.startsWith('\0'))
                 return null;
             const ext = path.extname(cleanId).slice(1).toLowerCase();
@@ -236,6 +245,46 @@ const smartAssetPlugin = (isProduction) => {
                 return `export default ${JSON.stringify(content)};`;
             }
             let buffer = await fs.promises.readFile(cleanId);
+            // --- VATTS IMAGE OPTIMIZATION (SHARP) ---
+            // Verifica se tem sharp e se tem parâmetros de resize (w=, h=, q=)
+            if (sharp && queryParams && ['png', 'jpg', 'jpeg', 'webp', 'avif'].includes(ext)) {
+                try {
+                    const params = new URLSearchParams(queryParams);
+                    const width = params.get('w') || params.get('width');
+                    const height = params.get('h') || params.get('height');
+                    const quality = params.get('q') || params.get('quality');
+                    if (width || height || quality) {
+                        let transformer = sharp(buffer);
+                        if (width || height) {
+                            transformer = transformer.resize({
+                                width: width ? parseInt(width) : null,
+                                height: height ? parseInt(height) : null,
+                                fit: 'cover', // Padrão 'cover' para manter aspect ratio preenchendo
+                                withoutEnlargement: true // Não aumenta se a imagem original for menor
+                            });
+                        }
+                        // Aplica qualidade/compressão se solicitado
+                        if (quality) {
+                            const q = parseInt(quality);
+                            if (ext === 'jpeg' || ext === 'jpg')
+                                transformer.jpeg({ quality: q });
+                            if (ext === 'webp')
+                                transformer.webp({ quality: q });
+                            if (ext === 'avif')
+                                transformer.avif({ quality: q });
+                            if (ext === 'png')
+                                transformer.png({ quality: q });
+                        }
+                        buffer = await transformer.toBuffer();
+                        // Atualiza o tamanho para a decisão de inline/emit abaixo
+                    }
+                }
+                catch (e) {
+                    Console.warn(`Failed to optimize image ${path.basename(cleanId)}:`, e.message);
+                    // Falha silenciosa: usa o buffer original
+                }
+            }
+            // ------------------------------------------
             const size = buffer.length;
             // Tratamento especial para SVG (inline SVG vs URL)
             if (type === 'svg') {
@@ -263,18 +312,17 @@ const smartAssetPlugin = (isProduction) => {
                 }
             }
             // Para outros assets:
-            // Se for pequeno, Base64 (reduz requests HTTP)
-            // Se for grande, Arquivo (reduz uso de RAM e tamanho do bundle JS)
-            // Essa lógica agora aplica para DEV e PROD. Base64 em Dev para arquivos grandes era o vilão da RAM.
+            // Se for pequeno (ou ficou pequeno após resize), Base64
             if (size < INLINE_LIMIT) {
                 const base64 = buffer.toString('base64');
                 buffer = null; // Libera memória do buffer bruto imediatamente
                 return `export default "data:${type};base64,${base64}";`;
             }
             else {
+                // Se ainda for grande, emite arquivo
                 const referenceId = this.emitFile({
                     type: 'asset',
-                    name: path.basename(cleanId),
+                    name: path.basename(cleanId), // O nome será hasheado pelo Rollup output options
                     source: buffer
                 });
                 buffer = null; // Libera memória

package/dist/client/client.d.ts

@@ -2,3 +2,5 @@ export { Link } from '../components/Link';
 export { RouteConfig, Metadata } from "../types";
 export { router } from './clientRouter';
 export { importServer } from './rpc';
+export { default as Image } from "./image/Image";
+export { default as VattsImage } from "./image/Image";

package/dist/client/client.js

@@ -15,8 +15,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.importServer = exports.router = exports.Link = void 0;
+exports.VattsImage = exports.Image = exports.importServer = exports.router = exports.Link = void 0;
 // Este arquivo exporta apenas código seguro para o cliente (navegador)
 var Link_1 = require("../components/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
@@ -25,3 +28,7 @@ Object.defineProperty(exports, "router", { enumerable: true, get: function () {
 // RPC (client-side)
 var rpc_1 = require("./rpc");
 Object.defineProperty(exports, "importServer", { enumerable: true, get: function () { return rpc_1.importServer; } });
+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; } });

package/dist/client/image/Image.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface VattsImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    width?: number | string;
+    height?: number | string;
+    quality?: number;
+    priority?: boolean;
+}
+declare const Image: React.FC<VattsImageProps>;
+export default Image;

package/dist/client/image/Image.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Image = ({ src, width, height, quality = 75, priority = false, className, style, alt = "", ...props }) => {
+    // Se a imagem for Base64 (pequena) ou externa (http), não otimizamos via backend local
+    const isOptimizable = src && !src.startsWith('data:') && !src.startsWith('http');
+    let optimizedSrc = src;
+    if (isOptimizable) {
+        const params = new URLSearchParams();
+        params.set('url', src);
+        // Tratamento inteligente para remover "px" se o usuário passar string
+        if (width) {
+            const w = String(width).replace('px', '');
+            if (!isNaN(Number(w)))
+                params.set('w', w);
+        }
+        if (height) {
+            const h = String(height).replace('px', '');
+            if (!isNaN(Number(h)))
+                params.set('h', h);
+        }
+        if (quality)
+            params.set('q', quality.toString());
+        optimizedSrc = `/_vatts/image?${params.toString()}`;
+    }
+    // Estilos base para prevenir layout shift se dimensões forem fornecidas
+    const baseStyle = {
+        // Se width for numérico, assume pixels, senão usa o valor string (ex: 100%)
+        width: width ? (typeof width === 'number' ? `${width}px` : width) : 'auto',
+        height: height ? (typeof height === 'number' ? `${height}px` : height) : 'auto',
+        ...style,
+    };
+    return ((0, jsx_runtime_1.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 }));
+};
+exports.default = Image;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vatts",
-  "version": "1.1.1",
+  "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"