slicejs-cli 2.3.2 → 2.5.0

package/commands/startServer/startServer.js

@@ -1,9 +1,11 @@
-// commands/startServer/startServer.js - CON ARGUMENTOS
+// commands/startServer/startServer.js - MEJORADO CON VALIDACIÓN Y FEEDBACK
 
 import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { spawn } from 'child_process';
+import { createServer } from 'net';
+import setupWatcher, { stopWatcher } from './watchServer.js';
 import Print from '../Print.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -22,6 +24,30 @@ const loadConfig = () => {
   }
 };
 
+/**
+ * Verifica si un puerto está disponible
+ */
+async function isPortAvailable(port) {
+  return new Promise((resolve) => {
+    const server = createServer();
+
+    server.once('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        resolve(false);
+      } else {
+        resolve(false);
+      }
+    });
+
+    server.once('listening', () => {
+      server.close();
+      resolve(true);
+    });
+
+    server.listen(port);
+  });
+}
+
 /**
  * Verifica si existe un build de producción
  */
@@ -36,19 +62,25 @@ async function checkProductionBuild() {
 async function checkDevelopmentStructure() {
   const srcDir = path.join(__dirname, '../../../../src');
   const apiDir = path.join(__dirname, '../../../../api');
-  
+
   return (await fs.pathExists(srcDir)) && (await fs.pathExists(apiDir));
 }
 
 /**
- * Inicia el servidor Node.js con argumentos
+ * Inicia el servidor Node.js con argumentos y mejor feedback
  */
 function startNodeServer(port, mode) {
   return new Promise((resolve, reject) => {
     const apiIndexPath = path.join(__dirname, '../../../../api/index.js');
-    
-    Print.info(`Starting ${mode} server on port ${port}...`);
-    
+
+    // Verificar que el archivo existe
+    if (!fs.existsSync(apiIndexPath)) {
+      reject(new Error(`Server file not found: ${apiIndexPath}`));
+      return;
+    }
+
+    Print.serverStatus('starting', 'Starting server...');
+
     // Construir argumentos basados en el modo
     const args = [apiIndexPath];
     if (mode === 'production') {
@@ -56,35 +88,78 @@ function startNodeServer(port, mode) {
     } else {
       args.push('--development');
     }
-    
+
     const serverProcess = spawn('node', args, {
-      stdio: 'inherit',
+      stdio: ['inherit', 'pipe', 'pipe'],
       env: {
         ...process.env,
         PORT: port
-        // Ya no necesitamos NODE_ENV ni SLICE_CLI_MODE
       }
     });
 
+    let serverStarted = false;
+    let outputBuffer = '';
+
+    // Capturar la salida para detectar cuando el servidor está listo
+    serverProcess.stdout.on('data', (data) => {
+      const output = data.toString();
+      outputBuffer += output;
+
+      // Detectar mensajes comunes que indican que el servidor ha iniciado
+      if (!serverStarted && (
+        output.includes('Server running') ||
+        output.includes('listening on') ||
+        output.includes('Started on') ||
+        output.includes(`port ${port}`)
+      )) {
+        serverStarted = true;
+        Print.serverReady(port);
+      }
+
+      // Mostrar la salida del servidor
+      process.stdout.write(output);
+    });
+
+    serverProcess.stderr.on('data', (data) => {
+      const output = data.toString();
+      process.stderr.write(output);
+    });
+
     serverProcess.on('error', (error) => {
-      Print.error(`Failed to start server: ${error.message}`);
-      reject(error);
+      if (!serverStarted) {
+        Print.serverStatus('error', `Failed to start server: ${error.message}`);
+        reject(error);
+      }
+    });
+
+    serverProcess.on('exit', (code, signal) => {
+      if (code !== null && code !== 0 && !serverStarted) {
+        reject(new Error(`Server exited with code ${code}`));
+      }
     });
 
     // Manejar Ctrl+C
     process.on('SIGINT', () => {
+      Print.newLine();
       Print.info('Shutting down server...');
       serverProcess.kill('SIGINT');
-      process.exit(0);
+      setTimeout(() => {
+        process.exit(0);
+      }, 100);
     });
 
     process.on('SIGTERM', () => {
       serverProcess.kill('SIGTERM');
     });
 
+    // Si después de 3 segundos no detectamos inicio, asumimos que está listo
     setTimeout(() => {
+      if (!serverStarted) {
+        serverStarted = true;
+        Print.serverReady(port);
+      }
       resolve(serverProcess);
-    }, 500);
+    }, 3000);
   });
 }
 
@@ -94,18 +169,33 @@ function startNodeServer(port, mode) {
 export default async function startServer(options = {}) {
   const config = loadConfig();
   const defaultPort = config?.server?.port || 3000;
-  
-  const { mode = 'development', port = defaultPort } = options;
-  
+
+  const { mode = 'development', port = defaultPort, watch = false } = options;
+
   try {
     Print.title(`🚀 Starting Slice.js ${mode} server...`);
     Print.newLine();
-    
+
     // Verificar estructura del proyecto
     if (!await checkDevelopmentStructure()) {
       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' : 'start'} -p <port>`
+      );
+    }
+
+    Print.serverStatus('checking', 'Port available ✓');
+    Print.newLine();
+
     if (mode === 'production') {
       // Verificar que existe build de producción
       if (!await checkProductionBuild()) {
@@ -115,12 +205,29 @@ export default async function startServer(options = {}) {
     } else {
       Print.info('Development mode: serving files from /src with hot reload');
     }
-    
+
+    Print.newLine();
+
     // Iniciar el servidor con argumentos
-    await startNodeServer(port, mode);
-    
+    const serverProcess = await startNodeServer(port, mode);
+
+    // Configurar watch mode si está habilitado
+    if (watch) {
+      Print.newLine();
+      const watcher = setupWatcher(serverProcess);
+
+      // Cleanup en exit
+      const cleanup = () => {
+        stopWatcher(watcher);
+      };
+
+      process.on('SIGINT', cleanup);
+      process.on('SIGTERM', cleanup);
+    }
+
   } catch (error) {
-    Print.error(`Failed to start server: ${error.message}`);
+    Print.newLine();
+    Print.error(error.message);
     throw error;
   }
 }
@@ -128,4 +235,4 @@ export default async function startServer(options = {}) {
 /**
  * Funciones de utilidad exportadas
  */
-export { checkProductionBuild, checkDevelopmentStructure };
+export { checkProductionBuild, checkDevelopmentStructure, isPortAvailable };

package/commands/startServer/watchServer.js

@@ -0,0 +1,67 @@
+import chokidar from 'chokidar';
+import chalk from 'chalk';
+import Print from '../Print.js';
+
+/**
+ * Configura el watcher para archivos del proyecto
+ * @param {ChildProcess} serverProcess - Proceso del servidor
+ * @returns {FSWatcher} - Watcher de chokidar
+ */
+export default function setupWatcher(serverProcess) {
+    Print.info('Watch mode enabled - monitoring file changes...');
+    Print.newLine();
+
+    const watcher = chokidar.watch(['src/**/*', 'api/**/*'], {
+        ignored: [
+            /(^|[\/\\])\../,  // archivos ocultos
+            '**/node_modules/**',
+            '**/dist/**',
+            '**/*.log'
+        ],
+        persistent: true,
+        ignoreInitial: true,
+        awaitWriteFinish: {
+            stabilityThreshold: 100,
+            pollInterval: 50
+        }
+    });
+
+    let reloadTimeout;
+
+    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);
+        })
+        .on('add', (path) => {
+            console.log(chalk.green(`➕ New file added: ${path}`));
+        })
+        .on('unlink', (path) => {
+            console.log(chalk.red(`➖ File removed: ${path}`));
+        })
+        .on('error', (error) => {
+            Print.error(`Watcher error: ${error.message}`);
+        })
+        .on('ready', () => {
+            console.log(chalk.gray('👀 Watching for file changes...'));
+            Print.newLine();
+        });
+
+    return watcher;
+}
+
+/**
+ * Detiene el watcher de forma segura
+ * @param {FSWatcher} watcher - Watcher a detener
+ */
+export function stopWatcher(watcher) {
+    if (watcher) {
+        watcher.close();
+        console.log(chalk.gray('Watch mode stopped'));
+    }
+}

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "slicejs-cli",
-  "version": "2.3.2",
+  "version": "2.5.0",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
+  "bin": {
+    "slice": "./client.js"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "postinstall": "node post.js"
@@ -11,17 +14,25 @@
     "framework",
     "web",
     "client",
-    "cli"
+    "cli",
+    "slice",
+    "slicejs",
+    "component",
+    "development server"
   ],
   "author": "vkneider",
   "type": "module",
   "license": "ISC",
   "dependencies": {
+    "chalk": "^5.6.2",
+    "chokidar": "^3.6.0",
     "clean-css": "^5.3.3",
+    "cli-table3": "^0.6.5",
     "commander": "^12.0.0",
     "fs-extra": "^11.2.0",
     "html-minifier-terser": "^7.2.0",
     "inquirer": "^12.4.2",
+    "ora": "^8.2.0",
     "slicejs-web-framework": "latest",
     "terser": "^5.43.1"
   }

package/post.js

@@ -21,64 +21,63 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
 
         // Add custom commands to the project scripts
         projectPackageJson.scripts = projectPackageJson.scripts || {};
-        
-        // Main project commands - SOLO DEVELOPMENT
-        projectPackageJson.scripts['slice:init'] = 'node node_modules/slicejs-cli/client.js init';
-        projectPackageJson.scripts['slice:dev'] = 'node api/index.js --development';
-        projectPackageJson.scripts['slice:start'] = 'node api/index.js --development';
-        projectPackageJson.scripts['slice:version'] = 'node node_modules/slicejs-cli/client.js version';
-        projectPackageJson.scripts['slice:update'] = 'node node_modules/slicejs-cli/client.js update';
-        
-        // Local component commands
-        projectPackageJson.scripts['slice:create'] = 'node node_modules/slicejs-cli/client.js component create';
-        projectPackageJson.scripts['slice:list'] = 'node node_modules/slicejs-cli/client.js component list';
-        projectPackageJson.scripts['slice:delete'] = 'node node_modules/slicejs-cli/client.js component delete';
-      
+
+        // Main project commands - using 'slice' directly
+        projectPackageJson.scripts['dev'] = 'slice dev';
+        projectPackageJson.scripts['start'] = 'slice start';
+
+        // Component management
+        projectPackageJson.scripts['component:create'] = 'slice component create';
+        projectPackageJson.scripts['component:list'] = 'slice component list';
+        projectPackageJson.scripts['component:delete'] = 'slice component delete';
+
         // Main repository commands (most used shortcuts)
-        projectPackageJson.scripts['slice:get'] = 'node node_modules/slicejs-cli/client.js get';
-        projectPackageJson.scripts['slice:browse'] = 'node node_modules/slicejs-cli/client.js browse';
-        projectPackageJson.scripts['slice:sync'] = 'node node_modules/slicejs-cli/client.js sync';
-        
-        // Detailed registry commands (for advanced users)
-        projectPackageJson.scripts['slice:registry-get'] = 'node node_modules/slicejs-cli/client.js registry get';
-        projectPackageJson.scripts['slice:registry-list'] = 'node node_modules/slicejs-cli/client.js registry list';
-        projectPackageJson.scripts['slice:registry-sync'] = 'node node_modules/slicejs-cli/client.js registry sync';
-        
-        // Legacy commands - SOLO DEVELOPMENT
-        projectPackageJson.scripts['run'] = 'node api/index.js --development';
-        projectPackageJson.scripts['development'] = 'node api/index.js --development';
+        projectPackageJson.scripts['get'] = 'slice get';
+        projectPackageJson.scripts['browse'] = 'slice browse';
+        projectPackageJson.scripts['sync'] = 'slice sync';
+
+        // Utility commands
+        projectPackageJson.scripts['slice:version'] = 'slice version';
+        projectPackageJson.scripts['slice:update'] = 'slice update';
+
+        // Legacy commands - mantener por compatibilidad temporal
+        projectPackageJson.scripts['slice:init'] = 'slice init';
+        projectPackageJson.scripts['slice:start'] = 'slice start';
+        projectPackageJson.scripts['slice:dev'] = 'slice dev';
+        projectPackageJson.scripts['slice:create'] = 'slice component create';
+        projectPackageJson.scripts['slice:list'] = 'slice component list';
+        projectPackageJson.scripts['slice:delete'] = 'slice component delete';
+        projectPackageJson.scripts['slice:get'] = 'slice get';
+        projectPackageJson.scripts['slice:browse'] = 'slice browse';
+        projectPackageJson.scripts['slice:sync'] = 'slice sync';
+        projectPackageJson.scripts['run'] = 'slice dev';
 
         // Module configuration
         projectPackageJson.type = 'module';
         projectPackageJson.engines = {
             "node": ">=20.0.0"
         };
-        
+
         // Write the new content to package.json
         return fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(projectPackageJson, null, 2), 'utf8');
     })
     .then(() => {
-        console.log('✅ SliceJS CLI commands added to package.json');
-        console.log('\n🚀 Main workflow commands:');
-        console.log('  npm run slice:init         - Initialize Slice.js project');
-        console.log('  npm run slice:dev          - Start development server (serves from /src)');
-        console.log('  npm run slice:start        - Start development server (same as dev)');
-        console.log('\n📦 Component management:');
-        console.log('  npm run slice:get Button   - Get components from official repository');
-        console.log('  npm run slice:browse       - View all available components');
-        console.log('  npm run slice:sync         - Update local components to latest versions');
-        console.log('\n⚙️  Local component management:');
-        console.log('  npm run slice:create       - Create local component');
-        console.log('  npm run slice:list         - List local components');
-        console.log('  npm run slice:delete       - Delete local component');
-        console.log('\n🔧 Other utilities:');
-        console.log('  npm run slice:version      - View version information');
-        console.log('  npm run slice:update       - Check for available updates');
-        console.log('\n🎯 Simplified workflow:');
-        console.log('  1. npm run slice:init      - Initialize project');
-        console.log('  2. npm run slice:dev       - Start development server');
-        console.log('  3. Develop and iterate     - No build step needed!');
-        console.log('\n💡 Development-focused: All commands serve from /src for instant changes');
+        console.log('✅ SliceJS CLI configured successfully');
+        console.log('\n🎯 New recommended commands:');
+        console.log('  slice dev              - Start development server');
+        console.log('  slice get Button       - Get components from repository');
+        console.log('  slice browse           - View available components');
+        console.log('  slice component create - Create local component');
+        console.log('\n📦 Available npm scripts:');
+        console.log('  npm run dev            - Start development server');
+        console.log('  npm run get            - Install components');
+        console.log('  npm run browse         - Browse components');
+        console.log('\n⚠️  Legacy commands (deprecated but still work):');
+        console.log('  npm run slice:dev      - Use "slice dev" instead');
+        console.log('  npm run slice:get      - Use "slice get" instead');
+        console.log('\n💡 You can also use npx:');
+        console.log('  npx slicejs-cli dev');
+        console.log('\n📘 Documentation: https://slice-js-docs.vercel.app/');
     })
     .catch(err => {
         if (err.code === 'ENOENT') {
@@ -89,33 +88,42 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
                 description: 'Slice.js project',
                 main: 'api/index.js',
                 scripts: {
-                    // Main workflow commands - SOLO DEVELOPMENT
-                    'slice:init': 'node node_modules/slicejs-cli/client.js init',
-                    'slice:dev': 'node api/index.js --development',
-                    'slice:start': 'node api/index.js --development',
-                    'slice:version': 'node node_modules/slicejs-cli/client.js version',
-                    'slice:update': 'node node_modules/slicejs-cli/client.js update',
-                    
-                    // Local component commands
-                    'slice:create': 'node node_modules/slicejs-cli/client.js component create',
-                    'slice:list': 'node node_modules/slicejs-cli/client.js component list',
-                    'slice:delete': 'node node_modules/slicejs-cli/client.js component delete',
-                    
+                    // Main workflow commands
+                    'dev': 'slice dev',
+                    'start': 'slice start',
+
+                    // Component management
+                    'component:create': 'slice component create',
+                    'component:list': 'slice component list',
+                    'component:delete': 'slice component delete',
+
                     // Repository commands
-                    'slice:get': 'node node_modules/slicejs-cli/client.js get',
-                    'slice:browse': 'node node_modules/slicejs-cli/client.js browse',
-                    'slice:sync': 'node node_modules/slicejs-cli/client.js sync',
-                    
-                    // Legacy commands - SOLO DEVELOPMENT
-                    'run': 'node api/index.js --development',
-                    'development': 'node api/index.js --development'
+                    'get': 'slice get',
+                    'browse': 'slice browse',
+                    'sync': 'slice sync',
+
+                    // Utility
+                    'slice:version': 'slice version',
+                    'slice:update': 'slice update',
+
+                    // Legacy commands (for compatibility)
+                    'slice:init': 'slice init',
+                    'slice:start': 'slice start',
+                    'slice:dev': 'slice dev',
+                    'slice:create': 'slice component create',
+                    'slice:list': 'slice component list',
+                    'slice:delete': 'slice component delete',
+                    'slice:get': 'slice get',
+                    'slice:browse': 'slice browse',
+                    'slice:sync': 'slice sync',
+                    'run': 'slice dev'
                 },
                 type: 'module',
                 engines: {
                     "node": ">=20.0.0"
                 }
             };
-            
+
             return fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(defaultPackageJson, null, 2), 'utf8');
         } else {
             throw err;
@@ -124,13 +132,13 @@ fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
     .then(() => {
         console.log('✅ SliceJS CLI commands configured successfully');
         console.log('\n🎯 Simplified development workflow:');
-        console.log('  npm run slice:dev    → node api/index.js --development (serves /src)');
-        console.log('  npm run slice:start  → node api/index.js --development (same as dev)');
+        console.log('  slice dev        → Start development server');
+        console.log('  slice get Button → Install components');
+        console.log('  slice browse     → View available components');
         console.log('\n🔧 Benefits:');
-        console.log('  • Simple development-only workflow');
-        console.log('  • Instant changes without build steps');
-        console.log('  • Always serves from /src directory');
-        console.log('  • Interactive menu always available');
+        console.log('  • Simple and direct commands');
+        console.log('  • Can be used globally or with npx');
+        console.log('  • Legacy npm scripts still work for compatibility');
     })
     .catch(err => {
         console.error('❌ Error setting up package.json:', err.message);