slicejs-cli 2.1.11 → 2.2.0

package/client.js

@@ -6,6 +6,8 @@ import createComponent from "./commands/createComponent/createComponent.js";
 import listComponents from "./commands/listComponents/listComponents.js";
 import deleteComponent from "./commands/deleteComponent/deleteComponent.js";
 import getComponent, { listComponents as listRemoteComponents, syncComponents } from "./commands/getComponent/getComponent.js";
+import buildProduction, { buildCommand, serveProductionBuild } from "./commands/buildProduction/buildProduction.js";
+import startServer from "./commands/startServer/startServer.js";
 import versionChecker from "./commands/utils/versionChecker.js";
 import fs from "fs";
 import path from "path";
@@ -73,6 +75,80 @@ sliceClient
     await versionChecker.showVersionInfo();
   });
 
+// BUILD COMMAND
+sliceClient
+  .command("build")
+  .description("Build project for production")
+  .option("--serve", "Start production server after build")
+  .option("--preview", "Start preview server after build")
+  .option("--analyze", "Analyze build without building")
+  .option("--skip-clean", "Skip cleaning previous build")
+  .option("-p, --port <port>", "Port for preview/serve server", 3001)
+  .action(async (options) => {
+    await runWithVersionCheck(async () => {
+      const success = await buildCommand({
+        serve: options.serve,
+        preview: options.preview,
+        analyze: options.analyze,
+        skipClean: options.skipClean,
+        port: parseInt(options.port)
+      });
+      
+      if (!success) {
+        process.exit(1);
+      }
+    });
+  });
+
+// START COMMAND (PRODUCTION)
+sliceClient
+  .command("start")
+  .description("Start production server (requires build first)")
+  .option("-p, --port <port>", "Port for production server", 3000)
+  .option("--build", "Build for production before starting")
+  .action(async (options) => {
+    await runWithVersionCheck(async () => {
+      const distDir = path.join(__dirname, "../../dist");
+      
+      // Verificar si existe build de producción
+      if (!fs.existsSync(distDir) && !options.build) {
+        Print.error("No production build found");
+        Print.info("Run 'slice build' first or use 'slice start --build'");
+        return false;
+      }
+      
+      // Si se solicita build, construir primero
+      if (options.build) {
+        Print.info("Building for production...");
+        const buildSuccess = await buildProduction();
+        if (!buildSuccess) {
+          Print.error("Build failed, cannot start production server");
+          return false;
+        }
+      }
+      
+      // Iniciar servidor de producción
+      await startServer({
+        mode: 'production',
+        port: parseInt(options.port)
+      });
+    });
+  });
+
+// DEV COMMAND (DEVELOPMENT)
+sliceClient
+  .command("dev")
+  .description("Start development server")
+  .option("-p, --port <port>", "Port for development server", 3000)
+  .action(async (options) => {
+    await runWithVersionCheck(async () => {
+      await startServer({
+        mode: 'development',
+        port: parseInt(options.port)
+      });
+    });
+  });
+
 // COMPONENT COMMAND GROUP - For local component management
 const componentCommand = sliceClient.command("component").alias("comp").description("Manage local project components");
 
@@ -286,18 +362,26 @@ sliceClient
 sliceClient.addHelpText('after', `
 Common Usage Examples:
   slice init                     - Initialize new Slice.js project
+  slice dev                      - Start development server
+  slice build                    - Build for production
+  slice start                    - Start production server
   slice get Button Card Input    - Install Visual components from registry  
   slice get FetchManager -s      - Install Service component from registry
   slice browse                   - Browse all available components
   slice sync                     - Update local components to latest versions
   slice component create         - Create new local component
-  slice update                   - Check for CLI/framework updates
 
 Command Categories:
-  • init, version, update        - Project setup and maintenance
+  • init, dev, build, start      - Project lifecycle
   • get, browse, sync            - Quick registry shortcuts  
   • component <cmd>              - Local component management
   • registry <cmd>               - Official repository operations
+  • version, update              - Maintenance commands
+
+Development vs Production:
+  • slice dev    - Development server (serves from /src)
+  • slice build  - Create optimized /dist build  
+  • slice start  - Production server (serves from /dist)
 
 More info: https://slice-js-docs.vercel.app/
 `);
@@ -307,6 +391,7 @@ if (!process.argv.slice(2).length) {
   program.outputHelp();
   Print.newLine();
   Print.info("Start with: slice init");
+  Print.commandExample("Development", "slice dev");
   Print.commandExample("View available components", "slice browse");
 }
 

package/commands/Print.js

@@ -90,4 +90,28 @@ export default class Print {
         }
         Print.separator();
     }
+
+    // Método para mostrar resultados de minificación
+    static minificationResult(filename, originalSize, minifiedSize, savingsPercent) {
+        const originalKB = (originalSize / 1024).toFixed(1);
+        const minifiedKB = (minifiedSize / 1024).toFixed(1);
+        
+        console.log('\x1b[32m', `  ✅ ${filename}`, '\x1b[0m');
+        console.log('\x1b[90m', `     ${originalKB}KB → ${minifiedKB}KB (${savingsPercent}% saved)`, '\x1b[0m');
+    }
+
+    // Método para mostrar progreso de build
+    static buildProgress(message) {
+        console.log('\x1b[36m', `🔄 ${message}`, '\x1b[0m');
+    }
+
+    // Método para mostrar estadísticas de servidor
+    static serverStats(mode, port, directory) {
+        Print.newLine();
+        console.log('\x1b[35m', `🌐 Server Configuration:`, '\x1b[0m');
+        console.log('\x1b[90m', `   Mode: ${mode}`, '\x1b[0m');
+        console.log('\x1b[90m', `   Port: ${port}`, '\x1b[0m');
+        console.log('\x1b[90m', `   Serving: /${directory}`, '\x1b[0m');
+        Print.newLine();
+    }
 }

package/commands/buildProduction/buildProduction.js

@@ -0,0 +1,493 @@
+// commands/buildProduction/buildProduction.js
+
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { minify as terserMinify } from '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
+ */
+const getMinificationOptions = () => ({
+  js: {
+    compress: {
+      dead_code: true,
+      drop_console: true, // Remover console.log en producción
+      drop_debugger: true,
+      pure_funcs: ['console.log', 'console.info', 'console.warn'],
+      passes: 2
+    },
+    mangle: {
+      toplevel: true,
+      reserved: ['Slice', 'Controller', 'StylesManager'] // Preservar clases principales
+    },
+    output: {
+      comments: false,
+      beautify: false
+    },
+    toplevel: true
+  },
+  css: {
+    level: 2, // Optimización agresiva
+    returnPromise: false
+  },
+  html: {
+    collapseWhitespace: true,
+    removeComments: true,
+    removeRedundantAttributes: true,
+    removeEmptyAttributes: true,
+    minifyCSS: true,
+    minifyJS: true,
+    useShortDoctype: true,
+    removeAttributeQuotes: true,
+    removeOptionalTags: true
+  }
+});
+
+/**
+ * Minifica un archivo JavaScript
+ */
+async function minifyJavaScript(content, filename) {
+  try {
+    const options = getMinificationOptions().js;
+    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}`);
+    throw error;
+  }
+}
+
+/**
+ * Minifica un archivo CSS
+ */
+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;
+  }
+}
+
+/**
+ * Minifica un archivo HTML
+ */
+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);
+    
+    return result;
+  } catch (error) {
+    Print.error(`Error minifying ${filename}: ${error.message}`);
+    throw error;
+  }
+}
+
+/**
+ * Procesa un archivo según su extensión
+ */
+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;
+  }
+}
+
+/**
+ * Copia y procesa recursivamente todos los archivos de src a dist
+ */
+async function processDirectory(srcDir, distDir, baseSrcDir) {
+  const items = await fs.readdir(srcDir);
+  
+  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);
+      }
+    }
+  }
+}
+
+/**
+ * Crea un bundle optimizado del archivo principal Slice.js
+ */
+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;
+  }
+}
+
+/**
+ * Copia sliceConfig.json sin modificaciones
+ */
+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;
+  }
+}
+
+/**
+ * Genera estadísticas del build
+ */
+async function generateBuildStats(srcDir, distDir) {
+  try {
+    Print.info('Generating build statistics...');
+    
+    const calculateDirSize = async (dir) => {
+      let totalSize = 0;
+      const files = await fs.readdir(dir, { withFileTypes: true });
+      
+      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;
+        }
+      }
+      return totalSize;
+    };
+
+    const srcSize = await calculateDirSize(srcDir);
+    const distSize = await calculateDirSize(distDir);
+    const savings = ((srcSize - distSize) / srcSize * 100).toFixed(1);
+    
+    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`);
+    
+  } catch (error) {
+    Print.warning(`Could not generate build statistics: ${error.message}`);
+  }
+}
+
+/**
+ * Función principal de build para producción
+ */
+export default async function buildProduction(options = {}) {
+  const startTime = Date.now();
+  
+  try {
+    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.');
+    }
+
+    // 1. Limpiar directorio dist
+    if (await fs.pathExists(distDir)) {
+      if (!options.skipClean) {
+        Print.info('Cleaning previous build...');
+        await fs.remove(distDir);
+        Print.success('Previous build cleaned');
+      }
+    }
+    
+    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...');
+    await processDirectory(srcDir, distDir, srcDir);
+    Print.success('All source files processed and optimized');
+
+    // 4. Crear bundle optimizado del archivo principal
+    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.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');
+    
+    return true;
+
+  } catch (error) {
+    Print.error(`Build failed: ${error.message}`);
+    return false;
+  }
+}
+
+/**
+ * Servidor de desarrollo para testing del build de producción
+ * Usa Express como el servidor principal pero sirviendo desde /dist
+ */
+export async function serveProductionBuild(port = 3001) {
+  try {
+    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}...`);
+    
+    // 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');
+      if (fs.existsSync(indexPath)) {
+        res.sendFile(indexPath);
+      } else {
+        res.status(404).send('Production build not found');
+      }
+    });
+    
+    app.listen(port, () => {
+      Print.success(`Production build server running at http://localhost:${port}`);
+      Print.info('Press Ctrl+C to stop the server');
+      Print.info('This server simulates production environment using /dist files');
+    });
+    
+  } catch (error) {
+    Print.error(`Error starting production server: ${error.message}`);
+    throw error;
+  }
+}
+
+/**
+ * Comando build con opciones
+ */
+export async function buildCommand(options = {}) {
+  // Verificar dependencias necesarias
+  if (!await checkBuildDependencies()) {
+    return false;
+  }
+
+  if (options.serve) {
+    // Solo servir build existente
+    await serveProductionBuild(options.port);
+    return true;
+  }
+
+  if (options.analyze) {
+    // Analizar build sin construir
+    await analyzeBuild();
+    return true;
+  }
+
+  // Build completo
+  const success = await buildProduction(options);
+  
+  if (success && options.preview) {
+    Print.newLine();
+    Print.info('Starting preview server...');
+    setTimeout(() => {
+      serveProductionBuild(options.port);
+    }, 1000);
+  }
+  
+  return success;
+}
+
+/**
+ * Verifica que las dependencias de build estén instaladas
+ */
+async function checkBuildDependencies() {
+  try {
+    Print.info('Checking build dependencies...');
+    
+    const packageJsonPath = path.join(__dirname, '../../../../package.json');
+    
+    if (!await fs.pathExists(packageJsonPath)) {
+      throw new Error('package.json not found');
+    }
+    
+    const packageJson = await fs.readJson(packageJsonPath);
+    const deps = { ...packageJson.dependencies, ...packageJson.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:');
+      missing.forEach(dep => console.log(`  • ${dep}`));
+      Print.newLine();
+      Print.info('Install missing dependencies:');
+      console.log(`npm install --save-dev ${missing.join(' ')}`);
+      return false;
+    }
+    
+    Print.success('All build dependencies are installed');
+    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/getComponent/getComponent.js

@@ -667,4 +667,4 @@ async function syncComponents(options = {}) {
 }
 
 export default getComponents;
-export { listComponents, syncComponents };
+export { listComponents, syncComponents, ComponentRegistry };

package/commands/init/init.js

@@ -2,28 +2,21 @@ import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import Print from '../Print.js';
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+// Importar la clase ComponentRegistry del getComponent
+import { ComponentRegistry } from '../getComponent/getComponent.js';
+
 export default async function initializeProject(projectType) {
     try {
-        // Directorio de origen en el paquete
+        // Directorio de origen para API (mantener copia local)
         let sliceBaseDir = path.join(__dirname, '../../../slicejs-web-framework');
         let apiDir = path.join(sliceBaseDir, 'api');
         let srcDir = path.join(sliceBaseDir, 'src');
-
         let destinationApi = path.join(__dirname, '../../../../api');
         let destinationSrc = path.join(__dirname, '../../../../src');
 
-        try {
-            // Verificar si los directorios de origen existen
-            if (!fs.existsSync(sliceBaseDir)) throw new Error(`No se encontró el directorio base: ${sliceBaseDir}`);
-            if (!fs.existsSync(apiDir)) throw new Error(`No se encontró la carpeta api: ${apiDir}`);
-            if (!fs.existsSync(srcDir)) throw new Error(`No se encontró la carpeta src: ${srcDir}`);
-        } catch (error) {
-            Print.error('Error validando directorios de origen:', error.message);
-            return;
-        }
-
         try {
             // Verificar si los directorios de destino ya existen
             if (fs.existsSync(destinationApi)) throw new Error(`El directorio "api" ya existe: ${destinationApi}`);
@@ -33,8 +26,9 @@ export default async function initializeProject(projectType) {
             return;
         }
 
+        // 1. COPIAR LA CARPETA API (mantener lógica original)
         try {
-            // Copiar las carpetas
+            if (!fs.existsSync(apiDir)) throw new Error(`No se encontró la carpeta api: ${apiDir}`);
             await fs.copy(apiDir, destinationApi, { recursive: true });
             Print.success('Carpeta "api" copiada correctamente.');
         } catch (error) {
@@ -42,16 +36,119 @@ export default async function initializeProject(projectType) {
             return;
         }
 
+        // 2. CREAR ESTRUCTURA SRC BÁSICA (sin copiar componentes Visual)
         try {
-            await fs.copy(srcDir, destinationSrc, { recursive: true });
-            Print.success('Carpeta "src" copiada correctamente.');
+            if (!fs.existsSync(srcDir)) throw new Error(`No se encontró la carpeta src: ${srcDir}`);
+            
+            // Copiar solo los archivos base de src, excluyendo Components/Visual
+            await fs.ensureDir(destinationSrc);
+            
+            // Copiar archivos y carpetas de src excepto Components/Visual
+            const srcItems = await fs.readdir(srcDir);
+            
+            for (const item of srcItems) {
+                const srcItemPath = path.join(srcDir, item);
+                const destItemPath = path.join(destinationSrc, item);
+                const stat = await fs.stat(srcItemPath);
+                
+                if (stat.isDirectory()) {
+                    if (item === 'Components') {
+                        // Crear estructura de Components pero sin copiar Visual
+                        await fs.ensureDir(destItemPath);
+                        
+                        const componentItems = await fs.readdir(srcItemPath);
+                        for (const componentItem of componentItems) {
+                            const componentItemPath = path.join(srcItemPath, componentItem);
+                            const destComponentItemPath = path.join(destItemPath, componentItem);
+                            
+                            if (componentItem !== 'Visual') {
+                                // Copiar Service y otros tipos de components
+                                await fs.copy(componentItemPath, destComponentItemPath, { recursive: true });
+                            } else {
+                                // Solo crear el directorio Visual vacío
+                                await fs.ensureDir(destComponentItemPath);
+                            }
+                        }
+                    } else {
+                        // Copiar otras carpetas normalmente
+                        await fs.copy(srcItemPath, destItemPath, { recursive: true });
+                    }
+                } else {
+                    // Copiar archivos normalmente
+                    await fs.copy(srcItemPath, destItemPath);
+                }
+            }
+            
+            Print.success('Estructura "src" creada correctamente.');
         } catch (error) {
-            Print.error('Error copiando la carpeta "src":', error.message);
+            Print.error('Error creando la estructura "src":', error.message);
             return;
         }
 
+        // 3. DESCARGAR TODOS LOS COMPONENTES VISUAL DESDE EL REPOSITORIO OFICIAL
+        try {
+            Print.info('Downloading all Visual components from official repository...');
+            
+            const registry = new ComponentRegistry();
+            await registry.loadRegistry();
+            
+            // Obtener TODOS los componentes Visual disponibles
+            const allVisualComponents = await getAllVisualComponents(registry);
+            
+            if (allVisualComponents.length > 0) {
+                Print.info(`Installing ${allVisualComponents.length} Visual components...`);
+                
+                const results = await registry.installMultipleComponents(
+                    allVisualComponents, 
+                    'Visual', 
+                    true // force = true para instalación inicial
+                );
+                
+                const successful = results.filter(r => r.success).length;
+                const failed = results.filter(r => !r.success).length;
+                
+                if (successful > 0) {
+                    Print.success(`${successful} Visual components installed from official repository`);
+                }
+                
+                if (failed > 0) {
+                    Print.warning(`${failed} Visual components could not be installed`);
+                    Print.info('You can install them later using "slice get <component-name>"');
+                }
+            } else {
+                Print.warning('No Visual components found in registry');
+                Print.info('You can add components later using "slice get <component-name>"');
+            }
+            
+        } catch (error) {
+            Print.warning('Could not download Visual components from official repository');
+            Print.error(`Repository error: ${error.message}`);
+            Print.info('Project initialized without Visual components');
+            Print.info('You can add them later using "slice get <component-name>"');
+        }
+
         Print.success('Proyecto inicializado correctamente.');
+        Print.newLine();
+        Print.info('Next steps:');
+        console.log('  slice browse          - View available components');
+        console.log('  slice get Button      - Install specific components');
+        console.log('  slice sync            - Update all components to latest versions');
+        
     } catch (error) {
         Print.error('Error inesperado al inicializar el proyecto:', error.message);
     }
 }
+
+/**
+ * Obtiene TODOS los componentes Visual disponibles en el registry
+ * @param {ComponentRegistry} registry - Instancia del registry cargado
+ * @returns {Array} - Array con todos los nombres de componentes Visual
+ */
+async function getAllVisualComponents(registry) {
+    const availableComponents = registry.getAvailableComponents('Visual');
+    const allVisualComponents = Object.keys(availableComponents);
+    
+    Print.info(`Found ${allVisualComponents.length} Visual components in official repository`);
+    
+    return allVisualComponents;
+}

package/commands/startServer/startServer.js

@@ -0,0 +1,198 @@
+// commands/startServer/startServer.js
+
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { spawn } from 'child_process';
+import Print from '../Print.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Verifica si existe un build de producción
+ */
+async function checkProductionBuild() {
+  const distDir = path.join(__dirname, '../../../../dist');
+  return await fs.pathExists(distDir);
+}
+
+/**
+ * Verifica si existe la estructura de desarrollo
+ */
+async function checkDevelopmentStructure() {
+  const srcDir = path.join(__dirname, '../../../../src');
+  const apiDir = path.join(__dirname, '../../../../api');
+  
+  return (await fs.pathExists(srcDir)) && (await fs.pathExists(apiDir));
+}
+
+/**
+ * Modifica temporalmente el servidor Express para modo producción
+ */
+async function createProductionIndexFile() {
+  try {
+    const apiDir = path.join(__dirname, '../../../../api');
+    const originalIndexPath = path.join(apiDir, 'index.js');
+    const backupIndexPath = path.join(apiDir, 'index.dev.js');
+    const prodIndexPath = path.join(apiDir, 'index.prod.js');
+    
+    // Crear backup del index original si no existe
+    if (!await fs.pathExists(backupIndexPath)) {
+      await fs.copy(originalIndexPath, backupIndexPath);
+    }
+    
+    // Leer el contenido original
+    const originalContent = await fs.readFile(originalIndexPath, 'utf8');
+    
+    // Modificar para servir desde /dist en lugar de /src
+    const productionContent = originalContent.replace(
+      /express\.static\(['"`]src['"`]\)/g,
+      "express.static('dist')"
+    ).replace(
+      /express\.static\(path\.join\(__dirname,\s*['"`]\.\.\/src['"`]\)\)/g,
+      "express.static(path.join(__dirname, '../dist'))"
+    );
+    
+    // Escribir archivo temporal de producción
+    await fs.writeFile(prodIndexPath, productionContent, 'utf8');
+    
+    // Reemplazar index.js con versión de producción
+    await fs.copy(prodIndexPath, originalIndexPath);
+    
+    Print.success('Express server configured for production mode');
+    
+    return true;
+  } catch (error) {
+    Print.error(`Error configuring production server: ${error.message}`);
+    return false;
+  }
+}
+
+/**
+ * Restaura el servidor Express al modo desarrollo
+ */
+async function restoreDevelopmentIndexFile() {
+  try {
+    const apiDir = path.join(__dirname, '../../../../api');
+    const originalIndexPath = path.join(apiDir, 'index.js');
+    const backupIndexPath = path.join(apiDir, 'index.dev.js');
+    
+    if (await fs.pathExists(backupIndexPath)) {
+      await fs.copy(backupIndexPath, originalIndexPath);
+      Print.success('Express server restored to development mode');
+    }
+    
+    return true;
+  } catch (error) {
+    Print.error(`Error restoring development server: ${error.message}`);
+    return false;
+  }
+}
+
+/**
+ * Inicia el servidor Node.js
+ */
+function startNodeServer(port, mode) {
+  return new Promise((resolve, reject) => {
+    const apiIndexPath = path.join(__dirname, '../../../../api/index.js');
+    
+    Print.info(`Starting ${mode} server on port ${port}...`);
+    
+    const serverProcess = spawn('node', [apiIndexPath], {
+      stdio: 'inherit',
+      env: {
+        ...process.env,
+        PORT: port,
+        NODE_ENV: mode === 'production' ? 'production' : 'development'
+      }
+    });
+
+    serverProcess.on('error', (error) => {
+      Print.error(`Failed to start server: ${error.message}`);
+      reject(error);
+    });
+
+    // Manejar Ctrl+C para limpiar archivos temporales
+    process.on('SIGINT', async () => {
+      Print.info('Shutting down server...');
+      
+      if (mode === 'production') {
+        await restoreDevelopmentIndexFile();
+      }
+      
+      serverProcess.kill('SIGINT');
+      process.exit(0);
+    });
+
+    // Manejar cierre del proceso
+    process.on('SIGTERM', async () => {
+      if (mode === 'production') {
+        await restoreDevelopmentIndexFile();
+      }
+      
+      serverProcess.kill('SIGTERM');
+    });
+
+    // El servidor se considera iniciado exitosamente después de un breve delay
+    setTimeout(() => {
+      Print.success(`${mode === 'production' ? 'Production' : 'Development'} server running at http://localhost:${port}`);
+      Print.info(`Serving files from /${mode === 'production' ? 'dist' : 'src'} directory`);
+      Print.info('Press Ctrl+C to stop the server');
+      resolve(serverProcess);
+    }, 1000);
+  });
+}
+
+/**
+ * Función principal para iniciar servidor
+ */
+export default async function startServer(options = {}) {
+  const { mode = 'development', port = 3000 } = options;
+  
+  try {
+    Print.title(`🚀 Starting Slice.js ${mode} server...`);
+    Print.newLine();
+    
+    // Verificar estructura del proyecto
+    if (!await checkDevelopmentStructure()) {
+      throw new Error('Project structure not found. Run "slice init" first.');
+    }
+    
+    if (mode === 'production') {
+      // Modo producción: verificar build y configurar servidor
+      if (!await checkProductionBuild()) {
+        throw new Error('No production build found. Run "slice build" first.');
+      }
+      
+      // Configurar Express para modo producción
+      const configSuccess = await createProductionIndexFile();
+      if (!configSuccess) {
+        throw new Error('Failed to configure production server');
+      }
+      
+      Print.info('Production mode: serving optimized files from /dist');
+    } else {
+      // Modo desarrollo: asegurar que está en modo desarrollo
+      await restoreDevelopmentIndexFile();
+      Print.info('Development mode: serving files from /src with hot reload');
+    }
+    
+    // Iniciar el servidor
+    await startNodeServer(port, mode);
+    
+  } catch (error) {
+    Print.error(`Failed to start server: ${error.message}`);
+    
+    // Limpiar en caso de error
+    if (mode === 'production') {
+      await restoreDevelopmentIndexFile();
+    }
+    
+    throw error;
+  }
+}
+
+/**
+ * Funciones de utilidad exportadas
+ */
+export { checkProductionBuild, checkDevelopmentStructure };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.1.11",
+  "version": "2.2.0",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "scripts": {

package/post.js

@@ -24,7 +24,9 @@ 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:start'] = 'node api/index.js';
+        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: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';
         
@@ -32,7 +34,7 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
         projectPackageJson.scripts['slice:create'] = 'node node_modules/slicejs-cli/client.js component create';
         projectPackageJson.scripts['slice:list'] = 'node node_modules/slicejs-cli/client.js component list';
         projectPackageJson.scripts['slice:delete'] = 'node node_modules/slicejs-cli/client.js component delete';
-        
+      
         // Main repository commands (most used shortcuts)
         projectPackageJson.scripts['slice:get'] = 'node node_modules/slicejs-cli/client.js get';
         projectPackageJson.scripts['slice:browse'] = 'node node_modules/slicejs-cli/client.js browse';
@@ -43,9 +45,14 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
         projectPackageJson.scripts['slice:registry-list'] = 'node node_modules/slicejs-cli/client.js registry list';
         projectPackageJson.scripts['slice:registry-sync'] = 'node node_modules/slicejs-cli/client.js registry sync';
         
+        // Build-related commands
+        projectPackageJson.scripts['slice:build-serve'] = 'node node_modules/slicejs-cli/client.js build --serve';
+        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 api/index.js';
+        projectPackageJson.scripts['development'] = 'node node_modules/slicejs-cli/client.js dev';
 
         // Module configuration
         projectPackageJson.type = 'module';
@@ -58,21 +65,32 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
     })
     .then(() => {
         console.log('✅ SliceJS CLI commands added to package.json');
-        console.log('\n🚀 Main 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('  npm run slice:start        - Start development server');
         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🔧 Utilities:');
+        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🎯 To get started: npm run slice:init');
-        console.log('💡 Tip: Use "slice:sync" to keep your components updated');
+        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');
     })
     .catch(err => {
         if (err.code === 'ENOENT') {
@@ -83,9 +101,11 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
                 description: 'Slice.js project',
                 main: 'api/index.js',
                 scripts: {
-                    // Main commands
+                    // Main workflow commands
                     'slice:init': 'node node_modules/slicejs-cli/client.js init',
-                    'slice:start': 'node api/index.js',
+                    'slice:dev': 'node node_modules/slicejs-cli/client.js dev',
+                    'slice:start': 'node node_modules/slicejs-cli/client.js start',
+                    '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',
                     
@@ -104,8 +124,14 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
                     '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'
+                    'run': 'node api/index.js',
+                    'development': 'node node_modules/slicejs-cli/client.js dev'
                 },
                 keywords: ['slicejs', 'web-framework', 'components'],
                 author: '',
@@ -125,21 +151,32 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
     })
     .then(() => {
         console.log('✅ Created package.json with SliceJS CLI commands.');
-        console.log('\n🚀 Main 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('  npm run slice:start        - Start development server');
         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🔧 Utilities:');
+        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🎯 To get started: npm run slice:init');
-        console.log('💡 Tip: Use "slice:sync" to keep your components updated');
+        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');
     })
     .catch(err => {
         console.error('Error creating package.json:', err);