slicejs-cli 2.1.10 → 2.2.0

package/commands/getComponent/getComponent.js

@@ -109,8 +109,7 @@ class ComponentRegistry {
           updatableComponents.push({
             name,
             category,
-            path: componentPath,
-            description: this.getComponentDescription(name, category)
+            path: componentPath
           });
         }
       }
@@ -125,13 +124,25 @@ class ComponentRegistry {
     const components = {};
     Object.entries(this.componentsRegistry).forEach(([name, componentCategory]) => {
       if (!category || componentCategory === category) {
+        // ✅ CORREGIDO: Componentes especiales que no necesitan todos los archivos
+        let files;
+        if (componentCategory === 'Visual') {
+          // Componentes de routing lógico solo necesitan JS
+          if (['Route', 'MultiRoute', 'NotFound'].includes(name)) {
+            files = [`${name}.js`];
+          } else {
+            // Componentes visuales normales necesitan JS, HTML, CSS
+            files = [`${name}.js`, `${name}.html`, `${name}.css`];
+          }
+        } else {
+          // Service components solo necesitan JS
+          files = [`${name}.js`];
+        }
+
         components[name] = {
           name,
           category: componentCategory,
-          files: componentCategory === 'Visual' ? 
-            [`${name}.js`, `${name}.html`, `${name}.css`] : 
-            [`${name}.js`],
-          description: this.getComponentDescription(name, componentCategory)
+          files: files
         };
       }
     });
@@ -139,37 +150,42 @@ class ComponentRegistry {
     return components;
   }
 
-  getComponentDescription(componentName, category) {
-    const descriptions = {
-      // Visual Components
-      'Button': 'Interactive button component with customizable styling and events',
-      'Card': 'Flexible container component for displaying content in card format',
-      'Input': 'Form input component with validation and multiple input types support',
-      'Checkbox': 'Checkbox input component with custom styling and state management',
-      'Switch': 'Toggle switch component for binary state selection',
-      'Select': 'Dropdown selection component with search and multi-select support',
-      'Details': 'Collapsible details component for expandable content sections',
-      'Grid': 'Responsive grid layout component for organizing content',
-      'Icon': 'Icon display component with multiple icon libraries support',
-      'Layout': 'Main layout component for application page structure',
-      'Loading': 'Loading indicator component with multiple animation styles',
-      'Navbar': 'Navigation bar component with responsive design and menu support',
-      'TreeView': 'Hierarchical tree view component for nested data display',
-      'TreeItem': 'Individual tree item component used within TreeView',
-      'DropDown': 'Dropdown menu component for contextual actions',
-      'Route': 'Single route component for client-side routing',
-      'MultiRoute': 'Multiple route handler component for complex routing',
-      'NotFound': '404 error page component for unmatched routes',
-      
-      // Service Components
-      'FetchManager': 'HTTP request manager service for API communication',
-      'LocalStorageManager': 'Local storage management service for browser storage',
-      'IndexedDbManager': 'IndexedDB database management service for client-side storage',
-      'Translator': 'Internationalization service for multi-language support',
-      'Link': 'Navigation link service for programmatic routing'
-    };
-
-    return descriptions[componentName] || `${componentName} component from Slice.js framework (${category})`;
+  displayAvailableComponents() {
+    if (!this.componentsRegistry) {
+      Print.error('❌ No se pudo cargar el registro de componentes');
+      return;
+    }
+
+    console.log('\n📚 Componentes disponibles en el repositorio oficial de Slice.js:\n');
+
+    const visualComponents = this.getAvailableComponents('Visual');
+    const serviceComponents = this.getAvailableComponents('Service');
+
+    // ✅ SIMPLIFICADO: Solo mostrar nombres sin descripciones
+    Print.info('🎨 Visual Components (UI):');
+    Object.keys(visualComponents).forEach(name => {
+      const files = visualComponents[name].files;
+      const fileIcons = files.map(file => {
+        if (file.endsWith('.js')) return '📜';
+        if (file.endsWith('.html')) return '🌐';
+        if (file.endsWith('.css')) return '🎨';
+        return '📄';
+      }).join(' ');
+      console.log(`  • ${name} ${fileIcons}`);
+    });
+
+    Print.info('\n⚙️  Service Components (Logic):');
+    Object.keys(serviceComponents).forEach(name => {
+      console.log(`  • ${name} 📜`);
+    });
+
+    Print.newLine();
+    Print.info(`Total: ${Object.keys(visualComponents).length} Visual + ${Object.keys(serviceComponents).length} Service components`);
+
+    console.log(`\n💡 Ejemplos de uso:`);
+    console.log(`slice get Button Card Input          # Obtener componentes Visual`);
+    console.log(`slice get FetchManager --service     # Obtener componente Service`);
+    console.log(`slice sync                           # Sincronizar componentes Visual`);
   }
 
   async downloadComponentFiles(componentName, category, targetPath) {
@@ -180,6 +196,7 @@ class ComponentRegistry {
     }
 
     const downloadedFiles = [];
+    const failedFiles = [];
     Print.info(`Downloading ${componentName} from official repository...`);
 
     for (const fileName of component.files) {
@@ -190,7 +207,9 @@ class ComponentRegistry {
         const response = await fetch(githubUrl);
         
         if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText} for ${fileName}`);
+          Print.downloadError(fileName, `HTTP ${response.status}: ${response.statusText}`);
+          failedFiles.push(fileName);
+          continue; // ✅ CONTINUAR en lugar de lanzar error
         }
 
         const content = await response.text();
@@ -200,10 +219,24 @@ class ComponentRegistry {
         Print.downloadSuccess(fileName);
       } catch (error) {
         Print.downloadError(fileName, error.message);
-        throw error;
+        failedFiles.push(fileName);
+        continue; // ✅ CONTINUAR en lugar de lanzar error
       }
     }
 
+    // ✅ NUEVO: Solo lanzar error si NO se descargó el archivo principal (.js)
+    const mainFileDownloaded = downloadedFiles.some(file => file.endsWith('.js'));
+    
+    if (!mainFileDownloaded) {
+      throw new Error(`Failed to download main component file (${componentName}.js)`);
+    }
+
+    // ✅ ADVERTENCIA: Informar sobre archivos que fallaron (pero no detener el proceso)
+    if (failedFiles.length > 0) {
+      Print.warning(`Some files couldn't be downloaded: ${failedFiles.join(', ')}`);
+      Print.info('Component installed with available files');
+    }
+
     return downloadedFiles;
   }
 
@@ -295,18 +328,27 @@ class ComponentRegistry {
       // Update components registry
       await this.updateLocalRegistry(componentName, category);
 
-      Print.success(`${componentName} updated successfully from official repository!`);
+      Print.success(`${componentName} installed successfully from official repository!`);
       console.log(`📁 Location: ${folderSuffix}/${categoryPath}/${componentName}/`);
       console.log(`📄 Files: ${downloadedFiles.join(', ')}`);
 
       return true;
 
     } catch (error) {
-      Print.error(`Error updating ${componentName}: ${error.message}`);
-      // Clean up partial installation
-      if (await fs.pathExists(targetPath)) {
+      Print.error(`Error installing ${componentName}: ${error.message}`);
+      
+      // ✅ MEJORADO: Solo borrar si el archivo principal (.js) no existe
+      const mainFilePath = path.join(targetPath, `${componentName}.js`);
+      const mainFileExists = await fs.pathExists(mainFilePath);
+      
+      if (!mainFileExists && await fs.pathExists(targetPath)) {
+        // Solo limpiar si no se instaló el archivo principal
         await fs.remove(targetPath);
+        Print.info('Cleaned up failed installation');
+      } else if (mainFileExists) {
+        Print.warning('Component partially installed - main file exists');
       }
+      
       throw error;
     }
   }
@@ -420,20 +462,31 @@ class ComponentRegistry {
     const visualComponents = this.getAvailableComponents('Visual');
     const serviceComponents = this.getAvailableComponents('Service');
 
+    // ✅ SIMPLIFICADO: Solo mostrar nombres sin descripciones
     Print.info('🎨 Visual Components (UI):');
-    Object.entries(visualComponents).forEach(([name, info]) => {
-      console.log(`  • ${name}: ${info.description}`);
+    Object.keys(visualComponents).forEach(name => {
+      const files = visualComponents[name].files;
+      const fileIcons = files.map(file => {
+        if (file.endsWith('.js')) return '📜';
+        if (file.endsWith('.html')) return '🌐';
+        if (file.endsWith('.css')) return '🎨';
+        return '📄';
+      }).join(' ');
+      console.log(`  • ${name} ${fileIcons}`);
     });
 
     Print.info('\n⚙️  Service Components (Logic):');
-    Object.entries(serviceComponents).forEach(([name, info]) => {
-      console.log(`  • ${name}: ${info.description}`);
+    Object.keys(serviceComponents).forEach(name => {
+      console.log(`  • ${name} 📜`);
     });
 
+    Print.newLine();
+    Print.info(`Total: ${Object.keys(visualComponents).length} Visual + ${Object.keys(serviceComponents).length} Service components`);
+
     console.log(`\n💡 Ejemplos de uso:`);
-    console.log(`npm run slice:get Button Card Input`);
-    console.log(`npm run slice:get FetchManager --service`);
-    console.log(`npm run slice:sync              # Actualizar componentes existentes`);
+    console.log(`slice get Button Card Input          # Obtener componentes Visual`);
+    console.log(`slice get FetchManager --service     # Obtener componente Service`);
+    console.log(`slice sync                           # Sincronizar componentes Visual`);
   }
 
   async interactiveInstall() {
@@ -450,8 +503,8 @@ class ComponentRegistry {
     ]);
 
     const availableComponents = this.getAvailableComponents(componentType);
-    const componentChoices = Object.entries(availableComponents).map(([name, info]) => ({
-      name: `${name} - ${info.description}`,
+    const componentChoices = Object.keys(availableComponents).map(name => ({
+      name: name,
       value: name
     }));
 
@@ -554,7 +607,7 @@ async function getComponents(componentNames = [], options = {}) {
     
     if (!componentInfo) {
       Print.error(`Component '${componentNames[0]}' not found in official repository`);
-      Print.commandExample('View available components', 'npm run slice:browse');
+      Print.commandExample('View available components', 'slice browse');
       return false;
     }
 
@@ -614,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.10",
+  "version": "2.2.0",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "scripts": {