slicejs-cli 2.3.0 → 2.3.2

package/client.js

@@ -115,8 +115,9 @@ componentCommand
     await runWithVersionCheck(async () => {
       const categories = getCategories();
       if (categories.length === 0) {
-        Print.error("No categories available. Check your configuration");
-        Print.info("Run 'slice init' to initialize your project");
+        Print.error("No categories found in your project configuration");
+        Print.info("Run 'slice init' to initialize your project first");
+        Print.commandExample("Initialize project", "slice init");
         return;
       }
 
@@ -125,7 +126,13 @@ componentCommand
           type: "input",
           name: "componentName",
           message: "Enter the component name:",
-          validate: (input) => (input ? true : "Component name cannot be empty"),
+          validate: (input) => {
+            if (!input) return "Component name cannot be empty";
+            if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(input)) {
+              return "Component name must start with a letter and contain only alphanumeric characters";
+            }
+            return true;
+          },
         },
         {
           type: "list",
@@ -134,25 +141,10 @@ componentCommand
           choices: categories,
         }
       ]);
-
-      if (validations.getCategoryType(answers.category) === 'Visual') {
-        const properties = await inquirer.prompt([
-          {
-            type: "input",
-            name: "properties",
-            message: "Enter the properties (comma separated):",
-            default: ""
-          },
-        ]);
-        answers.properties = properties.properties 
-          ? properties.properties.split(",").map((prop) => prop.trim()).filter(Boolean)
-          : [];
-      } else {
-        answers.properties = [];
-      }
       
-      if (createComponent(answers.componentName, answers.category, answers.properties)) {
-        Print.success(`Component ${answers.componentName} created successfully`);
+      const result = createComponent(answers.componentName, answers.category);
+      if (result) {
+        Print.success(`Component '${answers.componentName}' created successfully in category '${answers.category}'`);
         Print.info("Listing updated components:");
         listComponents();
       }
@@ -186,7 +178,68 @@ componentCommand
       }
 
       try {
-        await deleteComponent();
+        // Paso 1: Seleccionar categoría
+        const categoryAnswer = await inquirer.prompt([
+          {
+            type: "list",
+            name: "category",
+            message: "Select the component category:",
+            choices: categories,
+          }
+        ]);
+
+        // Paso 2: Listar componentes de esa categoría
+        const config = loadConfig();
+        if (!config) {
+          Print.error("Could not load configuration");
+          return;
+        }
+
+        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;
+        }
+
+        const components = fs.readdirSync(fullPath).filter(item => {
+          const itemPath = path.join(fullPath, item);
+          return fs.statSync(itemPath).isDirectory();
+        });
+
+        if (components.length === 0) {
+          Print.info(`No components found in category '${categoryAnswer.category}'`);
+          return;
+        }
+
+        // Paso 3: Seleccionar componente a eliminar
+        const componentAnswer = await inquirer.prompt([
+          {
+            type: "list",
+            name: "componentName",
+            message: "Select the component to delete:",
+            choices: components,
+          },
+          {
+            type: "confirm",
+            name: "confirm",
+            message: (answers) => `Are you sure you want to delete '${answers.componentName}'?`,
+            default: false,
+          }
+        ]);
+
+        if (!componentAnswer.confirm) {
+          Print.info("Delete operation cancelled");
+          return;
+        }
+
+        // Paso 4: Eliminar el componente
+        if (deleteComponent(componentAnswer.componentName, categoryAnswer.category)) {
+          Print.success(`Component ${componentAnswer.componentName} deleted successfully`);
+          Print.info("Listing updated components:");
+          listComponents();
+        }
       } catch (error) {
         Print.error(`Deleting component: ${error.message}`);
       }

package/commands/Validations.js

@@ -21,13 +21,16 @@ class Validations {
         try {
             const configPath = path.join(__dirname, '../../../src/sliceConfig.json');
             if (!fs.existsSync(configPath)) {
-                return null; // Evitar error si no existe
+                console.error('\x1b[31m', '❌ Error: sliceConfig.json not found', '\x1b[0m');
+                console.log('\x1b[36m', 'ℹ️  Info: Run "slice init" to initialize your project', '\x1b[0m');
+                return null;
               }
             const rawData = fs.readFileSync(configPath, 'utf-8');
             
             return JSON.parse(rawData);
         } catch (error) {
-            console.error(`Error cargando configuración: ${error.message}`);
+            console.error('\x1b[31m', `❌ Error loading configuration: ${error.message}`, '\x1b[0m');
+            console.log('\x1b[36m', 'ℹ️  Info: Check that sliceConfig.json is valid JSON', '\x1b[0m');
             return null;
         }
     }
@@ -59,7 +62,8 @@ class Validations {
             const componentFilePath = path.join(__dirname, '../../../src/Components/components.js');
     
             if (!fs.existsSync(componentFilePath)) {
-                console.error('❌ El archivo components.js no existe en la ruta esperada.');
+                console.error('\x1b[31m', '❌ Error: components.js not found in expected path', '\x1b[0m');
+                console.log('\x1b[36m', 'ℹ️  Info: Run "slice component list" to generate components.js', '\x1b[0m');
                 return false;
             }
     
@@ -69,7 +73,8 @@ class Validations {
             return components.hasOwnProperty(componentName);
 
         } catch (error) {
-            console.error('❌ Error al verificar el componente:', error);
+            console.error('\x1b[31m', `❌ Error checking component existence: ${error.message}`, '\x1b[0m');
+            console.log('\x1b[36m', 'ℹ️  Info: The components.js file may be corrupted', '\x1b[0m');
             return false;
         }
     }

package/commands/createComponent/VisualComponentTemplate.js

@@ -1,28 +1,35 @@
 export default class componentTemplates{
 
-  static visual(componentName, props){
-    const propGettersSetters = props.map(prop => `
-  get ${prop}() {
-      return this._${prop};
+  static visual(componentName){
+    return `export default class ${componentName} extends HTMLElement {
+
+  static props = {
+    // Define your component props here
+    // Example: 
+    /*
+    "value": { 
+         type: 'string', 
+         default: 'Button', 
+         required: false 
+      },
+    */
   }
 
-  set ${prop}(value) {
-      this._${prop} = value;
-  }
-  `).join('\n');
-
-  return `export default class ${componentName} extends HTMLElement {
   constructor(props) {
     super();
     slice.attachTemplate(this);
-
     slice.controller.setComponentProps(this, props);
-    this.debuggerProps = [${props.map(prop => `"${prop}"`).join(',')}];
   }
 
-  init() {}
+  init() {
+    // Component initialization logic (can be async)
+  }
 
-  ${propGettersSetters}
+  update() {
+    // Component update logic (can be async)
+  }
+
+  // Add your custom methods here
 }
 
 customElements.define("slice-${componentName.toLowerCase()}", ${componentName});
@@ -30,18 +37,19 @@ customElements.define("slice-${componentName.toLowerCase()}", ${componentName});
   }
 
   static service(componentName) {
-
-  
     return `export default class ${componentName} {
-    constructor(props) {
-      // Constructor
-    }
-  
-    init() {
-      // Método init
-    }
-  }
-  `;
+  constructor(props) {
+    // Initialize service with props
+    this.props = props || {};
+  }
+
+  init() {
+    // Service initialization logic (can be async)
+  }
+
+  // Add your service methods here
+}
+`;
   }
 }
 

package/commands/createComponent/createComponent.js

@@ -7,29 +7,39 @@ import Validations from '../Validations.js';
 import Print from '../Print.js';
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 
-function createComponent(componentName, category, properties) {
+function createComponent(componentName, category) {
+    // Validación: Nombre de componente requerido
     if (!componentName) {
         Print.error('Component name is required');
-        return;
+        Print.commandExample("Create a component", "slice component create");
+        return false;
     }
 
+    // Validación: Nombre de componente válido
     if (!Validations.isValidComponentName(componentName)) {
-        Print.error('Invalid component name. Please use only alphanumeric characters and start with a letter.');
-        return;
+        Print.error(`Invalid component name: '${componentName}'`);
+        Print.info('Component name must start with a letter and contain only alphanumeric characters');
+        Print.commandExample("Valid names", "Button, UserCard, NavBar");
+        Print.commandExample("Invalid names", "1Button, user-card, Nav_Bar");
+        return false;
     }
 
+    // Validación: Componente ya existe
     if(Validations.componentExists(componentName)){
-        Print.error(`Component '${componentName}' already exists. Please use a different name.`);
-        return;
+        Print.error(`Component '${componentName}' already exists in your project`);
+        Print.info('Please use a different name or delete the existing component first');
+        Print.commandExample("Delete component", "slice component delete");
+        return false;
     }
 
+    // Validación: Categoría válida
     let flagCategory = Validations.isValidCategory(category);
 
-    
-
     if (!flagCategory.isValid) {
-        Print.error('Invalid category. Please use one of the following categories: Service, Visual, Provider, Structural');
-        return;
+        Print.error(`Invalid category: '${category}'`);
+        const availableCategories = Object.keys(Validations.getCategories()).join(', ');
+        Print.info(`Available categories: ${availableCategories}`);
+        return false;
     }
     category = flagCategory.category;
 
@@ -40,46 +50,76 @@ function createComponent(componentName, category, properties) {
 
     const type = Validations.getCategoryType(category);
 
-    
-    if(type==='Visual'){
-       template = componentTemplates.visual(className, properties);
-    }
-
-    if(type==='Service'){
+    // Generar template según el tipo
+    if(type === 'Visual'){
+       template = componentTemplates.visual(className);
+    } else if(type === 'Service'){
          template = componentTemplates.service(className);
-     }
+    } else {
+        Print.error(`Unsupported component type: '${type}'`);
+        Print.info('Only Visual and Service components are currently supported');
+        return false;
+    }
 
     const categoryPath = Validations.getCategoryPath(category);
 
-
-    // Determinar la ruta del archivo
+    // Determinar la ruta del directorio del componente
     let componentDir = path.join(__dirname, '../../../../src/', categoryPath, className);
-    componentDir=componentDir.slice(1);
-    fs.ensureDirSync(componentDir);
+    componentDir = componentDir.slice(1);
     
+    try {
+        // Crear directorio del componente
+        fs.ensureDirSync(componentDir);
+    } catch (error) {
+        Print.error(`Failed to create component directory: '${componentDir}'`);
+        Print.info(`Error details: ${error.message}`);
+        return false;
+    }
 
     // Determinar la ruta del archivo
     let componentPath = path.join(componentDir, fileName);
 
-
-    // Verificar si el archivo ya existe
+    // Verificar si el archivo ya existe (doble verificación)
     if (fs.existsSync(componentPath)) {
-        Print.error(`Component '${componentName}' already exists.`);
-        return;
+        Print.error(`Component file already exists at: '${componentPath}'`);
+        Print.info('This component may have been created outside the CLI');
+        return false;
     }
 
-
-
-    // Escribir el código del componente en el archivo
-    fs.writeFileSync(componentPath, template);
-
-    if(type==='Visual'){
-        fs.writeFileSync(`${componentDir}/${className}.css`, '');
-        fs.writeFileSync(`${componentDir}/${className}.html`, `<div>${componentName}</div>`);
+    try {
+        // Escribir el código del componente en el archivo
+        fs.writeFileSync(componentPath, template);
+
+        // Si es Visual, crear archivos adicionales (CSS y HTML)
+        if(type === 'Visual'){
+            const cssPath = `${componentDir}/${className}.css`;
+            const htmlPath = `${componentDir}/${className}.html`;
+            
+            fs.writeFileSync(cssPath, '/* Styles for ' + componentName + ' component */\n');
+            fs.writeFileSync(htmlPath, `<div class="${componentName.toLowerCase()}">\n  ${componentName}\n</div>`);
+            
+            Print.info(`Created files: ${fileName}, ${className}.css, ${className}.html`);
+        } else {
+            Print.info(`Created file: ${fileName}`);
+        }
+
+        return true;
+    } catch (error) {
+        Print.error(`Failed to create component files`);
+        Print.info(`Error details: ${error.message}`);
+        
+        // Intentar limpiar archivos parcialmente creados
+        try {
+            if (fs.existsSync(componentDir)) {
+                fs.removeSync(componentDir);
+                Print.info('Cleaned up partial files');
+            }
+        } catch (cleanupError) {
+            Print.warning('Could not clean up partial files. You may need to delete them manually');
+        }
+        
+        return false;
     }
-
-    Print.success(`Component '${componentName}' created successfully.`);
-    return true;
 }
 
 

package/commands/deleteComponent/deleteComponent.js

@@ -5,42 +5,73 @@ import Print from '../Print.js';
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 
 function deleteComponent(componentName, category) {
+    // Validación: Nombre de componente requerido
     if (!componentName) {
-        Print.error('Component name is required');
-        return;
+        Print.error('Component name is required to delete');
+        Print.commandExample("Delete a component", "slice component delete");
+        return false;
     }
 
+    // Validación: Nombre de componente válido
     if (!Validations.isValidComponentName(componentName)) {
-        Print.error('Invalid component name. Please use only alphanumeric characters and start with a letter.');
-        return;
+        Print.error(`Invalid component name: '${componentName}'`);
+        Print.info('Component name must start with a letter and contain only alphanumeric characters');
+        return false;
     }
 
+    // Validación: Categoría válida
     let flagCategory = Validations.isValidCategory(category);
 
     if (!flagCategory.isValid) {
-        Print.error('Invalid category. Please use one of the following categories: Service, Visual, Provider, Structural');
-        return;
+        Print.error(`Invalid category: '${category}'`);
+        const availableCategories = Object.keys(Validations.getCategories()).join(', ');
+        Print.info(`Available categories: ${availableCategories}`);
+        return false;
     }
     category = flagCategory.category;
     
     const categoryPath = Validations.getCategoryPath(category);
 
-
     // Construir la ruta del directorio del componente
     let componentDir = path.join(__dirname, '../../../../src/', categoryPath, componentName);
     componentDir = componentDir.slice(1);
 
     // Verificar si el directorio del componente existe
     if (!fs.existsSync(componentDir)) {
-        Print.error(`Component '${componentName}' does not exist.`);
-        return;
+        Print.error(`Component '${componentName}' does not exist in category '${category}'`);
+        Print.info('Make sure you selected the correct category');
+        Print.commandExample("List components", "slice component list");
+        return false;
     }
 
-    // Eliminar el directorio del componente y su contenido
-    fs.removeSync(componentDir);
+    // Verificar si es un directorio
+    try {
+        const stats = fs.statSync(componentDir);
+        if (!stats.isDirectory()) {
+            Print.error(`'${componentName}' is not a valid component directory`);
+            Print.info('Components must be stored in directories');
+            return false;
+        }
+    } catch (error) {
+        Print.error(`Failed to access component directory: '${componentDir}'`);
+        Print.info(`Error details: ${error.message}`);
+        return false;
+    }
 
-    Print.success(`Component '${componentName}' deleted successfully.`);
-    return true;
+    // Intentar eliminar el directorio del componente y su contenido
+    try {
+        const files = fs.readdirSync(componentDir);
+        Print.info(`Deleting ${files.length} file(s) from component directory...`);
+        
+        fs.removeSync(componentDir);
+        return true;
+    } catch (error) {
+        Print.error(`Failed to delete component '${componentName}'`);
+        Print.info(`Error details: ${error.message}`);
+        Print.warning('You may need to delete the component files manually');
+        Print.info(`Component location: ${componentDir}`);
+        return false;
+    }
 }
 
 export default deleteComponent;

package/commands/getComponent/getComponent.js

@@ -39,32 +39,62 @@ class ComponentRegistry {
   }
 
   async loadRegistry() {
-    Print.info('Loading component registry from official repository...');
+  Print.info('Loading component registry from official repository...');
+  
+  try {
+    const response = await fetch(COMPONENTS_REGISTRY_URL);
     
-    try {
-      const response = await fetch(COMPONENTS_REGISTRY_URL);
-      
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-      }
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
 
-      const content = await response.text();
-      
-      // Parse the components.js file content
-      const match = content.match(/const components = ({[\s\S]*?});/);
-      if (!match) {
-        throw new Error('Invalid components.js format from repository');
-      }
+    const content = await response.text();
+    
+    // Parse the components.js file content
+    const match = content.match(/const components = ({[\s\S]*?});/);
+    if (!match) {
+      throw new Error('Invalid components.js format from repository');
+    }
 
-      this.componentsRegistry = eval('(' + match[1] + ')');
-      Print.success('Component registry loaded successfully');
-      
-    } catch (error) {
-      Print.error(`Loading component registry: ${error.message}`);
-      Print.info('Check your internet connection and repository accessibility');
-      throw error;
+    const allComponents = eval('(' + match[1] + ')');
+    
+    // ✅ NUEVO: FILTRAR solo componentes Visual y Service
+    this.componentsRegistry = this.filterOfficialComponents(allComponents);
+    
+    Print.success('Component registry loaded successfully');
+    
+  } catch (error) {
+    Print.error(`Loading component registry: ${error.message}`);
+    Print.info('Check your internet connection and repository accessibility');
+    throw error;
+  }
+}
+
+/**
+ * Filtra el registry para incluir SOLO componentes de categorías Visual y Service
+ * Excluye AppComponents y cualquier otra categoría
+ * @param {object} allComponents - Objeto con todos los componentes del registry
+ * @returns {object} - Objeto filtrado solo con Visual y Service
+ */
+filterOfficialComponents(allComponents) {
+  const filtered = {};
+  let excludedCount = 0;
+  
+  Object.entries(allComponents).forEach(([name, category]) => {
+    // Solo incluir componentes de categoría Visual o Service
+    if (category === 'Visual' || category === 'Service') {
+      filtered[name] = category;
+    } else {
+      excludedCount++;
     }
+  });
+  
+  if (excludedCount > 0) {
+    Print.info(`Filtered out ${excludedCount} non-Visual/Service components from registry`);
   }
+  
+  return filtered;
+}
 
   async getLocalComponents() {
     try {
@@ -287,19 +317,39 @@ class ComponentRegistry {
   }
 
   async installComponent(componentName, category, force = false) {
-    const availableComponents = this.getAvailableComponents(category);
+     const availableComponents = this.getAvailableComponents(category);
+
+  if (!availableComponents[componentName]) {
+    throw new Error(`Componente '${componentName}' no encontrado en la categoría '${category}' del repositorio oficial`);
+  }
 
-    if (!availableComponents[componentName]) {
-      throw new Error(`Componente '${componentName}' no encontrado en la categoría '${category}' del repositorio oficial`);
+  // ✅ MEJORADO: Detectar si validations tiene acceso a la configuración
+  let categoryPath;
+  const hasValidConfig = validations.config && 
+                         validations.config.paths && 
+                         validations.config.paths.components &&
+                         validations.config.paths.components[category];
+  
+  if (hasValidConfig) {
+    // Usar validations cuando la config está disponible
+    categoryPath = validations.getCategoryPath(category);
+  } else {
+    // Usar rutas por defecto cuando no hay config (durante init o error)
+    if (category === 'Visual') {
+      categoryPath = '/Components/Visual';
+    } else if (category === 'Service') {
+      categoryPath = '/Components/Service';
+    } else {
+      throw new Error(`Unknown category: ${category}`);
     }
+  }
+  
+  const isProduction = this.config?.production?.enabled === true;
+  const folderSuffix = isProduction ? 'dist' : 'src';
+  
+  const targetPath = path.join(__dirname, `../../../../${folderSuffix}`, categoryPath, componentName);
+
 
-    const categoryPath = validations.getCategoryPath(category);
-    
-    // ✅ CORREGIDO: Usar 4 niveles para compatibilidad con node_modules
-    const isProduction = this.config?.production?.enabled === true;
-    const folderSuffix = isProduction ? 'dist' : 'src';
-    
-    const targetPath = path.join(__dirname, `../../../../${folderSuffix}`, categoryPath, componentName);
 
     // Check if component already exists
     if (await fs.pathExists(targetPath) && !force) {

package/commands/listComponents/listComponents.js

@@ -12,10 +12,16 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const loadConfig = () => {
     try {
         const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+        if (!fs.existsSync(configPath)) {
+            Print.error('sliceConfig.json not found');
+            Print.info('Run "slice init" to initialize your project');
+            return null;
+        }
         const rawData = fs.readFileSync(configPath, 'utf-8');
         return JSON.parse(rawData);
     } catch (error) {
-        console.error(`Error cargando configuración: ${error.message}`);
+        Print.error(`Failed to load configuration: ${error.message}`);
+        Print.info('Check that sliceConfig.json is valid JSON');
         return null;
     }
 };
@@ -27,10 +33,14 @@ const loadConfig = () => {
  */
 const listComponents = (folderPath) => {
     try {
-        const result = fs.readdirSync(folderPath)
+        if (!fs.existsSync(folderPath)) {
+            Print.warning(`Component directory not found: ${folderPath}`);
+            return [];
+        }
+        const result = fs.readdirSync(folderPath);
         return result;
     } catch (error) {
-        console.error(`Error leyendo carpeta ${folderPath}: ${error.message}`);
+        Print.error(`Failed to read directory ${folderPath}: ${error.message}`);
         return [];
     }
 };
@@ -66,16 +76,34 @@ const getComponents = () => {
 };
 
 function listComponentsReal(){
-    // Obtener componentes dinámicamente
-const components = getComponents();
-
-// Ruta donde se generará components.js
-const outputPath = path.join(__dirname, '../../../../src/Components/components.js');
-
-// Generar archivo components.js con los componentes detectados
-fs.writeFileSync(outputPath, `const components = ${JSON.stringify(components, null, 2)}; export default components;`);
-
-Print.success('Lista de componentes actualizada dinámicamente');
+    try {
+        // Obtener componentes dinámicamente
+        const components = getComponents();
+
+        if (Object.keys(components).length === 0) {
+            Print.warning('No components found in your project');
+            Print.info('Create your first component with "slice component create"');
+            return;
+        }
+
+        // Ruta donde se generará components.js
+        const outputPath = path.join(__dirname, '../../../../src/Components/components.js');
+        
+        // Asegurar que el directorio existe
+        const outputDir = path.dirname(outputPath);
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+            Print.info('Created Components directory');
+        }
+
+        // Generar archivo components.js con los componentes detectados
+        fs.writeFileSync(outputPath, `const components = ${JSON.stringify(components, null, 2)};\n\nexport default components;\n`);
+
+        Print.success(`Component list updated successfully (${Object.keys(components).length} component${Object.keys(components).length !== 1 ? 's' : ''} found)`);
+    } catch (error) {
+        Print.error(`Failed to update component list: ${error.message}`);
+        Print.info('Make sure your project structure is correct');
+    }
 }
 
 export default listComponentsReal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "scripts": {