slicejs-cli 2.7.6 → 2.7.8

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,105 @@ 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();
+
+    // Group routes by category
+    for (const route of this.analysisData.routes) {
+      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
+   */
+  categorizeRoute(routePath) {
+    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 +338,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 +352,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 +374,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 +425,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;
@@ -266,10 +462,11 @@ export default class BundleGenerator {
         category: comp.category,
         categoryType: comp.categoryType,
         js: this.cleanJavaScript(jsContent),
+        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
       };
     }
 
@@ -355,7 +552,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 +579,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

@@ -62,8 +62,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 +71,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 +99,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(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.7.6",
+  "version": "2.7.8",
   "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"
   }
 }