slicejs-cli 2.7.5 → 2.7.7

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/startServer/startServer.js

@@ -86,6 +86,8 @@ function startNodeServer(port, mode) {
     const args = [apiIndexPath];
     if (mode === 'production') {
       args.push('--production');
+    } else if (mode === 'bundled') {
+      args.push('--bundled');
     } else {
       args.push('--development');
     }
@@ -171,7 +173,7 @@ export default async function startServer(options = {}) {
   const config = loadConfig();
   const defaultPort = config?.server?.port || 3000;
 
-  const { mode = 'development', port = defaultPort, watch = false } = options;
+  const { mode = 'development', port = defaultPort, watch = false, bundled = false } = options;
 
   try {
     Print.title(`🚀 Starting Slice.js ${mode} server...`);
@@ -190,7 +192,7 @@ export default async function startServer(options = {}) {
       throw new Error(
         `Port ${port} is already in use. Please:\n` +
         `  1. Stop the process using port ${port}, or\n` +
-        `  2. Use a different port: slice ${mode === 'development' ? 'dev' : 'start'} -p <port>`
+        `  2. Use a different port: slice ${mode === 'development' ? 'dev' : mode === 'bundled' ? 'start --bundled' : 'start'} -p <port>`
       );
     }
 
@@ -203,6 +205,8 @@ export default async function startServer(options = {}) {
         throw new Error('No production build found. Run "slice build" first.');
       }
       Print.info('Production mode: serving optimized files from /dist');
+    } else if (mode === 'bundled') {
+      Print.info('Bundled mode: serving with generated bundles for optimized loading');
     } else {
       Print.info('Development mode: serving files from /src with hot reload');
     }

package/commands/utils/bundling/BundleGenerator.js

@@ -0,0 +1,389 @@
+// cli/utils/bundling/BundleGenerator.js
+import fs from 'fs-extra';
+import path from 'path';
+import crypto from 'crypto';
+import { getSrcPath, getComponentsJsPath } from '../PathHelper.js';
+
+export default class BundleGenerator {
+  constructor(moduleUrl, analysisData) {
+    this.moduleUrl = moduleUrl;
+    this.analysisData = analysisData;
+    this.srcPath = getSrcPath(moduleUrl);
+    this.componentsPath = path.dirname(getComponentsJsPath(moduleUrl));
+
+    // Configuration
+    this.config = {
+      maxCriticalSize: 50 * 1024, // 50KB
+      maxCriticalComponents: 15,
+      minSharedUsage: 3, // Minimum routes to be considered "shared"
+      strategy: 'hybrid' // 'global', 'hybrid', 'per-route'
+    };
+
+    this.bundles = {
+      critical: {
+        components: [],
+        size: 0,
+        file: 'slice-bundle.critical.js'
+      },
+      routes: {}
+    };
+  }
+
+  /**
+   * Generates all bundles
+   */
+  async generate() {
+    console.log('🔨 Generating bundles...');
+
+    // 1. Determine optimal strategy
+    this.determineStrategy();
+
+    // 2. Identify critical components
+    this.identifyCriticalComponents();
+
+    // 3. Assign components to routes
+    this.assignRouteComponents();
+
+    // 4. Generate bundle files
+    const files = await this.generateBundleFiles();
+
+    // 5. Generate configuration
+    const config = this.generateBundleConfig();
+
+    console.log('✅ Bundles generated successfully');
+
+    return {
+      bundles: this.bundles,
+      config,
+      files
+    };
+  }
+
+  /**
+   * Determines the optimal bundling strategy
+   */
+  determineStrategy() {
+    const { metrics } = this.analysisData;
+    const { totalComponents, sharedPercentage } = metrics;
+
+    // Strategy based on size and usage pattern
+    if (totalComponents < 20 || sharedPercentage > 60) {
+      this.config.strategy = 'global';
+      console.log('📦 Strategy: Global Bundle (small project or highly shared)');
+    } else if (totalComponents < 60) {
+      this.config.strategy = 'hybrid';
+      console.log('📦 Strategy: Hybrid (critical + per route)');
+    } else {
+      this.config.strategy = 'per-route';
+      console.log('📦 Strategy: Per Route (large project)');
+    }
+  }
+
+  /**
+   * Identifies critical components for the initial bundle
+   */
+  identifyCriticalComponents() {
+    const { components } = this.analysisData;
+
+    // Filter critical candidates
+    const candidates = components
+      .filter(comp => {
+        // Shared components (used in 3+ routes)
+        const isShared = comp.routes.size >= this.config.minSharedUsage;
+
+        // Structural components (Navbar, Footer, etc.)
+        const isStructural = comp.categoryType === 'Structural' ||
+                            ['Navbar', 'Footer', 'Layout'].includes(comp.name);
+
+        // Small and highly used components
+        const isSmallAndUseful = comp.size < 5000 && comp.routes.size >= 2;
+
+        return isShared || isStructural || isSmallAndUseful;
+      })
+      .sort((a, b) => {
+        // Prioritize by: (usage * 10) - size
+        const priorityA = (a.routes.size * 10) - (a.size / 1000);
+        const priorityB = (b.routes.size * 10) - (b.size / 1000);
+        return priorityB - priorityA;
+      });
+
+    // Fill critical bundle up to limit
+    for (const comp of candidates) {
+      const wouldExceedSize = this.bundles.critical.size + comp.size > this.config.maxCriticalSize;
+      const wouldExceedCount = this.bundles.critical.components.length >= this.config.maxCriticalComponents;
+
+      if (wouldExceedSize || wouldExceedCount) break;
+
+      this.bundles.critical.components.push(comp);
+      this.bundles.critical.size += comp.size;
+    }
+
+    console.log(`✓ Critical bundle: ${this.bundles.critical.components.length} components, ${(this.bundles.critical.size / 1024).toFixed(1)} KB`);
+  }
+
+  /**
+   * Assigns remaining components to route bundles
+   */
+  assignRouteComponents() {
+    const criticalNames = new Set(this.bundles.critical.components.map(c => c.name));
+
+    for (const [routePath, route] of this.analysisData.routes) {
+      // Get all route dependencies
+      const routeComponents = this.getRouteComponents(route.component);
+
+      // Filter those already in critical
+      const uniqueComponents = routeComponents.filter(comp =>
+        !criticalNames.has(comp.name)
+      );
+
+      if (uniqueComponents.length === 0) continue;
+
+      const routeKey = this.routeToFileName(routePath);
+      const totalSize = uniqueComponents.reduce((sum, c) => sum + c.size, 0);
+
+      this.bundles.routes[routeKey] = {
+        path: routePath,
+        components: uniqueComponents,
+        size: totalSize,
+        file: `slice-bundle.${routeKey}.js`
+      };
+
+      console.log(`✓ Bundle ${routeKey}: ${uniqueComponents.length} components, ${(totalSize / 1024).toFixed(1)} KB`);
+    }
+  }
+
+  /**
+   * Gets all components needed for a route
+   */
+  getRouteComponents(componentName) {
+    const result = [];
+    const visited = new Set();
+
+    const traverse = (name) => {
+      if (visited.has(name)) return;
+      visited.add(name);
+
+      const component = this.analysisData.components.find(c => c.name === name);
+      if (!component) return;
+
+      result.push(component);
+
+      // Add dependencies recursively
+      for (const dep of component.dependencies) {
+        traverse(dep);
+      }
+    };
+
+    traverse(componentName);
+    return result;
+  }
+
+  /**
+   * Generates the physical bundle files
+   */
+  async generateBundleFiles() {
+    const files = [];
+
+    // 1. Critical bundle
+    if (this.bundles.critical.components.length > 0) {
+      const criticalFile = await this.createBundleFile(
+        this.bundles.critical.components,
+        'critical',
+        null
+      );
+      files.push(criticalFile);
+    }
+
+    // 2. Route bundles
+    for (const [routeKey, bundle] of Object.entries(this.bundles.routes)) {
+      const routeFile = await this.createBundleFile(
+        bundle.components,
+        'route',
+        bundle.path
+      );
+      files.push(routeFile);
+    }
+
+    return files;
+  }
+
+  /**
+   * Creates a bundle file
+   */
+  async createBundleFile(components, type, routePath) {
+    const routeKey = routePath ? this.routeToFileName(routePath) : 'critical';
+    const fileName = `slice-bundle.${routeKey}.js`;
+    const filePath = path.join(this.srcPath, fileName);
+
+    const bundleContent = await this.generateBundleContent(
+      components,
+      type,
+      routePath
+    );
+
+    await fs.writeFile(filePath, bundleContent, 'utf-8');
+
+    const hash = crypto.createHash('md5').update(bundleContent).digest('hex').substring(0, 12);
+
+    return {
+      name: routeKey,
+      file: fileName,
+      path: filePath,
+      size: Buffer.byteLength(bundleContent, 'utf-8'),
+      hash,
+      componentCount: components.length
+    };
+  }
+
+  /**
+   * Generates the content of a bundle
+   */
+  async generateBundleContent(components, type, routePath) {
+    const componentsData = {};
+
+    for (const comp of components) {
+      const jsContent = await fs.readFile(
+        path.join(comp.path, `${comp.name}.js`),
+        'utf-8'
+      );
+
+      let htmlContent = null;
+      let cssContent = null;
+
+      const htmlPath = path.join(comp.path, `${comp.name}.html`);
+      const cssPath = path.join(comp.path, `${comp.name}.css`);
+
+      if (await fs.pathExists(htmlPath)) {
+        htmlContent = await fs.readFile(htmlPath, 'utf-8');
+      }
+
+      if (await fs.pathExists(cssPath)) {
+        cssContent = await fs.readFile(cssPath, 'utf-8');
+      }
+
+      componentsData[comp.name] = {
+        name: comp.name,
+        category: comp.category,
+        categoryType: comp.categoryType,
+        js: this.cleanJavaScript(jsContent),
+        html: htmlContent,
+        css: cssContent,
+        size: comp.size,
+        dependencies: Array.from(comp.dependencies)
+      };
+    }
+
+    const metadata = {
+      version: '2.0.0',
+      type,
+      route: routePath,
+      generated: new Date().toISOString(),
+      totalSize: components.reduce((sum, c) => sum + c.size, 0),
+      componentCount: components.length,
+      strategy: this.config.strategy
+    };
+
+    return this.formatBundleFile(componentsData, metadata);
+  }
+
+  /**
+   * Cleans JavaScript code by removing imports/exports
+   */
+  cleanJavaScript(code) {
+    // Remove export default
+    code = code.replace(/export\s+default\s+/g, '');
+
+    // Remove imports (components will already be available)
+    code = code.replace(/import\s+.*?from\s+['"].*?['"];?\s*/g, '');
+
+    return code;
+  }
+
+  /**
+   * Formats the bundle file
+   */
+  formatBundleFile(componentsData, metadata) {
+    return `/**
+ * Slice.js Bundle
+ * Type: ${metadata.type}
+ * Generated: ${metadata.generated}
+ * Strategy: ${metadata.strategy}
+ * Components: ${metadata.componentCount}
+ * Total Size: ${(metadata.totalSize / 1024).toFixed(1)} KB
+ */
+
+export const SLICE_BUNDLE = {
+  metadata: ${JSON.stringify(metadata, null, 2)},
+
+  components: ${JSON.stringify(componentsData, null, 2)}
+};
+
+// Auto-registration of components
+if (window.slice && window.slice.controller) {
+  slice.controller.registerBundle(SLICE_BUNDLE);
+}
+`;
+  }
+
+  /**
+   * Generates the bundle configuration
+   */
+  generateBundleConfig() {
+    const config = {
+      version: '2.0.0',
+      strategy: this.config.strategy,
+      generated: new Date().toISOString(),
+
+      stats: {
+        totalComponents: this.analysisData.metrics.totalComponents,
+        totalRoutes: this.analysisData.metrics.totalRoutes,
+        sharedComponents: this.bundles.critical.components.length,
+        sharedPercentage: this.analysisData.metrics.sharedPercentage,
+        totalSize: this.analysisData.metrics.totalSize,
+        criticalSize: this.bundles.critical.size
+      },
+
+      bundles: {
+        critical: {
+          file: this.bundles.critical.file,
+          size: this.bundles.critical.size,
+          components: this.bundles.critical.components.map(c => c.name)
+        },
+        routes: {}
+      }
+    };
+
+    for (const [key, bundle] of Object.entries(this.bundles.routes)) {
+      config.bundles.routes[key] = {
+        path: bundle.path,
+        file: bundle.file,
+        size: bundle.size,
+        components: bundle.components.map(c => c.name),
+        dependencies: ['critical']
+      };
+    }
+
+    return config;
+  }
+
+  /**
+   * Converts a route to filename
+   */
+  routeToFileName(routePath) {
+    if (routePath === '/') return 'home';
+    return routePath
+      .replace(/^\//, '')
+      .replace(/\//g, '-')
+      .replace(/[^a-zA-Z0-9-]/g, '')
+      .toLowerCase();
+  }
+
+  /**
+   * Saves the configuration to file
+   */
+  async saveBundleConfig(config) {
+    const configPath = path.join(this.srcPath, 'bundle.config.json');
+    await fs.writeJson(configPath, config, { spaces: 2 });
+    console.log(`✓ Configuration saved to ${configPath}`);
+  }
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.7.5",
+  "version": "2.7.7",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "bin": {
@@ -39,5 +39,9 @@
     "ora": "^8.2.0",
     "slicejs-web-framework": "latest",
     "terser": "^5.43.1"
+  },
+  "devDependencies": {
+    "@babel/parser": "^7.28.5",
+    "@babel/traverse": "^7.28.5"
   }
 }

package/refactor.md

@@ -0,0 +1,271 @@
+# Plan de Refactorización del CLI para MCP
+
+## Objetivo
+Separar la lógica de negocio de la presentación CLI para permitir importación directa desde el MCP server, manteniendo **100% de compatibilidad** con el CLI actual.
+
+---
+
+## Estructura Propuesta
+
+```
+commands/
+├── createComponent/
+│   ├── createComponent.js        # CLI wrapper (presentación)
+│   ├── core.js                   # ⭐ NUEVO - Lógica pura exportable
+│   └── VisualComponentTemplate.js
+│
+├── listComponents/
+│   ├── listComponents.js         # CLI wrapper (presentación)
+│   └── core.js                   # ⭐ NUEVO - Lógica pura exportable
+│
+├── deleteComponent/
+│   ├── deleteComponent.js        # CLI wrapper (presentación)
+│   └── core.js                   # ⭐ NUEVO - Lógica pura exportable
+│
+├── getComponent/
+│   ├── getComponent.js           # CLI wrapper (presentación)
+│   └── core.js                   # ⭐ NUEVO - Lógica pura exportable
+│
+└── init/
+    ├── init.js                   # CLI wrapper (presentación)
+    └── core.js                   # ⭐ NUEVO - Lógica pura exportable
+```
+
+---
+
+## Principios de Refactorización
+
+### 1. Separación de Responsabilidades
+- **core.js**: Lógica pura sin dependencias de CLI (Print, chalk, Table, inquirer)
+- **[comando].js**: Solo presentación CLI, usa funciones del core
+
+### 2. Funciones Puras en Core
+- Reciben parámetros explícitos (no usan import.meta.url implícitamente)
+- Retornan objetos con estructura `{ success: boolean, data?, error? }`
+- No imprimen a consola directamente
+- Son agnósticas del entorno (CLI vs MCP)
+
+### 3. Compatibilidad Total
+- Los archivos CLI actuales se mantienen funcionales
+- Misma API de comandos
+- Mismo comportamiento observable
+- No romper ningún test existente
+
+---
+
+## Pasos de Refactorización por Comando
+
+### Fase 1: List Components
+
+#### Paso 1.1: Análisis del Código Actual
+- Identificar toda la lógica de negocio en `listComponents.js`
+- Separar mentalmente: lógica vs presentación
+- Funciones a extraer: `loadConfig`, `getComponents`, `countComponentFiles`, `listComponentDirectories`
+
+#### Paso 1.2: Crear core.js
+- Crear archivo `commands/listComponents/core.js`
+- Extraer funciones de lógica pura
+- Modificar para que acepten `projectPath` como parámetro opcional
+- Retornar objetos estructurados en lugar de imprimir
+
+#### Paso 1.3: Adaptar listComponents.js
+- Importar funciones desde `core.js`
+- Mantener solo la lógica de presentación (Print, Table, chalk)
+- Re-exportar funciones del core: `export { getComponents, ... } from './core.js'`
+
+#### Paso 1.4: Verificación
+- Ejecutar `slice list` - debe funcionar idéntico
+- Probar importación directa: `import { getComponents } from './commands/listComponents/core.js'`
+- Verificar que retorna datos correctos sin CLI
+
+---
+
+### Fase 2: Create Component
+
+#### Paso 2.1: Análisis
+- Identificar lógica: validaciones, generación de templates, creación de archivos
+- Identificar presentación: mensajes de error, comandos de ejemplo
+
+#### Paso 2.2: Crear core.js
+- Crear `commands/createComponent/core.js`
+- Extraer: `validateComponentName`, `validateCategory`, `generateTemplate`, `createComponentFiles`
+- Cada función retorna `{ success, data, error }`
+
+#### Paso 2.3: Adaptar createComponent.js
+- Importar funciones del core
+- Mantener solo los Print y mensajes de ayuda
+- Re-exportar funciones del core
+
+#### Paso 2.4: Verificación
+- Ejecutar `slice component create` - debe funcionar igual
+- Probar importación directa y creación programática
+
+---
+
+### Fase 3: Delete Component
+
+#### Paso 3.1: Análisis
+- Identificar lógica: validaciones, verificación de existencia, eliminación de archivos
+- Identificar presentación: mensajes de confirmación, errores
+
+#### Paso 3.2: Crear core.js
+- Crear `commands/deleteComponent/core.js`
+- Extraer: `deleteComponentFiles` (con validaciones integradas)
+
+#### Paso 3.3: Adaptar deleteComponent.js
+- Importar del core
+- Mantener presentación CLI
+- Re-exportar funciones
+
+#### Paso 3.4: Verificación
+- Ejecutar `slice component delete`
+- Verificar funcionamiento idéntico
+
+---
+
+### Fase 4: Get Component (Registry)
+
+#### Paso 4.1: Análisis
+- Identificar lógica: descarga de registry, instalación de componentes, actualización
+- Es el más complejo - tiene clase ComponentRegistry
+
+#### Paso 4.2: Crear core.js
+- Crear `commands/getComponent/core.js`
+- Extraer clase `ComponentRegistry` limpia (sin inquirer, sin Print)
+- Métodos retornan objetos estructurados
+
+#### Paso 4.3: Adaptar getComponent.js
+- Importar ComponentRegistry del core
+- Envolver con lógica interactiva (inquirer) solo en CLI
+- Mantener funciones: `getComponents`, `listComponents`, `syncComponents`
+
+#### Paso 4.4: Verificación
+- Probar: `slice get Button`, `slice browse`, `slice sync`
+- Verificar descarga y registro correctos
+
+---
+
+### Fase 5: Init Project
+
+#### Paso 5.1: Análisis
+- Identificar lógica: copia de estructuras, configuración de package.json
+- Separar spinners y mensajes visuales
+
+#### Paso 5.2: Crear core.js
+- Crear `commands/init/core.js`
+- Extraer: funciones de scaffolding, configuración
+
+#### Paso 5.3: Adaptar init.js
+- Importar del core
+- Mantener spinners y presentación
+- Re-exportar funciones
+
+#### Paso 5.4: Verificación
+- Ejecutar `slice init` en proyecto nuevo
+- Verificar estructura completa creada
+
+---
+
+## Patrón de Estructura de Funciones Core
+
+### Firma de Función Estándar
+```
+function operationName({ param1, param2, projectPath = null }) {
+    // Validaciones
+    // Lógica de negocio
+    return { success: boolean, data?, error? }
+}
+```
+
+### Objeto de Retorno Estándar
+```javascript
+// Éxito
+{
+    success: true,
+    data: { ... },
+    // Campos adicionales específicos
+}
+
+// Error
+{
+    success: false,
+    error: "mensaje descriptivo"
+}
+```
+
+---
+
+## Estrategia de Dependencias
+
+### Dependencias Permitidas en core.js
+- ✅ `fs`, `fs-extra`
+- ✅ `path`
+- ✅ `Validations.js` (lógica pura)
+- ✅ Helpers de PathHelper (refactorizar para aceptar projectPath)
+
+### Dependencias NO Permitidas en core.js
+- ❌ `Print.js` (específico de CLI)
+- ❌ `chalk` (presentación)
+- ❌ `cli-table3` (presentación)
+- ❌ `inquirer` (interacción CLI)
+- ❌ `ora` (spinners CLI)
+
+---
+
+## Refactorización de PathHelper
+
+### Problema Actual
+PathHelper usa `import.meta.url` internamente, asumiendo que se llama desde dentro del CLI
+
+### Solución
+Crear versiones alternativas que acepten `projectPath`:
+
+```
+// Versión CLI (actual)
+getSrcPath(import.meta.url, ...paths)
+
+// Versión core (nueva)
+getProjectSrcPath(projectPath, ...paths)
+```
+
+O mejor: modificar funciones existentes para aceptar ambos modos:
+```
+getSrcPath(importMetaUrlOrProjectPath, ...paths)
+```
+
+---
+
+## Testing de la Refactorización
+
+### Test 1: CLI Functionality
+Para cada comando refactorizado:
+- Ejecutar comando CLI
+- Verificar output idéntico al anterior
+- Verificar archivos creados/modificados
+
+### Test 2: Importación Directa
+```javascript
+// test-mcp-import.js
+import { getComponents } from './commands/listComponents/core.js';
+
+const result = getComponents('/ruta/proyecto');
+console.log(result); // Debe retornar objeto con componentes
+```
+
+### Test 3: Sin Dependencias CLI
+Verificar que core.js no tiene imports de Print, chalk, etc:
+```bash
+grep -r "from.*Print" commands/*/core.js  # debe estar vacío
+grep -r "from.*chalk" commands/*/core.js  # debe estar vacío
+```
+
+---
+
+## Orden de Implementación Recomendado
+
+1. **listComponents** (más simple, establece patrón)
+2. **createComponent** (complejidad media)
+3. **deleteComponent** (similar a create)
+4. **getComponent** (más complejo, tiene clase)
+5. **init** (el más complejo)
+