slicejs-cli 2.7.9 → 2.8.1

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

@@ -48,29 +48,29 @@ export default async function initializeProject(projectType) {
         const srcDir = path.join(sliceBaseDir, 'src');
 
         try {
-            if (fs.existsSync(destinationApi)) throw new Error(`The "api" directory already exists: ${destinationApi}`);
-            if (fs.existsSync(destinationSrc)) throw new Error(`The "src" directory already exists: ${destinationSrc}`);
-        } catch (error) {
-            Print.error('Validating destination directories:', error.message);
-            return;
-        }
+            if (fs.existsSync(destinationApi)) throw new Error(`The "api" directory already exists: ${destinationApi}`);
+            if (fs.existsSync(destinationSrc)) throw new Error(`The "src" directory already exists: ${destinationSrc}`);
+        } catch (error) {
+            Print.error('Validating destination directories:', error.message);
+            return;
+        }
 
         // 1. COPIAR LA CARPETA API (mantener lógica original)
-        const apiSpinner = ora('Copying API structure...').start();
-        try {
-            if (!fs.existsSync(apiDir)) throw new Error(`API folder not found: ${apiDir}`);
-            await fs.copy(apiDir, destinationApi, { recursive: true });
-            apiSpinner.succeed('API structure created successfully');
-        } catch (error) {
-            apiSpinner.fail('Error copying API structure');
-            Print.error(error.message);
-            return;
-        }
+        const apiSpinner = ora('Copying API structure...').start();
+        try {
+            if (!fs.existsSync(apiDir)) throw new Error(`API folder not found: ${apiDir}`);
+            await fs.copy(apiDir, destinationApi, { recursive: true });
+            apiSpinner.succeed('API structure created successfully');
+        } catch (error) {
+            apiSpinner.fail('Error copying API structure');
+            Print.error(error.message);
+            return;
+        }
 
         // 2. CREAR ESTRUCTURA SRC BÁSICA (sin copiar componentes Visual)
-        const srcSpinner = ora('Creating src structure...').start();
-        try {
-            if (!fs.existsSync(srcDir)) throw new Error(`src folder not found: ${srcDir}`);
+        const srcSpinner = ora('Creating src structure...').start();
+        try {
+            if (!fs.existsSync(srcDir)) throw new Error(`src folder not found: ${srcDir}`);
 
             // Copiar solo los archivos base de src, excluyendo Components/Visual
             await fs.ensureDir(destinationSrc);
@@ -94,22 +94,22 @@ export default async function initializeProject(projectType) {
                             const destComponentItemPath = path.join(destItemPath, componentItem);
 
                             if (componentItem !== 'Visual') {
-                                // Copy Service and other component types
-                                await fs.copy(componentItemPath, destComponentItemPath, { recursive: true });
-                            } else {
-                                // Only create empty Visual directory
-                                await fs.ensureDir(destComponentItemPath);
-                            }
-                        }
-                    } else {
-                        // Copy other folders normally
-                        await fs.copy(srcItemPath, destItemPath, { recursive: true });
-                    }
-                } else {
-                    // Copy files normally
-                    await fs.copy(srcItemPath, destItemPath);
-                }
-            }
+                                // Copy Service and other component types
+                                await fs.copy(componentItemPath, destComponentItemPath, { recursive: true });
+                            } else {
+                                // Only create empty Visual directory
+                                await fs.ensureDir(destComponentItemPath);
+                            }
+                        }
+                    } else {
+                        // Copy other folders normally
+                        await fs.copy(srcItemPath, destItemPath, { recursive: true });
+                    }
+                } else {
+                    // Copy files normally
+                    await fs.copy(srcItemPath, destItemPath);
+                }
+            }
 
             srcSpinner.succeed('Source structure created successfully');
         } catch (error) {
@@ -142,15 +142,15 @@ export default async function initializeProject(projectType) {
                 if (successful > 0 && failed === 0) {
                     componentsSpinner.succeed(`All ${successful} Visual components installed successfully`);
                 } else if (successful > 0) {
-                componentsSpinner.warn(`${successful} components installed, ${failed} failed`);
-                Print.info('You can install failed components later using "slice get <component-name>"');
-            } else {
-                componentsSpinner.fail('Failed to install Visual components');
-            }
-        } else {
-            componentsSpinner.warn('No Visual components found in registry');
-            Print.info('You can add components later using "slice get <component-name>"');
-        }
+                componentsSpinner.warn(`${successful} components installed, ${failed} failed`);
+                Print.info('You can install failed components later using "slice get <component-name>"');
+            } else {
+                componentsSpinner.fail('Failed to install Visual components');
+            }
+        } else {
+            componentsSpinner.warn('No Visual components found in registry');
+            Print.info('You can add components later using "slice get <component-name>"');
+        }
 
         } catch (error) {
             componentsSpinner.fail('Could not download Visual components from official repository');
@@ -222,21 +222,21 @@ export default async function initializeProject(projectType) {
             console.log('  npm run get            - Install components');
             console.log('  npm run browse         - Browse components');
         } catch (error) {
-        pkgSpinner.fail('Failed to configure npm scripts');
-        Print.error(error.message);
-        }
+        pkgSpinner.fail('Failed to configure npm scripts');
+        Print.error(error.message);
+        }
 
-        Print.success('Project initialized successfully.');
-        Print.newLine();
-        Print.info('Next steps:');
-        console.log('  slice browse          - View available components');
-        console.log('  slice get Button      - Install specific components');
-        console.log('  slice sync            - Update all components to latest versions');
+        Print.success('Project initialized successfully.');
+        Print.newLine();
+        Print.info('Next steps:');
+        console.log('  slice browse          - View available components');
+        console.log('  slice get Button      - Install specific components');
+        console.log('  slice sync            - Update all components to latest versions');
 
     } catch (error) {
-        Print.error('Unexpected error initializing project:', error.message);
-    }
-}
+        Print.error('Unexpected error initializing project:', error.message);
+    }
+}
 
 /**
  * Obtiene TODOS los componentes Visual disponibles en el registry

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

@@ -1,68 +1,68 @@
-import path from 'path'
-import fs from 'fs-extra'
-import { fileURLToPath } from 'url'
-
-const sanitize = (s) => (s || '').replace(/^[/\\]+/, '')
-const dirOf = (url) => path.dirname(fileURLToPath(url))
-
-function candidates(moduleUrl) {
-  const dir = dirOf(moduleUrl)
-  return [
-    path.join(dir, '../../'),
-    path.join(dir, '../../../../')
-  ]
-}
-
-function resolveProjectRoot(moduleUrl) {
-  const initCwd = process.env.INIT_CWD
-  if (initCwd && fs.pathExistsSync(initCwd)) {
-    return initCwd
-  }
-
-  const cwd = process.cwd()
-  if (cwd && fs.pathExistsSync(cwd)) {
-    return cwd
-  }
-
-  const dirs = candidates(moduleUrl)
-  for (const root of dirs) {
-    const hasSrc = fs.pathExistsSync(path.join(root, 'src'))
-    const hasApi = fs.pathExistsSync(path.join(root, 'api'))
-    if (hasSrc || hasApi) return root
-  }
-  return dirs[1]
-}
-
-function joinProject(moduleUrl, ...segments) {
-  const root = resolveProjectRoot(moduleUrl)
-  const clean = segments.map(sanitize)
-  return path.join(root, ...clean)
-}
-
-export function getProjectRoot(moduleUrl) {
-  return resolveProjectRoot(moduleUrl)
-}
-
-export function getPath(moduleUrl, folder, ...segments) {
-  return joinProject(moduleUrl, folder, ...segments)
-}
-
-export function getSrcPath(moduleUrl, ...segments) {
-  return joinProject(moduleUrl, 'src', ...segments)
-}
-
-export function getApiPath(moduleUrl, ...segments) {
-  return joinProject(moduleUrl, 'api', ...segments)
-}
-
-export function getDistPath(moduleUrl, ...segments) {
-  return joinProject(moduleUrl, 'dist', ...segments)
-}
-
-export function getConfigPath(moduleUrl) {
-  return joinProject(moduleUrl, 'src', 'sliceConfig.json')
-}
-
-export function getComponentsJsPath(moduleUrl) {
-  return joinProject(moduleUrl, 'src', 'Components', 'components.js')
-}
+import path from 'path'
+import fs from 'fs-extra'
+import { fileURLToPath } from 'url'
+
+const sanitize = (s) => (s || '').replace(/^[/\\]+/, '')
+const dirOf = (url) => path.dirname(fileURLToPath(url))
+
+function candidates(moduleUrl) {
+  const dir = dirOf(moduleUrl)
+  return [
+    path.join(dir, '../../'),
+    path.join(dir, '../../../../')
+  ]
+}
+
+function resolveProjectRoot(moduleUrl) {
+  const initCwd = process.env.INIT_CWD
+  if (initCwd && fs.pathExistsSync(initCwd)) {
+    return initCwd
+  }
+
+  const cwd = process.cwd()
+  if (cwd && fs.pathExistsSync(cwd)) {
+    return cwd
+  }
+
+  const dirs = candidates(moduleUrl)
+  for (const root of dirs) {
+    const hasSrc = fs.pathExistsSync(path.join(root, 'src'))
+    const hasApi = fs.pathExistsSync(path.join(root, 'api'))
+    if (hasSrc || hasApi) return root
+  }
+  return dirs[1]
+}
+
+function joinProject(moduleUrl, ...segments) {
+  const root = resolveProjectRoot(moduleUrl)
+  const clean = segments.map(sanitize)
+  return path.join(root, ...clean)
+}
+
+export function getProjectRoot(moduleUrl) {
+  return resolveProjectRoot(moduleUrl)
+}
+
+export function getPath(moduleUrl, folder, ...segments) {
+  return joinProject(moduleUrl, folder, ...segments)
+}
+
+export function getSrcPath(moduleUrl, ...segments) {
+  return joinProject(moduleUrl, 'src', ...segments)
+}
+
+export function getApiPath(moduleUrl, ...segments) {
+  return joinProject(moduleUrl, 'api', ...segments)
+}
+
+export function getDistPath(moduleUrl, ...segments) {
+  return joinProject(moduleUrl, 'dist', ...segments)
+}
+
+export function getConfigPath(moduleUrl) {
+  return joinProject(moduleUrl, 'src', 'sliceConfig.json')
+}
+
+export function getComponentsJsPath(moduleUrl) {
+  return joinProject(moduleUrl, 'src', 'Components', 'components.js')
+}

package/commands/utils/VersionChecker.js

@@ -1,10 +1,10 @@
 // commands/utils/VersionChecker.js
 
-import fs from "fs-extra";
-import path from "path";
-import { fileURLToPath } from "url";
-import Print from "../Print.js";
-import { getProjectRoot } from "../utils/PathHelper.js";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import Print from "../Print.js";
+import { getProjectRoot } from "../utils/PathHelper.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -23,9 +23,9 @@ class VersionChecker {
       const cliPackage = await fs.readJson(cliPackagePath);
       this.currentCliVersion = cliPackage.version;
 
-      // Get Framework version from project node_modules
-      const projectRoot = getProjectRoot(import.meta.url);
-      const frameworkPackagePath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'package.json');
+      // Get Framework version from project node_modules
+      const projectRoot = getProjectRoot(import.meta.url);
+      const frameworkPackagePath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'package.json');
       if (await fs.pathExists(frameworkPackagePath)) {
         const frameworkPackage = await fs.readJson(frameworkPackagePath);
         this.currentFrameworkVersion = frameworkPackage.version;
@@ -111,7 +111,7 @@ class VersionChecker {
 
       if (!silent && (cliStatus === 'outdated' || frameworkStatus === 'outdated')) {
         console.log(''); // Line break
-        Print.warning('📦 Available Updates:');
+        Print.warning('📦 Available Updates:');
         
         if (cliStatus === 'outdated') {
           console.log(`   🔧 CLI: ${current.cli} → ${latest.cli}`);
@@ -142,7 +142,7 @@ class VersionChecker {
     const current = await this.getCurrentVersions();
     const latest = await this.getLatestVersions();
     
-    console.log('\n📋 Version Information:');
+    console.log('\n📋 Version Information:');
     console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
     
     if (current?.cli) {
@@ -164,4 +164,4 @@ class VersionChecker {
 // Singleton instance
 const versionChecker = new VersionChecker();
 
-export default versionChecker;
+export default versionChecker;

package/commands/utils/bundling/BundleGenerator.js

@@ -256,7 +256,7 @@ export default class BundleGenerator {
               paths: groupData.routes,
               components: uniqueComponents,
               size: totalSize,
-              file: `slice-bundle.${groupKey}.js`
+              file: `slice-bundle.${this.routeToFileName(groupKey)}.js`
             };
 
             console.log(`✓ Bundle ${groupKey}: ${uniqueComponents.length} components, ${(totalSize / 1024).toFixed(1)} KB (${groupData.routes.length} routes)`);
@@ -313,7 +313,7 @@ export default class BundleGenerator {
         paths: routePaths,
         components: uniqueComponents,
         size: totalSize,
-        file: `slice-bundle.${category}.js`
+        file: `slice-bundle.${this.routeToFileName(category)}.js`
       };
 
       console.log(`✓ Bundle ${category}: ${uniqueComponents.length} components, ${(totalSize / 1024).toFixed(1)} KB (${routes.length} routes)`);
@@ -401,7 +401,7 @@ export default class BundleGenerator {
       const routeFile = await this.createBundleFile(
         bundle.components,
         'route',
-        bundle.path || routeKey // Use routeKey as fallback for hybrid bundles
+        bundle.path || bundle.paths || routeKey // Use routeKey as fallback for hybrid bundles
       );
       files.push(routeFile);
     }
@@ -629,7 +629,7 @@ if (window.slice && window.slice.controller) {
     for (const [key, bundle] of Object.entries(this.bundles.routes)) {
       config.bundles.routes[key] = {
         path: bundle.path || bundle.paths || key, // Support both single path and array of paths, fallback to key
-        file: bundle.file,
+        file: `slice-bundle.${this.routeToFileName(bundle.path || bundle.paths || key)}.js`,
         size: bundle.size,
         components: bundle.components.map(c => c.name),
         dependencies: ['critical']
@@ -727,4 +727,4 @@ if (typeof window !== 'undefined' && window.slice && window.slice.controller) {
 }
 `;
   }
-}
+}

package/commands/utils/bundling/DependencyAnalyzer.js

@@ -133,16 +133,280 @@ export default class DependencyAnalyzer {
       component.size = await this.calculateComponentSize(component.path);
 
       // Parse and extract dependencies
-      component.dependencies = await this.extractDependencies(content);
+      component.dependencies = await this.extractDependencies(content, jsFile);
     }
   }
 
   /**
    * Extracts dependencies from a component file
    */
-  async extractDependencies(code) {
+  async extractDependencies(code, componentFilePath = null) {
     const dependencies = new Set();
 
+    const resolveRoutesArray = (node, scope) => {
+      if (!node) return null;
+
+      if (node.type === 'ArrayExpression') {
+        return node;
+      }
+
+      if (node.type === 'ObjectExpression') {
+        const routesProp = node.properties.find(p => p.key?.name === 'routes');
+        if (routesProp?.value) {
+          return resolveRoutesArray(routesProp.value, scope);
+        }
+      }
+
+      if (node.type === 'Identifier' && scope) {
+        const binding = scope.getBinding(node.name);
+        if (!binding) return null;
+        const bindingNode = binding.path?.node;
+
+        if (bindingNode?.type === 'VariableDeclarator') {
+          const init = bindingNode.init;
+          if (init?.type === 'ArrayExpression') {
+            return init;
+          }
+
+          if (init?.type === 'Identifier') {
+            return resolveRoutesArray(init, binding.path.scope);
+          }
+
+          if (init?.type === 'ObjectExpression') {
+            return resolveRoutesArray(init, binding.path.scope);
+          }
+
+          if (init?.type === 'MemberExpression') {
+            return resolveRoutesArray(init, binding.path.scope);
+          }
+        }
+
+        if (bindingNode?.type === 'ImportSpecifier' || bindingNode?.type === 'ImportDefaultSpecifier') {
+          const parent = binding.path.parentPath?.node;
+          if (parent?.type === 'ImportDeclaration') {
+            const importedName = bindingNode.type === 'ImportDefaultSpecifier'
+              ? 'default'
+              : bindingNode.imported?.name;
+            const importedNode = resolveImportedValue(parent.source.value, importedName, componentFilePath);
+            return resolveRoutesArray(importedNode, null);
+          }
+        }
+      }
+
+      if (node.type === 'MemberExpression' && scope) {
+        const objectNode = resolveObjectExpression(node.object, scope);
+        if (objectNode) {
+          const propName = node.property?.name || node.property?.value;
+          if (propName) {
+            const prop = objectNode.properties.find(p => p.key?.name === propName || p.key?.value === propName);
+            if (prop?.value) {
+              return resolveRoutesArray(prop.value, scope);
+            }
+          }
+        }
+      }
+
+      return null;
+    };
+
+    const resolveObjectExpression = (node, scope) => {
+      if (!node) return null;
+      if (node.type === 'ObjectExpression') return node;
+
+      if (node.type === 'Identifier' && scope) {
+        const binding = scope.getBinding(node.name);
+        const bindingNode = binding?.path?.node;
+        if (bindingNode?.type === 'VariableDeclarator') {
+          const init = bindingNode.init;
+          if (init?.type === 'ObjectExpression') {
+            return init;
+          }
+          if (init?.type === 'Identifier') {
+            return resolveObjectExpression(init, binding.path.scope);
+          }
+        }
+
+        if (bindingNode?.type === 'ImportSpecifier' || bindingNode?.type === 'ImportDefaultSpecifier') {
+          const parent = binding.path.parentPath?.node;
+          if (parent?.type === 'ImportDeclaration') {
+            const importedName = bindingNode.type === 'ImportDefaultSpecifier'
+              ? 'default'
+              : bindingNode.imported?.name;
+            const importedNode = resolveImportedValue(parent.source.value, importedName, componentFilePath);
+            return resolveObjectExpression(importedNode, null);
+          }
+        }
+      }
+
+      return null;
+    };
+
+    const resolveStringValue = (node, scope) => {
+      if (!node) return null;
+      if (node.type === 'StringLiteral') return node.value;
+      if (node.type === 'TemplateLiteral' && node.expressions.length === 0) {
+        return node.quasis.map(q => q.value.cooked).join('');
+      }
+
+      if (node.type === 'Identifier' && scope) {
+        const binding = scope.getBinding(node.name);
+        const bindingNode = binding?.path?.node;
+        if (bindingNode?.type === 'VariableDeclarator') {
+          return resolveStringValue(bindingNode.init, binding.path.scope);
+        }
+
+        if (bindingNode?.type === 'ImportSpecifier' || bindingNode?.type === 'ImportDefaultSpecifier') {
+          const parent = binding.path.parentPath?.node;
+          if (parent?.type === 'ImportDeclaration') {
+            const importedName = bindingNode.type === 'ImportDefaultSpecifier'
+              ? 'default'
+              : bindingNode.imported?.name;
+            const importedNode = resolveImportedValue(parent.source.value, importedName, componentFilePath);
+            return resolveStringValue(importedNode, null);
+          }
+        }
+      }
+
+      if (node.type === 'MemberExpression' && scope) {
+        const objectNode = resolveObjectExpression(node.object, scope);
+        if (objectNode) {
+          const propName = node.property?.name || node.property?.value;
+          if (propName) {
+            const prop = objectNode.properties.find(p => p.key?.name === propName || p.key?.value === propName);
+            if (prop?.value) {
+              return resolveStringValue(prop.value, scope);
+            }
+          }
+        }
+      }
+
+      return null;
+    };
+
+    const resolveImportedValue = (importPath, importedName, fromFilePath) => {
+      if (!fromFilePath) return null;
+
+      const baseDir = path.dirname(fromFilePath);
+      const resolvedPath = resolveImportPath(importPath, baseDir);
+      if (!resolvedPath) {
+        console.warn(`⚠️  Cannot resolve import for MultiRoute routes: ${importPath}`);
+        return null;
+      }
+
+      const cacheKey = `${resolvedPath}:${importedName || 'default'}`;
+      if (!resolveImportedValue.cache) {
+        resolveImportedValue.cache = new Map();
+      }
+      if (resolveImportedValue.cache.has(cacheKey)) {
+        return resolveImportedValue.cache.get(cacheKey);
+      }
+
+      try {
+        const source = fs.readFileSync(resolvedPath, 'utf-8');
+        const importAst = parse(source, {
+          sourceType: 'module',
+          plugins: ['jsx']
+        });
+
+        const topLevelBindings = new Map();
+        for (const node of importAst.program.body) {
+          if (node.type === 'VariableDeclaration') {
+            node.declarations.forEach(decl => {
+              if (decl.id?.type === 'Identifier') {
+                topLevelBindings.set(decl.id.name, decl.init);
+              }
+            });
+          }
+        }
+
+        let exportNode = null;
+        for (const node of importAst.program.body) {
+          if (node.type === 'ExportDefaultDeclaration' && importedName === 'default') {
+            exportNode = node.declaration;
+            break;
+          }
+
+          if (node.type === 'ExportNamedDeclaration') {
+            if (node.declaration?.type === 'VariableDeclaration') {
+              for (const decl of node.declaration.declarations) {
+                if (decl.id?.name === importedName) {
+                  exportNode = decl.init;
+                  break;
+                }
+              }
+            }
+
+            if (!exportNode && node.specifiers?.length) {
+              const specifier = node.specifiers.find(s => s.exported?.name === importedName);
+              if (specifier && specifier.local?.name) {
+                exportNode = topLevelBindings.get(specifier.local.name) || null;
+              }
+            }
+          }
+
+          if (exportNode) break;
+        }
+
+        if (exportNode?.type === 'Identifier') {
+          exportNode = topLevelBindings.get(exportNode.name) || exportNode;
+        }
+
+        resolveImportedValue.cache.set(cacheKey, exportNode || null);
+        return exportNode || null;
+      } catch (error) {
+        console.warn(`⚠️  Error resolving import ${importPath}: ${error.message}`);
+        resolveImportedValue.cache.set(cacheKey, null);
+        return null;
+      }
+    };
+
+    const resolveImportPath = (importPath, baseDir) => {
+      if (!importPath.startsWith('.')) return null;
+
+      const resolvedBase = path.resolve(baseDir, importPath);
+      const extensions = ['.js', '.mjs', '.cjs', '.json'];
+
+      if (fs.existsSync(resolvedBase) && fs.statSync(resolvedBase).isFile()) {
+        return resolvedBase;
+      }
+
+      if (!path.extname(resolvedBase)) {
+        for (const ext of extensions) {
+          const candidate = resolvedBase + ext;
+          if (fs.existsSync(candidate)) {
+            return candidate;
+          }
+        }
+      }
+
+      return null;
+    };
+
+    const addMultiRouteDependencies = (routesArrayNode, scope) => {
+      if (!routesArrayNode || routesArrayNode.type !== 'ArrayExpression') return;
+
+      routesArrayNode.elements.forEach(routeElement => {
+        if (!routeElement) return;
+
+        if (routeElement.type === 'SpreadElement') {
+          const spreadArray = resolveRoutesArray(routeElement.argument, scope);
+          addMultiRouteDependencies(spreadArray, scope);
+          return;
+        }
+
+        const routeObject = resolveObjectExpression(routeElement, scope) || routeElement;
+        if (routeObject?.type === 'ObjectExpression') {
+          const componentProp = routeObject.properties.find(p => p.key?.name === 'component');
+          if (componentProp?.value) {
+            const componentName = resolveStringValue(componentProp.value, scope);
+            if (componentName) {
+              dependencies.add(componentName);
+            }
+          }
+        }
+      });
+    };
+
     try {
       const ast = parse(code, {
         sourceType: 'module',
@@ -168,15 +432,9 @@ export default class DependencyAnalyzer {
 
             // 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);
-                  }
-                }
-              });
+            if (routesProp) {
+              const routesArrayNode = resolveRoutesArray(routesProp.value, path.scope);
+              addMultiRouteDependencies(routesArrayNode);
             }
           }
           // Regular slice.build() calls
@@ -418,4 +676,4 @@ export default class DependencyAnalyzer {
       console.log(`  ${i + 1}. ${comp.name} - ${comp.routes} routes - ${(comp.size / 1024).toFixed(1)} KB`);
     });
   }
-}
+}

package/commands/utils/updateManager.js

@@ -95,7 +95,7 @@ class UpdateManager {
         }
 
         console.log('');
-        Print.warning('📦 Available Updates:');
+        Print.warning('📦 Available Updates:');
         console.log('');
 
         updateInfo.updates.forEach(pkg => {
@@ -145,17 +145,17 @@ class UpdateManager {
         const answers = await inquirer.prompt([
             {
                 type: 'checkbox',
-                name: 'packages',
-                message: 'Which packages do you want to update?',
-                choices,
-                validate: (answer) => {
-                    if (answer.length === 0) {
-                        return 'You must select at least one package';
-                    }
-                    return true;
-                }
-            }
-        ]);
+                name: 'packages',
+                message: 'Which packages do you want to update?',
+                choices,
+                validate: (answer) => {
+                    if (answer.length === 0) {
+                        return 'You must select at least one package';
+                    }
+                    return true;
+                }
+            }
+        ]);
 
         return answers.packages;
     }
@@ -229,25 +229,25 @@ class UpdateManager {
         const results = [];
 
         for (const packageName of packages) {
-            const spinner = ora(`Updating ${packageName}...`).start();
+            const spinner = ora(`Updating ${packageName}...`).start();
 
             try {
                 const result = await this.updatePackage(packageName);
 
-                if (result.success) {
-                    spinner.succeed(`${packageName} updated successfully`);
-                    results.push({ packageName, success: true });
-                } else {
-                    spinner.fail(`Error updating ${packageName}`);
-                    Print.error(`Details: ${result.error}`);
-                    results.push({ packageName, success: false, error: result.error });
-                }
-            } catch (error) {
-                spinner.fail(`Error updating ${packageName}`);
-                Print.error(`Details: ${error.message}`);
-                results.push({ packageName, success: false, error: error.message });
-            }
-        }
+                if (result.success) {
+                    spinner.succeed(`${packageName} updated successfully`);
+                    results.push({ packageName, success: true });
+                } else {
+                    spinner.fail(`Error updating ${packageName}`);
+                    Print.error(`Details: ${result.error}`);
+                    results.push({ packageName, success: false, error: result.error });
+                }
+            } catch (error) {
+                spinner.fail(`Error updating ${packageName}`);
+                Print.error(`Details: ${error.message}`);
+                results.push({ packageName, success: false, error: error.message });
+            }
+        }
 
         return results;
     }
@@ -256,26 +256,26 @@ class UpdateManager {
      * Main method to check and prompt for updates
      */
     async checkAndPromptUpdates(options = {}) {
-        const spinner = ora('Checking for updates...').start();
+        const spinner = ora('Checking for updates...').start();
 
         try {
             const updateInfo = await this.checkForUpdates();
             spinner.stop();
 
-            if (!updateInfo) {
-                Print.error('Could not check for updates. Verify your internet connection.');
-                return false;
-            }
+            if (!updateInfo) {
+                Print.error('Could not check for updates. Verify your internet connection.');
+                return false;
+            }
 
-            if (updateInfo.allCurrent) {
-                Print.success('✅ All components are up to date!');
-                return true;
-            }
+            if (updateInfo.allCurrent) {
+                Print.success('✅ All components are up to date!');
+                return true;
+            }
 
-            if (!updateInfo.hasUpdates) {
-                Print.success('✅ All components are up to date!');
-                return true;
-            }
+            if (!updateInfo.hasUpdates) {
+                Print.success('✅ All components are up to date!');
+                return true;
+            }
 
             // Display available updates
             this.displayUpdates(updateInfo);
@@ -283,20 +283,20 @@ class UpdateManager {
         // Get packages to update
         const packagesToUpdate = await this.promptForUpdates(updateInfo, options);
 
-            if (!packagesToUpdate || packagesToUpdate.length === 0) {
-                Print.info('No packages selected for update.');
-                return false;
-            }
+            if (!packagesToUpdate || packagesToUpdate.length === 0) {
+                Print.info('No packages selected for update.');
+                return false;
+            }
 
         // Show plan and confirm installation if not auto-confirmed
         let plan = await this.buildUpdatePlan(packagesToUpdate);
         console.log('');
-        Print.info('🧭 Update plan:');
-        plan.forEach(item => {
-            const where = item.target === 'global' ? 'GLOBAL' : 'PROJECT';
-            console.log(`   • ${item.package} → ${where}`);
-            console.log(`     ${item.command}`);
-        });
+        Print.info('🧭 Update plan:');
+        plan.forEach(item => {
+            const where = item.target === 'global' ? 'GLOBAL' : 'PROJECT';
+            console.log(`   • ${item.package} → ${where}`);
+            console.log(`     ${item.command}`);
+        });
         console.log('');
 
         const cliInfo = await this.detectCliInstall();
@@ -306,47 +306,47 @@ class UpdateManager {
                     {
                         type: 'confirm',
                         name: 'addCli',
-                    message: 'Global CLI detected. Add the global CLI update to the plan?',
-                    default: true
-                }
-            ]);
+                    message: 'Global CLI detected. Add the global CLI update to the plan?',
+                    default: true
+                }
+            ]);
                 if (addCli) {
                     packagesToUpdate.push('slicejs-cli');
                     plan = await this.buildUpdatePlan(packagesToUpdate);
                     console.log('');
-                    Print.info('🧭 Updated plan:');
-                    plan.forEach(item => {
-                        const where = item.target === 'global' ? 'GLOBAL' : 'PROJECT';
-                        console.log(`   • ${item.package} → ${where}`);
-                        console.log(`     ${item.command}`);
-                    });
+                    Print.info('🧭 Updated plan:');
+                    plan.forEach(item => {
+                        const where = item.target === 'global' ? 'GLOBAL' : 'PROJECT';
+                        console.log(`   • ${item.package} → ${where}`);
+                        console.log(`     ${item.command}`);
+                    });
                     console.log('');
                 }
             } else {
-                Print.warning('Global CLI detected. It is recommended to update slicejs-cli globally to keep aligned with the framework.');
-                console.log('   Suggestion: npm install -g slicejs-cli@latest');
-                console.log('');
-            }
-        }
+                Print.warning('Global CLI detected. It is recommended to update slicejs-cli globally to keep aligned with the framework.');
+                console.log('   Suggestion: npm install -g slicejs-cli@latest');
+                console.log('');
+            }
+        }
 
         if (!options.yes && !options.cli && !options.framework) {
             const { confirm } = await inquirer.prompt([
-                {
-                    type: 'confirm',
-                    name: 'confirm',
-                    message: 'Do you want to proceed with the update according to the plan shown?',
-                    default: true
-                }
-            ]);
+                {
+                    type: 'confirm',
+                    name: 'confirm',
+                    message: 'Do you want to proceed with the update according to the plan shown?',
+                    default: true
+                }
+            ]);
 
                 if (!confirm) {
-                    Print.info('Update cancelled.');
-                    return false;
-                }
-            }
+                    Print.info('Update cancelled.');
+                    return false;
+                }
+            }
 
             console.log(''); // Line break
-            Print.info('📥 Installing updates...');
+            Print.info('📥 Installing updates...');
             console.log('');
 
             // Install updates
@@ -357,24 +357,24 @@ class UpdateManager {
             const successCount = results.filter(r => r.success).length;
             const failCount = results.filter(r => !r.success).length;
 
-            if (failCount === 0) {
-                Print.success(`✅ ${successCount} package(s) updated successfully!`);
-            } else {
-                Print.warning(`⚠️  ${successCount} successful, ${failCount} failed`);
-            }
+            if (failCount === 0) {
+                Print.success(`✅ ${successCount} package(s) updated successfully!`);
+            } else {
+                Print.warning(`⚠️  ${successCount} successful, ${failCount} failed`);
+            }
 
             if (successCount > 0) {
                 console.log('');
-                Print.info('💡 It is recommended to restart the development server if it is running.');
-            }
+                Print.info('💡 It is recommended to restart the development server if it is running.');
+            }
 
             return failCount === 0;
 
         } catch (error) {
             spinner.stop();
-            Print.error(`Error during update: ${error.message}`);
-            return false;
-        }
+            Print.error(`Error during update: ${error.message}`);
+            return false;
+        }
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.7.9",
+  "version": "2.8.1",
   "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);