slicejs-cli 2.7.7 → 2.7.9

package/commands/bundle/bundle.js

@@ -19,6 +19,10 @@ export default async function bundle(options = {}) {
     // Validate that it's a Slice.js project
     await validateProject(projectRoot);
 
+    // Create default bundle config if needed
+    const bundleGenerator = new BundleGenerator(import.meta.url, null);
+    await bundleGenerator.createDefaultBundleConfig();
+
     // Phase 1: Analysis
     Print.buildProgress('Analyzing project...');
     const analyzer = new DependencyAnalyzer(import.meta.url);
@@ -110,7 +114,8 @@ function printSummary(result, startTime) {
 
     for (const [key, bundle] of Object.entries(bundles.routes)) {
       console.log(`   ${key}:`);
-      console.log(`     Route: ${bundle.path}`);
+      const routeDisplay = Array.isArray(bundle.path) ? `${bundle.path.length} routes` : (bundle.path || key);
+      console.log(`     Route: ${routeDisplay}`);
       console.log(`     Components: ${bundle.components.length}`);
       console.log(`     Size: ${(bundle.size / 1024).toFixed(1)} KB`);
       console.log(`     File: ${bundle.file}`);

package/commands/utils/bundling/BundleGenerator.js

@@ -9,6 +9,7 @@ export default class BundleGenerator {
     this.moduleUrl = moduleUrl;
     this.analysisData = analysisData;
     this.srcPath = getSrcPath(moduleUrl);
+    this.bundlesPath = path.join(this.srcPath, 'bundles');
     this.componentsPath = path.dirname(getComponentsJsPath(moduleUrl));
 
     // Configuration
@@ -35,6 +36,9 @@ export default class BundleGenerator {
   async generate() {
     console.log('🔨 Generating bundles...');
 
+    // 0. Create bundles directory
+    await fs.ensureDir(this.bundlesPath);
+
     // 1. Determine optimal strategy
     this.determineStrategy();
 
@@ -70,9 +74,9 @@ export default class BundleGenerator {
     if (totalComponents < 20 || sharedPercentage > 60) {
       this.config.strategy = 'global';
       console.log('📦 Strategy: Global Bundle (small project or highly shared)');
-    } else if (totalComponents < 60) {
+    } else if (totalComponents < 100) {
       this.config.strategy = 'hybrid';
-      console.log('📦 Strategy: Hybrid (critical + per route)');
+      console.log('📦 Strategy: Hybrid (critical + grouped routes)');
     } else {
       this.config.strategy = 'per-route';
       console.log('📦 Strategy: Per Route (large project)');
@@ -95,8 +99,8 @@ export default class BundleGenerator {
         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;
+        // Small and highly used components (only if used in 3+ routes)
+        const isSmallAndUseful = comp.size < 2000 && comp.routes.size >= 3;
 
         return isShared || isStructural || isSmallAndUseful;
       })
@@ -109,13 +113,27 @@ export default class BundleGenerator {
 
     // 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;
+      const dependencies = this.getComponentDependencies(comp);
+      const totalSize = comp.size + dependencies.reduce((sum, dep) => sum + dep.size, 0);
+      const totalCount = 1 + dependencies.length;
+
+      const wouldExceedSize = this.bundles.critical.size + totalSize > this.config.maxCriticalSize;
+      const wouldExceedCount = this.bundles.critical.components.length + totalCount > this.config.maxCriticalComponents;
+
+      if (wouldExceedSize || wouldExceedCount) continue;
 
-      if (wouldExceedSize || wouldExceedCount) break;
+      // Add component and its dependencies
+      if (!this.bundles.critical.components.find(c => c.name === comp.name)) {
+        this.bundles.critical.components.push(comp);
+        this.bundles.critical.size += comp.size;
+      }
 
-      this.bundles.critical.components.push(comp);
-      this.bundles.critical.size += comp.size;
+      for (const dep of dependencies) {
+        if (!this.bundles.critical.components.find(c => c.name === dep.name)) {
+          this.bundles.critical.components.push(dep);
+          this.bundles.critical.size += dep.size;
+        }
+      }
     }
 
     console.log(`✓ Critical bundle: ${this.bundles.critical.components.length} components, ${(this.bundles.critical.size / 1024).toFixed(1)} KB`);
@@ -127,12 +145,34 @@ export default class BundleGenerator {
   assignRouteComponents() {
     const criticalNames = new Set(this.bundles.critical.components.map(c => c.name));
 
-    for (const [routePath, route] of this.analysisData.routes) {
+    if (this.config.strategy === 'hybrid') {
+      this.assignHybridBundles(criticalNames);
+    } else {
+      this.assignPerRouteBundles(criticalNames);
+    }
+  }
+
+  /**
+   * Assigns components to per-route bundles
+   */
+  assignPerRouteBundles(criticalNames) {
+    for (const route of this.analysisData.routes) {
+      const routePath = route.path;
       // Get all route dependencies
       const routeComponents = this.getRouteComponents(route.component);
 
+      // Include dependencies for all route components
+      const allComponents = new Set();
+      for (const comp of routeComponents) {
+        allComponents.add(comp);
+        const dependencies = this.getComponentDependencies(comp);
+        for (const dep of dependencies) {
+          allComponents.add(dep);
+        }
+      }
+
       // Filter those already in critical
-      const uniqueComponents = routeComponents.filter(comp =>
+      const uniqueComponents = Array.from(allComponents).filter(comp =>
         !criticalNames.has(comp.name)
       );
 
@@ -152,6 +192,168 @@ export default class BundleGenerator {
     }
   }
 
+  /**
+   * Gets all component dependencies transitively
+   */
+  getComponentDependencies(component, visited = new Set()) {
+    if (visited.has(component.name)) return [];
+    visited.add(component.name);
+
+    const dependencies = [];
+
+    // Add direct dependencies
+    for (const depName of component.dependencies) {
+      const depComp = this.analysisData.components.find(c => c.name === depName);
+      if (depComp && !visited.has(depName)) {
+        dependencies.push(depComp);
+        // Add transitive dependencies
+        dependencies.push(...this.getComponentDependencies(depComp, visited));
+      }
+    }
+
+    return dependencies;
+  }
+
+  /**
+   * Assigns components to hybrid bundles (grouped by category)
+   */
+  assignHybridBundles(criticalNames) {
+    const routeGroups = new Map();
+
+    // First, handle MultiRoute groups
+    if (this.analysisData.routeGroups) {
+      for (const [groupKey, groupData] of this.analysisData.routeGroups) {
+        if (groupData.type === 'multiroute') {
+          // Create a bundle for this MultiRoute group
+          const allComponents = new Set();
+
+          // Add the main component (MultiRoute handler)
+          const mainComponent = this.analysisData.components.find(c => c.name === groupData.component);
+          if (mainComponent) {
+            allComponents.add(mainComponent);
+
+            // Add all components used by this MultiRoute
+            const routeComponents = this.getRouteComponents(mainComponent.name);
+            for (const comp of routeComponents) {
+              allComponents.add(comp);
+              // Add transitive dependencies
+              const dependencies = this.getComponentDependencies(comp);
+              for (const dep of dependencies) {
+                allComponents.add(dep);
+              }
+            }
+          }
+
+          // Filter those already in critical
+          const uniqueComponents = Array.from(allComponents).filter(comp =>
+            !criticalNames.has(comp.name)
+          );
+
+          if (uniqueComponents.length > 0) {
+            const totalSize = uniqueComponents.reduce((sum, c) => sum + c.size, 0);
+
+            this.bundles.routes[groupKey] = {
+              paths: groupData.routes,
+              components: uniqueComponents,
+              size: totalSize,
+              file: `slice-bundle.${groupKey}.js`
+            };
+
+            console.log(`✓ Bundle ${groupKey}: ${uniqueComponents.length} components, ${(totalSize / 1024).toFixed(1)} KB (${groupData.routes.length} routes)`);
+          }
+        }
+      }
+    }
+
+    // Group remaining routes by category (skip those already handled by MultiRoute)
+    for (const route of this.analysisData.routes) {
+      // Check if this route is already handled by a MultiRoute group
+      const isHandledByMultiRoute = this.analysisData.routeGroups &&
+        Array.from(this.analysisData.routeGroups.values()).some(group =>
+          group.type === 'multiroute' && group.routes.includes(route.path)
+        );
+
+      if (!isHandledByMultiRoute) {
+        const category = this.categorizeRoute(route.path);
+        if (!routeGroups.has(category)) {
+          routeGroups.set(category, []);
+        }
+        routeGroups.get(category).push(route);
+      }
+    }
+
+    // Create bundles for each group
+    for (const [category, routes] of routeGroups) {
+      const allComponents = new Set();
+
+      // Collect all unique components for this category (including dependencies)
+      for (const route of routes) {
+        const routeComponents = this.getRouteComponents(route.component);
+        for (const comp of routeComponents) {
+          allComponents.add(comp);
+          // Add transitive dependencies
+          const dependencies = this.getComponentDependencies(comp);
+          for (const dep of dependencies) {
+            allComponents.add(dep);
+          }
+        }
+      }
+
+      // Filter those already in critical
+      const uniqueComponents = Array.from(allComponents).filter(comp =>
+        !criticalNames.has(comp.name)
+      );
+
+      if (uniqueComponents.length === 0) continue;
+
+      const totalSize = uniqueComponents.reduce((sum, c) => sum + c.size, 0);
+      const routePaths = routes.map(r => r.path);
+
+      this.bundles.routes[category] = {
+        paths: routePaths,
+        components: uniqueComponents,
+        size: totalSize,
+        file: `slice-bundle.${category}.js`
+      };
+
+      console.log(`✓ Bundle ${category}: ${uniqueComponents.length} components, ${(totalSize / 1024).toFixed(1)} KB (${routes.length} routes)`);
+    }
+  }
+
+  /**
+   * Categorizes a route path for grouping, considering MultiRoute context
+   */
+  categorizeRoute(routePath) {
+    // Check if this route belongs to a MultiRoute handler
+    if (this.analysisData.routeGroups) {
+      for (const [groupKey, groupData] of this.analysisData.routeGroups) {
+        if (groupData.type === 'multiroute' && groupData.routes.includes(routePath)) {
+          return groupKey; // Return the MultiRoute group key
+        }
+      }
+    }
+
+    // Default categorization
+    const path = routePath.toLowerCase();
+
+    if (path === '/' || path === '/home') return 'home';
+    if (path.includes('docum') || path.includes('documentation')) return 'documentation';
+    if (path.includes('component') || path.includes('visual') || path.includes('card') ||
+        path.includes('button') || path.includes('input') || path.includes('switch') ||
+        path.includes('checkbox') || path.includes('select') || path.includes('details') ||
+        path.includes('grid') || path.includes('loading') || path.includes('layout') ||
+        path.includes('navbar') || path.includes('treeview') || path.includes('multiroute')) return 'components';
+    if (path.includes('theme') || path.includes('slice') || path.includes('config')) return 'configuration';
+    if (path.includes('routing') || path.includes('guard')) return 'routing';
+    if (path.includes('service') || path.includes('command')) return 'services';
+    if (path.includes('structural') || path.includes('lifecycle') || path.includes('static') ||
+        path.includes('build')) return 'advanced';
+    if (path.includes('playground') || path.includes('creator')) return 'tools';
+    if (path.includes('about') || path.includes('404')) return 'misc';
+
+    return 'general';
+  }
+
   /**
    * Gets all components needed for a route
    */
@@ -199,7 +401,7 @@ export default class BundleGenerator {
       const routeFile = await this.createBundleFile(
         bundle.components,
         'route',
-        bundle.path
+        bundle.path || routeKey // Use routeKey as fallback for hybrid bundles
       );
       files.push(routeFile);
     }
@@ -213,7 +415,7 @@ export default class BundleGenerator {
   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 filePath = path.join(this.bundlesPath, fileName);
 
     const bundleContent = await this.generateBundleContent(
       components,
@@ -235,6 +437,50 @@ export default class BundleGenerator {
     };
   }
 
+  /**
+   * Analyzes dependencies of a JavaScript file using simple regex
+   */
+  analyzeDependencies(jsContent, componentPath) {
+    const dependencies = [];
+
+    try {
+      // Simple regex to find import statements
+      const importRegex = /import\s+.*?\s+from\s+['"`]([^'"`]+)['"`]/g;
+      let match;
+
+      while ((match = importRegex.exec(jsContent)) !== null) {
+        const importPath = match[1];
+
+        // Only process relative imports (starting with ./ or ../)
+        if (importPath.startsWith('./') || importPath.startsWith('../')) {
+          // Resolve the absolute path
+          const resolvedPath = path.resolve(componentPath, importPath);
+
+          // If no extension, try common extensions
+          let finalPath = resolvedPath;
+          const ext = path.extname(resolvedPath);
+          if (!ext) {
+            const extensions = ['.js', '.json', '.mjs'];
+            for (const ext of extensions) {
+              if (fs.existsSync(resolvedPath + ext)) {
+                finalPath = resolvedPath + ext;
+                break;
+              }
+            }
+          }
+
+          if (fs.existsSync(finalPath)) {
+            dependencies.push(finalPath);
+          }
+        }
+      }
+    } catch (error) {
+      console.warn(`Warning: Could not analyze dependencies for ${componentPath}:`, error.message);
+    }
+
+    return dependencies;
+  }
+
   /**
    * Generates the content of a bundle
    */
@@ -242,10 +488,23 @@ export default class BundleGenerator {
     const componentsData = {};
 
     for (const comp of components) {
-      const jsContent = await fs.readFile(
-        path.join(comp.path, `${comp.name}.js`),
-        'utf-8'
-      );
+      const jsPath = path.join(comp.path, `${comp.name}.js`);
+      const jsContent = await fs.readFile(jsPath, 'utf-8');
+
+      // Analyze dependencies
+      const dependencies = this.analyzeDependencies(jsContent, comp.path);
+      const dependencyContents = {};
+
+      // Read all dependency files
+      for (const depPath of dependencies) {
+        try {
+          const depContent = await fs.readFile(depPath, 'utf-8');
+          const depName = path.basename(depPath, path.extname(depPath));
+          dependencyContents[depName] = depContent;
+        } catch (error) {
+          console.warn(`Warning: Could not read dependency ${depPath}:`, error.message);
+        }
+      }
 
       let htmlContent = null;
       let cssContent = null;
@@ -265,11 +524,12 @@ export default class BundleGenerator {
         name: comp.name,
         category: comp.category,
         categoryType: comp.categoryType,
-        js: this.cleanJavaScript(jsContent),
+        js: this.cleanJavaScript(jsContent, comp.name),
+        externalDependencies: dependencyContents, // Files imported with import statements
+        componentDependencies: Array.from(comp.dependencies), // Other components this one depends on
         html: htmlContent,
         css: cssContent,
-        size: comp.size,
-        dependencies: Array.from(comp.dependencies)
+        size: comp.size
       };
     }
 
@@ -287,15 +547,28 @@ export default class BundleGenerator {
   }
 
   /**
-   * Cleans JavaScript code by removing imports/exports
+   * Cleans JavaScript code by removing imports/exports and ensuring class is available globally
    */
-  cleanJavaScript(code) {
+  cleanJavaScript(code, componentName) {
     // 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, '');
 
+    // Make sure the class is available globally for bundle evaluation
+    // Preserve original customElements.define if it exists
+    if (code.includes('customElements.define')) {
+      // Add global assignment before customElements.define
+      code = code.replace(/customElements\.define\([^;]+\);?\s*$/, `window.${componentName} = ${componentName};\n$&`);
+    } else {
+      // If no customElements.define found, just assign to global
+      code += `\nwindow.${componentName} = ${componentName};`;
+    }
+
+    // Add return statement for bundle evaluation compatibility
+    code += `\nreturn ${componentName};`;
+
     return code;
   }
 
@@ -355,7 +628,7 @@ if (window.slice && window.slice.controller) {
 
     for (const [key, bundle] of Object.entries(this.bundles.routes)) {
       config.bundles.routes[key] = {
-        path: bundle.path,
+        path: bundle.path || bundle.paths || key, // Support both single path and array of paths, fallback to key
         file: bundle.file,
         size: bundle.size,
         components: bundle.components.map(c => c.name),
@@ -382,8 +655,76 @@ if (window.slice && window.slice.controller) {
    * Saves the configuration to file
    */
   async saveBundleConfig(config) {
-    const configPath = path.join(this.srcPath, 'bundle.config.json');
+    // Ensure bundles directory exists
+    await fs.ensureDir(this.bundlesPath);
+
+    // Save JSON config
+    const configPath = path.join(this.bundlesPath, 'bundle.config.json');
     await fs.writeJson(configPath, config, { spaces: 2 });
+
+    // Generate JavaScript module for direct import
+    const jsConfigPath = path.join(this.bundlesPath, 'bundle.config.js');
+    const jsConfig = this.generateBundleConfigJS(config);
+    await fs.writeFile(jsConfigPath, jsConfig, 'utf-8');
+
     console.log(`✓ Configuration saved to ${configPath}`);
+    console.log(`✓ JavaScript config generated: ${jsConfigPath}`);
+  }
+
+  /**
+   * Creates a default bundle config file if none exists
+   */
+  async createDefaultBundleConfig() {
+    const defaultConfigPath = path.join(this.srcPath, 'bundles', 'bundle.config.js');
+
+    // Only create if it doesn't exist
+    if (await fs.pathExists(defaultConfigPath)) {
+      return;
+    }
+
+    await fs.ensureDir(path.dirname(defaultConfigPath));
+
+    const defaultConfig = `/**
+ * Slice.js Bundle Configuration
+ * Default empty configuration - no bundles available
+ * Run 'slice bundle' to generate optimized bundles
+ */
+
+// No bundles available - using individual component loading
+export const SLICE_BUNDLE_CONFIG = null;
+
+// No auto-initialization needed for default config
+`;
+
+    await fs.writeFile(defaultConfigPath, defaultConfig, 'utf-8');
+    console.log(`✓ Default bundle config created: ${defaultConfigPath}`);
+  }
+
+  /**
+   * Generates JavaScript module for direct import
+   */
+  generateBundleConfigJS(config) {
+    return `/**
+ * Slice.js Bundle Configuration
+ * Generated: ${new Date().toISOString()}
+ * Strategy: ${config.strategy}
+ */
+
+// Direct bundle configuration (no fetch required)
+export const SLICE_BUNDLE_CONFIG = ${JSON.stringify(config, null, 2)};
+
+// Auto-initialization if slice is available
+if (typeof window !== 'undefined' && window.slice && window.slice.controller) {
+  window.slice.controller.bundleConfig = SLICE_BUNDLE_CONFIG;
+
+  // Load critical bundle automatically
+  if (SLICE_BUNDLE_CONFIG.bundles.critical && !window.slice.controller.criticalBundleLoaded) {
+    import('./slice-bundle.critical.js').catch(err =>
+      console.warn('Failed to load critical bundle:', err)
+    );
+    window.slice.controller.criticalBundleLoaded = true;
+  }
+}
+`;
   }
 }

package/commands/utils/bundling/DependencyAnalyzer.js

@@ -45,6 +45,7 @@ export default class DependencyAnalyzer {
       components: Array.from(this.components.values()),
       routes: Array.from(this.routes.values()),
       dependencyGraph: this.dependencyGraph,
+      routeGroups: this.routeGroups,
       metrics
     };
   }
@@ -62,8 +63,8 @@ export default class DependencyAnalyzer {
     // 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]*})/);
+    // Extract configuration using simple regex - look for the components object
+    const configMatch = content.match(/const components\s*=\s*({[\s\S]*?});/);
     if (!configMatch) {
       throw new Error('Could not parse components.js');
     }
@@ -71,9 +72,26 @@ export default class DependencyAnalyzer {
     // 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('../', ''));
+    // Group components by category
+    const categoryMap = new Map();
+
+    // Build category map from component assignments
+    for (const [componentName, categoryName] of Object.entries(config)) {
+      if (!categoryMap.has(categoryName)) {
+        categoryMap.set(categoryName, []);
+      }
+      categoryMap.get(categoryName).push(componentName);
+    }
+
+    // Process each category
+    for (const [categoryName, componentList] of categoryMap) {
+      // Determine category type based on category name
+      let categoryType = 'Visual'; // default
+      if (categoryName === 'Service') categoryType = 'Service';
+      if (categoryName === 'AppComponents') categoryType = 'Visual'; // AppComponents are visual
+
+      // Find category path
+      const categoryPath = path.join(this.componentsPath, categoryName);
 
       if (await fs.pathExists(categoryPath)) {
         const files = await fs.readdir(categoryPath);
@@ -82,11 +100,11 @@ export default class DependencyAnalyzer {
           const componentPath = path.join(categoryPath, file);
           const stat = await fs.stat(componentPath);
 
-          if (stat.isDirectory()) {
+          if (stat.isDirectory() && componentList.includes(file)) {
             this.components.set(file, {
               name: file,
-              category,
-              categoryType: info.type,
+              category: categoryName,
+              categoryType: categoryType,
               path: componentPath,
               dependencies: new Set(),
               usedBy: new Set(),
@@ -136,8 +154,33 @@ export default class DependencyAnalyzer {
         CallExpression(path) {
           const { callee, arguments: args } = path.node;
 
-          // slice.build('ComponentName', ...)
+          // slice.build('MultiRoute', { routes: [...] })
           if (
+            callee.type === 'MemberExpression' &&
+            callee.object.name === 'slice' &&
+            callee.property.name === 'build' &&
+            args[0]?.type === 'StringLiteral' &&
+            args[0].value === 'MultiRoute' &&
+            args[1]?.type === 'ObjectExpression'
+          ) {
+            // Add MultiRoute itself
+            dependencies.add('MultiRoute');
+
+            // Extract routes from MultiRoute props
+            const routesProp = args[1].properties.find(p => p.key?.name === 'routes');
+            if (routesProp?.value?.type === 'ArrayExpression') {
+              routesProp.value.elements.forEach(routeElement => {
+                if (routeElement.type === 'ObjectExpression') {
+                  const componentProp = routeElement.properties.find(p => p.key?.name === 'component');
+                  if (componentProp?.value?.type === 'StringLiteral') {
+                    dependencies.add(componentProp.value.value);
+                  }
+                }
+              });
+            }
+          }
+          // Regular slice.build() calls
+          else if (
             callee.type === 'MemberExpression' &&
             callee.object.name === 'slice' &&
             callee.property.name === 'build' &&
@@ -164,7 +207,7 @@ export default class DependencyAnalyzer {
   }
 
   /**
-   * Analyzes the routes file
+   * Analyzes the routes file and detects route groups
    */
   async analyzeRoutes() {
     if (!await fs.pathExists(this.routesPath)) {
@@ -172,7 +215,7 @@ export default class DependencyAnalyzer {
     }
 
     const content = await fs.readFile(this.routesPath, 'utf-8');
-    
+
     try {
       const ast = parse(content, {
         sourceType: 'module',
@@ -208,6 +251,10 @@ export default class DependencyAnalyzer {
           }
         }
       });
+
+      // Detect and store route groups based on MultiRoute usage
+      this.routeGroups = this.detectRouteGroups();
+
     } catch (error) {
       console.warn(`⚠️  Error parseando rutas: ${error.message}`);
     }
@@ -232,6 +279,40 @@ export default class DependencyAnalyzer {
     }
   }
 
+  /**
+   * Detects route groups based on MultiRoute usage
+   */
+  detectRouteGroups() {
+    const routeGroups = new Map();
+
+    for (const [componentName, component] of this.components) {
+      // Check if component uses MultiRoute
+      const hasMultiRoute = Array.from(component.dependencies).includes('MultiRoute');
+
+      if (hasMultiRoute) {
+        // Find all routes that point to this component
+        const relatedRoutes = Array.from(this.routes.values())
+          .filter(route => route.component === componentName);
+
+        if (relatedRoutes.length > 1) {
+          // Group these routes together
+          const groupKey = `multiroute-${componentName}`;
+          routeGroups.set(groupKey, {
+            component: componentName,
+            routes: relatedRoutes.map(r => r.path),
+            type: 'multiroute'
+          });
+
+          // Mark component as multiroute handler
+          component.isMultiRouteHandler = true;
+          component.multiRoutePaths = relatedRoutes.map(r => r.path);
+        }
+      }
+    }
+
+    return routeGroups;
+  }
+
   /**
    * Gets all dependencies of a component (recursive)
    */

package/package.json

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