slicejs-cli 2.7.4 → 2.7.6

package/client.js

@@ -18,6 +18,7 @@ import { exec } from "child_process";
 import { promisify } from "util";
 import validations from "./commands/Validations.js";
 import Print from "./commands/Print.js";
+import bundle, { cleanBundles, bundleInfo } from './commands/bundle/bundle.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -137,12 +138,21 @@ sliceClient
   .description("Start development server")
   .option("-p, --port <port>", "Port for development server", 3000)
   .option("-w, --watch", "Enable watch mode for file changes")
+  .option("-b, --bundled", "Generate bundles before starting server")
   .action(async (options) => {
     await runWithVersionCheck(async () => {
+      // Si se solicita bundles, generarlos primero
+      if (options.bundled) {
+        Print.info("Generating bundles before starting server...");
+        await bundle({ verbose: false });
+        Print.newLine();
+      }
+
       await startServer({
-        mode: 'development',
+        mode: options.bundled ? 'bundled' : 'development',
         port: parseInt(options.port),
-        watch: options.watch
+        watch: options.watch,
+        bundled: options.bundled
       });
     });
   });
@@ -153,12 +163,21 @@ sliceClient
   .description("Start development server (alias for dev)")
   .option("-p, --port <port>", "Port for server", 3000)
   .option("-w, --watch", "Enable watch mode for file changes")
+  .option("-b, --bundled", "Generate bundles before starting server")
   .action(async (options) => {
     await runWithVersionCheck(async () => {
+      // Si se solicita bundles, generarlos primero
+      if (options.bundled) {
+        Print.info("Generating bundles before starting server...");
+        await bundle({ verbose: false });
+        Print.newLine();
+      }
+
       await startServer({
-        mode: 'development',
+        mode: options.bundled ? 'bundled' : 'development',
         port: parseInt(options.port),
-        watch: options.watch
+        watch: options.watch,
+        bundled: options.bundled
       });
     });
   });
@@ -434,13 +453,35 @@ sliceClient
     subcommandTerm: (cmd) => cmd.name() + ' ' + cmd.usage()
   });
 
+  sliceClient
+  .command('bundle')
+  .description('Generate production bundles for optimal loading')
+  .option('-a, --analyze', 'Only analyze without generating bundles')
+  .option('-v, --verbose', 'Show detailed information')
+  .action(bundle);
+
+// Subcomando: limpiar bundles
+sliceClient
+  .command('bundle:clean')
+  .description('Remove all generated bundles')
+  .action(cleanBundles);
+
+// Subcomando: información
+sliceClient
+  .command('bundle:info')
+  .description('Show information about generated bundles')
+  .action(bundleInfo);
+
+
 // Custom help - SIMPLIFICADO para development only
 sliceClient.addHelpText('after', `
 Common Usage Examples:
   slice init                     - Initialize new Slice.js project
   slice dev                      - Start development server
   slice start                    - Start development server (same as dev)
-  slice get Button Card Input    - Install Visual components from registry  
+  slice dev --bundled            - Generate bundles then start server
+  slice start --bundled          - Same as above (bundle -> start)
+  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
@@ -456,9 +497,10 @@ Command Categories:
   • version, update, doctor      - Maintenance commands
 
 Development Workflow:
-  • slice init    - Initialize project
-  • slice dev     - Start development server (serves from /src)
-  • slice start   - Alternative to dev command
+  • slice init          - Initialize project
+  • slice dev           - Start development server (serves from /src)
+  • slice start         - Alternative to dev command
+  • slice dev --bundled - Start with bundles (bundle -> start)
 
 Note: Production builds are disabled. Use development mode for all workflows.
 

package/commands/bundle/bundle.js

@@ -0,0 +1,226 @@
+// cli/commands/bundle/bundle.js
+import path from 'path';
+import fs from 'fs-extra';
+import DependencyAnalyzer from '../utils/bundling/DependencyAnalyzer.js';
+import BundleGenerator from '../utils/bundling/BundleGenerator.js';
+import Print from '..//Print.js';
+
+/**
+ * Main bundling command
+ */
+export default async function bundle(options = {}) {
+  const startTime = Date.now();
+  const projectRoot = process.cwd();
+
+  try {
+    Print.title('📦 Slice.js Bundle Generator');
+    Print.newLine();
+
+    // Validate that it's a Slice.js project
+    await validateProject(projectRoot);
+
+    // Phase 1: Analysis
+    Print.buildProgress('Analyzing project...');
+    const analyzer = new DependencyAnalyzer(import.meta.url);
+    const analysisData = await analyzer.analyze();
+
+    // Show report if in verbose mode
+    if (options.verbose || options.analyze) {
+      Print.newLine();
+      analyzer.generateReport(analysisData.metrics);
+      Print.newLine();
+    }
+
+    // If only analysis is requested, finish here
+    if (options.analyze) {
+      Print.success('Analysis completed');
+      return;
+    }
+
+    // Phase 2: Bundle generation
+    Print.buildProgress('Generating bundles...');
+    const generator = new BundleGenerator(import.meta.url, analysisData);
+    const result = await generator.generate();
+
+    // Phase 3: Save configuration
+    Print.buildProgress('Saving configuration...');
+    await generator.saveBundleConfig(result.config);
+
+    // Phase 4: Summary
+    Print.newLine();
+    printSummary(result, startTime);
+
+    // Show next step
+    Print.newLine();
+    Print.info('💡 Next step:');
+    console.log('   Update your Slice.js to use the generated bundles');
+    console.log('   Bundles will load automatically in production\n');
+
+  } catch (error) {
+    Print.error('Error generating bundles:', error.message);
+    console.error('\n📍 Complete stack trace:');
+    console.error(error.stack);
+
+    if (error.code) {
+      console.error('\n📍 Error code:', error.code);
+    }
+
+    process.exit(1);
+  }
+}
+
+/**
+ * Validates that the project has the correct structure
+ */
+async function validateProject(projectRoot) {
+  const requiredPaths = [
+    'src/Components/components.js',
+    'src/routes.js'
+  ];
+
+  for (const reqPath of requiredPaths) {
+    const fullPath = path.join(projectRoot, reqPath);
+    if (!await fs.pathExists(fullPath)) {
+      throw new Error(`Required file not found: ${reqPath}`);
+    }
+  }
+}
+
+/**
+ * Prints summary of generated bundles
+ */
+function printSummary(result, startTime) {
+  const { bundles, config, files } = result;
+  const duration = ((Date.now() - startTime) / 1000).toFixed(2);
+
+  Print.success(`Bundles generated in ${duration}s\n`);
+
+  // Critical bundle
+  if (bundles.critical.components.length > 0) {
+    Print.info('📦 Critical Bundle:');
+    console.log(`   Components: ${bundles.critical.components.length}`);
+    console.log(`   Size: ${(bundles.critical.size / 1024).toFixed(1)} KB`);
+    console.log(`   File: ${bundles.critical.file}\n`);
+  }
+
+  // Route bundles
+  const routeCount = Object.keys(bundles.routes).length;
+  if (routeCount > 0) {
+    Print.info(`📦 Route Bundles (${routeCount}):`);
+
+    for (const [key, bundle] of Object.entries(bundles.routes)) {
+      console.log(`   ${key}:`);
+      console.log(`     Route: ${bundle.path}`);
+      console.log(`     Components: ${bundle.components.length}`);
+      console.log(`     Size: ${(bundle.size / 1024).toFixed(1)} KB`);
+      console.log(`     File: ${bundle.file}`);
+    }
+    Print.newLine();
+  }
+
+  // Global statistics
+  Print.info('📊 Statistics:');
+  console.log(`   Strategy: ${config.strategy}`);
+  console.log(`   Total components: ${config.stats.totalComponents}`);
+  console.log(`   Shared components: ${config.stats.sharedComponents}`);
+  console.log(`   Generated files: ${files.length}`);
+
+  // Calculate estimated improvement
+  const beforeRequests = config.stats.totalComponents;
+  const afterRequests = files.length;
+  const improvement = Math.round((1 - afterRequests / beforeRequests) * 100);
+
+  console.log(`   Request reduction: ${improvement}% (${beforeRequests} → ${afterRequests})`);
+}
+
+/**
+ * Subcommand: Clean bundles
+ */
+export async function cleanBundles() {
+  const projectRoot = process.cwd();
+  const srcPath = path.join(projectRoot, 'src');
+
+  try {
+    Print.title('🧹 Cleaning bundles...');
+
+    const files = await fs.readdir(srcPath);
+    const bundleFiles = files.filter(f => f.startsWith('slice-bundle.'));
+
+    if (bundleFiles.length === 0) {
+      Print.warning('No bundles found to clean');
+      return;
+    }
+
+    for (const file of bundleFiles) {
+      await fs.remove(path.join(srcPath, file));
+      console.log(`   ✓ Deleted: ${file}`);
+    }
+
+    // Remove config
+    const configPath = path.join(srcPath, 'bundle.config.json');
+    if (await fs.pathExists(configPath)) {
+      await fs.remove(configPath);
+      console.log(`   ✓ Deleted: bundle.config.json`);
+    }
+
+    Print.newLine();
+    Print.success(`${bundleFiles.length} files deleted`);
+
+  } catch (error) {
+    Print.error('Error cleaning bundles:', error.message);
+    process.exit(1);
+  }
+}
+
+/**
+ * Subcommand: Bundle information
+ */
+export async function bundleInfo() {
+  const projectRoot = process.cwd();
+  const configPath = path.join(projectRoot, 'src/bundle.config.json');
+
+  try {
+    if (!await fs.pathExists(configPath)) {
+      Print.warning('Bundle configuration not found');
+      Print.info('Run "slice bundle" to generate bundles');
+      return;
+    }
+
+    const config = await fs.readJson(configPath);
+
+    Print.title('📦 Bundle Information');
+    Print.newLine();
+
+    Print.info('Configuration:');
+    console.log(`   Version: ${config.version}`);
+    console.log(`   Strategy: ${config.strategy}`);
+    console.log(`   Generated: ${new Date(config.generated).toLocaleString()}`);
+    Print.newLine();
+
+    Print.info('Statistics:');
+    console.log(`   Total components: ${config.stats.totalComponents}`);
+    console.log(`   Total routes: ${config.stats.totalRoutes}`);
+    console.log(`   Shared components: ${config.stats.sharedComponents} (${config.stats.sharedPercentage}%)`);
+    console.log(`   Total size: ${(config.stats.totalSize / 1024).toFixed(1)} KB`);
+    Print.newLine();
+
+    Print.info('Bundles:');
+
+    // Critical
+    if (config.bundles.critical) {
+      console.log(`   Critical: ${config.bundles.critical.components.length} components, ${(config.bundles.critical.size / 1024).toFixed(1)} KB`);
+    }
+
+    // Routes
+    const routeCount = Object.keys(config.bundles.routes).length;
+    console.log(`   Routes: ${routeCount} bundles`);
+
+    for (const [key, bundle] of Object.entries(config.bundles.routes)) {
+      console.log(`     ${key}: ${bundle.components.length} components, ${(bundle.size / 1024).toFixed(1)} KB`);
+    }
+
+  } catch (error) {
+    Print.error('Error reading information:', error.message);
+    process.exit(1);
+  }
+}

package/commands/doctor/doctor.js

@@ -9,6 +9,7 @@ import inquirer from 'inquirer';
 import { exec } from 'child_process';
 import { promisify } from 'util';
 import { getProjectRoot, getSrcPath, getApiPath, getConfigPath, getPath } from '../utils/PathHelper.js';
+import updateManager from '../utils/updateManager.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -148,7 +149,8 @@ async function checkPort() {
  * Verifica dependencias en package.json
  */
 async function checkDependencies() {
-    const packagePath = getPath(import.meta.url, '', 'package.json');
+    const projectRoot = getProjectRoot(import.meta.url);
+    const packagePath = path.join(projectRoot, 'package.json');
 
     if (!await fs.pathExists(packagePath)) {
         return {
@@ -160,18 +162,18 @@ async function checkDependencies() {
 
     try {
         const pkg = await fs.readJson(packagePath);
-        const hasCli = pkg.dependencies?.['slicejs-cli'] || pkg.devDependencies?.['slicejs-cli'];
-        const hasFramework = pkg.dependencies?.['slicejs-web-framework'];
+        const hasFrameworkDep = pkg.dependencies?.['slicejs-web-framework'] || pkg.devDependencies?.['slicejs-web-framework'];
+        const frameworkNodePath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'package.json');
+        const hasFrameworkNode = await fs.pathExists(frameworkNodePath);
+        const hasFramework = !!(hasFrameworkDep || hasFrameworkNode);
 
-        if (hasCli && hasFramework) {
+        if (hasFramework) {
             return {
                 pass: true,
-                message: 'All required dependencies are installed'
+                message: 'Required framework dependency is installed'
             };
         } else {
-            const missing = [];
-            if (!hasCli) missing.push('slicejs-cli');
-            if (!hasFramework) missing.push('slicejs-web-framework');
+            const missing = ['slicejs-web-framework'];
 
             return {
                 warn: true,
@@ -334,9 +336,7 @@ export default async function runDiagnostics() {
         if (confirmInstall) {
             for (const pkg of depsResult.missing) {
                 try {
-                    const cmd = pkg === 'slicejs-cli'
-                        ? 'npm install -D slicejs-cli@latest'
-                        : 'npm install slicejs-web-framework@latest';
+                    const cmd = 'npm install slicejs-web-framework@latest';
                     Print.info(`Installing ${pkg}...`);
                     await execAsync(cmd, { cwd: projectRoot });
                     Print.success(`${pkg} installed`);

package/commands/getComponent/getComponent.js

@@ -7,6 +7,7 @@ import inquirer from "inquirer";
 import validations from "../Validations.js";
 import Print from "../Print.js";
 import { getConfigPath, getComponentsJsPath, getPath } from "../utils/PathHelper.js";
+import ora from "ora";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -188,32 +189,51 @@ filterOfficialComponents(allComponents) {
 
     const downloadedFiles = [];
     const failedFiles = [];
-    Print.info(`Downloading ${componentName} from official repository...`);
-
-    for (const fileName of component.files) {
-      const githubUrl = `${DOCS_REPO_BASE_URL}/${category}/${componentName}/${fileName}`;
+    const total = component.files.length;
+    let done = 0;
+    const spinner = ora(`Downloading ${componentName} 0/${total}`).start();
+    const fetchWithRetry = async (url, retries = 3, baseDelay = 500) => {
+      for (let attempt = 0; attempt <= retries; attempt++) {
+        try {
+          const response = await fetch(url);
+          if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+          return await response.text();
+        } catch (e) {
+          if (attempt === retries) throw e;
+          const delay = baseDelay * Math.pow(2, attempt);
+          await new Promise(r => setTimeout(r, delay));
+        }
+      }
+    };
+    const worker = async (fileName) => {
+      const url = `${DOCS_REPO_BASE_URL}/${category}/${componentName}/${fileName}`;
       const localPath = path.join(targetPath, fileName);
-
       try {
-        const response = await fetch(githubUrl);
-        
-        if (!response.ok) {
-          Print.downloadError(fileName, `HTTP ${response.status}: ${response.statusText}`);
-          failedFiles.push(fileName);
-          continue; // ✅ CONTINUAR en lugar de lanzar error
-        }
-
-        const content = await response.text();
+        const content = await fetchWithRetry(url);
         await fs.writeFile(localPath, content, 'utf8');
         downloadedFiles.push(fileName);
-        
         Print.downloadSuccess(fileName);
       } catch (error) {
         Print.downloadError(fileName, error.message);
         failedFiles.push(fileName);
-        continue; // ✅ CONTINUAR en lugar de lanzar error
+      } finally {
+        done += 1;
+        spinner.text = `Downloading ${componentName} ${done}/${total}`;
       }
-    }
+    };
+    const runConcurrent = async (items, concurrency = 3) => {
+      let index = 0;
+      const runners = Array(Math.min(concurrency, items.length)).fill(0).map(async () => {
+        while (true) {
+          const i = index++;
+          if (i >= items.length) break;
+          await worker(items[i]);
+        }
+      });
+      await Promise.all(runners);
+    };
+    await runConcurrent(component.files, 3);
+    spinner.stop();
 
     // ✅ NUEVO: Solo lanzar error si NO se descargó el archivo principal (.js)
     const mainFileDownloaded = downloadedFiles.some(file => file.endsWith('.js'));
@@ -311,7 +331,7 @@ filterOfficialComponents(allComponents) {
      const availableComponents = this.getAvailableComponents(category);
 
   if (!availableComponents[componentName]) {
-    throw new Error(`Componente '${componentName}' no encontrado en la categoría '${category}' del repositorio oficial`);
+    throw new Error(`Component '${componentName}' not found in category '${category}' in the official repository`);
   }
 
   // ✅ MEJORADO: Detectar si validations tiene acceso a la configuración
@@ -347,7 +367,7 @@ filterOfficialComponents(allComponents) {
         {
           type: 'confirm',
           name: 'overwrite',
-          message: `El componente '${componentName}' ya existe localmente. ¿Deseas sobrescribirlo con la versión del repositorio?`,
+          message: `The component '${componentName}' already exists locally. Overwrite with the repository version?`,
           default: false
         }
       ]);
@@ -395,16 +415,34 @@ filterOfficialComponents(allComponents) {
   async installMultipleComponents(componentNames, category = 'Visual', force = false) {
     const results = [];
     Print.info(`Getting ${componentNames.length} ${category} components from official repository...`);
-
-    for (const componentName of componentNames) {
+    const total = componentNames.length;
+    let done = 0;
+    const spinner = ora(`Installing 0/${total}`).start();
+    const worker = async (componentName) => {
       try {
         const result = await this.installComponent(componentName, category, force);
         results.push({ name: componentName, success: result });
       } catch (error) {
         Print.componentError(componentName, 'getting', error.message);
         results.push({ name: componentName, success: false, error: error.message });
+      } finally {
+        done += 1;
+        spinner.text = `Installing ${done}/${total}`;
       }
-    }
+    };
+    const runConcurrent = async (items, concurrency = 3) => {
+      let index = 0;
+      const runners = Array(Math.min(concurrency, items.length)).fill(0).map(async () => {
+        while (true) {
+          const i = index++;
+          if (i >= items.length) break;
+          await worker(items[i]);
+        }
+      });
+      await Promise.all(runners);
+    };
+    await runConcurrent(componentNames, 3);
+    spinner.stop();
 
     // Summary
     const successful = results.filter(r => r.success).length;
@@ -492,11 +530,11 @@ filterOfficialComponents(allComponents) {
 
   displayAvailableComponents() {
     if (!this.componentsRegistry) {
-      Print.error('❌ No se pudo cargar el registro de componentes');
+      Print.error('❌ Could not load component registry');
       return;
     }
 
-    console.log('\n📚 Componentes disponibles en el repositorio oficial de Slice.js:\n');
+    console.log('\n📚 Available components in the official Slice.js repository:\n');
 
     const visualComponents = this.getAvailableComponents('Visual');
     const serviceComponents = this.getAvailableComponents('Service');
@@ -522,10 +560,10 @@ filterOfficialComponents(allComponents) {
     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`);
+    console.log(`\n💡 Usage examples:`);
+    console.log(`slice get Button Card Input          # Install Visual components`);
+    console.log(`slice get FetchManager --service     # Install Service component`);
+    console.log(`slice sync                           # Sync Visual components`);
   }
 
   async interactiveInstall() {
@@ -533,7 +571,7 @@ filterOfficialComponents(allComponents) {
       {
         type: 'list',
         name: 'componentType',
-        message: 'Selecciona el tipo de componente a obtener del repositorio:',
+        message: 'Select the type of component to install from the repository:',
         choices: [
           { name: '🎨 Visual Components (UI)', value: 'Visual' },
           { name: '⚙️  Service Components (Logic)', value: 'Service' }
@@ -552,10 +590,10 @@ filterOfficialComponents(allComponents) {
         {
           type: 'list',
           name: 'installMode',
-          message: '¿Cómo deseas obtener los componentes Visual?',
+          message: 'How do you want to install Visual components?',
           choices: [
-            { name: 'Obtener uno solo', value: 'single' },
-            { name: 'Obtener múltiples', value: 'multiple' }
+            { name: 'Get one', value: 'single' },
+            { name: 'Get multiple', value: 'multiple' }
           ]
         }
       ]);
@@ -565,11 +603,11 @@ filterOfficialComponents(allComponents) {
           {
             type: 'checkbox',
             name: 'selectedComponents',
-            message: 'Selecciona los componentes Visual a obtener del repositorio:',
+            message: 'Select Visual components to install from the repository:',
             choices: componentChoices,
             validate: (input) => {
               if (input.length === 0) {
-                return 'Debes seleccionar al menos un componente';
+                return 'You must select at least one component';
               }
               return true;
             }
@@ -582,7 +620,7 @@ filterOfficialComponents(allComponents) {
           {
             type: 'list',
             name: 'selectedComponent',
-            message: 'Selecciona un componente Visual:',
+            message: 'Select a Visual component:',
             choices: componentChoices
           }
         ]);
@@ -594,7 +632,7 @@ filterOfficialComponents(allComponents) {
         {
           type: 'list',
           name: 'selectedComponent',
-          message: 'Selecciona un componente Service:',
+          message: 'Select a Service component:',
           choices: componentChoices
         }
       ]);