slicejs-cli 2.2.5 → 2.2.7

package/commands/buildProduction/buildProduction.js

@@ -1,274 +1,347 @@
-// commands/buildProduction/buildProduction.js
+// commands/buildProduction/buildProduction.js - VERSIÓN LIMPIA
 
 import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { minify as terserMinify } from 'terser';
+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) {
+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;
+  }
+  
   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;
+    await import('terser');
+    await import('clean-css');
+    await import('html-minifier-terser');
+    Print.success('Build dependencies available');
+    return true;
   } 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;
+    Print.warning('Some build dependencies missing - using fallback copy mode');
+    return true;
   }
 }
 
 /**
- * Minifica un archivo CSS
+ * Verifica que existan los archivos críticos para Slice.js
  */
-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(', '));
+async function verifySliceFiles(srcDir) {
+  Print.info('Verifying Slice.js critical files...');
+  
+  const criticalFiles = [
+    'sliceConfig.json',
+    'Components/components.js',
+    'App/index.js'
+  ];
+  
+  for (const file of criticalFiles) {
+    const filePath = path.join(srcDir, file);
+    if (!await fs.pathExists(filePath)) {
+      throw new Error(`Critical Slice.js file missing: ${file}`);
     }
-    
-    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;
   }
+  
+  Print.success('All critical Slice.js files verified');
 }
 
 /**
- * Minifica un archivo HTML
+ * Verifica la integridad del build para Slice.js
  */
-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 verifyBuildIntegrity(distDir) {
+  Print.info('Verifying build integrity for Slice.js...');
+  
+  const criticalBuiltFiles = [
+    'sliceConfig.json',
+    'Components/components.js',
+    'App/index.js'
+  ];
+  
+  for (const file of criticalBuiltFiles) {
+    const filePath = path.join(distDir, file);
+    if (!await fs.pathExists(filePath)) {
+      throw new Error(`Critical built file missing: ${file}`);
+    }
     
-    return result;
-  } catch (error) {
-    Print.error(`Error minifying ${filename}: ${error.message}`);
-    throw error;
+    if (file === 'Components/components.js') {
+      const content = await fs.readFile(filePath, 'utf8');
+      if (!content.includes('const components') || !content.includes('export default')) {
+        throw new Error('components.js structure corrupted during build');
+      }
+    }
   }
+  
+  Print.success('Build integrity verified - all Slice.js components preserved');
 }
 
 /**
- * Procesa un archivo según su extensión
+ * Copia sliceConfig.json al directorio dist
  */
-async function processFile(srcPath, destPath, relativePath) {
-  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;
-    }
-
-    await fs.writeFile(destPath, processedContent, 'utf8');
-    
-  } catch (error) {
-    Print.error(`Error processing ${relativePath}: ${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');
   }
 }
 
 /**
- * Copia y procesa recursivamente todos los archivos de src a dist
+ * Procesa un directorio completo
  */
-async function processDirectory(srcDir, distDir, baseSrcDir) {
-  const items = await fs.readdir(srcDir);
+async function processDirectory(srcPath, distPath, baseSrcPath) {
+  const items = await fs.readdir(srcPath);
   
   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);
+    const srcItemPath = path.join(srcPath, item);
+    const distItemPath = path.join(distPath, item);
+    const stat = await fs.stat(srcItemPath);
     
     if (stat.isDirectory()) {
-      await fs.ensureDir(destPath);
-      await processDirectory(srcPath, destPath, baseSrcDir);
+      await fs.ensureDir(distItemPath);
+      await processDirectory(srcItemPath, distItemPath, baseSrcPath);
     } 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);
-      }
+      await processFile(srcItemPath, distItemPath);
     }
   }
 }
 
 /**
- * Crea un bundle optimizado del archivo principal Slice.js
+ * Procesa un archivo individual
  */
-async function createOptimizedBundle() {
+async function processFile(srcFilePath, distFilePath) {
+  const ext = path.extname(srcFilePath).toLowerCase();
+  const fileName = path.basename(srcFilePath);
+  
   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;
+    if (fileName === 'components.js') {
+      await processComponentsFile(srcFilePath, distFilePath);
+    } else if (ext === '.js') {
+      await minifyJavaScript(srcFilePath, distFilePath);
+    } else if (ext === '.css') {
+      await minifyCSS(srcFilePath, distFilePath);
+    } else if (ext === '.html') {
+      await minifyHTML(srcFilePath, distFilePath);
+    } else if (fileName === 'sliceConfig.json') {
+      await fs.copy(srcFilePath, distFilePath);
+      Print.info(`📄 Preserved: ${fileName} (configuration file)`);
+    } else {
+      await fs.copy(srcFilePath, distFilePath);
+      const stat = await fs.stat(srcFilePath);
+      const sizeKB = (stat.size / 1024).toFixed(1);
+      Print.info(`📄 Copied: ${fileName} (${sizeKB} KB)`);
     }
-    
-    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;
+    Print.error(`Processing ${fileName}: ${error.message}`);
+    await fs.copy(srcFilePath, distFilePath);
   }
 }
 
 /**
- * Copia sliceConfig.json sin modificaciones
+ * Procesa el archivo components.js de forma especial
  */
-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');
+async function processComponentsFile(srcPath, distPath) {
+  const content = await fs.readFile(srcPath, 'utf8');
+  const originalSize = Buffer.byteLength(content, 'utf8');
+  
+  const result = await terserMinify(content, {
+    compress: false,
+    mangle: false,
+    format: {
+      comments: false,
+      beautify: false,
+      indent_level: 0
     }
-  } catch (error) {
-    Print.error(`Error copying sliceConfig.json: ${error.message}`);
-    throw error;
+  });
+
+  if (result.error) {
+    throw new Error(`Terser error in components.js: ${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)} (preserved structure)`, originalSize, minifiedSize, savings);
+}
+
+/**
+ * Minifica archivos JavaScript preservando la arquitectura de Slice.js
+ */
+async function minifyJavaScript(srcPath, distPath) {
+  const content = await fs.readFile(srcPath, 'utf8');
+  const originalSize = Buffer.byteLength(content, 'utf8');
+  
+  const result = await terserMinify(content, {
+    compress: {
+      drop_console: false,
+      drop_debugger: true,
+      pure_funcs: [],
+      passes: 1,
+      unused: false,
+      side_effects: false,
+      reduce_vars: false,
+      collapse_vars: false
+    },
+    mangle: {
+      reserved: [
+        // Core Slice
+        'slice', 'Slice', 'SliceJS', 'window', 'document',
+        // Clases principales
+        'Controller', 'StylesManager', 'Router', 'Logger', 'Debugger',
+        // Métodos de Slice
+        'getClass', 'isProduction', 'getComponent', 'build', 'setTheme', 'attachTemplate',
+        // Controller
+        'componentCategories', 'templates', 'classes', 'requestedStyles', 'activeComponents',
+        'registerComponent', 'registerComponentsRecursively', 'loadTemplateToComponent',
+        'fetchText', 'setComponentProps', 'verifyComponentIds', 'destroyComponent',
+        // StylesManager
+        'componentStyles', 'themeManager', 'init', 'appendComponentStyles', 'registerComponentStyles',
+        // Router
+        'routes', 'pathToRouteMap', 'activeRoute', 'navigate', 'matchRoute', 'handleRoute',
+        'onRouteChange', 'loadInitialRoute', 'renderRoutesComponentsInPage',
+        // Propiedades de componentes
+        'sliceId', 'sliceType', 'sliceConfig', 'debuggerProps', 'parentComponent',
+        'value', 'customColor', 'icon', 'layout', 'view', 'items', 'columns', 'rows',
+        'onClickCallback', 'props',
+        // Custom Elements
+        'customElements', 'define', 'HTMLElement',
+        // DOM APIs críticas
+        'addEventListener', 'removeEventListener', 'querySelector', 'querySelectorAll',
+        'appendChild', 'removeChild', 'innerHTML', 'textContent', 'style', 'classList',
+        // Lifecycle
+        'beforeMount', 'afterMount', 'beforeDestroy', 'afterDestroy',
+        'mount', 'unmount', 'destroy', 'update', 'start', 'stop',
+        // Browser APIs
+        'fetch', 'setTimeout', 'clearTimeout', 'localStorage', 'history', 'pushState',
+        // Exports/Imports
+        'default', 'export', 'import', 'from', 'await', 'async',
+        // Nombres de componentes
+        'Button', 'Grid', 'Layout', 'HomePage', 'NotFound', 'Loading', 'TreeView', 'Link',
+        'FetchManager', 'Translator'
+      ],
+      properties: {
+        regex: /^(slice|_|\$|on[A-Z]|get|set|has|is)/
+      }
+    },
+    format: {
+      comments: false,
+      beautify: false
+    },
+    keep_fnames: true,
+    keep_classnames: true
+  });
+
+  if (result.error) {
+    throw new Error(`Terser 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);
+}
+
+/**
+ * Minifica archivos CSS
+ */
+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);
+}
+
+/**
+ * Minifica archivos HTML
+ */
+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: {
+      mangle: {
+        reserved: ['slice', 'Slice', 'SliceJS', 'sliceId', 'sliceConfig']
+      }
+    },
+    ignoreCustomFragments: [
+      /slice-[\w-]+="[^"]*"/g
+    ]
+  });
+
+  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,59 +349,80 @@ 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');
     
     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
+    await verifySliceFiles(srcDir);
+
+    // Limpiar directorio dist
     if (await fs.pathExists(distDir)) {
       if (!options.skipClean) {
         Print.info('Cleaning previous build...');
@@ -338,33 +432,26 @@ export default async function buildProduction(options = {}) {
     }
     
     await fs.ensureDir(distDir);
-
-    // 2. Copiar sliceConfig.json sin modificaciones
     await copySliceConfig();
 
-    // 3. Procesar todos los archivos de src
-    Print.info('Processing and minifying source files...');
+    // Procesar archivos
+    Print.info('Processing and optimizing source files for Slice.js...');
     await processDirectory(srcDir, distDir, srcDir);
     Print.success('All source files processed and optimized');
 
-    // 4. Crear bundle optimizado del archivo principal
+    await verifyBuildIntegrity(distDir);
     await createOptimizedBundle();
-
-    // 5. Generar estadísticas
     await generateBuildStats(srcDir, distDir);
 
-    // 6. Tiempo total
     const buildTime = ((Date.now() - startTime) / 1000).toFixed(1);
     
     Print.newLine();
-    Print.success(`✨ Production build completed in ${buildTime}s`);
+    Print.success(`✨ Slice.js production build completed in ${buildTime}s`);
     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('  • 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 "npm run slice:start" to test the production build');
+    console.log('  • All Slice.js components and architecture preserved');
     
     return true;
 
@@ -375,162 +462,82 @@ 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
     const express = await import('express');
     const app = express.default();
     
-    // Servir archivos estáticos desde dist (equivalente a lo que hace la API con src)
     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');
+      
       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 = {}) {
-  // Verificar dependencias necesarias
+  const config = loadConfig();
+  const defaultPort = config?.server?.port || 3001;
+  
   if (!await checkBuildDependencies()) {
     return false;
   }
 
   if (options.serve) {
-    // Solo servir build existente
-    await serveProductionBuild(options.port);
+    await serveProductionBuild(options.port || defaultPort);
     return true;
   }
 
   if (options.analyze) {
-    // Analizar build sin construir
     await analyzeBuild();
     return true;
   }
 
-  // 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}`);
-  }
 }