slicejs-cli 2.7.9 → 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

@@ -524,7 +524,7 @@ export default class BundleGenerator {
         name: comp.name,
         category: comp.category,
         categoryType: comp.categoryType,
-        js: this.cleanJavaScript(jsContent, comp.name),
+        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,
@@ -547,29 +547,134 @@ export default class BundleGenerator {
   }
 
   /**
-   * Cleans JavaScript code by removing imports/exports and ensuring class is available globally
+   * Cleans JavaScript code by processing imports and ensuring class is available globally
    */
-  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$&`);
+  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 {
-      // If no customElements.define found, just assign to global
-      code += `\nwindow.${componentName} = ${componentName};`;
+      newCode += `\nwindow.${componentName} = ${componentName};`;
     }
 
-    // Add return statement for bundle evaluation compatibility
-    code += `\nreturn ${componentName};`;
+    // 5. Add return statement for bundle evaluation compatibility
+    newCode += `\nreturn ${componentName};`;
 
-    return code;
+    return newCode;
   }
 
   /**

package/package.json

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