vatts 1.2.5 → 1.3.0

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/index.js

@@ -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/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.0",
   "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",