slicejs-cli 2.7.4 → 2.7.6

package/commands/utils/bundling/DependencyAnalyzer.js

@@ -0,0 +1,340 @@
+// cli/utils/bundling/DependencyAnalyzer.js
+import fs from 'fs-extra';
+import path from 'path';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import { getSrcPath, getComponentsJsPath, getProjectRoot } from '../PathHelper.js';
+
+export default class DependencyAnalyzer {
+  constructor(moduleUrl) {
+    this.moduleUrl = moduleUrl;
+    this.projectRoot = getProjectRoot(moduleUrl);
+    this.componentsPath = path.dirname(getComponentsJsPath(moduleUrl));
+    this.routesPath = getSrcPath(moduleUrl, 'routes.js');
+
+    // Analysis storage
+    this.components = new Map();
+    this.routes = new Map();
+    this.dependencyGraph = new Map();
+  }
+
+  /**
+   * Executes complete project analysis
+   */
+  async analyze() {
+    console.log('🔍 Analyzing project...');
+
+    // 1. Load component configuration
+    await this.loadComponentsConfig();
+
+    // 2. Analyze component files
+    await this.analyzeComponents();
+
+    // 3. Load and analyze routes
+    await this.analyzeRoutes();
+
+    // 4. Build dependency graph
+    this.buildDependencyGraph();
+
+    // 5. Calculate metrics
+    const metrics = this.calculateMetrics();
+
+    console.log('✅ Analysis completed');
+
+    return {
+      components: Array.from(this.components.values()),
+      routes: Array.from(this.routes.values()),
+      dependencyGraph: this.dependencyGraph,
+      metrics
+    };
+  }
+
+  /**
+   * Loads component configuration from components.js
+   */
+  async loadComponentsConfig() {
+    const componentsConfigPath = path.join(this.componentsPath, 'components.js');
+
+    if (!await fs.pathExists(componentsConfigPath)) {
+      throw new Error('components.js not found');
+    }
+
+    // Read and parse components.js
+    const content = await fs.readFile(componentsConfigPath, 'utf-8');
+
+    // Extract configuration using simple regex
+    const configMatch = content.match(/export default\s*({[\s\S]*})/);
+    if (!configMatch) {
+      throw new Error('Could not parse components.js');
+    }
+
+    // Evaluate safely (in production use a more robust parser)
+    const config = eval(`(${configMatch[1]})`);
+
+    // Save category metadata
+    for (const [category, info] of Object.entries(config)) {
+      const categoryPath = path.join(this.componentsPath, info.path.replace('../', ''));
+
+      if (await fs.pathExists(categoryPath)) {
+        const files = await fs.readdir(categoryPath);
+
+        for (const file of files) {
+          const componentPath = path.join(categoryPath, file);
+          const stat = await fs.stat(componentPath);
+
+          if (stat.isDirectory()) {
+            this.components.set(file, {
+              name: file,
+              category,
+              categoryType: info.type,
+              path: componentPath,
+              dependencies: new Set(),
+              usedBy: new Set(),
+              routes: new Set(),
+              size: 0
+            });
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Analyzes each component's files
+   */
+  async analyzeComponents() {
+    for (const [name, component] of this.components) {
+      const jsFile = path.join(component.path, `${name}.js`);
+
+      if (!await fs.pathExists(jsFile)) continue;
+
+      // Read JavaScript file
+      const content = await fs.readFile(jsFile, 'utf-8');
+
+      // Calculate size
+      component.size = await this.calculateComponentSize(component.path);
+
+      // Parse and extract dependencies
+      component.dependencies = await this.extractDependencies(content);
+    }
+  }
+
+  /**
+   * Extracts dependencies from a component file
+   */
+  async extractDependencies(code) {
+    const dependencies = new Set();
+
+    try {
+      const ast = parse(code, {
+        sourceType: 'module',
+        plugins: ['jsx']
+      });
+
+      traverse.default(ast, {
+        // Detect slice.build() calls
+        CallExpression(path) {
+          const { callee, arguments: args } = path.node;
+
+          // slice.build('ComponentName', ...)
+          if (
+            callee.type === 'MemberExpression' &&
+            callee.object.name === 'slice' &&
+            callee.property.name === 'build' &&
+            args[0]?.type === 'StringLiteral'
+          ) {
+            dependencies.add(args[0].value);
+          }
+        },
+
+        // Detect direct imports (less common but possible)
+        ImportDeclaration(path) {
+          const importPath = path.node.source.value;
+          if (importPath.includes('/Components/')) {
+            const componentName = importPath.split('/').pop();
+            dependencies.add(componentName);
+          }
+        }
+      });
+    } catch (error) {
+      console.warn(`⚠️  Error parsing component: ${error.message}`);
+    }
+
+    return dependencies;
+  }
+
+  /**
+   * Analyzes the routes file
+   */
+  async analyzeRoutes() {
+    if (!await fs.pathExists(this.routesPath)) {
+      throw new Error('routes.js no encontrado');
+    }
+
+    const content = await fs.readFile(this.routesPath, 'utf-8');
+    
+    try {
+      const ast = parse(content, {
+        sourceType: 'module',
+        plugins: ['jsx']
+      });
+
+      let currentRoute = null;
+      const self = this; // Guardar referencia a la instancia
+
+      traverse.default(ast, {
+        ObjectExpression(path) {
+          // Buscar objetos de ruta: { path: '/', component: 'HomePage' }
+          const properties = path.node.properties;
+          const pathProp = properties.find(p => p.key?.name === 'path');
+          const componentProp = properties.find(p => p.key?.name === 'component');
+
+          if (pathProp && componentProp) {
+            const routePath = pathProp.value.value;
+            const componentName = componentProp.value.value;
+
+            currentRoute = {
+              path: routePath,
+              component: componentName,
+              dependencies: new Set([componentName])
+            };
+
+            self.routes.set(routePath, currentRoute);
+
+            // Marcar el componente como usado por esta ruta
+            if (self.components.has(componentName)) {
+              self.components.get(componentName).routes.add(routePath);
+            }
+          }
+        }
+      });
+    } catch (error) {
+      console.warn(`⚠️  Error parseando rutas: ${error.message}`);
+    }
+  }
+
+  /**
+   * Builds the complete dependency graph
+   */
+  buildDependencyGraph() {
+    // Propagate transitive dependencies
+    for (const [name, component] of this.components) {
+      this.dependencyGraph.set(name, this.getAllDependencies(name, new Set()));
+    }
+
+    // Calculate usedBy (inverse dependencies)
+    for (const [name, deps] of this.dependencyGraph) {
+      for (const dep of deps) {
+        if (this.components.has(dep)) {
+          this.components.get(dep).usedBy.add(name);
+        }
+      }
+    }
+  }
+
+  /**
+   * Gets all dependencies of a component (recursive)
+   */
+  getAllDependencies(componentName, visited = new Set()) {
+    if (visited.has(componentName)) return new Set();
+    visited.add(componentName);
+
+    const component = this.components.get(componentName);
+    if (!component) return new Set();
+
+    const allDeps = new Set(component.dependencies);
+
+    for (const dep of component.dependencies) {
+      const transitiveDeps = this.getAllDependencies(dep, visited);
+      for (const transDep of transitiveDeps) {
+        allDeps.add(transDep);
+      }
+    }
+
+    return allDeps;
+  }
+
+  /**
+   * Calculates the total size of a component (JS + HTML + CSS)
+   */
+  async calculateComponentSize(componentPath) {
+    let totalSize = 0;
+    const files = await fs.readdir(componentPath);
+
+    for (const file of files) {
+      const filePath = path.join(componentPath, file);
+      const stat = await fs.stat(filePath);
+
+      if (stat.isFile()) {
+        totalSize += stat.size;
+      }
+    }
+
+    return totalSize;
+  }
+
+  /**
+   * Calculates project metrics
+   */
+  calculateMetrics() {
+    const totalComponents = this.components.size;
+    const totalRoutes = this.routes.size;
+
+    // Shared components (used in multiple routes)
+    const sharedComponents = Array.from(this.components.values())
+      .filter(c => c.routes.size >= 2);
+
+    // Total size
+    const totalSize = Array.from(this.components.values())
+      .reduce((sum, c) => sum + c.size, 0);
+
+    // Components by category
+    const byCategory = {};
+    for (const comp of this.components.values()) {
+      byCategory[comp.category] = (byCategory[comp.category] || 0) + 1;
+    }
+
+    // Top components by usage
+    const topByUsage = Array.from(this.components.values())
+      .sort((a, b) => b.routes.size - a.routes.size)
+      .slice(0, 10)
+      .map(c => ({
+        name: c.name,
+        routes: c.routes.size,
+        size: c.size
+      }));
+
+    return {
+      totalComponents,
+      totalRoutes,
+      sharedComponentsCount: sharedComponents.length,
+      sharedPercentage: (sharedComponents.length / totalComponents * 100).toFixed(1),
+      totalSize,
+      averageSize: Math.round(totalSize / totalComponents),
+      byCategory,
+      topByUsage
+    };
+  }
+
+  /**
+   * Generates a visual report of the analysis
+   */
+  generateReport(metrics) {
+    console.log('\n📊 PROJECT ANALYSIS\n');
+    console.log(`Total components: ${metrics.totalComponents}`);
+    console.log(`Total routes: ${metrics.totalRoutes}`);
+    console.log(`Shared components: ${metrics.sharedComponentsCount} (${metrics.sharedPercentage}%)`);
+    console.log(`Total size: ${(metrics.totalSize / 1024).toFixed(1)} KB`);
+    console.log(`Average size: ${(metrics.averageSize / 1024).toFixed(1)} KB per component`);
+
+    console.log('\n📦 By category:');
+    for (const [category, count] of Object.entries(metrics.byCategory)) {
+      console.log(`  ${category}: ${count} components`);
+    }
+
+    console.log('\n🔥 Top 10 most used components:');
+    metrics.topByUsage.forEach((comp, i) => {
+      console.log(`  ${i + 1}. ${comp.name} - ${comp.routes} routes - ${(comp.size / 1024).toFixed(1)} KB`);
+    });
+  }
+}

package/commands/utils/updateManager.js

@@ -95,7 +95,7 @@ class UpdateManager {
         }
 
         console.log('');
-        Print.warning('📦 Actualizaciones Disponibles:');
+        Print.warning('📦 Available Updates:');
         console.log('');
 
         updateInfo.updates.forEach(pkg => {
@@ -145,17 +145,17 @@ class UpdateManager {
         const answers = await inquirer.prompt([
             {
                 type: 'checkbox',
-                name: 'packages',
-                message: '¿Qué paquetes deseas actualizar?',
-                choices,
-                validate: (answer) => {
-                    if (answer.length === 0) {
-                        return 'Debes seleccionar al menos un paquete';
-                    }
-                    return true;
-                }
-            }
-        ]);
+                name: 'packages',
+                message: 'Which packages do you want to update?',
+                choices,
+                validate: (answer) => {
+                    if (answer.length === 0) {
+                        return 'You must select at least one package';
+                    }
+                    return true;
+                }
+            }
+        ]);
 
         return answers.packages;
     }
@@ -229,25 +229,25 @@ class UpdateManager {
         const results = [];
 
         for (const packageName of packages) {
-            const spinner = ora(`Actualizando ${packageName}...`).start();
+            const spinner = ora(`Updating ${packageName}...`).start();
 
             try {
                 const result = await this.updatePackage(packageName);
 
-                if (result.success) {
-                    spinner.succeed(`${packageName} actualizado exitosamente`);
-                    results.push({ packageName, success: true });
-                } else {
-                    spinner.fail(`Error actualizando ${packageName}`);
-                    Print.error(`Detalles: ${result.error}`);
-                    results.push({ packageName, success: false, error: result.error });
-                }
-            } catch (error) {
-                spinner.fail(`Error actualizando ${packageName}`);
-                Print.error(`Detalles: ${error.message}`);
-                results.push({ packageName, success: false, error: error.message });
-            }
-        }
+                if (result.success) {
+                    spinner.succeed(`${packageName} updated successfully`);
+                    results.push({ packageName, success: true });
+                } else {
+                    spinner.fail(`Error updating ${packageName}`);
+                    Print.error(`Details: ${result.error}`);
+                    results.push({ packageName, success: false, error: result.error });
+                }
+            } catch (error) {
+                spinner.fail(`Error updating ${packageName}`);
+                Print.error(`Details: ${error.message}`);
+                results.push({ packageName, success: false, error: error.message });
+            }
+        }
 
         return results;
     }
@@ -256,26 +256,26 @@ class UpdateManager {
      * Main method to check and prompt for updates
      */
     async checkAndPromptUpdates(options = {}) {
-        const spinner = ora('Verificando actualizaciones...').start();
+        const spinner = ora('Checking for updates...').start();
 
         try {
             const updateInfo = await this.checkForUpdates();
             spinner.stop();
 
-            if (!updateInfo) {
-                Print.error('No se pudo verificar actualizaciones. Verifica tu conexión a internet.');
-                return false;
-            }
+            if (!updateInfo) {
+                Print.error('Could not check for updates. Verify your internet connection.');
+                return false;
+            }
 
-            if (updateInfo.allCurrent) {
-                Print.success('✅ Todos los componentes están actualizados!');
-                return true;
-            }
+            if (updateInfo.allCurrent) {
+                Print.success('✅ All components are up to date!');
+                return true;
+            }
 
-            if (!updateInfo.hasUpdates) {
-                Print.success('✅ Todos los componentes están actualizados!');
-                return true;
-            }
+            if (!updateInfo.hasUpdates) {
+                Print.success('✅ All components are up to date!');
+                return true;
+            }
 
             // Display available updates
             this.displayUpdates(updateInfo);
@@ -283,20 +283,20 @@ class UpdateManager {
         // Get packages to update
         const packagesToUpdate = await this.promptForUpdates(updateInfo, options);
 
-            if (!packagesToUpdate || packagesToUpdate.length === 0) {
-                Print.info('No se seleccionaron paquetes para actualizar.');
-                return false;
-            }
+            if (!packagesToUpdate || packagesToUpdate.length === 0) {
+                Print.info('No packages selected for update.');
+                return false;
+            }
 
         // Show plan and confirm installation if not auto-confirmed
         let plan = await this.buildUpdatePlan(packagesToUpdate);
         console.log('');
-        Print.info('🧭 Plan de actualización:');
-        plan.forEach(item => {
-            const where = item.target === 'global' ? 'GLOBAL' : 'PROYECTO';
-            console.log(`   • ${item.package} → ${where}`);
-            console.log(`     ${item.command}`);
-        });
+        Print.info('🧭 Update plan:');
+        plan.forEach(item => {
+            const where = item.target === 'global' ? 'GLOBAL' : 'PROJECT';
+            console.log(`   • ${item.package} → ${where}`);
+            console.log(`     ${item.command}`);
+        });
         console.log('');
 
         const cliInfo = await this.detectCliInstall();
@@ -306,47 +306,47 @@ class UpdateManager {
                     {
                         type: 'confirm',
                         name: 'addCli',
-                        message: 'Se detectó CLI global. ¿Agregar la actualización global del CLI al plan?',
-                        default: true
-                    }
-                ]);
+                    message: 'Global CLI detected. Add the global CLI update to the plan?',
+                    default: true
+                }
+            ]);
                 if (addCli) {
                     packagesToUpdate.push('slicejs-cli');
                     plan = await this.buildUpdatePlan(packagesToUpdate);
                     console.log('');
-                    Print.info('🧭 Plan actualizado:');
-                    plan.forEach(item => {
-                        const where = item.target === 'global' ? 'GLOBAL' : 'PROYECTO';
-                        console.log(`   • ${item.package} → ${where}`);
-                        console.log(`     ${item.command}`);
-                    });
+                    Print.info('🧭 Updated plan:');
+                    plan.forEach(item => {
+                        const where = item.target === 'global' ? 'GLOBAL' : 'PROJECT';
+                        console.log(`   • ${item.package} → ${where}`);
+                        console.log(`     ${item.command}`);
+                    });
                     console.log('');
                 }
             } else {
-                Print.warning('CLI global detectado. Se recomienda actualizar slicejs-cli global para mantener alineado con el framework.');
-                console.log('   Sugerencia: npm install -g slicejs-cli@latest');
-                console.log('');
-            }
-        }
+                Print.warning('Global CLI detected. It is recommended to update slicejs-cli globally to keep aligned with the framework.');
+                console.log('   Suggestion: npm install -g slicejs-cli@latest');
+                console.log('');
+            }
+        }
 
         if (!options.yes && !options.cli && !options.framework) {
             const { confirm } = await inquirer.prompt([
-                {
-                    type: 'confirm',
-                    name: 'confirm',
-                    message: '¿Deseas continuar con la actualización según el plan mostrado?',
-                    default: true
-                }
-            ]);
+                {
+                    type: 'confirm',
+                    name: 'confirm',
+                    message: 'Do you want to proceed with the update according to the plan shown?',
+                    default: true
+                }
+            ]);
 
                 if (!confirm) {
-                    Print.info('Actualización cancelada.');
-                    return false;
-                }
-            }
+                    Print.info('Update cancelled.');
+                    return false;
+                }
+            }
 
             console.log(''); // Line break
-            Print.info('📥 Instalando actualizaciones...');
+            Print.info('📥 Installing updates...');
             console.log('');
 
             // Install updates
@@ -357,24 +357,24 @@ class UpdateManager {
             const successCount = results.filter(r => r.success).length;
             const failCount = results.filter(r => !r.success).length;
 
-            if (failCount === 0) {
-                Print.success(`✅ ${successCount} paquete(s) actualizado(s) exitosamente!`);
-            } else {
-                Print.warning(`⚠️  ${successCount} exitoso(s), ${failCount} fallido(s)`);
-            }
+            if (failCount === 0) {
+                Print.success(`✅ ${successCount} package(s) updated successfully!`);
+            } else {
+                Print.warning(`⚠️  ${successCount} successful, ${failCount} failed`);
+            }
 
             if (successCount > 0) {
                 console.log('');
-                Print.info('💡 Se recomienda reiniciar el servidor de desarrollo si está ejecutándose.');
-            }
+                Print.info('💡 It is recommended to restart the development server if it is running.');
+            }
 
             return failCount === 0;
 
         } catch (error) {
             spinner.stop();
-            Print.error(`Error durante la actualización: ${error.message}`);
-            return false;
-        }
+            Print.error(`Error during update: ${error.message}`);
+            return false;
+        }
     }
 }
 

package/package.json

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