slicejs-cli 2.7.8 → 2.7.9

package/commands/utils/bundling/BundleGenerator.js

@@ -220,13 +220,66 @@ export default class BundleGenerator {
   assignHybridBundles(criticalNames) {
     const routeGroups = new Map();
 
-    // Group routes by category
+    // 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) {
-      const category = this.categorizeRoute(route.path);
-      if (!routeGroups.has(category)) {
-        routeGroups.set(category, []);
+      // 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);
       }
-      routeGroups.get(category).push(route);
     }
 
     // Create bundles for each group
@@ -268,9 +321,19 @@ export default class BundleGenerator {
   }
 
   /**
-   * Categorizes a route path for grouping
+   * 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';
@@ -461,7 +524,7 @@ 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,
@@ -484,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;
   }
 

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
     };
   }
@@ -153,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' &&
@@ -181,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)) {
@@ -189,7 +215,7 @@ export default class DependencyAnalyzer {
     }
 
     const content = await fs.readFile(this.routesPath, 'utf-8');
-    
+
     try {
       const ast = parse(content, {
         sourceType: 'module',
@@ -225,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}`);
     }
@@ -249,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.8",
+  "version": "2.7.9",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "bin": {