vatts 2.0.2 → 2.1.0-canary.1

package/dist/bin/vatts.js

@@ -27,18 +27,103 @@ const ConsoleModule = require('../api/console');
 const { loadVattsConfig, config, setConfig } = require("../helpers");
 const { default: detectFramework } = require("../api/framework");
 const { renderAsStream } = require("../renderer");
+const { showTitle } = require("../utils/utils");
 const Console = ConsoleModule.default;
 const { Levels, Colors } = ConsoleModule;
 program
     .version('1.0.0')
     .description('CLI to manage the application.');
 // --- Helpers ---
-function initializeApp(options, isDev) {
+/**
+ * Cria um arquivo de marcação de build de produção
+ */
+function createBuildInfoFile(projectDir) {
+    const buildInfoPath = path.join(projectDir, '.vatts', '.build-info.json');
+    const buildInfo = {
+        type: 'production',
+        timestamp: new Date().toISOString(),
+        nodeVersion: process.version,
+        platform: process.platform,
+        arch: process.arch,
+        vattsVersion: '1.0.0', // Pode pegar do package.json se necessário
+        buildDate: new Date().getTime()
+    };
+    try {
+        fs.mkdirSync(path.dirname(buildInfoPath), { recursive: true });
+        fs.writeFileSync(buildInfoPath, JSON.stringify(buildInfo, null, 2), 'utf8');
+    }
+    catch (error) {
+        Console.error('Failed to create build info file:', error);
+    }
+}
+/**
+ * Verifica se existe uma build de produção válida
+ */
+function hasValidProductionBuild(projectDir) {
+    const buildInfoPath = path.join(projectDir, '.vatts', '.build-info.json');
+    const buildDir = path.join(projectDir, '.vatts');
+    // Verifica se o diretório de build existe e tem conteúdo
+    if (!fs.existsSync(buildDir)) {
+        return false;
+    }
+    // Verifica se o arquivo de info de build existe
+    if (!fs.existsSync(buildInfoPath)) {
+        return false;
+    }
+    try {
+        const buildInfo = JSON.parse(fs.readFileSync(buildInfoPath, 'utf8'));
+        // Verifica se é uma build de produção
+        if (buildInfo.type !== 'production') {
+            return false;
+        }
+        // Verifica se tem arquivos no diretório (além do .build-info.json)
+        const files = fs.readdirSync(buildDir);
+        if (files.length <= 1) {
+            return false;
+        }
+        return true;
+    }
+    catch (error) {
+        Console.warn('Invalid build info file:', error.message);
+        return false;
+    }
+}
+/**
+ * Obtém informações da build de produção
+ */
+function getBuildInfo(projectDir) {
+    const buildInfoPath = path.join(projectDir, '.vatts', '.build-info.json');
+    try {
+        if (fs.existsSync(buildInfoPath)) {
+            return JSON.parse(fs.readFileSync(buildInfoPath, 'utf8'));
+        }
+    }
+    catch (error) {
+        Console.warn('Could not read build info:', error.message);
+    }
+    return null;
+}
+/**
+ * Remove o arquivo de info de build (usado no modo dev)
+ */
+function removeBuildInfoFile(projectDir) {
+    const buildInfoPath = path.join(projectDir, '.vatts', '.build-info.json');
+    try {
+        if (fs.existsSync(buildInfoPath)) {
+            fs.unlinkSync(buildInfoPath);
+        }
+    }
+    catch (error) {
+        // Silencioso, não é crítico
+    }
+}
+function initializeApp(options, isDev, skipBuild = false) {
     const appOptions = {
         dev: isDev,
         port: options.port,
         hostname: options.hostname,
         framework: 'native',
+        skipBuild: skipBuild,
     };
     const helperModule = require("../helpers");
     const helper = helperModule.default(appOptions);
@@ -72,9 +157,42 @@ program
     .option('-H, --hostname <string>', 'Specifies the hostname to run on', '0.0.0.0')
     .option('--ssl', 'Activates HTTPS/SSL mode')
     .option('--http-redirect-port <number>', 'Port for HTTP->HTTPS redirection', '80')
-    .action((options) => {
+    .action(async (options) => {
+    await showTitle();
+    const projectDir = process.cwd();
+    // Remove o arquivo de build info se existir (modo dev não usa builds de produção)
+    removeBuildInfoFile(projectDir);
     initializeApp(options, true);
 });
+program
+    .command('build')
+    .description('Builds the application for production.')
+    .action(async (options) => {
+    await showTitle();
+    process.env.NODE_ENV = 'production';
+    const projectDir = process.cwd();
+    Console.info('Starting production build...');
+    try {
+        const { loadVattsConfig, setConfig } = require("../helpers");
+        setConfig(await loadVattsConfig(projectDir, 'production'));
+        const helperModule = require("../helpers");
+        const app = helperModule.default({
+            dev: false,
+            port: 3000,
+            hostname: '0.0.0.0',
+            framework: 'native'
+        });
+        await app.prepare();
+        // Cria o arquivo de informações da build
+        createBuildInfoFile(projectDir);
+        Console.success('Production build completed successfully!');
+        Console.info('You can now start the application with: vatts start');
+    }
+    catch (error) {
+        Console.error('Build failed:', error);
+        process.exit(1);
+    }
+});
 program
     .command('start')
     .description('Starts the application in production mode.')
@@ -82,9 +200,78 @@ program
     .option('-H, --hostname <string>', 'Specifies the hostname to run on', '0.0.0.0')
     .option('--ssl', 'Activates HTTPS/SSL mode')
     .option('--http-redirect-port <number>', 'Port for HTTP->HTTPS redirection', '80')
-    .action((options) => {
+    .option('--build', 'Force rebuild before starting')
+    .action(async (options) => {
+    await showTitle();
     process.env.NODE_ENV = 'production';
-    initializeApp(options, false);
+    const projectDir = process.cwd();
+    const buildDir = path.join(projectDir, '.vatts');
+    // Verifica se existe uma build de produção válida
+    const hasValidBuild = hasValidProductionBuild(projectDir);
+    if (!hasValidBuild || options.build) {
+        if (!hasValidBuild) {
+            const dim = Colors.Dim;
+            const bright = Colors.Bright;
+            const title = bright + Colors.FgCyan;
+            const err = bright + Colors.FgRed;
+            const label = Colors.FgGray;
+            const cmd = bright + Colors.FgCyan;
+            const reset = Colors.Reset;
+            const line = `${dim}${"━".repeat(70)}${reset}`;
+            Console.logCustomLevel("", false, undefined, `${err}✖ No valid production build found!${reset}`, `${label}It looks like there is no build output to run in production.${reset}`, " ", `${label}Build the application first:${reset}`, `  ${cmd}vatts build${reset}`, " ", `${label}Or build and start in one command:${reset}`, `  ${cmd}vatts start --build${reset}`);
+            process.exitCode = 0;
+            return;
+        }
+        else {
+            Console.info('Rebuilding application...');
+        }
+        try {
+            const { loadVattsConfig, setConfig } = require("../helpers");
+            setConfig(await loadVattsConfig(projectDir, 'production'));
+            const helperModule = require("../helpers");
+            const app = helperModule.default({
+                dev: false,
+                port: options.port || 3000,
+                hostname: options.hostname || '0.0.0.0',
+                framework: 'native'
+            });
+            await app.prepare();
+            // Cria o arquivo de informações da build
+            createBuildInfoFile(projectDir);
+            Console.success('Build completed!');
+        }
+        catch (error) {
+            Console.error('Build failed:', error);
+            process.exitCode = 0;
+            return;
+        }
+        // Inicia a aplicação sem rebuildar (já foi buildado acima)
+        initializeApp(options, false, true);
+    }
+    else {
+        // Mostra informações da build existente
+        const buildInfo = getBuildInfo(projectDir);
+        if (buildInfo) {
+            const dim = Colors.Dim;
+            const bright = Colors.Bright;
+            const title = bright + Colors.FgCyan;
+            const ok = bright + Colors.FgGreen;
+            const label = Colors.FgGray;
+            const value = bright + Colors.FgWhite;
+            const reset = Colors.Reset;
+            const sysLocale = process.env.LC_ALL ||
+                process.env.LC_TIME ||
+                process.env.LANG ||
+                undefined;
+            const date = new Date(buildInfo.buildDate).toLocaleString(sysLocale, {
+                dateStyle: 'full',
+                timeStyle: 'medium'
+            });
+            Console.logCustomLevel("", false, undefined, `${ok}✔${reset}  ${bright}Using existing production build${reset}`, " ", `${label}Built on:${reset}      ${value}${date}${reset}`, `${label}Node version:${reset}  ${value}${buildInfo.nodeVersion}${reset}`, `${label}Platform:${reset}      ${value}${buildInfo.platform}-${buildInfo.arch}${reset}`, " ");
+        }
+        // Inicia a aplicação sem rebuildar
+        initializeApp(options, false, true);
+    }
 });
 program
     .command('export')
@@ -94,6 +281,7 @@ program
     .option('--no-html', 'Do not generate index.html (assets only)')
     .option('--output-h-data <file>', 'Write the data-h value into this file')
     .action(async (options) => {
+    await showTitle();
     process.env.NODE_ENV = 'production';
     const projectDir = process.cwd();
     const outputInput = (typeof options.output === 'string' && options.output.trim()) || 'exported';

package/dist/builder.js

@@ -28,7 +28,7 @@ const path = require('path');
 const Console = require("./api/console").default;
 const fs = require('fs');
 const crypto = require('crypto');
-const { readdir, stat, rm, rename } = require("node:fs/promises");
+const { readdir, stat, rm, rename, readFile } = require("node:fs/promises");
 const { loadTsConfigPaths, resolveTsConfigAlias } = require('./tsconfigPaths');
 const { config } = require("./helpers");
 // --- Optimization Plugins ---
@@ -46,7 +46,7 @@ const { createVueConfig } = require('./vue/vue.build');
 const excludedFiles = ['vatts.sock'];
 // --- Virtual Entry Plugin ---
 const virtualEntryPlugin = (options) => {
-    const { routes, layout, notFound, framework, projectDir, pathRouter } = options;
+    const { routes, layout, notFound, framework } = options;
     const virtualEntryId = 'virtual:vatts-entry';
     const resolvedEntryId = '\0' + virtualEntryId;
     return {
@@ -80,33 +80,12 @@ const virtualEntryPlugin = (options) => {
                 const defaultNotFoundFilename = framework === 'vue' ? 'DefaultNotFound.vue' : 'DefaultNotFound.js';
                 const defaultNotFoundPath = path.join(__dirname, framework, defaultNotFoundFilename).replace(/\\/g, '/');
                 // Component Registration Logic
-                let componentRegistration;
-                if (pathRouter === true) {
-                    componentRegistration = routes
-                        .map((route, index) => {
-                        const key = route.componentPath.replace(/\\/g, '/');
-                        return `  '${key}': route${index} || route${index}.default,`;
-                    })
-                        .join('\n');
-                }
-                else {
-                    if (framework === 'vue') {
-                        componentRegistration = routes
-                            .map((route, index) => {
-                            const key = route.componentPath.replace(/\\/g, '/');
-                            return `  '${key}': route${index} || route${index}.default,`;
-                        })
-                            .join('\n');
-                    }
-                    else {
-                        componentRegistration = routes
-                            .map((route, index) => {
-                            const key = route.componentPath.replace(/\\/g, '/');
-                            return `  '${key}': route${index} || route${index}.default,`;
-                        })
-                            .join('\n');
-                    }
-                }
+                let componentRegistration = routes
+                    .map((route, index) => {
+                    const key = route.componentPath.replace(/\\/g, '/');
+                    return `  '${key}': route${index} || route${index}.default,`;
+                })
+                    .join('\n');
                 const layoutRegistration = layout
                     ? `window.__VATTS_LAYOUT__ = LayoutComponent.default || LayoutComponent;`
                     : `window.__VATTS_LAYOUT__ = null;`;
@@ -117,22 +96,22 @@ const virtualEntryPlugin = (options) => {
                 // [FIX] Removido 'dist' extra do caminho.
                 const entryClientFilename = 'entry.client.js';
                 const entryClientPath = path.join(__dirname, framework, entryClientFilename).replace(/\\/g, '/');
-                return `// Arquivo gerado virtualmente pelo vatts
-${imports}
-${layoutImport}
-${notFoundImport}
-import DefaultNotFound from '${defaultNotFoundPath}';
-
-window.__VATTS_COMPONENTS__ = {
-${componentRegistration}
-};
-
-${layoutRegistration}
-${notFoundRegistration}
-
-window.__VATTS_DEFAULT_NOT_FOUND__ = DefaultNotFound;
-
-import '${entryClientPath}';
+                return `// Arquivo gerado virtualmente pelo vatts
+${imports}
+${layoutImport}
+${notFoundImport}
+import DefaultNotFound from '${defaultNotFoundPath}';
+
+window.__VATTS_COMPONENTS__ = {
+${componentRegistration}
+};
+
+${layoutRegistration}
+${notFoundRegistration}
+
+window.__VATTS_DEFAULT_NOT_FOUND__ = DefaultNotFound;
+
+import '${entryClientPath}';
 `;
             }
             return null;
@@ -172,7 +151,10 @@ const customPostCssPlugin = (isProduction, isWatch = false) => {
     let cachedProcessor = null;
     let configLoaded = false;
     const initPostCss = async (projectDir) => {
-        if (configLoaded)
+        // [FIX] Se estiver em modo Watch, NÃO retorna o processador cacheado.
+        // Isso força o PostCSS/Tailwind a reinicializar e escanear os arquivos novamente
+        // para encontrar classes novas (JIT/Arbitrary values).
+        if (configLoaded && !isWatch)
             return cachedProcessor;
         process.env.NODE_ENV = isProduction ? 'production' : 'development';
         const postcssConfigPath = path.join(projectDir, 'postcss.config.js');
@@ -194,6 +176,8 @@ const customPostCssPlugin = (isProduction, isWatch = false) => {
                     }
                 }
                 if (postcss) {
+                    // Limpa o cache do require para garantir que a config seja lida novamente se editada (opcional, mas seguro)
+                    delete require.cache[require.resolve(configPath)];
                     const config = require(__rewriteRelativeImportExtension(configPath));
                     const postcssConfig = config.default || config;
                     const plugins = [];
@@ -235,6 +219,22 @@ const customPostCssPlugin = (isProduction, isWatch = false) => {
     };
     return {
         name: 'custom-postcss-plugin',
+        // [FIX] Hook load adicionado para modo watch.
+        // Ele lê o CSS e injeta um comentário com timestamp. Isso faz o Rollup pensar que o arquivo mudou,
+        // forçando a execução do transform(), que por sua vez roda o Tailwind novamente.
+        async load(id) {
+            if (isWatch && id.endsWith('.css')) {
+                try {
+                    const content = await readFile(id, 'utf8');
+                    // Injeta comentário para invalidar cache do Rollup para este arquivo
+                    return content + `\n/* v-watch-${Date.now()} */`;
+                }
+                catch (e) {
+                    return null; // Deixa o Rollup carregar normalmente se falhar
+                }
+            }
+            return null; // Comportamento padrão para build normal ou outros arquivos
+        },
         async transform(code, id) {
             if (!id.endsWith('.css'))
                 return null;
@@ -245,6 +245,7 @@ const customPostCssPlugin = (isProduction, isWatch = false) => {
             let processedCss = code;
             if (processor) {
                 try {
+                    // Sempre passa o 'from' para que o Tailwind saiba onde está o arquivo
                     const result = await processor.process(code, { from: id, to: id, map: false });
                     processedCss = result.css;
                 }
@@ -258,23 +259,23 @@ const customPostCssPlugin = (isProduction, isWatch = false) => {
             const safeId = uniqueName.replace(/[^a-zA-Z0-9-_]/g, '_');
             const referenceId = this.emitFile({ type: 'asset', name: uniqueName, source: processedCss });
             return {
-                code: `
-                const cssUrl = String(import.meta.ROLLUP_FILE_URL_${referenceId});
-                if (typeof document !== 'undefined') {
-                    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);
-                    }
-                    
-                    const timestamp = ${isWatch ? 'Date.now()' : 'null'};
-                    link.href = timestamp ? (cssUrl + '?t=' + timestamp) : cssUrl;
-                }
-                export default cssUrl;
+                code: `
+                const cssUrl = String(import.meta.ROLLUP_FILE_URL_${referenceId});
+                if (typeof document !== 'undefined') {
+                    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);
+                    }
+                    
+                    const timestamp = ${isWatch ? 'Date.now()' : 'null'};
+                    link.href = timestamp ? (cssUrl + '?t=' + timestamp) : cssUrl;
+                }
+                export default cssUrl;
             `,
                 map: { mappings: '' }
             };
@@ -317,17 +318,17 @@ const smartAssetPlugin = (isProduction) => {
                 if (size < INLINE_LIMIT) {
                     const content = buffer.toString('utf8');
                     const base64 = buffer.toString('base64');
-                    return `
-                        export default "data:image/svg+xml;base64,${base64}";
-                        export const svgContent = ${JSON.stringify(content)};
+                    return `
+                        export default "data:image/svg+xml;base64,${base64}";
+                        export const svgContent = ${JSON.stringify(content)};
                     `;
                 }
                 else {
                     const referenceId = this.emitFile({ type: 'asset', name: uniqueName, source: buffer });
                     const content = buffer.toString('utf8');
-                    return `
-                        export default String(import.meta.ROLLUP_FILE_URL_${referenceId});
-                        export const svgContent = ${JSON.stringify(content)};
+                    return `
+                        export default String(import.meta.ROLLUP_FILE_URL_${referenceId});
+                        export const svgContent = ${JSON.stringify(content)};
                     `;
                 }
             }