slicejs-cli 2.7.8 → 2.8.0

package/README.md

@@ -17,13 +17,37 @@
 
 ## Installation
 
-- Local (recommended):
+### Local (Recommended)
+
+1. Install as a development dependency:
 
 ```bash
 npm install slicejs-cli --save-dev
 ```
 
-- Global:
+2. Add to your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "dev": "slice dev",
+    "build": "slice build",
+    "slice": "slice"
+  }
+}
+```
+
+3. usage:
+
+```bash
+npm run dev
+# or pass arguments
+npm run slice -- get Button
+```
+
+### Global (Not Recommended)
+
+Global installations can lead to version mismatches and "works on my machine" issues.
 
 ```bash
 npm install -g slicejs-cli

package/client.js

@@ -132,6 +132,33 @@ sliceClient
     await versionChecker.showVersionInfo();
   });
 
+// BUNDLE COMMAND
+const bundleCommand = sliceClient.command("bundle")
+  .description("Build component bundles for production")
+  .action(async (options) => {
+    await runWithVersionCheck(async () => {
+      await bundle(options);
+    });
+  });
+
+bundleCommand
+  .command("clean")
+  .description("Remove all generated bundles")
+  .action(async () => {
+    await cleanBundles();
+  });
+
+bundleCommand
+  .command("info")
+  .description("Show information about generated bundles")
+  .action(async () => {
+    await bundleInfo();
+  });
+
+bundleCommand
+  .option("-a, --analyze", "Analyze project dependencies without bundling")
+  .option("-v, --verbose", "Show detailed output");
+
 // DEV COMMAND (DEVELOPMENT) - COMANDO PRINCIPAL
 sliceClient
   .command("dev")
@@ -453,25 +480,6 @@ 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', `

package/commands/startServer/startServer.js

@@ -1,5 +1,6 @@
 // commands/startServer/startServer.js - MEJORADO CON VALIDACIÓN Y FEEDBACK
 
+import bundle from '../bundle/bundle.js';
 import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
@@ -184,19 +185,17 @@ export default async function startServer(options = {}) {
       throw new Error('Project structure not found. Run "slice init" first.');
     }
 
-    // Verificar disponibilidad del puerto
-    Print.checkingPort(port);
-    const portAvailable = await isPortAvailable(port);
-
-    if (!portAvailable) {
-      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' : mode === 'bundled' ? 'start --bundled' : 'start'} -p <port>`
-      );
+    let actualPort = await isPortAvailable(port) ? port : port + 1; // Try one more port
+    if(actualPort !== port) {
+       // Check if the fallback is available
+       const fallbackAvailable = await isPortAvailable(actualPort);
+       if(!fallbackAvailable) {
+           throw new Error(`Ports ${port} and ${actualPort} are in use.`);
+       }
+       Print.info(`ℹ️ Port ${port} in use, using ${actualPort} instead.`);
     }
 
-    Print.serverStatus('checking', 'Port available ✓');
+    Print.serverStatus('checking', `Port ${actualPort} available ✓`);
     Print.newLine();
 
     if (mode === 'production') {
@@ -214,12 +213,40 @@ export default async function startServer(options = {}) {
     Print.newLine();
 
     // Iniciar el servidor con argumentos
-    const serverProcess = await startNodeServer(port, mode);
+    let serverProcess = await startNodeServer(actualPort, mode);
 
     // Configurar watch mode si está habilitado
     if (watch) {
       Print.newLine();
-      const watcher = setupWatcher(serverProcess);
+      const watcher = setupWatcher(serverProcess, async (changedPath) => {
+        if (serverProcess) {
+             serverProcess.kill();
+        }
+        
+        // Short delay to ensure port is freed
+        await new Promise(r => setTimeout(r, 500));
+        
+        try {
+          // If we are in bundled mode, regenerate bundles before restarting
+          if (mode === 'bundled') {
+               Print.info('🔄 File changed. Regenerating bundles...');
+               try {
+                  await bundle({ verbose: false });
+               } catch (err) {
+                  Print.error('Bundle generation failed during watch restart');
+                  console.error(err);
+                  // We continue restarting anyway to show error in browser if possible, 
+                  // or maybe just to keep process alive.
+               }
+          } else {
+             Print.info('🔄 File changed. Restarting server...');
+          }
+
+          serverProcess = await startNodeServer(actualPort, mode);
+        } catch (e) {
+          Print.error(`Failed to restart server: ${e.message}`);
+        }
+      });
 
       // Cleanup en exit
       const cleanup = () => {

package/commands/startServer/watchServer.js

@@ -7,7 +7,7 @@ import Print from '../Print.js';
  * @param {ChildProcess} serverProcess - Proceso del servidor
  * @returns {FSWatcher} - Watcher de chokidar
  */
-export default function setupWatcher(serverProcess) {
+export default function setupWatcher(serverProcess, onRestart) {
     Print.info('Watch mode enabled - monitoring file changes...');
     Print.newLine();
 
@@ -16,6 +16,7 @@ export default function setupWatcher(serverProcess) {
             /(^|[\/\\])\../,  // archivos ocultos
             '**/node_modules/**',
             '**/dist/**',
+            '**/bundles/**',
             '**/*.log'
         ],
         persistent: true,
@@ -30,19 +31,30 @@ export default function setupWatcher(serverProcess) {
 
     watcher
         .on('change', (path) => {
-            console.log(chalk.cyan(`📝 File changed: ${path}`));
-
             // Debounce para evitar múltiples reloads
             clearTimeout(reloadTimeout);
             reloadTimeout = setTimeout(() => {
-                console.log(chalk.yellow('🔄 Changes detected, server will reload automatically...'));
-            }, 200);
+                if(onRestart) {
+                    console.log(chalk.yellow('🔄 Changes detected, restarting server...'));
+                    onRestart(path);
+                } else {
+                    console.log(chalk.yellow('🔄 Changes detected, server will reload automatically... (No handler)'));
+                }
+            }, 500);
         })
         .on('add', (path) => {
-            console.log(chalk.green(`➕ New file added: ${path}`));
+             // console.log(chalk.green(`➕ New file added: ${path}`));
+             clearTimeout(reloadTimeout);
+             reloadTimeout = setTimeout(() => {
+                 if (onRestart) onRestart(path);
+             }, 500);
         })
         .on('unlink', (path) => {
-            console.log(chalk.red(`➖ File removed: ${path}`));
+             // console.log(chalk.red(`➖ File removed: ${path}`));
+             clearTimeout(reloadTimeout);
+             reloadTimeout = setTimeout(() => {
+                 if (onRestart) onRestart(path);
+             }, 500);
         })
         .on('error', (error) => {
             Print.error(`Watcher error: ${error.message}`);

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, comp.path),
         externalDependencies: dependencyContents, // Files imported with import statements
         componentDependencies: Array.from(comp.dependencies), // Other components this one depends on
         html: htmlContent,
@@ -484,16 +547,134 @@ export default class BundleGenerator {
   }
 
   /**
-   * Cleans JavaScript code by removing imports/exports
+   * Cleans JavaScript code by processing imports and ensuring class is available globally
    */
-  cleanJavaScript(code) {
-    // Remove export default
-    code = code.replace(/export\s+default\s+/g, '');
+  cleanJavaScript(code, componentName, componentPath) {
+    let newCode = code;
+
+    // 1. In-line local imports to support data files and helpers
+    // Matches: import [clause] from '[path]'
+    const importRegex = /import\s+([\w\s{},*]+)\s+from\s+['"`]([\.\/][^'"`]+)['"`];?/g;
+    
+    newCode = newCode.replace(importRegex, (match, importClause, importPath) => {
+        try {
+            const absolutePath = path.resolve(componentPath, importPath);
+            
+            // Try different extensions if file doesn't exist
+            let finalPath = absolutePath;
+            if (!fs.existsSync(finalPath)) {
+                if (fs.existsSync(finalPath + '.js')) finalPath += '.js';
+                else if (fs.existsSync(finalPath + '.json')) finalPath += '.json';
+                else {
+                    console.warn(`BundleGenerator: Could not resolve ${importPath} in ${componentName}`);
+                    return `/* Fail: File not found ${importPath} */`; // return comment so regular import stripper deletes it
+                }
+            }
+            
+            let fileContent = fs.readFileSync(finalPath, 'utf-8');
+            
+            // Parse Import Clause
+            let defaultImport = null;
+            let namedImports = [];
+            
+            const cleanClause = importClause.trim();
+            
+            if (cleanClause.includes('{')) {
+                // Has named imports
+                const parts = cleanClause.split('{');
+                const preBrace = parts[0].trim(); // "Default, " or ""
+                const braceContent = parts[1].replace('}', '').trim(); // "A, B as C"
+                
+                if (preBrace) {
+                    defaultImport = preBrace.replace(',', '').trim();
+                }
+                
+                if (braceContent) {
+                    namedImports = braceContent.split(',').map(i => {
+                        const [name, alias] = i.split(/\s+as\s+/).map(s => s.trim());
+                        return { name, alias: alias || name };
+                    });
+                }
+            } else {
+                if (cleanClause.includes('*')) return match; // Skip namespace
+                defaultImport = cleanClause;
+            }
+
+            // Transform exported content to local variables
+            
+            // STRATEGY: 
+            // 1. Convert all 'const/let' to 'var' to allow redeclaration (resolves naming collisions)
+            // 2. Wrap exports
+            
+            // Replace const/let with var globally to prevent "Identifier already declared" errors
+            // Use a sophisticated regex that handles:
+            // - Start of line or indentation
+            // - Previous statement termination (; or })
+            // - Optional export keyword
+            fileContent = fileContent.replace(/(^|[\s;}])(export\s+)?(const|let)(?=\s+)/gm, '$1$2var');
+
+            const defaultExportName = `__default_${path.basename(finalPath, path.extname(finalPath)).replace(/\W/g, '_')}_${Math.random().toString(36).substr(2, 5)}`;
+            
+            // Handle export default
+            if (fileContent.includes('export default')) {
+                fileContent = fileContent.replace(/export\s+default\s+/g, `var ${defaultExportName} = `);
+            } else {
+                // If no export default, but we are importing default, try to find a variable with the same name
+                // This happens in legacy data files like: const data = ...; (no export default)
+                if (defaultImport) {
+                     // Check if there is a variable matching the import name in the file content
+                     const varRegex = new RegExp(`var\\s+${defaultImport}\\s*=`);
+                     if (varRegex.test(fileContent)) {
+                         // Found it, map it to our default export name for consistency
+                         fileContent += `\nvar ${defaultExportName} = ${defaultImport};\n`;
+                     }
+                }
+            }
+            
+            // Handle named exports: remove 'export' keyword
+            fileContent = fileContent.replace(/^\s*export\s+/gm, '');
+            // Also clean up export { ... } statements
+            fileContent = fileContent.replace(/^\s*export\s*\{[^}]+\};?/gm, '');
+
+            let aliasCode = '';
+            
+            // Map Default Import
+            if (defaultImport) {
+                // Use var for alias to be safe against existing variable
+                aliasCode += `if (typeof ${defaultImport} === 'undefined') { var ${defaultImport} = (typeof ${defaultExportName} !== 'undefined') ? ${defaultExportName} : undefined; }\n`;
+            }
+            
+            // Map Named Imports with Aliases
+            namedImports.forEach(({ name, alias }) => {
+                if (name !== alias) {
+                    aliasCode += `var ${alias} = ${name};\n`;
+                }
+            });
+            
+            return `/* Inlined: ${importPath} */\n${fileContent}\n${aliasCode}`;
+        } catch (e) {
+            console.warn(`Failed to inline ${importPath} in ${componentName}: ${e.message}`);
+            return `/* Error inlining ${importPath}: ${e.message} */`;
+        }
+    });
+
+    // 2. Remove any remaining import statements (non-local or failed ones)
+    newCode = newCode.replace(/^.*import\s+.*from\s+['"`].*['"`];?.*$/gm, '');
+
+    // 3. Remove export default from the component itself
+    newCode = newCode.replace(/export\s+default\s+/g, '');
+
+    // 4. Make sure the class is available globally for bundle evaluation
+    if (newCode.includes('customElements.define')) {
+      newCode = newCode.replace(/customElements\.define\([^;]+\);?\s*$/, `window.${componentName} = ${componentName};\n$&`);
+    } else {
+      newCode += `\nwindow.${componentName} = ${componentName};`;
+    }
 
-    // Remove imports (components will already be available)
-    code = code.replace(/import\s+.*?from\s+['"].*?['"];?\s*/g, '');
+    // 5. Add return statement for bundle evaluation compatibility
+    newCode += `\nreturn ${componentName};`;
 
-    return code;
+    return newCode;
   }
 
   /**

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.8.0",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "bin": {
@@ -26,6 +26,7 @@
   ],
   "author": "vkneider",
   "type": "module",
+  "preferGlobal": false,
   "license": "ISC",
   "dependencies": {
     "chalk": "^5.6.2",
@@ -38,9 +39,7 @@
     "inquirer": "^12.4.2",
     "ora": "^8.2.0",
     "slicejs-web-framework": "latest",
-    "terser": "^5.43.1"
-  },
-  "devDependencies": {
+    "terser": "^5.43.1",
     "@babel/parser": "^7.28.5",
     "@babel/traverse": "^7.28.5"
   }

package/post.js

@@ -12,14 +12,14 @@ const targetRoot = initCwd || path.resolve(__dirname, '../../');
 const projectPackageJsonPath = path.join(targetRoot, 'package.json');
 
 if (isGlobal) {
-    console.log('ℹ️  Global installation of slicejs-cli detected.');
-    console.log('   Skipping scripts setup. Use the binary directly:');
-    console.log('     slice dev');
-    console.log('     slice get Button');
+    console.log('⚠️  Global installation of slicejs-cli detected.');
+    console.log('   We strongly recommend using a local installation to avoid version mismatches.');
+    console.log('   Uninstall global: npm uninstall -g slicejs-cli');
     process.exit(0);
 }
 
-console.log('ℹ️  Local installation of slicejs-cli detected.');
-console.log('   Skipping automatic scripts setup in postinstall.');
-console.log('   Use "slice init" to configure project scripts.');
+console.log('✅  slicejs-cli installed successfully.');
+console.log('   Add the CLI to your package.json scripts:');
+console.log('     "dev": "slice dev"');
+console.log('   Then run: npm run dev');
 process.exit(0);