slicejs-cli 1.0.53 → 1.0.55

package/commands/createComponent/createComponent.js

@@ -7,7 +7,7 @@ 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, properties, methods) {
 
     if (!componentName) {
         Print.error('Component name is required');
@@ -38,7 +38,7 @@ function createComponent(componentName, category, properties) {
     }
 
     if(category==='Service'){
-         template = componentTemplates.service(className, properties);
+         template = componentTemplates.service(className, methods);
      }
 
     //RUTA PARA CUANDO SE COLOQUE DE USUARIO
@@ -63,8 +63,11 @@ function createComponent(componentName, category, properties) {
 
     // Escribir el código del componente en el archivo
     fs.writeFileSync(componentPath, template);
-    fs.writeFileSync(`${componentDir}/${className}.css`, '');
-    fs.writeFileSync(`${componentDir}/${className}.html`, '');
+
+    if(category==='Visual'){
+        fs.writeFileSync(`${componentDir}/${className}.css`, '');
+        fs.writeFileSync(`${componentDir}/${className}.html`, `<div>${componentName}</div>`);
+    }
 
     Print.success(`Component '${componentName}' created successfully.`);
     return true;

package/commands/listComponents/listComponents.js

@@ -1,45 +1,78 @@
-
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
 import Print from '../Print.js';
-export default function listComponents() {
 
-  const SlicePath = path.join(__dirname, '../../../../Slice/Components');
-  const userVisualComponents = fs.readdirSync(path.join(__dirname,'../../../../src/Components/Visual'));
-  const userServices = fs.readdirSync(path.join(__dirname,'../../../../src/Components/Service'));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Carga la configuración desde sliceConfig.json
+ * @returns {object} - Objeto de configuración
+ */
+const loadConfig = () => {
+    try {
+        const configPath = path.join(__dirname, '../../../../Slice/sliceConfig.json');
+        const rawData = fs.readFileSync(configPath, 'utf-8');
+        return JSON.parse(rawData);
+    } catch (error) {
+        console.error(`Error cargando configuración: ${error.message}`);
+        return null;
+    }
+};
+
+/**
+ * Lista los archivos en una carpeta dada, filtrando solo los archivos .js
+ * @param {string} folderPath - Ruta de la carpeta a leer
+ * @returns {string[]} - Lista de archivos encontrados
+ */
+const listComponents = (folderPath) => {
+    try {
+        const result = fs.readdirSync(folderPath)
+        console.log(`Leyendo carpeta ${folderPath}: ${result.length} archivos encontrados`);
+        return result;
+    } catch (error) {
+        console.error(`Error leyendo carpeta ${folderPath}: ${error.message}`);
+        return [];
+    }
+};
+
+/**
+ * Obtiene los componentes dinámicamente desde sliceConfig.json
+ * @returns {object} - Mapeo de componentes con su categoría
+ */
+const getComponents = () => {
+    const config = loadConfig();
+    if (!config) return {};
+
+    const isProduction = config.production.enabled===true;
+    const folderSuffix = isProduction ? 'dist' : 'src';
+
+    const componentPaths = config.paths?.components || {}; // Obtiene dinámicamente las rutas de los componentes
+    let allComponents = new Map();
 
-  const visualComponents = fs.readdirSync(`${SlicePath}/Visual`);
-  const services = fs.readdirSync(`${SlicePath}/Service`);
-  const structuralComponents = fs.readdirSync(`${SlicePath}/Structural`)
+    Object.entries(componentPaths).forEach(([category, { path: folderPath }]) => {
+        const fullPath = path.join(__dirname, `../../../../${folderSuffix}`, folderPath);
+        const files = listComponents(fullPath);
 
 
-  const componentMap = new Map();
+        files.forEach(file => {
+            const componentName = path.basename(file, '.js');
+            allComponents.set(componentName, category);
+        });
+    });
 
-  visualComponents.forEach(component => {
-    componentMap.set(component, "Visual");
-  });
 
-  services.forEach(component => {
-    componentMap.set(component, "Service");
-  });
 
-  structuralComponents.forEach(component => {
-    componentMap.set(component, "Structural");
-  });
+    return Object.fromEntries(allComponents);
+};
 
-  userVisualComponents.forEach(component => {
-    componentMap.set(component, "UserVisual");
-  });
+// Obtener componentes dinámicamente
+const components = getComponents();
 
-  userServices.forEach(component => {
-    componentMap.set(component, "UserService");
-  });
+// Ruta donde se generará components.js
+const outputPath = path.join(__dirname, '../../../../Slice/Components/components.js');
 
-  const mapAsArray = Array.from(componentMap.entries());
-  const mapObject = Object.fromEntries(mapAsArray);
+// Generar archivo components.js con los componentes detectados
+fs.writeFileSync(outputPath, `const components = ${JSON.stringify(components, null, 2)}; export default components;`);
 
-  fs.writeFileSync(`${SlicePath}/components.js`, `const components = ${JSON.stringify(mapObject, null, 2)}; export default components;`);
-  Print.success('Components list updated');
-}
+Print.success('Lista de componentes actualizada dinámicamente');

package/package.json

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

package/PROJECT_TEMPLATES/Basic/Slice/Components/Service/FetchManager/FetchManager.js

@@ -1,134 +0,0 @@
-export default class FetchManager {
-    constructor(props) {
-        const { baseUrl, timeout } = props;
-        if (baseUrl !== undefined) {
-            this.baseUrl = baseUrl;
-        }
-        this.methods = ["GET", "POST", "PUT", "DELETE"];
-        this.lastRequest = null;
-        this.cacheEnabled = false;
-        this.defaultHeaders = {};
-        timeout ? (this.timeout = timeout) : (this.timeout = 10000);
-    }
-
-    async request(
-        method,
-        data,
-        endpoint,
-        onRequestSuccess,
-        onRequestError,
-        refetchOnError = false,
-        requestOptions = {}
-    ) {
-        if (!this.methods.includes(method)) throw new Error("Invalid method");
-        if (data && typeof data !== "object")
-            throw new Error("Invalid data, not JSON");
-        const controller = new AbortController();
-
-        let options;
-        if (method !== "GET") {
-            options = {
-                method: method,
-                headers: {
-                    "Content-Type": "application/json",
-                    ...this.defaultHeaders,
-                    ...requestOptions.headers,
-                },
-                signal: controller.signal,
-            };
-        } else {
-            options = {
-                method: method,
-                headers: {
-                    ...this.defaultHeaders,
-                    ...requestOptions.headers,
-                },
-                signal: controller.signal,
-            };
-        }
-
-        if (data) {
-            options.body = JSON.stringify(data);
-        }
-
-        let loading;
-        if (!slice.controller.getComponent("Loading")) {
-            loading = await slice.build("Loading", { sliceId: "Loading" });
-        } else {
-            loading = slice.controller.getComponent("Loading");
-        }
-        loading.start();
-        const timeoutId = setTimeout(() => controller.abort(), this.timeout || 10000);
-
-        try {
-            let response;
-
-            // Check if cache is enabled and a cached response exists
-            if (this.cacheEnabled && this.lastRequest && this.lastRequest.endpoint === endpoint) {
-                return this.lastRequest.response;
-            }
-
-            if (this.baseUrl !== undefined) {
-                response = await fetch(this.baseUrl + endpoint, options);
-            } else {
-                response = await fetch(endpoint, options);
-            }
-
-            if (response.ok) {
-                if (typeof onRequestSuccess === "function") {
-                    onRequestSuccess(data, response);
-                }
-            } else {
-                if (typeof onRequestError === "function") {
-                    onRequestError(data, response);
-                }
-                if (refetchOnError) {
-                    // Retry the request in case of error
-                    return await this.request(
-                        method,
-                        data,
-                        endpoint,
-                        onRequestSuccess,
-                        onRequestError,
-                        refetchOnError,
-                        requestOptions
-                    );
-                }
-            }
-
-            let output = await response.json();
-            loading.stop();
-
-            // Cache the response if cache is enabled
-            if (this.cacheEnabled) {
-                this.lastRequest = { data, response, endpoint };
-            }
-
-            return output;
-        } catch (error) {
-            if (error.message === "Failed to fetch") {
-                slice.logger.logError("Se perdió la conexión a internet");
-            } else {
-                console.error("Error al realizar la solicitud:", error);
-            }
-            loading.stop();
-            throw error;
-        } finally {
-            clearTimeout(timeoutId);
-        }
-    }
-
-    // Enable or disable caching of responses
-    enableCache() {
-        this.cacheEnabled = true;
-    }
-
-    disableCache() {
-        this.cacheEnabled = false;
-    }
-
-    // Set default headers for all requests
-    setDefaultHeaders(headers) {
-        this.defaultHeaders = headers;
-    }
-}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Service/IndexedDbManager/IndexedDbManager.js

@@ -1,138 +0,0 @@
-export default class IndexedDbManager {
-    constructor(databaseName, storeName) {
-        this.databaseName = databaseName;
-        this.storeName = storeName;
-        this.db = null;
-    }
-
-    async openDatabase() {
-        return new Promise((resolve, reject) => {
-            const request = indexedDB.open(this.databaseName);
-
-            request.onupgradeneeded = (event) => {
-                const db = event.target.result;
-                if (!db.objectStoreNames.contains(this.storeName)) {
-                    db.createObjectStore(this.storeName, { keyPath: 'id', autoIncrement: true });
-                }
-            };
-
-            request.onsuccess = (event) => {
-                this.db = event.target.result;
-                resolve(this.db);
-            };
-
-            request.onerror = (event) => {
-                reject(new Error(`Error opening IndexedDB: ${event.target.error}`));
-            };
-        });
-    }
-
-    closeDatabase() {
-        if (this.db) {
-            this.db.close();
-            this.db = null;
-        }
-    }
-
-    async addItem(item) {
-        const db = await this.openDatabase();
-        return new Promise((resolve, reject) => {
-            const transaction = db.transaction([this.storeName], 'readwrite');
-            const store = transaction.objectStore(this.storeName);
-            const request = store.add(item);
-
-            request.onsuccess = () => {
-                resolve(request.result);
-            };
-
-            request.onerror = (event) => {
-                reject(new Error(`Error adding item to IndexedDB: ${event.target.error}`));
-            };
-        });
-    }
-
-    async updateItem(item) {
-        const db = await this.openDatabase();
-        return new Promise((resolve, reject) => {
-            const transaction = db.transaction([this.storeName], 'readwrite');
-            const store = transaction.objectStore(this.storeName);
-            const request = store.put(item);
-
-            request.onsuccess = () => {
-                resolve(request.result);
-            };
-
-            request.onerror = (event) => {
-                reject(new Error(`Error updating item in IndexedDB: ${event.target.error}`));
-            };
-        });
-    }
-
-    async getItem(id) {
-        const db = await this.openDatabase();
-        return new Promise((resolve, reject) => {
-            const transaction = db.transaction([this.storeName], 'readonly');
-            const store = transaction.objectStore(this.storeName);
-            const request = store.get(id);
-
-            request.onsuccess = () => {
-                resolve(request.result);
-            };
-
-            request.onerror = (event) => {
-                reject(new Error(`Error getting item from IndexedDB: ${event.target.error}`));
-            };
-        });
-    }
-
-    async deleteItem(id) {
-        const db = await this.openDatabase();
-        return new Promise((resolve, reject) => {
-            const transaction = db.transaction([this.storeName], 'readwrite');
-            const store = transaction.objectStore(this.storeName);
-            const request = store.delete(id);
-
-            request.onsuccess = () => {
-                resolve();
-            };
-
-            request.onerror = (event) => {
-                reject(new Error(`Error deleting item from IndexedDB: ${event.target.error}`));
-            };
-        });
-    }
-
-    async getAllItems() {
-        const db = await this.openDatabase();
-        return new Promise((resolve, reject) => {
-            const transaction = db.transaction([this.storeName], 'readonly');
-            const store = transaction.objectStore(this.storeName);
-            const request = store.getAll();
-
-            request.onsuccess = () => {
-                resolve(request.result);
-            };
-
-            request.onerror = (event) => {
-                reject(new Error(`Error getting items from IndexedDB: ${event.target.error}`));
-            };
-        });
-    }
-
-    async clearItems() {
-        const db = await this.openDatabase();
-        return new Promise((resolve, reject) => {
-            const transaction = db.transaction([this.storeName], 'readwrite');
-            const store = transaction.objectStore(this.storeName);
-            const request = store.clear();
-
-            request.onsuccess = () => {
-                resolve();
-            };
-
-            request.onerror = (event) => {
-                reject(new Error(`Error clearing items in IndexedDB: ${event.target.error}`));
-            };
-        });
-    }
-}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Service/LocalStorageManager/LocalStorageManager.js

@@ -1,45 +0,0 @@
-export default class LocalStorageManager {
-    constructor() {
-        // No se necesitan propiedades en este caso
-    }
-
-    getItem(key) {
-        try {
-            const item = localStorage.getItem(key);
-            return item ? JSON.parse(item) : null;
-        } catch (error) {
-            console.error(`Error getting item from localStorage: ${error.message}`);
-            return null;
-        }
-    }
-
-    setItem(key, value) {
-        try {
-            localStorage.setItem(key, JSON.stringify(value));
-            return true;
-        } catch (error) {
-            console.error(`Error setting item in localStorage: ${error.message}`);
-            return false;
-        }
-    }
-
-    removeItem(key) {
-        try {
-            localStorage.removeItem(key);
-            return true;
-        } catch (error) {
-            console.error(`Error removing item from localStorage: ${error.message}`);
-            return false;
-        }
-    }
-
-    clear() {
-        try {
-            localStorage.clear();
-            return true;
-        } catch (error) {
-            console.error(`Error clearing localStorage: ${error.message}`);
-            return false;
-        }
-    }
-}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Service/Translator/Translator.js

@@ -1,59 +0,0 @@
-import messages from "./messages.json" assert { type: "json" };
-
-export default class Translator {
-
-    constructor() {
-            this.messages=messages;
-            this.currentLanguage = 'en'; 
-            
-            if(slice.translator){
-              throw new Error("Translator already initialized")
-            }else{
-              slice.translator = this;
-            }
-        }
-  
-    
-    changeLanguage(newLanguage) {
-      this.currentLanguage = newLanguage;
-      return this.setPropertiesForComponents();
-    }
-  
-  
-   
-    setPropertiesForComponents() {
-        try {
-            const currentLanguageMessages = this.messages[this.currentLanguage];
-    
-        for (const componentName in currentLanguageMessages) {
-          const component = slice.controller.activeComponents.get(componentName);
-          const translations = currentLanguageMessages[componentName];
-          if (component) {
-            for (const prop in translations) {
-             component[prop] = translations[prop];
-            }
-          }else {
-            console.error(`Component ${componentName} not found`);
-          }
-
-        }
-
-            return true
-        } catch (error) {
-            console.log(error)
-        }
-        
-      }
-
-      setMessages(messagesObject){
-        this.messages=messagesObject;
-      }
-
-      
-
-  }
-
-
-
-
-  

package/PROJECT_TEMPLATES/Basic/Slice/Components/Service/Translator/messages.json

@@ -1,50 +0,0 @@
-{
-    "en": {
-        "myInput": {
-            "placeholder": "Type here"
-        },
-        "cardYoutube": {
-            "title": "Youtube in English",
-            "text": "Youtube is a video sharing platform. You can watch videos, upload your own videos and comment on videos."
-        },
-        "cardGoogle": {
-            "title": "Google in English",
-            "text": "Google is a search engine. You can search for information, images, videos and much more."
-        },
-        "cardFacebook": {
-            "title": "Facebook in English",
-            "text": "Facebook is a social network. You can share photos, videos, statuses and chat with your friends."
-        },
-        "cardTwitter": {
-            "title": "Twitter in English",
-            "text": "Twitter is a social network. You can share tweets, follow other people and stay informed."
-        },
-        "buttonLanguage": {
-            "value": "Change language"
-        }
-    },
-    "es": {
-        "myInput": {
-            "placeholder": "Escribe aquí"
-        },
-        "cardYoutube": {
-            "title": "Youtube en Español",
-            "text": "Youtube es una plataforma de intercambio de videos. Puedes ver videos, subir tus propios videos y comentar en videos."
-        },
-        "cardGoogle": {
-            "title": "Google en Español",
-            "text": "Google es un motor de búsqueda. Puedes buscar información, imágenes, videos y mucho más."
-        },
-        "cardFacebook": {
-            "title": "Facebook en Español",
-            "text": "Facebook es una red social. Puedes compartir fotos, videos, estados y chatear con tus amigos."
-        },
-        "cardTwitter": {
-            "title": "Twitter en Español",
-            "text": "Twitter es una red social. Puedes compartir tweets, seguir a otras personas y mantenerte informado."
-        },
-        "buttonLanguage": {
-            "value": "Cambiar idioma"
-        }
-    }
-}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Structural/Controller/Controller.js

@@ -1,106 +0,0 @@
-import components from "../../components.js";
-
-export default class Controller {
-  constructor() {
-    this.componentCategories = new Map(Object.entries(components));
-    this.templates = new Map();
-    this.classes = new Map();
-    this.requestedStyles = new Set();
-    this.activeComponents = new Map();
-    this.idCounter = 0;
-  }
-
-  registerComponent(component) {
-    const htmlId = component.id;
-
-    if (htmlId && htmlId.trim() !== "") {
-      if (this.activeComponents.has(htmlId)) {
-        slice.logger.logError(
-          "Controller",
-          `A component with the same html id attribute is already registered: ${htmlId}`
-        );
-        return null;
-      }
-    }
-
-    let sliceId = component.sliceId;
-
-    if (sliceId && sliceId.trim() !== "") {
-      if (this.activeComponents.has(sliceId)) {
-        slice.logger.logError(
-          "Controller",
-          `A component with the same slice id attribute is already registered: ${sliceId}`
-        );
-        return null;
-      }
-    } else {
-        sliceId = `${component.constructor.name[0].toLowerCase()}${component.constructor.name.slice(1)}-${this.idCounter}`;
-        component.sliceId = sliceId;
-        this.idCounter++;
-    }
-
-    this.activeComponents.set(sliceId, component);
-    return true;
-  }
-
-  getComponent(id) {
-    return this.activeComponents.get(id);
-  }
-
-  //Attach template to component
-  loadTemplateToComponent(component) {
-    const className = component.constructor.name;
-    const template = this.templates.get(className);
-
-    if (!template) {
-      console.error(`Template not found for component: ${className}`);
-      return;
-    }
-
-    component.innerHTML = template.innerHTML;
-    return component;
-  }
-
-  getComponentCategory(componentName) {
-    return this.componentCategories.get(componentName);
-  }
-
-  async fetchText(componentName, fileType) {
-    const componentCategory = this.getComponentCategory(componentName);
-
-    let path;
-
-    if (fileType === "css") {
-      path = `Slice/${slice.paths.components}/${componentCategory}/${componentName}/${componentName}.css`;
-    }
-
-    if (fileType === "html") {
-      path = `Slice/${slice.paths.components}/${componentCategory}/${componentName}/${componentName}.html`;
-    }
-
-    if (fileType === "theme") {
-      path = `Slice/${slice.paths.themes}/${componentName}.css`;
-    }
-
-    if (fileType === "styles") {
-      path = `Slice/${slice.paths.styles}/${componentName}.css`;
-    }
-
-    const response = await fetch(path);
-    const html = await response.text();
-    return html;
-  }
-
-  setComponentProps(component, props) {
-    for (const prop in props) {
-      component[`_${prop}`] = null;
-      component[prop] = props[prop];
-    }
-  }
-
-  destroyComponent(component) {
-    const sliceId = component.sliceId;
-    this.activeComponents.delete(sliceId);
-    component.remove();
-  }
-}