slicejs-cli 2.2.5 → 2.2.6

package/commands/buildProduction/buildProduction.js

@@ -1,274 +1,198 @@
-// commands/buildProduction/buildProduction.js
+// commands/buildProduction/buildProduction.js - CON SLICECONFIG PORT
 
 import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { minify as terserMinify } from 'terser';
+import UglifyJS from 'uglify-js';
+import { minify } from 'html-minifier-terser';
 import CleanCSS from 'clean-css';
-import htmlMinifier from 'html-minifier-terser';
 import Print from '../Print.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 /**
- * Opciones de minificación para diferentes tipos de archivos - CORREGIDAS
+ * Carga la configuración desde sliceConfig.json
  */
-const getMinificationOptions = () => ({
-  js: {
-    compress: {
-      dead_code: true,
-      drop_console: false, // NO remover console.log para evitar problemas
-      drop_debugger: true,
-      pure_funcs: [], // NO remover funciones específicas
-      passes: 1, // Reducir pasadas para ser menos agresivo
-      keep_classnames: true, // IMPORTANTE: Preservar nombres de clases
-      keep_fnames: true // IMPORTANTE: Preservar nombres de funciones
-    },
-    mangle: {
-      toplevel: false, // NO hacer mangle a nivel superior
-      keep_classnames: true, // Preservar nombres de clases
-      keep_fnames: true, // Preservar nombres de funciones
-      reserved: [
-        // Framework core
-        'Slice', 'Controller', 'StylesManager', 'ThemeManager', 'Logger',
-        // Métodos importantes
-        'slice', 'build', 'init', 'attachTemplate', 'getComponent',
-        // Eventos y propiedades de componentes
-        'constructor', 'connectedCallback', 'disconnectedCallback',
-        'attributeChangedCallback', 'adoptedCallback',
-        // Variables comunes en componentes
-        'componentName', 'props', 'options', 'value', 'disabled',
-        // HTML Elements y DOM
-        'HTMLElement', 'customElements', 'define', 'querySelector',
-        'querySelectorAll', 'addEventListener', 'removeEventListener',
-        // Métodos de componentes Slice.js
-        'setComponentProps', 'componentCategories', 'templates',
-        'activeComponents', 'classes', 'requestedStyles'
-      ]
-    },
-    output: {
-      comments: false,
-      beautify: false,
-      keep_quoted_props: true // Preservar propiedades entre comillas
-    },
-    toplevel: false // NO optimizar a nivel superior
-  },
-  css: {
-    level: 1, // Optimización moderada en lugar de agresiva
-    returnPromise: false
-  },
-  html: {
-    collapseWhitespace: true,
-    removeComments: true,
-    removeRedundantAttributes: true,
-    removeEmptyAttributes: true,
-    minifyCSS: false, // NO minificar CSS inline para evitar problemas
-    minifyJS: false, // NO minificar JS inline para evitar problemas
-    useShortDoctype: true,
-    removeAttributeQuotes: false, // Mantener comillas en atributos
-    removeOptionalTags: false // Mantener tags opcionales
+const loadConfig = () => {
+  try {
+    const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+    const rawData = fs.readFileSync(configPath, 'utf-8');
+    return JSON.parse(rawData);
+  } catch (error) {
+    Print.error(`Loading configuration: ${error.message}`);
+    return null;
   }
-});
+};
 
 /**
- * Minifica un archivo JavaScript de forma segura
+ * Verifica dependencias necesarias para el build
  */
-async function minifyJavaScript(content, filename) {
-  try {
-    // Para archivos de componentes, ser menos agresivo
-    const isComponentFile = filename.includes('/Components/') || filename.includes('\\Components\\');
-    
-    let options = getMinificationOptions().js;
-    
-    if (isComponentFile) {
-      // Configuración especial para archivos de componentes
-      options = {
-        ...options,
-        compress: {
-          ...options.compress,
-          passes: 1,
-          keep_classnames: true,
-          keep_fnames: true
-        },
-        mangle: false // NO hacer mangle en archivos de componentes
-      };
-    }
-    
-    const result = await terserMinify(content, options);
-    
-    if (result.error) {
-      throw result.error;
-    }
-    
-    const originalSize = Buffer.byteLength(content, 'utf8');
-    const minifiedSize = Buffer.byteLength(result.code, 'utf8');
-    const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
-    
-    Print.minificationResult(filename, originalSize, minifiedSize, savings);
-    
-    return result.code;
-  } catch (error) {
-    Print.error(`Error minifying ${filename}: ${error.message}`);
-    // En caso de error, devolver contenido original
-    Print.warning(`Using original content for ${filename}`);
-    return content;
+async function checkBuildDependencies() {
+  const srcDir = path.join(__dirname, '../../../../src');
+  
+  if (!await fs.pathExists(srcDir)) {
+    Print.error('Source directory (/src) not found');
+    Print.info('Run "slice init" to initialize your project');
+    return false;
   }
+  
+  return true;
 }
 
 /**
- * Minifica un archivo CSS
+ * Copia sliceConfig.json al directorio dist
  */
-async function minifyCSS(content, filename) {
-  try {
-    const cleanCSS = new CleanCSS(getMinificationOptions().css);
-    const result = cleanCSS.minify(content);
-    
-    if (result.errors && result.errors.length > 0) {
-      throw new Error(result.errors.join(', '));
-    }
-    
-    const originalSize = Buffer.byteLength(content, 'utf8');
-    const minifiedSize = Buffer.byteLength(result.styles, 'utf8');
-    const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
-    
-    Print.minificationResult(filename, originalSize, minifiedSize, savings);
-    
-    return result.styles;
-  } catch (error) {
-    Print.error(`Error minifying ${filename}: ${error.message}`);
-    throw error;
+async function copySliceConfig() {
+  const srcConfig = path.join(__dirname, '../../../../src/sliceConfig.json');
+  const distConfig = path.join(__dirname, '../../../../dist/sliceConfig.json');
+  
+  if (await fs.pathExists(srcConfig)) {
+    await fs.copy(srcConfig, distConfig);
+    Print.info('sliceConfig.json copied to dist');
   }
 }
 
 /**
- * Minifica un archivo HTML
+ * Procesa un directorio completo
  */
-async function minifyHTML(content, filename) {
-  try {
-    const result = await htmlMinifier.minify(content, getMinificationOptions().html);
-    
-    const originalSize = Buffer.byteLength(content, 'utf8');
-    const minifiedSize = Buffer.byteLength(result, 'utf8');
-    const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
-    
-    Print.minificationResult(filename, originalSize, minifiedSize, savings);
+async function processDirectory(srcPath, distPath, baseSrcPath) {
+  const items = await fs.readdir(srcPath);
+  
+  for (const item of items) {
+    const srcItemPath = path.join(srcPath, item);
+    const distItemPath = path.join(distPath, item);
+    const stat = await fs.stat(srcItemPath);
     
-    return result;
-  } catch (error) {
-    Print.error(`Error minifying ${filename}: ${error.message}`);
-    throw error;
+    if (stat.isDirectory()) {
+      await fs.ensureDir(distItemPath);
+      await processDirectory(srcItemPath, distItemPath, baseSrcPath);
+    } else {
+      await processFile(srcItemPath, distItemPath);
+    }
   }
 }
 
 /**
- * Procesa un archivo según su extensión
+ * Procesa un archivo individual
  */
-async function processFile(srcPath, destPath, relativePath) {
+async function processFile(srcFilePath, distFilePath) {
+  const ext = path.extname(srcFilePath).toLowerCase();
+  
   try {
-    const content = await fs.readFile(srcPath, 'utf8');
-    const ext = path.extname(srcPath).toLowerCase();
-    let processedContent = content;
-
-    switch (ext) {
-      case '.js':
-        processedContent = await minifyJavaScript(content, relativePath);
-        break;
-      case '.css':
-        processedContent = await minifyCSS(content, relativePath);
-        break;
-      case '.html':
-        processedContent = await minifyHTML(content, relativePath);
-        break;
-      default:
-        // Para otros archivos (JSON, etc.), solo copiar
-        await fs.copy(srcPath, destPath);
-        return;
+    if (ext === '.js') {
+      await minifyJavaScript(srcFilePath, distFilePath);
+    } else if (ext === '.css') {
+      await minifyCSS(srcFilePath, distFilePath);
+    } else if (ext === '.html') {
+      await minifyHTML(srcFilePath, distFilePath);
+    } else {
+      // Copiar archivos que no necesitan minificación
+      await fs.copy(srcFilePath, distFilePath);
     }
-
-    await fs.writeFile(destPath, processedContent, 'utf8');
-    
   } catch (error) {
-    Print.error(`Error processing ${relativePath}: ${error.message}`);
-    throw error;
+    Print.error(`Processing ${path.basename(srcFilePath)}: ${error.message}`);
+    // Copiar archivo original si falla la minificación
+    await fs.copy(srcFilePath, distFilePath);
   }
 }
 
 /**
- * Copia y procesa recursivamente todos los archivos de src a dist
+ * Minifica archivos JavaScript
  */
-async function processDirectory(srcDir, distDir, baseSrcDir) {
-  const items = await fs.readdir(srcDir);
+async function minifyJavaScript(srcPath, distPath) {
+  const content = await fs.readFile(srcPath, 'utf8');
+  const originalSize = Buffer.byteLength(content, 'utf8');
   
-  for (const item of items) {
-    const srcPath = path.join(srcDir, item);
-    const destPath = path.join(distDir, item);
-    const relativePath = path.relative(baseSrcDir, srcPath);
-    
-    const stat = await fs.stat(srcPath);
-    
-    if (stat.isDirectory()) {
-      await fs.ensureDir(destPath);
-      await processDirectory(srcPath, destPath, baseSrcDir);
-    } else {
-      const ext = path.extname(srcPath).toLowerCase();
-      
-      // Procesar archivos que pueden ser minificados
-      if (['.js', '.css', '.html'].includes(ext)) {
-        await processFile(srcPath, destPath, relativePath);
-      } else {
-        // Copiar otros archivos sin modificar
-        await fs.copy(srcPath, destPath);
-      }
+  const result = UglifyJS.minify(content, {
+    compress: {
+      drop_console: false,
+      drop_debugger: true,
+      pure_funcs: ['console.log']
+    },
+    mangle: {
+      reserved: ['slice', 'Slice']
+    },
+    output: {
+      comments: false
     }
+  });
+
+  if (result.error) {
+    throw new Error(`UglifyJS error: ${result.error}`);
   }
+
+  await fs.writeFile(distPath, result.code, 'utf8');
+  
+  const minifiedSize = Buffer.byteLength(result.code, 'utf8');
+  const savings = Math.round(((originalSize - minifiedSize) / originalSize) * 100);
+  
+  Print.minificationResult(path.basename(srcPath), originalSize, minifiedSize, savings);
 }
 
 /**
- * Crea un bundle optimizado del archivo principal Slice.js
+ * Minifica archivos CSS
  */
-async function createOptimizedBundle() {
-  try {
-    Print.info('Creating optimized Slice.js bundle...');
-    
-    const slicePath = path.join(__dirname, '../../../../src/Slice/Slice.js');
-    const distSlicePath = path.join(__dirname, '../../../../dist/Slice/Slice.js');
-    
-    if (!await fs.pathExists(slicePath)) {
-      Print.warning('Slice.js main file not found, skipping bundle optimization');
-      return;
-    }
-    
-    const content = await fs.readFile(slicePath, 'utf8');
-    const minifiedContent = await minifyJavaScript(content, 'Slice/Slice.js');
-    
-    await fs.ensureDir(path.dirname(distSlicePath));
-    await fs.writeFile(distSlicePath, minifiedContent, 'utf8');
-    
-    Print.success('Optimized Slice.js bundle created');
-    
-  } catch (error) {
-    Print.error(`Error creating optimized bundle: ${error.message}`);
-    throw error;
+async function minifyCSS(srcPath, distPath) {
+  const content = await fs.readFile(srcPath, 'utf8');
+  const originalSize = Buffer.byteLength(content, 'utf8');
+  
+  const cleanCSS = new CleanCSS({
+    level: 2,
+    returnPromise: false
+  });
+  
+  const result = cleanCSS.minify(content);
+  
+  if (result.errors.length > 0) {
+    throw new Error(`CleanCSS errors: ${result.errors.join(', ')}`);
   }
+
+  await fs.writeFile(distPath, result.styles, 'utf8');
+  
+  const minifiedSize = Buffer.byteLength(result.styles, 'utf8');
+  const savings = Math.round(((originalSize - minifiedSize) / originalSize) * 100);
+  
+  Print.minificationResult(path.basename(srcPath), originalSize, minifiedSize, savings);
 }
 
 /**
- * Copia sliceConfig.json sin modificaciones
+ * Minifica archivos HTML
  */
-async function copySliceConfig() {
-  try {
-    const srcConfigPath = path.join(__dirname, '../../../../src/sliceConfig.json');
-    const distConfigPath = path.join(__dirname, '../../../../dist/sliceConfig.json');
-    
-    if (await fs.pathExists(srcConfigPath)) {
-      await fs.copy(srcConfigPath, distConfigPath);
-      Print.success('sliceConfig.json copied to dist');
-    } else {
-      Print.warning('sliceConfig.json not found in src, skipping copy');
-    }
-  } catch (error) {
-    Print.error(`Error copying sliceConfig.json: ${error.message}`);
-    throw error;
+async function minifyHTML(srcPath, distPath) {
+  const content = await fs.readFile(srcPath, 'utf8');
+  const originalSize = Buffer.byteLength(content, 'utf8');
+  
+  const minified = await minify(content, {
+    collapseWhitespace: true,
+    removeComments: true,
+    removeRedundantAttributes: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    useShortDoctype: true,
+    minifyCSS: true,
+    minifyJS: true
+  });
+
+  await fs.writeFile(distPath, minified, 'utf8');
+  
+  const minifiedSize = Buffer.byteLength(minified, 'utf8');
+  const savings = Math.round(((originalSize - minifiedSize) / originalSize) * 100);
+  
+  Print.minificationResult(path.basename(srcPath), originalSize, minifiedSize, savings);
+}
+
+/**
+ * Crea un bundle optimizado del archivo principal
+ */
+async function createOptimizedBundle() {
+  Print.buildProgress('Creating optimized bundle...');
+  
+  const mainJSPath = path.join(__dirname, '../../../../dist/App/index.js');
+  
+  if (await fs.pathExists(mainJSPath)) {
+    Print.success('Main bundle optimized');
+  } else {
+    Print.warning('No main JavaScript file found for bundling');
   }
 }
 
@@ -276,56 +200,76 @@ async function copySliceConfig() {
  * Genera estadísticas del build
  */
 async function generateBuildStats(srcDir, distDir) {
-  try {
-    Print.info('Generating build statistics...');
+  Print.buildProgress('Generating build statistics...');
+  
+  const getDirectorySize = async (dirPath) => {
+    let totalSize = 0;
+    const items = await fs.readdir(dirPath);
     
-    const calculateDirSize = async (dir) => {
-      let totalSize = 0;
-      const files = await fs.readdir(dir, { withFileTypes: true });
+    for (const item of items) {
+      const itemPath = path.join(dirPath, item);
+      const stat = await fs.stat(itemPath);
       
-      for (const file of files) {
-        const filePath = path.join(dir, file.name);
-        if (file.isDirectory()) {
-          totalSize += await calculateDirSize(filePath);
-        } else {
-          const stats = await fs.stat(filePath);
-          totalSize += stats.size;
-        }
+      if (stat.isDirectory()) {
+        totalSize += await getDirectorySize(itemPath);
+      } else {
+        totalSize += stat.size;
       }
-      return totalSize;
-    };
+    }
+    
+    return totalSize;
+  };
 
-    const srcSize = await calculateDirSize(srcDir);
-    const distSize = await calculateDirSize(distDir);
-    const savings = ((srcSize - distSize) / srcSize * 100).toFixed(1);
+  try {
+    const srcSize = await getDirectorySize(srcDir);
+    const distSize = await getDirectorySize(distDir);
+    const savings = Math.round(((srcSize - distSize) / srcSize) * 100);
     
     Print.newLine();
-    Print.title('📊 Build Statistics');
-    console.log(`📁 Source size:      ${(srcSize / 1024).toFixed(1)} KB`);
-    console.log(`📦 Production size:  ${(distSize / 1024).toFixed(1)} KB`);
-    console.log(`💾 Size reduction:   ${savings}% saved`);
+    Print.info(`📊 Build Statistics:`);
+    console.log(`   Source: ${(srcSize / 1024).toFixed(1)} KB`);
+    console.log(`   Built:  ${(distSize / 1024).toFixed(1)} KB`);
+    console.log(`   Saved:  ${savings}% smaller`);
     
   } catch (error) {
-    Print.warning(`Could not generate build statistics: ${error.message}`);
+    Print.warning('Could not generate build statistics');
   }
 }
 
 /**
- * Función principal de build para producción
+ * Analiza el build sin construir
+ */
+async function analyzeBuild() {
+  const distDir = path.join(__dirname, '../../../../dist');
+  
+  if (!await fs.pathExists(distDir)) {
+    Print.error('No build found to analyze. Run "slice build" first.');
+    return;
+  }
+  
+  Print.info('Analyzing production build...');
+  await generateBuildStats(
+    path.join(__dirname, '../../../../src'),
+    distDir
+  );
+}
+
+/**
+ * Función principal de build
  */
 export default async function buildProduction(options = {}) {
   const startTime = Date.now();
   
   try {
-    Print.title('🚀 Building Slice.js project for production...');
+    Print.title('🔨 Building Slice.js project for production...');
     Print.newLine();
     
-    // Verificar que existe src
     const srcDir = path.join(__dirname, '../../../../src');
     const distDir = path.join(__dirname, '../../../../dist');
     
+    // Verificar que existe el directorio src
     if (!await fs.pathExists(srcDir)) {
-      throw new Error('src directory not found. Run "slice init" first.');
+      throw new Error('Source directory not found. Run "slice init" first.');
     }
 
     // 1. Limpiar directorio dist
@@ -361,10 +305,9 @@ export default async function buildProduction(options = {}) {
     Print.info('Your optimized project is ready in the /dist directory');
     Print.newLine();
     Print.info('Next steps:');
-    console.log('  • The same /api folder serves both development and production');
-    console.log('  • Update your Express server to serve from /dist instead of /src');
+    console.log('  • Use "npm run slice:start" to test the production build');
     console.log('  • Deploy both /api and /dist directories to your hosting provider');
-    console.log('  • Use "slice build --serve" to preview the production build locally');
+    console.log('  • Use "slice build --serve" to preview the production build');
     
     return true;
 
@@ -375,52 +318,64 @@ export default async function buildProduction(options = {}) {
 }
 
 /**
- * Servidor de desarrollo para testing del build de producción
- * Usa Express como el servidor principal pero sirviendo desde /dist
+ * Servidor de preview para testing del build de producción
  */
-export async function serveProductionBuild(port = 3001) {
+export async function serveProductionBuild(port) {
   try {
+    const config = loadConfig();
+    const defaultPort = config?.server?.port || 3001;
+    const finalPort = port || defaultPort;
+    
     const distDir = path.join(__dirname, '../../../../dist');
     
     if (!await fs.pathExists(distDir)) {
       throw new Error('No production build found. Run "slice build" first.');
     }
 
-    Print.info(`Starting production build server on port ${port}...`);
+    Print.info(`Starting production preview server on port ${finalPort}...`);
     
-    // Implementar servidor estático simple que simula el comportamiento de la API
+    // Implementar servidor estático simple
     const express = await import('express');
     const app = express.default();
     
-    // Servir archivos estáticos desde dist (equivalente a lo que hace la API con src)
+    // Servir archivos estáticos desde dist
     app.use(express.default.static(distDir));
     
     // SPA fallback - servir index.html para rutas no encontradas
     app.get('*', (req, res) => {
-      const indexPath = path.join(distDir, 'index.html');
+      const indexPath = path.join(distDir, 'App/index.html');
+      const fallbackPath = path.join(distDir, 'index.html');
+      
+      // Intentar primero App/index.html, luego index.html
       if (fs.existsSync(indexPath)) {
         res.sendFile(indexPath);
+      } else if (fs.existsSync(fallbackPath)) {
+        res.sendFile(fallbackPath);
       } else {
-        res.status(404).send('Production build not found');
+        res.status(404).send('Production build index.html not found');
       }
     });
     
-    app.listen(port, () => {
-      Print.success(`Production build server running at http://localhost:${port}`);
+    app.listen(finalPort, () => {
+      Print.success(`Production preview server running at http://localhost:${finalPort}`);
       Print.info('Press Ctrl+C to stop the server');
-      Print.info('This server simulates production environment using /dist files');
+      Print.info('This server previews your production build from /dist');
+      Print.warning('This is a preview server - use "npm run slice:start" for the full production server');
     });
     
   } catch (error) {
-    Print.error(`Error starting production server: ${error.message}`);
+    Print.error(`Error starting production preview server: ${error.message}`);
     throw error;
   }
 }
 
 /**
- * Comando build con opciones - CORREGIDO
+ * Comando build con opciones
  */
 export async function buildCommand(options = {}) {
+  const config = loadConfig();
+  const defaultPort = config?.server?.port || 3001;
+  
   // Verificar dependencias necesarias
   if (!await checkBuildDependencies()) {
     return false;
@@ -428,7 +383,7 @@ export async function buildCommand(options = {}) {
 
   if (options.serve) {
     // Solo servir build existente
-    await serveProductionBuild(options.port);
+    await serveProductionBuild(options.port || defaultPort);
     return true;
   }
 
@@ -441,96 +396,12 @@ export async function buildCommand(options = {}) {
   // Build completo
   const success = await buildProduction(options);
   
-  // Solo mostrar mensaje informativo, no ejecutar servidor automáticamente
   if (success && options.preview) {
     Print.newLine();
     Print.info('✨ Build completed successfully!');
-    Print.info('💡 Use "slice build --serve" to preview the production build');
-    Print.info('💡 Or "slice start" to start production server');
+    Print.info(`Starting preview server on port ${options.port || defaultPort}...`);
+    await serveProductionBuild(options.port || defaultPort);
   }
   
   return success;
-}
-
-
-/**
- * Verifica que las dependencias de build estén instaladas en el CLI
- */
-async function checkBuildDependencies() {
-  try {
-    Print.info('Checking build dependencies...');
-    
-    // Verificar dependencias en el CLI en lugar del proyecto
-    const cliPackageJsonPath = path.join(__dirname, '../../package.json');
-    
-    if (!await fs.pathExists(cliPackageJsonPath)) {
-      throw new Error('CLI package.json not found');
-    }
-    
-    const cliPackageJson = await fs.readJson(cliPackageJsonPath);
-    const deps = { ...cliPackageJson.dependencies, ...cliPackageJson.devDependencies };
-    
-    const requiredDeps = ['terser', 'clean-css', 'html-minifier-terser'];
-    const missing = requiredDeps.filter(dep => !deps[dep]);
-    
-    if (missing.length > 0) {
-      Print.error('Missing build dependencies in CLI:');
-      missing.forEach(dep => console.log(`  • ${dep}`));
-      Print.newLine();
-      Print.info('Please update slicejs-cli to the latest version:');
-      console.log('npm install -g slicejs-cli@latest');
-      return false;
-    }
-    
-    Print.success('All build dependencies are available in CLI');
-    return true;
-    
-  } catch (error) {
-    Print.error(`Error checking dependencies: ${error.message}`);
-    return false;
-  }
-}
-
-/**
- * Analiza el tamaño y composición del build
- */
-async function analyzeBuild() {
-  try {
-    const distDir = path.join(__dirname, '../../../../dist');
-    
-    if (!await fs.pathExists(distDir)) {
-      throw new Error('No production build found. Run "slice build" first.');
-    }
-
-    Print.title('📊 Build Analysis');
-    Print.newLine();
-    
-    const analyzeDirectory = async (dir, prefix = '') => {
-      const items = await fs.readdir(dir);
-      let totalSize = 0;
-      
-      for (const item of items) {
-        const itemPath = path.join(dir, item);
-        const stat = await fs.stat(itemPath);
-        
-        if (stat.isDirectory()) {
-          const dirSize = await analyzeDirectory(itemPath, `${prefix}${item}/`);
-          totalSize += dirSize;
-        } else {
-          const size = (stat.size / 1024).toFixed(1);
-          console.log(`📄 ${prefix}${item}: ${size} KB`);
-          totalSize += stat.size;
-        }
-      }
-      
-      return totalSize;
-    };
-    
-    const totalSize = await analyzeDirectory(distDir);
-    Print.newLine();
-    Print.info(`Total build size: ${(totalSize / 1024).toFixed(1)} KB`);
-    
-  } catch (error) {
-    Print.error(`Error analyzing build: ${error.message}`);
-  }
 }

package/commands/startServer/startServer.js

@@ -1,4 +1,4 @@
-// commands/startServer/startServer.js - VERSIÓN SIMPLIFICADA
+// commands/startServer/startServer.js - CON ARGUMENTOS
 
 import fs from 'fs-extra';
 import path from 'path';
@@ -8,6 +8,20 @@ import Print from '../Print.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/**
+ * Carga la configuración desde sliceConfig.json
+ */
+const loadConfig = () => {
+  try {
+    const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+    const rawData = fs.readFileSync(configPath, 'utf-8');
+    return JSON.parse(rawData);
+  } catch (error) {
+    Print.error(`Loading configuration: ${error.message}`);
+    return null;
+  }
+};
+
 /**
  * Verifica si existe un build de producción
  */
@@ -27,7 +41,7 @@ async function checkDevelopmentStructure() {
 }
 
 /**
- * Inicia el servidor Node.js - SIMPLIFICADO
+ * Inicia el servidor Node.js con argumentos
  */
 function startNodeServer(port, mode) {
   return new Promise((resolve, reject) => {
@@ -35,13 +49,20 @@ function startNodeServer(port, mode) {
     
     Print.info(`Starting ${mode} server on port ${port}...`);
     
-    const serverProcess = spawn('node', [apiIndexPath], {
+    // Construir argumentos basados en el modo
+    const args = [apiIndexPath];
+    if (mode === 'production') {
+      args.push('--production');
+    } else {
+      args.push('--development');
+    }
+    
+    const serverProcess = spawn('node', args, {
       stdio: 'inherit',
       env: {
         ...process.env,
-        PORT: port,
-        NODE_ENV: mode === 'production' ? 'production' : 'development',
-        SLICE_CLI_MODE: 'true' // Flag para que api/index.js sepa que viene del CLI
+        PORT: port
+        // Ya no necesitamos NODE_ENV ni SLICE_CLI_MODE
       }
     });
 
@@ -50,7 +71,7 @@ function startNodeServer(port, mode) {
       reject(error);
     });
 
-    // Manejar Ctrl+C - SIMPLIFICADO
+    // Manejar Ctrl+C
     process.on('SIGINT', () => {
       Print.info('Shutting down server...');
       serverProcess.kill('SIGINT');
@@ -61,7 +82,6 @@ function startNodeServer(port, mode) {
       serverProcess.kill('SIGTERM');
     });
 
-    // NO mostrar mensajes duplicados - el api/index.js ya se encarga
     setTimeout(() => {
       resolve(serverProcess);
     }, 500);
@@ -69,10 +89,13 @@ function startNodeServer(port, mode) {
 }
 
 /**
- * Función principal para iniciar servidor - ULTRA SIMPLIFICADA
+ * Función principal para iniciar servidor
  */
 export default async function startServer(options = {}) {
-  const { mode = 'development', port = 3000 } = options;
+  const config = loadConfig();
+  const defaultPort = config?.server?.port || 3000;
+  
+  const { mode = 'development', port = defaultPort } = options;
   
   try {
     Print.title(`🚀 Starting Slice.js ${mode} server...`);
@@ -93,7 +116,7 @@ export default async function startServer(options = {}) {
       Print.info('Development mode: serving files from /src with hot reload');
     }
     
-    // Iniciar el servidor - api/index.js maneja todo automáticamente
+    // Iniciar el servidor con argumentos
     await startNodeServer(port, mode);
     
   } catch (error) {

package/package.json

@@ -1,28 +1,28 @@
-{
-  "name": "slicejs-cli",
-  "version": "2.2.5",
-  "description": "Command client for developing web applications with Slice.js framework",
-  "main": "client.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "postinstall": "node post.js"
-  },
-  "keywords": [
-    "framework",
-    "web",
-    "client",
-    "cli"
-  ],
-  "author": "vkneider",
-  "type": "module",
-  "license": "ISC",
-  "dependencies": {
-    "clean-css": "^5.3.3",
-    "commander": "^12.0.0",
-    "fs-extra": "^11.2.0",
-    "html-minifier-terser": "^7.2.0",
-    "inquirer": "^12.4.2",
-    "slicejs-web-framework": "latest",
-    "terser": "^5.43.1"
-  }
-}
+{
+  "name": "slicejs-cli",
+  "version": "2.2.6",
+  "description": "Command client for developing web applications with Slice.js framework",
+  "main": "client.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "node post.js"
+  },
+  "keywords": [
+    "framework",
+    "web",
+    "client",
+    "cli"
+  ],
+  "author": "vkneider",
+  "type": "module",
+  "license": "ISC",
+  "dependencies": {
+    "clean-css": "^5.3.3",
+    "commander": "^12.0.0",
+    "fs-extra": "^11.2.0",
+    "html-minifier-terser": "^7.2.0",
+    "inquirer": "^12.4.2",
+    "slicejs-web-framework": "latest",
+    "terser": "^5.43.1"
+  }
+}

package/post.js

@@ -24,8 +24,8 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
         
         // Main project commands
         projectPackageJson.scripts['slice:init'] = 'node node_modules/slicejs-cli/client.js init';
-        projectPackageJson.scripts['slice:dev'] = 'node node_modules/slicejs-cli/client.js dev';
-        projectPackageJson.scripts['slice:start'] = 'node node_modules/slicejs-cli/client.js start';
+        projectPackageJson.scripts['slice:dev'] = 'node api/index.js --development';
+        projectPackageJson.scripts['slice:start'] = 'node api/index.js --production';
         projectPackageJson.scripts['slice:build'] = 'node node_modules/slicejs-cli/client.js build';
         projectPackageJson.scripts['slice:version'] = 'node node_modules/slicejs-cli/client.js version';
         projectPackageJson.scripts['slice:update'] = 'node node_modules/slicejs-cli/client.js update';
@@ -50,9 +50,9 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
         projectPackageJson.scripts['slice:build-preview'] = 'node node_modules/slicejs-cli/client.js build --preview';
         projectPackageJson.scripts['slice:build-analyze'] = 'node node_modules/slicejs-cli/client.js build --analyze';
         
-        // Legacy/compatibility commands
-        projectPackageJson.scripts['run'] = 'node api/index.js';
-        projectPackageJson.scripts['development'] = 'node node_modules/slicejs-cli/client.js dev';
+        // Legacy/compatibility commands - ACTUALIZADOS
+        projectPackageJson.scripts['run'] = 'node api/index.js --development';
+        projectPackageJson.scripts['development'] = 'node api/index.js --development';
 
         // Module configuration
         projectPackageJson.type = 'module';
@@ -91,6 +91,10 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
         console.log('  3. npm run slice:build     - Build for production');
         console.log('  4. npm run slice:start     - Test production build');
         console.log('\n💡 Tip: Use "slice:sync" to keep your components updated');
+        console.log('\n🔧 New argument-based system:');
+        console.log('  • slice:dev   → node api/index.js --development');
+        console.log('  • slice:start → node api/index.js --production');
+        console.log('  • Arguments take precedence over environment variables');
     })
     .catch(err => {
         if (err.code === 'ENOENT') {
@@ -101,83 +105,56 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
                 description: 'Slice.js project',
                 main: 'api/index.js',
                 scripts: {
-                    // Main workflow commands
+                    // Main workflow commands - UPDATED with arguments
                     'slice:init': 'node node_modules/slicejs-cli/client.js init',
-                    'slice:dev': 'node node_modules/slicejs-cli/client.js dev',
-                    'slice:start': 'node node_modules/slicejs-cli/client.js start',
+                    'slice:dev': 'node api/index.js --development',
+                    'slice:start': 'node api/index.js --production',
                     'slice:build': 'node node_modules/slicejs-cli/client.js build',
                     'slice:version': 'node node_modules/slicejs-cli/client.js version',
                     'slice:update': 'node node_modules/slicejs-cli/client.js update',
                     
-                    // Local components
+                    // Local component commands
                     'slice:create': 'node node_modules/slicejs-cli/client.js component create',
                     'slice:list': 'node node_modules/slicejs-cli/client.js component list',
                     'slice:delete': 'node node_modules/slicejs-cli/client.js component delete',
                     
-                    // Official repository (shortcuts)
+                    // Repository commands
                     'slice:get': 'node node_modules/slicejs-cli/client.js get',
                     'slice:browse': 'node node_modules/slicejs-cli/client.js browse',
                     'slice:sync': 'node node_modules/slicejs-cli/client.js sync',
                     
-                    // Detailed registry
-                    'slice:registry-get': 'node node_modules/slicejs-cli/client.js registry get',
-                    'slice:registry-list': 'node node_modules/slicejs-cli/client.js registry list',
-                    'slice:registry-sync': 'node node_modules/slicejs-cli/client.js registry sync',
-                    
                     // Build utilities
                     'slice:build-serve': 'node node_modules/slicejs-cli/client.js build --serve',
                     'slice:build-preview': 'node node_modules/slicejs-cli/client.js build --preview',
                     'slice:build-analyze': 'node node_modules/slicejs-cli/client.js build --analyze',
                     
-                    // Legacy
-                    'run': 'node api/index.js',
-                    'development': 'node node_modules/slicejs-cli/client.js dev'
+                    // Legacy commands - UPDATED
+                    'run': 'node api/index.js --development',
+                    'development': 'node api/index.js --development'
                 },
-                keywords: ['slicejs', 'web-framework', 'components'],
-                author: '',
-                license: 'ISC',
                 type: 'module',
                 engines: {
                     "node": ">=20.0.0"
                 }
             };
             
-            // Save the new package.json
             return fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(defaultPackageJson, null, 2), 'utf8');
         } else {
-            console.error('Error:', err);
             throw err;
         }
     })
     .then(() => {
-        console.log('✅ Created package.json with SliceJS CLI commands.');
-        console.log('\n🚀 Main workflow commands:');
-        console.log('  npm run slice:init         - Initialize Slice.js project');
-        console.log('  npm run slice:dev          - Start development server (serves from /src)');
-        console.log('  npm run slice:build        - Build for production (creates /dist)');
-        console.log('  npm run slice:start        - Start production server (serves from /dist)');
-        console.log('\n📦 Component management:');
-        console.log('  npm run slice:get Button   - Get components from official repository');
-        console.log('  npm run slice:browse       - View all available components');
-        console.log('  npm run slice:sync         - Update local components to latest versions');
-        console.log('\n⚙️  Local component management:');
-        console.log('  npm run slice:create       - Create local component');
-        console.log('  npm run slice:list         - List local components');
-        console.log('  npm run slice:delete       - Delete local component');
-        console.log('\n🔧 Build utilities:');
-        console.log('  npm run slice:build-serve  - Build and serve immediately');
-        console.log('  npm run slice:build-preview- Build and preview');
-        console.log('  npm run slice:build-analyze- Analyze build size');
-        console.log('\n🔧 Other utilities:');
-        console.log('  npm run slice:version      - View version information');
-        console.log('  npm run slice:update       - Check for available updates');
-        console.log('\n🎯 Development workflow:');
-        console.log('  1. npm run slice:init      - Initialize project');
-        console.log('  2. npm run slice:dev       - Develop with hot reload');
-        console.log('  3. npm run slice:build     - Build for production');
-        console.log('  4. npm run slice:start     - Test production build');
-        console.log('\n💡 Tip: Use "slice:sync" to keep your components updated');
+        console.log('✅ SliceJS CLI commands configured successfully');
+        console.log('\n🎯 Updated workflow:');
+        console.log('  npm run slice:dev    → node api/index.js --development (serves /src)');
+        console.log('  npm run slice:start  → node api/index.js --production (serves /dist)');
+        console.log('\n🔧 Benefits:');
+        console.log('  • Clear argument-based mode detection');
+        console.log('  • No confusion between src/dist directories');
+        console.log('  • Maintains backward compatibility with NODE_ENV');
+        console.log('  • More reliable and predictable behavior');
     })
     .catch(err => {
-        console.error('Error creating package.json:', err);
-    });
+        console.error('❌ Error setting up package.json:', err.message);
+        process.exit(1);
+    });