slicejs-cli 2.3.3 → 2.5.0

package/README.md

@@ -0,0 +1,280 @@
+# Slice.js CLI
+
+Command-line interface for developing web applications with the Slice.js framework.
+
+## Installation
+
+### Local Installation (Recommended)
+
+```bash
+npm install slicejs-cli --save-dev
+```
+
+### Global Installation
+
+```bash
+npm install -g slicejs-cli
+```
+
+## Usage
+
+After installation, you can use the `slice` command directly:
+
+```bash
+slice [command] [options]
+```
+
+Or with npx (no installation required):
+
+```bash
+npx slicejs-cli [command]
+```
+
+## Commands
+
+### Project Initialization
+
+```bash
+slice init
+```
+
+Initializes a new Slice.js project with the complete framework structure.
+
+### Development Server
+
+```bash
+# Start development server on default port (3000)
+slice dev
+
+# Start on custom port
+slice dev -p 8080
+
+# Alternative command (same as dev)
+slice start
+slice start -p 8080
+```
+
+### Component Management (Local)
+
+```bash
+# Create a new component (interactive)
+slice component create
+
+# List all local components
+slice component list
+
+# Delete a component (interactive)
+slice component delete
+```
+
+**Shortcuts:**
+```bash
+slice component create → slice comp create
+slice component list   → slice comp ls
+slice component delete → slice comp remove
+```
+
+### Component Registry (Official Repository)
+
+```bash
+# Install components from official repository
+slice get Button Card Input
+
+# Install service component
+slice get FetchManager --service
+
+# Force overwrite existing components
+slice get Button --force
+
+# Browse available components
+slice browse
+
+# Update all local components to latest versions
+slice sync
+
+# Force update without confirmation
+slice sync --force
+```
+
+**Shortcuts:**
+```bash
+slice registry get Button → slice get Button
+slice registry list       → slice browse
+slice registry sync       → slice sync
+```
+
+### Utilities
+
+```bash
+# Show version information
+slice version
+slice -v
+
+# Check for available updates
+slice update
+
+# Show help
+slice --help
+slice [command] --help
+```
+
+## NPM Scripts
+
+When you install `slicejs-cli`, the following scripts are automatically added to your project's `package.json`:
+
+### Recommended (New)
+
+```json
+{
+  "scripts": {
+    "dev": "slice dev",
+    "start": "slice start",
+    "get": "slice get",
+    "browse": "slice browse",
+    "sync": "slice sync",
+    "component:create": "slice component create",
+    "component:list": "slice component list",
+    "component:delete": "slice component delete"
+  }
+}
+```
+
+Usage:
+```bash
+npm run dev
+npm run get
+npm run browse
+```
+
+### Legacy (Still Supported)
+
+```json
+{
+  "scripts": {
+    "slice:dev": "slice dev",
+    "slice:start": "slice start",
+    "slice:get": "slice get"
+  }
+}
+```
+
+## Quick Start
+
+```bash
+# 1. Create a new project directory
+mkdir my-slice-project
+cd my-slice-project
+
+# 2. Initialize npm and install Slice CLI
+npm init -y
+npm install slicejs-cli --save-dev
+
+# 3. Initialize Slice.js project
+slice init
+
+# 4. Start development server
+slice dev
+
+# 5. Open browser at http://localhost:3000
+```
+
+## Common Workflows
+
+### Starting a New Project
+
+```bash
+slice init
+slice dev
+```
+
+### Adding Components
+
+```bash
+# Browse available components
+slice browse
+
+# Install specific components
+slice get Button Card Input
+
+# Create custom component
+slice component create
+```
+
+### Keeping Components Updated
+
+```bash
+# Check what needs updating
+slice browse
+
+# Update all components
+slice sync
+```
+
+## Development Mode
+
+The development server (`slice dev` or `slice start`) provides:
+
+- ✅ Hot reload for instant changes
+- ✅ Serves files directly from `/src`
+- ✅ No build step required
+- ✅ Port validation
+- ✅ Clear error messages
+
+## Requirements
+
+- Node.js >= 20.0.0
+- npm or yarn
+
+## Configuration
+
+Project configuration is stored in `src/sliceConfig.json`, created automatically during `slice init`.
+
+## Features
+
+- 🚀 Fast development server with hot reload
+- 📦 Component registry for sharing components
+- 🎨 Visual and Service component types
+- ✨ Interactive component creation
+- 🔄 Automatic component synchronization
+- 🛠️ Built-in validation and error handling
+- 📝 Clear, actionable error messages
+
+## Troubleshooting
+
+### Port Already in Use
+
+```bash
+# Use a different port
+slice dev -p 8080
+```
+
+### Project Not Initialized
+
+```bash
+# Make sure to run init first
+slice init
+```
+
+### Command Not Found
+
+```bash
+# Use npx if not installed globally
+npx slicejs-cli dev
+
+# Or install globally
+npm install -g slicejs-cli
+```
+
+## Links
+
+- 📘 Documentation: https://slice-js-docs.vercel.app/
+- 🐙 GitHub: https://github.com/VKneider/slice-cli
+- 📦 npm: https://www.npmjs.com/package/slicejs-cli
+
+## License
+
+ISC
+
+## Author
+
+vkneider

package/client.js

@@ -7,6 +7,7 @@ import listComponents from "./commands/listComponents/listComponents.js";
 import deleteComponent from "./commands/deleteComponent/deleteComponent.js";
 import getComponent, { listComponents as listRemoteComponents, syncComponents } from "./commands/getComponent/getComponent.js";
 import startServer from "./commands/startServer/startServer.js";
+import runDiagnostics from "./commands/doctor/doctor.js";
 import versionChecker from "./commands/utils/versionChecker.js";
 import fs from "fs";
 import path from "path";
@@ -37,12 +38,12 @@ async function runWithVersionCheck(commandFunction, ...args) {
   try {
     // Run the command first
     const result = await commandFunction(...args);
-    
+
     // Then check for updates (non-blocking)
     setTimeout(() => {
       versionChecker.checkForUpdates(false);
     }, 100);
-    
+
     return result;
   } catch (error) {
     Print.error(`Command execution: ${error.message}`);
@@ -52,7 +53,7 @@ async function runWithVersionCheck(commandFunction, ...args) {
 
 const sliceClient = program;
 
-sliceClient.version("2.2.6").description("CLI for managing Slice.js framework components");
+sliceClient.version("2.5.0").description("CLI for managing Slice.js framework components");
 
 // INIT COMMAND
 sliceClient
@@ -79,11 +80,13 @@ sliceClient
   .command("dev")
   .description("Start development server")
   .option("-p, --port <port>", "Port for development server", 3000)
+  .option("-w, --watch", "Enable watch mode for file changes")
   .action(async (options) => {
     await runWithVersionCheck(async () => {
       await startServer({
         mode: 'development',
-        port: parseInt(options.port)
+        port: parseInt(options.port),
+        watch: options.watch
       });
     });
   });
@@ -93,12 +96,13 @@ sliceClient
   .command("start")
   .description("Start development server (alias for dev)")
   .option("-p, --port <port>", "Port for server", 3000)
+  .option("-w, --watch", "Enable watch mode for file changes")
   .action(async (options) => {
     await runWithVersionCheck(async () => {
-      Print.info("Starting development server...");
       await startServer({
         mode: 'development',
-        port: parseInt(options.port)
+        port: parseInt(options.port),
+        watch: options.watch
       });
     });
   });
@@ -141,7 +145,7 @@ componentCommand
           choices: categories,
         }
       ]);
-      
+
       const result = createComponent(answers.componentName, answers.category);
       if (result) {
         Print.success(`Component '${answers.componentName}' created successfully in category '${answers.category}'`);
@@ -197,7 +201,7 @@ componentCommand
 
         const categoryPath = config.paths.components[categoryAnswer.category].path;
         const fullPath = path.join(__dirname, "../../src", categoryPath);
-        
+
         if (!fs.existsSync(fullPath)) {
           Print.error(`Category path does not exist: ${categoryPath}`);
           return;
@@ -303,7 +307,7 @@ sliceClient
         Print.commandExample("Browse components", "slice browse");
         return;
       }
-      
+
       await getComponent(components, {
         force: options.force,
         service: options.service
@@ -339,10 +343,10 @@ sliceClient
   .description("Check for and show available updates for CLI and framework")
   .action(async () => {
     Print.info("Checking for updates...");
-    
+
     try {
       const updateInfo = await versionChecker.checkForUpdates(false);
-      
+
       if (updateInfo) {
         if (updateInfo.cli.status === 'current' && updateInfo.framework.status === 'current') {
           Print.success("All components are up to date!");
@@ -357,6 +361,17 @@ sliceClient
     }
   });
 
+// DOCTOR COMMAND - Diagnose project issues
+sliceClient
+  .command("doctor")
+  .alias("diagnose")
+  .description("Run diagnostics to check project health")
+  .action(async () => {
+    await runWithVersionCheck(async () => {
+      await runDiagnostics();
+    });
+  });
+
 // Enhanced help
 sliceClient
   .option("--no-version-check", "Skip version check for this command")
@@ -376,13 +391,14 @@ Common Usage Examples:
   slice browse                   - Browse all available components
   slice sync                     - Update local components to latest versions
   slice component create         - Create new local component
+  slice doctor                   - Run project diagnostics
 
 Command Categories:
   • init, dev, start             - Project lifecycle (development only)
   • get, browse, sync            - Quick registry shortcuts  
   • component <cmd>              - Local component management
   • registry <cmd>               - Official repository operations
-  • version, update              - Maintenance commands
+  • version, update, doctor      - Maintenance commands
 
 Development Workflow:
   • slice init    - Initialize project

package/commands/Print.js

@@ -1,36 +1,38 @@
+import chalk from 'chalk';
+
 export default class Print {
-    constructor() {}
+    constructor() { }
 
     static error(message) {
-        console.error('\x1b[31m', `❌ Error: ${message}`, '\x1b[0m');
+        console.error(chalk.red(`❌ Error: ${message}`));
     }
-    
+
     static success(message) {
-        console.log('\x1b[32m', `✅ Success: ${message}`, '\x1b[0m');
+        console.log(chalk.green(`✅ Success: ${message}`));
     }
 
     static warning(message) {
-        console.log('\x1b[33m', `⚠️  Warning: ${message}`, '\x1b[0m');
+        console.log(chalk.yellow(`⚠️  Warning: ${message}`));
     }
 
     static info(message) {
-        console.log('\x1b[36m', `ℹ️  Info: ${message}`, '\x1b[0m');
+        console.log(chalk.cyan(`ℹ️  Info: ${message}`));
     }
 
     static title(message) {
-        console.log('\x1b[35m\x1b[1m', `🎯 ${message}`, '\x1b[0m');
+        console.log(chalk.magenta.bold(`🎯 ${message}`));
     }
 
     static subtitle(message) {
-        console.log('\x1b[34m', `📋 ${message}`, '\x1b[0m');
+        console.log(chalk.blue(`📋 ${message}`));
     }
 
     static step(stepNumber, message) {
-        console.log('\x1b[36m', `${stepNumber}. ${message}`, '\x1b[0m');
+        console.log(chalk.cyan(`${stepNumber}. ${message}`));
     }
 
     static highlight(message) {
-        console.log('\x1b[43m\x1b[30m', ` ${message} `, '\x1b[0m');
+        console.log(chalk.bgYellow.black(` ${message} `));
     }
 
     static newLine() {
@@ -38,50 +40,50 @@ export default class Print {
     }
 
     static separator() {
-        console.log('\x1b[90m', '━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━', '\x1b[0m');
+        console.log(chalk.gray('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'));
     }
 
     // Métodos para el contexto específico del CLI
     static componentSuccess(componentName, action = 'processed') {
-        console.log('\x1b[32m', `✅ ${componentName} ${action} successfully!`, '\x1b[0m');
+        console.log(chalk.green(`✅ ${componentName} ${action} successfully!`));
     }
 
     static componentError(componentName, action = 'processing', error) {
-        console.error('\x1b[31m', `❌ Error ${action} ${componentName}: ${error}`, '\x1b[0m');
+        console.error(chalk.red(`❌ Error ${action} ${componentName}: ${error}`));
     }
 
     static downloadProgress(fileName) {
-        console.log('\x1b[36m', `  📥 Downloading ${fileName}...`, '\x1b[0m');
+        console.log(chalk.cyan(`  📥 Downloading ${fileName}...`));
     }
 
     static downloadSuccess(fileName) {
-        console.log('\x1b[32m', `  ✅ ${fileName}`, '\x1b[0m');
+        console.log(chalk.green(`  ✅ ${fileName}`));
     }
 
     static downloadError(fileName, error) {
-        console.error('\x1b[31m', `  ❌ Error downloading ${fileName}: ${error}`, '\x1b[0m');
+        console.error(chalk.red(`  ❌ Error downloading ${fileName}: ${error}`));
     }
 
     static registryUpdate(message) {
-        console.log('\x1b[35m', `📝 Registry: ${message}`, '\x1b[0m');
+        console.log(chalk.magenta(`📝 Registry: ${message}`));
     }
 
     static versionInfo(component, currentVersion, latestVersion = null) {
         if (latestVersion && currentVersion !== latestVersion) {
-            console.log('\x1b[33m', `🔄 ${component}: v${currentVersion} → v${latestVersion}`, '\x1b[0m');
+            console.log(chalk.yellow(`🔄 ${component}: v${currentVersion} → v${latestVersion}`));
         } else {
-            console.log('\x1b[32m', `✅ ${component}: v${currentVersion}`, '\x1b[0m');
+            console.log(chalk.green(`✅ ${component}: v${currentVersion}`));
         }
     }
 
     static commandExample(description, command) {
-        console.log('\x1b[90m', `💡 ${description}:`, '\x1b[0m');
-        console.log('\x1b[37m', `   ${command}`, '\x1b[0m');
+        console.log(chalk.gray(`💡 ${description}:`));
+        console.log(chalk.white(`   ${command}`));
     }
 
     static summary(successful, failed, total) {
         Print.separator();
-        console.log('\x1b[1m', '📊 Summary:', '\x1b[0m');
+        console.log(chalk.bold('📊 Summary:'));
         if (successful > 0) {
             Print.success(`Successful: ${successful}/${total}`);
         }
@@ -95,23 +97,72 @@ export default class Print {
     static minificationResult(filename, originalSize, minifiedSize, savingsPercent) {
         const originalKB = (originalSize / 1024).toFixed(1);
         const minifiedKB = (minifiedSize / 1024).toFixed(1);
-        
-        console.log('\x1b[32m', `  ✅ ${filename}`, '\x1b[0m');
-        console.log('\x1b[90m', `     ${originalKB}KB → ${minifiedKB}KB (${savingsPercent}% saved)`, '\x1b[0m');
+
+        console.log(chalk.green(`  ✅ ${filename}`));
+        console.log(chalk.gray(`     ${originalKB}KB → ${minifiedKB}KB (${savingsPercent}% saved)`));
     }
 
     // Método para mostrar progreso de build
     static buildProgress(message) {
-        console.log('\x1b[36m', `🔄 ${message}`, '\x1b[0m');
+        console.log(chalk.cyan(`🔄 ${message}`));
     }
 
     // Método para mostrar estadísticas de servidor
     static serverStats(mode, port, directory) {
         Print.newLine();
-        console.log('\x1b[35m', `🌐 Server Configuration:`, '\x1b[0m');
-        console.log('\x1b[90m', `   Mode: ${mode}`, '\x1b[0m');
-        console.log('\x1b[90m', `   Port: ${port}`, '\x1b[0m');
-        console.log('\x1b[90m', `   Serving: /${directory}`, '\x1b[0m');
+        console.log(chalk.magenta(`🌐 Server Configuration:`));
+        console.log(chalk.gray(`   Mode: ${mode}`));
+        console.log(chalk.gray(`   Port: ${port}`));
+        console.log(chalk.gray(`   Serving: /${directory}`));
+        Print.newLine();
+    }
+
+    // Método para mostrar que el servidor está listo con URL destacada
+    static serverReady(port) {
+        Print.newLine();
+        console.log(chalk.bgGreen.black.bold(' ✓ SERVER READY '));
+        Print.newLine();
+        console.log(chalk.cyan.bold(`  → Local:   http://localhost:${port}`));
+        console.log(chalk.gray(`  → Network: http://127.0.0.1:${port}`));
         Print.newLine();
+        console.log(chalk.yellow(`  Press Ctrl+C to stop the server`));
+        Print.newLine();
+    }
+
+    // Método para mostrar el estado del servidor durante inicio
+    static serverStatus(status, message = '') {
+        const icons = {
+            checking: '🔍',
+            starting: '🚀',
+            ready: '✅',
+            error: '❌'
+        };
+        const colors = {
+            checking: chalk.cyan,
+            starting: chalk.magenta,
+            ready: chalk.green,
+            error: chalk.red
+        };
+
+        const icon = icons[status] || 'ℹ️';
+        const color = colors[status] || chalk.white;
+        const displayMessage = message || status;
+
+        console.log(color(`${icon} ${displayMessage}`));
+    }
+
+    // Método para mostrar que se está verificando el puerto
+    static checkingPort(port) {
+        console.log(chalk.cyan(`🔍 Checking port ${port}...`));
+    }
+
+    // Nuevo: Método para debug
+    static debug(message) {
+        console.log(chalk.gray(`🐛 DEBUG: ${message}`));
+    }
+
+    // Nuevo: Método para logs verbosos
+    static verbose(message) {
+        console.log(chalk.gray(`📝 ${message}`));
     }
 }