vatts 1.2.5 → 1.3.1-alpha.1

package/dist/bin/vatts.js

@@ -39,24 +39,7 @@ function initializeApp(options, isDev) {
         port: options.port,
         hostname: options.hostname,
         framework: 'native',
-        ssl: null,
     };
-    if (options.ssl) {
-        const sslDir = path.resolve(process.cwd(), 'certs');
-        const keyPath = path.join(sslDir, 'key.pem');
-        const certPath = path.join(sslDir, 'cert.pem');
-        if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
-            appOptions.ssl = {
-                key: keyPath,
-                cert: certPath
-            };
-            appOptions.ssl.redirectPort = options.httpRedirectPort || 80;
-        }
-        else {
-            Console.error(`SSL Error: Ensure that './certs/key.pem' and './certs/cert.pem' exist.`);
-            process.exit(1);
-        }
-    }
     const helperModule = require("../helpers");
     const helper = helperModule.default(appOptions);
     helper.init();

package/dist/builder.js

@@ -29,6 +29,15 @@ const Console = require("./api/console").default;
 const fs = require('fs');
 const { readdir, stat, rm } = require("node:fs/promises");
 const { loadTsConfigPaths, resolveTsConfigAlias } = require('./tsconfigPaths');
+// --- Optimization Plugins ---
+let terser, replace;
+try {
+    terser = require('@rollup/plugin-terser');
+    replace = require('@rollup/plugin-replace');
+}
+catch (e) {
+    Console.warn("Optimization plugins (@rollup/plugin-terser, @rollup/plugin-replace) not found. Build will be larger.");
+}
 // Import Framework specific builders
 const { createReactConfig } = require('./react/react.build');
 const { createVueConfig } = require('./vue/vue.build');
@@ -61,7 +70,7 @@ const markdownPlugin = () => {
         }
     };
 };
-const customPostCssPlugin = (isProduction) => {
+const customPostCssPlugin = (isProduction, isWatch = false) => {
     let cachedProcessor = null;
     let configLoaded = false;
     const initPostCss = async (projectDir) => {
@@ -128,9 +137,15 @@ const customPostCssPlugin = (isProduction) => {
     };
     return {
         name: 'custom-postcss-plugin',
+        // O load hook anterior estava causando conflitos com o watch interno do Rollup.
+        // Removemos ele e usamos addWatchFile no transform.
         async transform(code, id) {
             if (!id.endsWith('.css'))
                 return null;
+            // Garante que o Rollup vigie este arquivo explicitamente
+            if (isWatch) {
+                this.addWatchFile(id);
+            }
             const processor = await initPostCss(process.cwd());
             let processedCss = code;
             if (processor) {
@@ -143,15 +158,29 @@ const customPostCssPlugin = (isProduction) => {
                 }
             }
             const cleanName = path.basename(id).split('?')[0];
+            // Sanitiza o nome para usar como ID no DOM
+            const safeId = cleanName.replace(/[^a-zA-Z0-9-_]/g, '_');
             const referenceId = this.emitFile({ type: 'asset', name: cleanName, source: processedCss });
+            // Lógica melhorada para injetar o CSS:
+            // 1. Usa um ID único para evitar tags <link> duplicadas.
+            // 2. Adiciona um timestamp (?t=...) no href se estiver em dev para quebrar o cache do navegador.
             return {
                 code: `
                 const cssUrl = String(import.meta.ROLLUP_FILE_URL_${referenceId});
                 if (typeof document !== 'undefined') {
-                    const link = document.createElement('link');
-                    link.rel = 'stylesheet';
-                    link.href = cssUrl;
-                    document.head.appendChild(link);
+                    const linkId = 'vatts-css-' + "${safeId}";
+                    let link = document.getElementById(linkId);
+                    
+                    if (!link) {
+                        link = document.createElement('link');
+                        link.id = linkId;
+                        link.rel = 'stylesheet';
+                        document.head.appendChild(link);
+                    }
+                    
+                    // Em dev, força o reload do CSS adicionando timestamp
+                    const timestamp = ${isWatch ? 'Date.now()' : 'null'};
+                    link.href = timestamp ? (cssUrl + '?t=' + timestamp) : cssUrl;
                 }
                 export default cssUrl;
             `,
@@ -224,6 +253,54 @@ const nodeBuiltIns = [
     'querystring', 'readline', 'stream', 'string_decoder', 'tls', 'tty', 'url',
     'util', 'v8', 'vm', 'zlib', 'module', 'worker_threads', 'perf_hooks'
 ];
+// --- Optimization Logic ---
+function getOptimizationPlugins(isProduction) {
+    const plugins = [];
+    const env = isProduction ? 'production' : 'development';
+    if (replace) {
+        plugins.push(replace({
+            'process.env.NODE_ENV': JSON.stringify(env),
+            'process.env': JSON.stringify({ NODE_ENV: env }),
+            'process.browser': 'true',
+            '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })',
+            preventAssignment: true,
+            objectGuards: true
+        }));
+    }
+    if (isProduction && terser) {
+        plugins.push(terser({
+            ecma: 2020,
+            module: true,
+            toplevel: true,
+            compress: {
+                passes: 3,
+                pure_getters: true,
+                unsafe: true,
+                unsafe_arrows: true,
+                unsafe_methods: true,
+                unsafe_proto: true,
+                booleans_as_integers: true,
+                drop_console: true,
+                drop_debugger: true,
+                keep_fargs: false,
+                hoist_funs: true,
+                hoist_vars: true,
+                reduce_funcs: true,
+                reduce_vars: true,
+                pure_funcs: ['console.info', 'console.debug', 'console.warn', 'console.log', 'Object.freeze']
+            },
+            mangle: {
+                properties: false,
+                toplevel: true,
+            },
+            format: {
+                comments: false,
+                wrap_func_args: false,
+            }
+        }));
+    }
+    return plugins;
+}
 // --- Core Logic ---
 function detectFramework(projectDir = process.cwd()) {
     try {
@@ -240,15 +317,13 @@ function detectFramework(projectDir = process.cwd()) {
     catch (e) { }
     return 'react';
 }
-async function getFrameworkConfig(entryPoint, outdir, isProduction) {
+async function getFrameworkConfig(entryPoint, outdir, isProduction, isWatch = false) {
     const framework = detectFramework();
-    // Plugins que rodam ANTES da resolução de módulos (Configuração, Bloqueios de Framework incorreto)
     const prePlugins = [
         tsconfigPathsPlugin(process.cwd()),
         {
             name: 'block-vue-artifacts-generic',
             load(id) {
-                // Se não for vue, bloqueia artifacts. O build.vue lida com o inverso.
                 if (framework !== 'vue' && (id.endsWith('.vue') || id.endsWith('.vue.js'))) {
                     return 'export default {};';
                 }
@@ -256,47 +331,102 @@ async function getFrameworkConfig(entryPoint, outdir, isProduction) {
             }
         }
     ];
-    // Plugins que rodam DEPOIS da transformação do Framework (Markdown, CSS, Assets)
-    // Isso é crucial para o Vue, pois o CSS é gerado dinamicamente e precisa ser pego aqui.
     const postPlugins = [
         markdownPlugin(),
-        customPostCssPlugin(isProduction),
+        customPostCssPlugin(isProduction, isWatch),
         smartAssetPlugin(isProduction)
     ];
     const pluginConfig = { prePlugins, postPlugins };
+    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);
     }
+    return config;
 }
 // --- Build Functions ---
 async function buildWithChunks(entryPoint, outdir, isProduction = false) {
     await cleanDirectoryExcept(outdir, 'temp');
     try {
-        const inputOptions = await getFrameworkConfig(entryPoint, outdir, isProduction);
+        const inputOptions = await getFrameworkConfig(entryPoint, outdir, isProduction, false);
         inputOptions.external = nodeBuiltIns;
+        if (isProduction) {
+            inputOptions.treeshake = {
+                preset: 'smallest',
+                moduleSideEffects: (id) => !id.includes('node_modules') || id.endsWith('.css') || id.includes('entry.client'),
+                propertyReadSideEffects: false,
+                tryCatchDeoptimization: false
+            };
+        }
+        const optimizationPlugins = getOptimizationPlugins(isProduction);
+        const replacePlugin = optimizationPlugins.find(p => p.name === 'replace');
+        const otherPlugins = optimizationPlugins.filter(p => p.name !== 'replace');
+        if (replacePlugin)
+            inputOptions.plugins.unshift(replacePlugin);
+        inputOptions.plugins.push(...otherPlugins);
+        const processPolyfill = `var process = { env: { NODE_ENV: "${isProduction ? 'production' : 'development'}" } };`;
         const outputOptions = {
             dir: outdir,
             format: 'es',
-            entryFileNames: isProduction ? 'main-[hash].js' : 'main.js',
-            chunkFileNames: 'chunks/[name]-[hash].js',
-            assetFileNames: 'assets/[name]-[hash][extname]',
+            entryFileNames: isProduction ? 'main.[hash].js' : 'main.js',
+            chunkFileNames: 'chunks/[name].[hash].js',
+            assetFileNames: 'assets/[name].[hash][extname]',
             sourcemap: !isProduction,
             compact: isProduction,
+            intro: processPolyfill,
             manualChunks(id) {
                 if (id.includes('node_modules')) {
                     const normalizedId = id.replace(/\\/g, '/');
-                    if (/\/node_modules\/(react|react-dom|scheduler|prop-types|loose-envify|object-assign)\//.test(normalizedId))
-                        return 'vendor-react';
-                    if (/\/node_modules\/(vue|@vue)\//.test(normalizedId))
-                        return 'vendor-vue';
-                    if (id.includes('framer-motion') || id.includes('@radix-ui') || id.includes('@headlessui'))
-                        return 'vendor-ui';
-                    if (id.includes('lodash') || id.includes('date-fns') || id.includes('axios'))
-                        return 'vendor-utils';
-                    return 'vendor';
+                    // --- VUE SPLITTING AVANÇADO ---
+                    if (/\/node_modules\/vue-router\//.test(normalizedId))
+                        return 'vendor-vue-router';
+                    if (/\/node_modules\/(pinia|vuex)\//.test(normalizedId))
+                        return 'vendor-vue-store';
+                    // Separa os modulos internos do Vue para evitar um chunk gigante
+                    if (/\/node_modules\/(vue|@vue)\//.test(normalizedId)) {
+                        if (normalizedId.includes('/runtime-core'))
+                            return 'vendor-vue-runtime-core';
+                        if (normalizedId.includes('/runtime-dom'))
+                            return 'vendor-vue-runtime-dom';
+                        if (normalizedId.includes('/reactivity'))
+                            return 'vendor-vue-reactivity';
+                        if (normalizedId.includes('/shared'))
+                            return 'vendor-vue-shared';
+                        if (normalizedId.includes('/compiler-'))
+                            return 'vendor-vue-compiler';
+                        return 'vendor-vue-core';
+                    }
+                    // --- REACT SPLITTING AVANÇADO ---
+                    // Separa DOM de Core e Scheduler
+                    if (/\/node_modules\/react-dom\//.test(normalizedId))
+                        return 'vendor-react-dom';
+                    if (/\/node_modules\/scheduler\//.test(normalizedId))
+                        return 'vendor-react-scheduler';
+                    if (/\/node_modules\/react-router/.test(normalizedId))
+                        return 'vendor-react-router';
+                    if (/\/node_modules\/react\//.test(normalizedId))
+                        return 'vendor-react-core';
+                    // --- UI LIBS (Granular) ---
+                    if (id.includes('framer-motion'))
+                        return 'vendor-framer';
+                    if (id.includes('@radix-ui'))
+                        return 'vendor-radix';
+                    if (id.includes('@headlessui'))
+                        return 'vendor-headless';
+                    if (id.includes('@heroicons'))
+                        return 'vendor-icons';
+                    // --- UTILS ---
+                    if (id.includes('lodash'))
+                        return 'vendor-lodash';
+                    if (id.includes('date-fns') || id.includes('moment'))
+                        return 'vendor-date';
+                    if (id.includes('axios'))
+                        return 'vendor-axios';
+                    // Resto cai em vendor-libs genérico para não criar 1 arquivo por pacote,
+                    // mas já tiramos o peso pesado acima.
+                    return 'vendor-libs';
                 }
             }
         };
@@ -313,15 +443,31 @@ async function build(entryPoint, outfile, isProduction = false) {
     const outdir = path.dirname(outfile);
     await cleanDirectoryExcept(outdir, 'temp');
     try {
-        const inputOptions = await getFrameworkConfig(entryPoint, outdir, isProduction);
+        const inputOptions = await getFrameworkConfig(entryPoint, outdir, isProduction, false);
         inputOptions.external = nodeBuiltIns;
+        if (isProduction) {
+            inputOptions.treeshake = {
+                preset: 'smallest',
+                moduleSideEffects: (id) => !id.includes('node_modules') || id.endsWith('.css') || id.includes('entry.client'),
+                propertyReadSideEffects: false
+            };
+        }
+        const optimizationPlugins = getOptimizationPlugins(isProduction);
+        const replacePlugin = optimizationPlugins.find(p => p.name === 'replace');
+        const otherPlugins = optimizationPlugins.filter(p => p.name !== 'replace');
+        if (replacePlugin)
+            inputOptions.plugins.unshift(replacePlugin);
+        inputOptions.plugins.push(...otherPlugins);
+        const processPolyfill = `var process = { env: { NODE_ENV: "${isProduction ? 'production' : 'development'}" } };`;
         const outputOptions = {
             file: outfile,
             format: 'iife',
             name: 'Vattsjs',
             sourcemap: !isProduction,
             inlineDynamicImports: true,
-            compact: true
+            compact: true,
+            annotations: true,
+            intro: processPolyfill
         };
         const bundle = await rollup(inputOptions);
         await bundle.write(outputOptions);
@@ -332,7 +478,6 @@ async function build(entryPoint, outfile, isProduction = false) {
         process.exit(1);
     }
 }
-// --- Watch Functions ---
 function handleWatcherEvents(watcher, hotReloadManager, resolveFirstBuild) {
     let currentBuildId = 0;
     let lastStartedBuildId = 0;
@@ -387,13 +532,19 @@ function handleWatcherEvents(watcher, hotReloadManager, resolveFirstBuild) {
 async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
     await cleanDirectoryExcept(outdir, 'temp');
     try {
-        const inputOptions = await getFrameworkConfig(entryPoint, outdir, false);
+        const inputOptions = await getFrameworkConfig(entryPoint, outdir, false, true);
         inputOptions.external = nodeBuiltIns;
+        const optimizationPlugins = getOptimizationPlugins(false);
+        inputOptions.plugins = [...inputOptions.plugins, ...optimizationPlugins];
+        const processPolyfill = `var process = { env: { NODE_ENV: "development" } };`;
         const outputOptions = {
             dir: outdir,
             format: 'es',
             entryFileNames: 'main.js',
-            sourcemap: true
+            // CHANGE: Remove hash in watch mode to prevent file accumulation in assets folder
+            assetFileNames: 'assets/[name][extname]',
+            sourcemap: true,
+            intro: processPolyfill
         };
         const watchOptions = {
             ...inputOptions,
@@ -414,12 +565,18 @@ async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
 async function watch(entryPoint, outfile, hotReloadManager = null) {
     const outdir = path.dirname(outfile);
     try {
-        const inputOptions = await getFrameworkConfig(entryPoint, outdir, false);
+        const inputOptions = await getFrameworkConfig(entryPoint, outdir, false, true);
         inputOptions.external = nodeBuiltIns;
+        const optimizationPlugins = getOptimizationPlugins(false);
+        inputOptions.plugins = [...inputOptions.plugins, ...optimizationPlugins];
+        const processPolyfill = `var process = { env: { NODE_ENV: "development" } };`;
         const outputOptions = {
             file: outfile,
             format: 'es',
-            sourcemap: true
+            // CHANGE: Remove hash in watch mode to prevent file accumulation
+            assetFileNames: 'assets/[name][extname]',
+            sourcemap: true,
+            intro: processPolyfill
         };
         const watchOptions = {
             ...inputOptions,

package/dist/helpers.d.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import http, { Server } from 'http';
 import type { VattsOptions, VattsConfig } from './types';
-import https from 'https';
+import http2 from 'http2';
 /**
  * Carrega o arquivo de configuração vatts.config.ts ou vatts.config.js do projeto
  * @param projectDir Diretório raiz do projeto
@@ -18,9 +18,9 @@ export declare function app(options?: VattsOptions): {
      */
     integrate: (serverApp: any) => Promise<any>;
     /**
-         * Inicia um servidor Vatts.js fechado (o usuário não tem acesso ao framework)
+     * Inicia um servidor Vatts.js fechado (o usuário não tem acesso ao framework)
      */
-    init: () => Promise<http.Server<typeof http.IncomingMessage, typeof http.ServerResponse> | https.Server<typeof http.IncomingMessage, typeof http.ServerResponse>>;
+    init: () => Promise<http.Server<typeof http.IncomingMessage, typeof http.ServerResponse> | http2.Http2SecureServer<typeof http.IncomingMessage, typeof http.ServerResponse, typeof http2.Http2ServerRequest, typeof http2.Http2ServerResponse>>;
     prepare: () => Promise<void>;
     getRequestHandler: () => (req: any, res: any, next?: any) => Promise<void> | void;
     setupWebSocket: (server: Server | any) => void;

package/dist/helpers.js

@@ -65,8 +65,8 @@ const path_1 = __importDefault(require("path"));
 // Helpers para integração com diferentes frameworks
 const index_js_1 = __importStar(require("./index.js")); // Importando o tipo
 const console_1 = __importStar(require("./api/console"));
-const https_1 = __importDefault(require("https")); // <-- ADICIONAR
-const fs_1 = __importDefault(require("fs")); // <-- ADICIONAR
+const http2_1 = __importDefault(require("http2")); // <-- ADICIONADO: Import do HTTP/2
+const fs_1 = __importDefault(require("fs"));
 // Registra loaders customizados para importar arquivos não-JS
 const { registerLoaders } = require('./loaders');
 registerLoaders({ projectDir: process.cwd() });
@@ -90,7 +90,8 @@ function getLocalExternalIp() {
 }
 const sendBox = (options) => {
     const isDev = options.dev;
-    const isSSL = options.ssl && options.ssl.key && options.ssl.cert;
+    // @ts-ignore
+    const isSSL = exports.config.ssl && exports.config.ssl.key && exports.config.ssl.cert;
     const protocol = isSSL ? 'https' : 'http';
     const localIp = getLocalExternalIp();
     // Estilos Clean
@@ -104,14 +105,16 @@ const sendBox = (options) => {
     console.log(timer + labelStyle + ' Access on:');
     console.log(' ');
     // 1. Local (Alinhamento: Local tem 6 letras + 4 espaços = 10)
-    console.info(timer + `${labelStyle}  ┃  Local:${console_1.Colors.Reset}    ${urlStyle}${protocol}://localhost:${options.port}${console_1.Colors.Reset}`);
+    console.info(timer + `${labelStyle}  ┃  Local:${console_1.Colors.Reset}    ${urlStyle}${protocol}://localhost:${exports.config?.port}${console_1.Colors.Reset}`);
     // 2. Network (Alinhamento: Network tem 8 letras + 2 espaços = 10)
     if (localIp) {
-        console.info(timer + `${labelStyle}  ┃  Network:${console_1.Colors.Reset}  ${urlStyle}${protocol}://${localIp}:${options.port}${console_1.Colors.Reset}`);
+        console.info(timer + `${labelStyle}  ┃  Network:${console_1.Colors.Reset}  ${urlStyle}${protocol}://${localIp}:${exports.config?.port}${console_1.Colors.Reset}`);
     }
     // 3. Infos Extras (Redirect HTTP -> HTTPS)
-    if (isSSL && options.ssl?.redirectPort) {
-        console.info(timer + `${labelStyle}  ┃  Redirect:${console_1.Colors.Reset} ${labelStyle}port ${options.ssl.redirectPort} ➜ https${console_1.Colors.Reset}`);
+    // @ts-ignore
+    if (isSSL && exports.config.ssl?.redirectPort) {
+        // @ts-ignore
+        console.info(timer + `${labelStyle}  ┃  Redirect:${console_1.Colors.Reset} ${labelStyle}port ${exports.config.ssl.redirectPort} ➜ https${console_1.Colors.Reset}`);
     }
     // 4. Info de Ambiente
     if (isDev) {
@@ -136,7 +139,8 @@ async function loadVattsConfig(projectDir, phase) {
         maxUrlLength: 2048,
         accessLogging: true,
         envFiles: [],
-        pathRouter: false
+        pathRouter: false,
+        port: 3000
     };
     try {
         // Tenta primeiro .ts, depois .js
@@ -246,7 +250,7 @@ function applyCors(req, res, corsConfig) {
 }
 /**
  * Middleware para parsing do body com proteções de segurança (versão melhorada).
-*/
+ */
 const parseBody = (req) => {
     // Constantes para limites de segurança
     const MAX_BODY_SIZE = 10 * 1024 * 1024; // 10MB limite total
@@ -331,7 +335,7 @@ async function initNativeServer(vattsApp, options, port, hostname) {
     options.envFiles = vattsConfig.envFiles;
     await vattsApp.prepare();
     const handler = vattsApp.getRequestHandler();
-    const msg = console_1.default.dynamicLine(`${console_1.Colors.Bright}Starting Vatts.js on port ${options.port}${console_1.Colors.Reset}`);
+    const msg = console_1.default.dynamicLine(`${console_1.Colors.Bright}Starting Vatts.js on port ${exports.config?.port}${console_1.Colors.Reset}`);
     // --- LÓGICA DO LISTENER (REUTILIZÁVEL) ---
     // Extraímos a lógica principal para uma variável
     // para que possa ser usada tanto pelo servidor HTTP quanto HTTPS.
@@ -461,18 +465,20 @@ async function initNativeServer(vattsApp, options, port, hostname) {
         }
     };
     // --- FIM DO LISTENER ---
-    let server; // O tipo do servidor pode variar
-    const isSSL = options.ssl && options.ssl.key && options.ssl.cert;
-    if (isSSL && options.ssl) {
+    let server; // <-- ADICIONADO: Suporte a Http2SecureServer
+    const isSSL = exports.config.ssl && exports.config.ssl.key && exports.config.ssl.cert;
+    if (isSSL && exports.config.ssl) {
         const sslOptions = {
-            key: fs_1.default.readFileSync(options.ssl.key),
-            cert: fs_1.default.readFileSync(options.ssl.cert),
-            ca: options.ssl.ca ? fs_1.default.readFileSync(options.ssl.ca) : undefined
+            key: fs_1.default.readFileSync(exports.config.ssl.key, 'utf8'),
+            cert: fs_1.default.readFileSync(exports.config.ssl.cert, 'utf8'),
+            ca: exports.config.ssl.ca ? fs_1.default.readFileSync(exports.config.ssl.ca, 'utf8') : undefined,
+            allowHTTP1: true // <-- IMPORTANTE: Garante compatibilidade com clientes HTTP/1.1
         };
-        // 1. Cria o servidor HTTPS principal
-        server = https_1.default.createServer(sslOptions, requestListener);
+        // 1. Cria o servidor HTTPS com HTTP/2
+        // Substituído https.createServer por http2.createSecureServer
+        server = http2_1.default.createSecureServer(sslOptions, requestListener);
         // 2. Cria o servidor de REDIRECIONAMENTO (HTTP -> HTTPS)
-        const httpRedirectPort = options.ssl.redirectPort;
+        const httpRedirectPort = exports.config.ssl.redirectPort;
         http_1.default.createServer((req, res) => {
             // Evita host header injection/open redirect: prefere hostname configurado
             const rawHost = String(req.headers['host'] || '').trim();
@@ -503,12 +509,18 @@ async function initNativeServer(vattsApp, options, port, hostname) {
     }
     // Configurações de segurança do servidor (usa configuração personalizada)
     server.setTimeout(vattsConfig.serverTimeout || 35000); // Timeout geral do servidor
-    server.maxHeadersCount = vattsConfig.maxHeadersCount || 100; // Limita número de headers
-    server.headersTimeout = vattsConfig.headersTimeout || 60000; // Timeout para headers
-    server.requestTimeout = vattsConfig.requestTimeout || 30000; // Timeout para requisições
+    // @ts-ignore (Propriedades específicas do HTTP/1, HTTP/2 gerencia isso de forma diferente, mas mantemos para o server HTTP padrão)
+    if (server.maxHeadersCount)
+        server.maxHeadersCount = vattsConfig.maxHeadersCount || 100;
+    // @ts-ignore
+    if (server.headersTimeout)
+        server.headersTimeout = vattsConfig.headersTimeout || 60000;
+    // @ts-ignore
+    if (server.requestTimeout)
+        server.requestTimeout = vattsConfig.requestTimeout || 30000;
     server.listen(port, hostname, () => {
-        sendBox({ ...options, port });
-        msg.end(`${console_1.Colors.Bright}Ready on port ${console_1.Colors.BgGreen} ${options.port} ${console_1.Colors.Reset}${console_1.Colors.Bright} in ${Date.now() - time}ms${console_1.Colors.Reset}\n`);
+        sendBox({ ...options });
+        msg.end(`${console_1.Colors.Bright}Ready on port ${console_1.Colors.BgGreen} ${exports.config?.port} ${console_1.Colors.Reset}${console_1.Colors.Bright} in ${Date.now() - time}ms${console_1.Colors.Reset}\n`);
     });
     // Configura WebSocket para hot reload (Comum a ambos)
     vattsApp.setupWebSocket(server);
@@ -574,7 +586,7 @@ function app(options = {}) {
             return serverApp;
         },
         /**
-             * Inicia um servidor Vatts.js fechado (o usuário não tem acesso ao framework)
+         * Inicia um servidor Vatts.js fechado (o usuário não tem acesso ao framework)
          */
         init: async () => {
             const currentVersion = require('../package.json').version;
@@ -606,7 +618,7 @@ ${console_1.Colors.Bright + console_1.Colors.FgCyan}    \\  /  /\\   |   |  /__\
 ${console_1.Colors.Bright + console_1.Colors.FgCyan}     \\/  /~~\\  |   |  .__/ .${console_1.Colors.FgWhite}   \\__/ .__/ ${message}
                                      
                                      `);
-            const actualPort = options.port || 3000;
+            const actualPort = exports.config?.port || 3000;
             const actualHostname = options.hostname || "0.0.0.0";
             if (framework !== 'native') {
                 console_1.default.warn(`The "${framework}" framework was selected, but the init() method only works with the "native" framework. Starting native server...`);

package/dist/index.js

@@ -347,7 +347,7 @@ import '${relativeEntryPath}';
     }
 }
 function vatts(options) {
-    const { dev = true, dir = process.cwd(), port = 3000, envFiles } = options;
+    const { dev = true, dir = process.cwd(), envFiles } = options;
     (0, env_1.loadEnv)({ dir, dev, envFiles });
     // @ts-ignore
     process.vatts = options;
@@ -482,7 +482,7 @@ function vatts(options) {
                 genericReq.hotReloadManager = hotReloadManager;
                 const { hostname } = req.headers;
                 const method = (genericReq.method || 'GET').toUpperCase();
-                const urlObj = new URL(genericReq.url, `http://${hostname}:${port}`);
+                const urlObj = new URL(genericReq.url, `http://${hostname}:${helpers_1.config?.port}`);
                 const pathname = urlObj.pathname;
                 if (pathname === types_1.RPC_ENDPOINT && method === 'POST') {
                     try {
@@ -557,27 +557,71 @@ function vatts(options) {
                     const requestPath = pathname.replace('/_vatts/', '');
                     if (!isSuspiciousPathname(requestPath)) {
                         const filePath = resolveWithin(staticPath, requestPath);
+                        // Verifica se existe E se é arquivo
                         if (filePath && fs_1.default.existsSync(filePath) && fs_1.default.statSync(filePath).isFile()) {
+                            const stats = fs_1.default.statSync(filePath);
                             const ext = path_1.default.extname(filePath).toLowerCase();
                             const contentTypes = {
                                 '.js': 'application/javascript',
                                 '.css': 'text/css',
                                 '.map': 'application/json',
-                                '.vue': 'text/css'
+                                '.vue': 'text/css',
+                                '.png': 'image/png',
+                                '.jpg': 'image/jpeg',
+                                '.svg': 'image/svg+xml'
                             };
+                            // CORREÇÃO 1: Cache diferenciado para Dev vs Produção
+                            if (options.dev) {
+                                // Em dev, proibimos o cache para garantir que main.js atualize sempre
+                                genericRes.header('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+                                genericRes.header('Pragma', 'no-cache');
+                                genericRes.header('Expires', '0');
+                            }
+                            else {
+                                // Em produção, mantemos o cache agressivo (assumindo hash nos arquivos exceto entry points)
+                                // Dica: Se o main.js de prod também não tiver hash, use 'no-cache' nele também
+                                genericRes.header('Cache-Control', 'public, max-age=31536000, immutable');
+                            }
+                            const lastModified = stats.mtime.toUTCString();
+                            genericRes.header('Last-Modified', lastModified);
                             genericRes.header('Content-Type', contentTypes[ext] || 'text/plain');
+                            // Lógica 304 (Mantida igual, pois ajuda na performance mesmo em dev se o arquivo n mudou nada)
+                            const ifModifiedSince = req.headers['if-modified-since'];
+                            if (ifModifiedSince) {
+                                const requestDate = new Date(ifModifiedSince).getTime();
+                                const fileDate = new Date(lastModified).getTime();
+                                if (requestDate >= fileDate) {
+                                    if (adapter.type === 'express') {
+                                        res.status(304).end();
+                                    }
+                                    else {
+                                        genericRes.status(304);
+                                        genericRes.send(null);
+                                    }
+                                    return;
+                                }
+                            }
+                            // Envia o arquivo
                             if (adapter.type === 'express') {
                                 res.sendFile(filePath);
                             }
-                            else if (adapter.type === 'fastify') {
+                            else {
                                 const fileContent = fs_1.default.readFileSync(filePath);
                                 genericRes.send(fileContent);
                             }
-                            else if (adapter.type === 'native') {
-                                const fileContent = fs_1.default.readFileSync(filePath);
-                                genericRes.send(fileContent);
+                            return; // Encerra aqui com sucesso
+                        }
+                        else {
+                            // CORREÇÃO 2: Se o arquivo não existe, retornamos 404 AQUI.
+                            // Isso impede que o código continue e caia na rota de renderização do HTML (SPA Fallback)
+                            if (adapter.type === 'express') {
+                                res.status(404).send('Vatts Asset Not Found');
                             }
-                            return;
+                            else {
+                                genericRes.status(404);
+                                genericRes.send('Vatts Asset Not Found');
+                            }
+                            return; // Mata a requisição
                         }
                     }
                 }

package/dist/react/react.build.d.ts

@@ -15,6 +15,8 @@ export function createReactConfig(entryPoint: string, outdir: string, isProducti
     treeshake: {
         moduleSideEffects: string;
         preset: string;
+        propertyReadSideEffects: boolean;
+        tryCatchDeoptimization: boolean;
     };
     cache: boolean;
     perf: boolean;

package/dist/react/react.build.js

@@ -32,7 +32,8 @@ const jsonPlugin = require("@rollup/plugin-json").default;
 async function createReactConfig(entryPoint, outdir, isProduction, { prePlugins = [], postPlugins = [] } = {}) {
     const replaceValues = {
         'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development'),
-        'process.env.PORT': JSON.stringify(process.vatts?.port || 3000)
+        'process.env.PORT': JSON.stringify(process.vatts?.port || 3000),
+        preventAssignment: true
     };
     const extensions = ['.mjs', '.js', '.json', '.node', '.jsx', '.tsx', '.ts'];
     const esbuildLoaders = {
@@ -42,39 +43,47 @@ async function createReactConfig(entryPoint, outdir, isProduction, { prePlugins
     };
     return {
         input: entryPoint,
+        // [OPTIMIZATION] Preset 'smallest' é o mais agressivo do Rollup
         treeshake: {
             moduleSideEffects: 'no-external',
-            preset: isProduction ? 'recommended' : 'smallest'
+            preset: isProduction ? 'smallest' : 'recommended',
+            propertyReadSideEffects: false,
+            tryCatchDeoptimization: false
         },
         cache: isProduction ? true : false,
         perf: false,
         maxParallelFileOps: 20,
         plugins: [
-            replace({
-                preventAssignment: true,
-                values: replaceValues
-            }),
+            replace(replaceValues),
             ...prePlugins,
             nodeResolve({
                 extensions,
                 preferBuiltins: true,
                 browser: true,
+                // [FIX] Apenas dedupe React principal para evitar conflitos, mas deixe libs internas resolverem
                 dedupe: ['react', 'react-dom']
             }),
             commonjs({
                 sourceMap: !isProduction,
-                requireReturnsDefault: 'auto',
-                ignoreTryCatch: true
+                // [FIX] 'preferred' ajuda o Rollup a escolher o export default correto para React
+                // Isso muitas vezes resolve o erro de "undefined reading createElement"
+                requireReturnsDefault: 'preferred',
+                ignoreTryCatch: true,
+                transformMixedEsModules: true,
+                esmExternals: false
             }),
             ...postPlugins,
-            jsonPlugin(),
+            jsonPlugin({
+                compact: true
+            }),
             esbuild({
                 include: /\.[jt]sx?$/,
                 exclude: /node_modules/,
                 sourceMap: !isProduction,
-                minify: isProduction,
+                // [OPTIMIZATION] Mantemos false aqui pois o Terser (no bundler principal) fará o trabalho pesado
+                minify: false,
                 legalComments: 'none',
-                treeShaking: isProduction,
+                treeShaking: true,
                 target: 'esnext',
                 jsx: 'automatic',
                 define: { __VERSION__: '"1.0.0"' },

package/dist/react/renderer-react.js

@@ -57,22 +57,6 @@ function requireWithoutStyles(modulePath) {
         });
     }
 }
-// --- Gerenciamento de Console (Silenciador) ---
-const originalConsole = {
-    log: console.log,
-    info: console.info,
-    debug: console.debug
-};
-function silenceConsole() {
-    console.log = () => { };
-    console.info = () => { };
-    console.debug = () => { };
-}
-function restoreConsole() {
-    console.log = originalConsole.log;
-    console.info = originalConsole.info;
-    console.debug = originalConsole.debug;
-}
 // --- Funções de Metadata e Scripts ---
 function generateMetaTags(metadata) {
     const tags = [];
@@ -173,6 +157,7 @@ function getBuildAssets(req) {
     const projectDir = process.cwd();
     const distDir = path_1.default.join(projectDir, '.vatts');
     const assetsDir = path_1.default.join(distDir, 'assets');
+    const chunksDir = path_1.default.join(distDir, 'chunks');
     if (!fs_1.default.existsSync(distDir))
         return null;
     let scripts = [];
@@ -216,6 +201,7 @@ function getBuildAssets(req) {
             processDirectory(distDir, '/_vatts');
             // Scan em .vatts/assets/ (Assets estáticos, chunks, CSS extraído)
             processDirectory(assetsDir, '/_vatts/assets');
+            processDirectory(chunksDir, '/_vatts/chunks');
             // Ordenação básica para garantir que o main carregue
             scripts.sort((a, b) => {
                 if (a.includes('main'))
@@ -255,13 +241,11 @@ async function render({ req, res, route, params, allRoutes }) {
     const isProduction = !req.hwebDev;
     const hotReloadManager = req.hotReloadManager;
     // SILENCIAR CONSOLE: Inicia o silêncio para evitar logs de renderização
-    silenceConsole();
     try {
         // 1. Verificar Build - Se não tiver scripts, retorna tela de Loading
         const assets = getBuildAssets(req);
         if (!assets || assets.scripts.length === 0) {
             // 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 } = (0, server_1.renderToPipeableStream)(react_1.default.createElement(BuildingPage_1.default, null), {
                 onShellReady() {
@@ -281,10 +265,7 @@ async function render({ req, res, route, params, allRoutes }) {
                 LayoutComponent = layoutModule.default;
             }
             catch (e) {
-                // Usamos console.error original aqui, pois erro de layout é crítico
-                restoreConsole();
                 console.error("Error loading layout component for SSR:", e);
-                silenceConsole(); // Volta a silenciar
             }
         }
         // 3. Preparar Metadata
@@ -339,14 +320,11 @@ async function render({ req, res, route, params, allRoutes }) {
                 // Usar bootstrapModules para scripts tipo módulo (ESM)
                 bootstrapModules: assets.scripts,
                 onShellReady() {
-                    // Restaurar console assim que o shell estiver pronto (cabeçalho enviado)
-                    restoreConsole();
                     res.setHeader('Content-Type', 'text/html');
                     pipe(res);
                     resolve();
                 },
                 onShellError(error) {
-                    restoreConsole(); // Restaura para mostrar o erro real
                     console.error('Streaming Shell Error:', error);
                     res.statusCode = 500;
                     res.setHeader('Content-Type', 'text/html');
@@ -363,7 +341,6 @@ async function render({ req, res, route, params, allRoutes }) {
         });
     }
     catch (err) {
-        restoreConsole();
         console.error("Critical Render Error:", err);
         throw err;
     }

package/dist/types.d.ts

@@ -16,15 +16,8 @@ export interface WebSocketContext {
 export interface VattsOptions {
     dev?: boolean;
     hostname?: string;
-    port?: number;
     dir?: string;
     framework?: 'express' | 'fastify' | 'native';
-    ssl?: {
-        redirectPort: number;
-        key: string;
-        cert: string;
-        ca?: string;
-    };
     envFiles?: string[];
 }
 /**
@@ -32,6 +25,13 @@ export interface VattsOptions {
  * Essas configurações podem ser definidas no arquivo vatts.config.js
  */
 export interface VattsConfig {
+    port: number;
+    ssl?: {
+        redirectPort: number;
+        key: string;
+        cert: string;
+        ca?: string;
+    };
     /**
      * Prefere utilizar rotas por path, sem precisar registrar?
      * Padrão: false

package/dist/vue/renderer.vue.js

@@ -101,6 +101,10 @@ function extractComponentPreloads(componentPath) {
                 tags.add(`<link rel="preload" as="style" href="${publicUrl}">`);
                 tags.add(`<link rel="stylesheet" href="${publicUrl}">`);
             }
+            else if (['.js'].includes(ext)) {
+                // Adicionado suporte para JS
+                tags.add(`<link rel="preload" as="script" href="${publicUrl}">`);
+            }
             else if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'].includes(ext)) {
                 tags.add(`<link rel="preload" as="image" href="${publicUrl}">`);
             }
@@ -110,7 +114,8 @@ function extractComponentPreloads(componentPath) {
         // - import foo from './foo.png' (Named import)
         // - import './style.css' (Side-effect import)
         // - require('./image.jpg') (CommonJS)
-        const importRegex = /(?:import(?:\s+[^;'"]+\s+from)?\s+|require\(\s*)['"]([^'"]+\.(png|jpg|jpeg|gif|svg|webp|avif|mp4|webm|css))['"]/g;
+        // Adicionado |js na lista de extensões
+        const importRegex = /(?:import(?:\s+[^;'"]+\s+from)?\s+|require\(\s*)['"]([^'"]+\.(png|jpg|jpeg|gif|svg|webp|avif|mp4|webm|css|js))['"]/g;
         let match;
         while ((match = importRegex.exec(content)) !== null) {
             processPath(match[1]);

package/dist/vue/vue.build.d.ts

@@ -15,6 +15,8 @@ export function createVueConfig(entryPoint: string, outdir: string, isProduction
     treeshake: {
         moduleSideEffects: string;
         preset: string;
+        propertyReadSideEffects: boolean;
+        tryCatchDeoptimization: boolean;
     };
     cache: boolean;
     perf: boolean;

package/dist/vue/vue.build.js

@@ -56,7 +56,8 @@ async function createVueConfig(entryPoint, outdir, isProduction, { prePlugins =
         'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development'),
         'process.env.PORT': JSON.stringify(process.vatts?.port || 3000),
         '__VUE_OPTIONS_API__': JSON.stringify(true),
-        '__VUE_PROD_DEVTOOLS__': JSON.stringify(!isProduction)
+        '__VUE_PROD_DEVTOOLS__': JSON.stringify(!isProduction),
+        preventAssignment: true
     };
     let vuePlugin = null;
     try {
@@ -75,8 +76,12 @@ async function createVueConfig(entryPoint, outdir, isProduction, { prePlugins =
         const vueFactory = vuePkg.default || vuePkg;
         if (typeof vueFactory === 'function') {
             vuePlugin = vueFactory({
+                // [OPTIMIZATION] Informa explicitamente que é produção para otimizações internas do Vue
+                isProduction: isProduction,
                 compilerOptions: {
-                    isCustomElement: (tag) => tag.includes('-')
+                    isCustomElement: (tag) => tag.includes('-'),
+                    // [FIX] Remove comentários HTML (<!-- ... -->) do template compilado
+                    comments: false
                 }
             });
         }
@@ -93,18 +98,18 @@ async function createVueConfig(entryPoint, outdir, isProduction, { prePlugins =
     };
     return {
         input: entryPoint,
+        // [OPTIMIZATION] Preset 'smallest' é o mais agressivo do Rollup
         treeshake: {
             moduleSideEffects: 'no-external',
-            preset: isProduction ? 'recommended' : 'smallest'
+            preset: isProduction ? 'smallest' : 'recommended',
+            propertyReadSideEffects: false,
+            tryCatchDeoptimization: false
         },
         cache: isProduction ? true : false,
         perf: false,
         maxParallelFileOps: 20,
         plugins: [
-            replace({
-                preventAssignment: true,
-                values: replaceValues
-            }),
+            replace(replaceValues),
             // Plugins de Infra (TSConfig, etc)
             ...prePlugins,
             {
@@ -127,19 +132,25 @@ async function createVueConfig(entryPoint, outdir, isProduction, { prePlugins =
             vueScriptFixPlugin(),
             commonjs({
                 sourceMap: !isProduction,
-                requireReturnsDefault: 'auto',
-                ignoreTryCatch: true
+                // [FIX] 'preferred' ajuda o Rollup a escolher o export default correto para Vue/Libs
+                requireReturnsDefault: 'preferred',
+                ignoreTryCatch: true,
+                transformMixedEsModules: true,
+                esmExternals: false // Garante que deps CommonJS sejam empacotadas
             }),
             // Plugins de Assets/CSS rodam DEPOIS do Vue ter gerado os arquivos virtuais de estilo
             ...postPlugins,
-            jsonPlugin(),
+            jsonPlugin({
+                compact: true
+            }),
             esbuild({
                 include: /\.[jt]sx?$|\.vue\?vue.*lang\.ts/,
                 exclude: /node_modules/,
                 sourceMap: !isProduction,
-                minify: isProduction,
+                // [OPTIMIZATION] Mantemos false aqui pois o Terser (no bundler principal) fará o trabalho pesado
+                minify: false,
                 legalComments: 'none',
-                treeShaking: isProduction,
+                treeShaking: true,
                 target: 'esnext',
                 jsx: 'automatic',
                 define: { __VERSION__: '"1.0.0"' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vatts",
-  "version": "1.2.5",
+  "version": "1.3.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": "mfraz",
@@ -105,6 +105,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@vue/server-renderer": "^3.5.27",
     "chokidar": "^3.6.0",
     "commander": "^14.0.2",