slicejs-cli 1.0.0

package/PROJECT_TEMPLATES/Basic/Components/Structural/Logger/Logger.js

@@ -0,0 +1,112 @@
+import Log from "./Log.js";
+import sliceConfig from "../../../sliceConfig.json" assert { type: "json" };
+
+
+export default class Logger {
+    constructor() {
+        this.logs = [];
+        this.logEnabled = sliceConfig.logger.enabled;
+        this.showLogsConfig = sliceConfig.logger.showLogs;
+        
+        this.showLog = function showLog(log) {
+            if (!this.showLogsConfig) return;
+        
+            const logType = log.logType;
+            
+            Object.keys(this.showLogsConfig).forEach(logConfig => {
+                if (this.showLogsConfig[logConfig][logType] === true) {
+                    switch (logConfig) {
+                        case "console":
+                            switch (logType) {
+                                case logTypes.ERROR:
+                                    console.error(`\x1b[31mERROR\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message} - ${log.error}`);
+                                    break;
+                                case logTypes.WARNING:
+                                    console.warn(`\x1b[33m⚠ WARNING\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`);
+                                    break;
+                                case logTypes.INFO:
+                                    console.log(`\x1b[32m✔ INFO\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`);
+                                    break;
+                                default:
+                                    console.log(`\x1b[37mUNKNOWN\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`);
+                            }
+                            break;
+                        case "toast":
+                            // TODO: Implement displaying a ToastAlert with the log message for each log type
+                            break;
+                    }
+                }
+            });
+        }
+        
+
+    }
+
+    createLog(logType, componentSliceId, message, error = null) {
+        if (!this.logEnabled) return;
+        let componentName;
+
+        try {
+           componentName = slice.controller.activeComponents.get(componentSliceId).constructor.name
+        } catch (error) {
+           componentName = componentSliceId;
+        }
+
+        
+        let componentCategory = slice.controller.getComponentCategory(componentName);
+        if(componentSliceId === "Slice") componentCategory = "Structural"
+        const log = new Log(logType, componentCategory, componentSliceId, message, error);
+        this.logs.push(log);
+        this.showLog(log);
+    }
+
+
+
+    logError(componentSliceId, message, error) {
+        this.createLog(logTypes.ERROR, componentSliceId, message, error);
+    }
+
+    logWarning(componentSliceId, message) {
+        this.createLog(logTypes.WARNING, componentSliceId, message);
+    }
+
+    logInfo(componentSliceId, message) {
+        this.createLog(logTypes.INFO, componentSliceId, message);
+    }
+
+    getLogs() {
+        return this.logs;
+    }
+
+    clearLogs() {
+        this.logs = [];
+    }
+
+    getLogsByType(type) {
+        return this.logs.filter(log => log.logType === type);
+    }
+
+    getLogsByCategory(componentCategory) {
+        return this.logs.filter(log => log.componentCategory === componentCategory);
+    }
+
+    getLogsByComponent(componentSliceId) {
+        return this.logs.filter(log => log.componentSliceId === componentSliceId);
+    }
+
+   
+
+
+}
+
+
+// En esta misma idea, se tiene que tomar en cuenta que el componente de ToastAlert será un toastProvider y que solo debe
+// haber un toastProvider en la página, por lo que se debe implementar un Singleton para el ToastProvider
+
+
+
+const logTypes = {
+    ERROR: 'error',
+    WARNING: 'warning',
+    INFO: 'info'
+};

package/PROJECT_TEMPLATES/Basic/Components/Structural/StylesManager/CustomStylesManager/CustomStylesManager.js

@@ -0,0 +1,52 @@
+export default class CustomStylesComponent {
+  constructor() {
+    this.styles = document.createElement('style');
+    document.head.appendChild(this.styles);
+    this.cachedStyles = new Set();
+  }
+
+  async proccess(instance,props){
+    
+    const { customCSS } = props;
+    if(customCSS.url){
+      await this.loadStyles(customCSS.url);
+    }
+    if(customCSS.classNames){
+      
+      this.removeClasses(instance);
+      await this.applyStyles(instance, customCSS.classNames);
+    }
+
+  }
+
+  async loadStyles(url) {
+    if (!this.cachedStyles.has(url)) {
+      try {
+        const response = await fetch(url);
+        const cssText = await response.text();
+
+        // Almacenar en caché el estilo
+        this.cachedStyles.add(url);
+
+        // Agregar los estilos del archivo CSS personalizado a la propiedad "styles"
+        this.styles.appendChild(document.createTextNode(cssText));
+      } catch (error) {
+        console.error(`Error al cargar el estilo personalizado: ${url}`, error);
+      }
+    }
+  }
+
+  async applyStyles(instance, classNames) {    
+    classNames.forEach(className => {
+      instance.classList.add(className);
+    });
+  }
+    
+    removeClasses(instance){
+      while (instance.classList.length > 0) {
+        instance.classList.remove(instance.classList.item(0));
+      }
+    }
+
+  
+}

package/PROJECT_TEMPLATES/Basic/Components/Structural/StylesManager/StylesManager.js

@@ -0,0 +1,38 @@
+import CustomStylesManager from "./CustomStylesManager/CustomStylesManager.js"
+import ThemeManager from "./ThemeManager/ThemeManager.js"
+
+export default class StylesManager {
+    constructor() {
+      this.componentStyles = document.createElement("style");
+      this.componentStyles.id = "slice-component-styles";
+      document.head.appendChild(this.componentStyles);
+      
+      this.customStylesManager = new CustomStylesManager();
+      this.themeManager = new ThemeManager();
+    }  
+
+    handleInstanceStyles(instance, props) {
+      if(props.customCSS){
+        this.customStylesManager.proccess(instance, props); 
+      }
+    }
+
+    setTheme(themeName){
+      this.themeManager.applyTheme(themeName);
+    }
+
+    //add a method that will add css as text to the componentStyles element
+    appendComponentStyles(cssText) {
+      this.componentStyles.appendChild(document.createTextNode(cssText));
+    }
+
+    registerComponentStyles(componentName, cssText) {
+      slice.controller.requestedStyles.add(componentName);
+      this.appendComponentStyles(cssText);
+    }
+
+
+
+
+  }
+  

package/PROJECT_TEMPLATES/Basic/Components/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -0,0 +1,25 @@
+export default class ThemeManager {
+  constructor() {
+    this.currentThemeLink = null;
+  }
+
+  async applyTheme(themeName) {
+    // Eliminar el tema actual
+    this.removeCurrentTheme();
+
+    // Crear un nuevo link y agregarlo al head
+    const themeLink = document.createElement("link");
+    themeLink.setAttribute("rel", "stylesheet");
+    themeLink.setAttribute("href", `Slice/${slice.paths.themes}/${themeName}.css`);
+    document.head.appendChild(themeLink);
+
+    // Establecer el nuevo link como el tema actual
+    this.currentThemeLink = themeLink;
+  }
+
+  removeCurrentTheme() {
+    if (this.currentThemeLink) {
+      this.currentThemeLink.parentNode.removeChild(this.currentThemeLink);
+    }
+  }
+}

package/PROJECT_TEMPLATES/Basic/Slice.js

@@ -0,0 +1,172 @@
+import Logger from "./Components/Structural/Logger/Logger.js";
+import Controller from "./Components/Structural/Controller/Controller.js";
+import StylesManager from "./Components/Structural/StylesManager/StylesManager.js";
+import Debugger from "./Components/Structural/Debugger/Debugger.js";
+import sliceConfig from "./sliceConfig.json" assert { type: "json" };
+
+
+export default class Slice {
+
+    constructor() {
+        this.logger = new Logger();
+        this.controller = new Controller();
+        this.stylesManager = new StylesManager();
+        this.paths = {
+            components: "./Components",
+            themes:"./Themes"
+        };
+        
+
+        this.getClass = async function getClass(module) {
+            try {
+                const { default: myClass } = await import(module);
+                return await myClass;
+            } catch (error) {
+                this.logger.logError("Slice", `Error loading class ${module}`, error);
+            }
+        }
+        
+    }
+
+
+    async build(componentName, props = {}) {
+
+        if(!componentName) {
+            this.logger.logError("Slice", null, `Component name is required to build a component`);
+            return null;
+        }
+
+        if(!this.controller.componentCategories.has(componentName)) {
+            this.logger.logError("Slice", null, `Component ${componentName} not found in components.js file`);
+            return null;
+        }
+
+        let compontentCategory = this.controller.componentCategories.get(componentName);
+
+        //Pregunta para la posteridad: ¿Deberíamos dejar que el usuario pueda crear componentes de categoría Structural?
+        //Por ahora no lo permitimos, pero si en el futuro se decide que sí, se debe cambiar el código de abajo para que funcione
+        //con componentes de categoría Structural
+
+                if(compontentCategory === "Structural") {
+                    this.logger.logError("Slice", null, `Component ${componentName} is a Structural component and cannot be built`);
+                    return null;
+                }
+
+
+        const isVisual = compontentCategory === "Visual";
+
+        let modulePath = `${this.paths.components}/${compontentCategory}/${componentName}/${componentName}.js`;
+
+        
+        // Load template if not loaded previously and component category is Visual
+        if (!this.controller.templates.has(componentName) && isVisual ) {
+            try {
+                const html = await this.controller.fetchText(componentName, "html");
+                const template = document.createElement("template");
+                template.innerHTML = html;
+                this.controller.templates.set(componentName, template);
+                this.logger.logInfo("Slice", `Template ${componentName} loaded`)
+            } catch (error) {
+                console.log(error)
+                this.logger.logError("Slice", `Error loading template ${componentName}`, error);
+            }
+        }
+
+    
+        //Load class if not loaded previously 
+        if (!this.controller.classes.has(componentName)) {
+            try {
+                const ComponentClass = await this.getClass(modulePath);
+                this.controller.classes.set(componentName, ComponentClass);
+                this.logger.logInfo("Slice", `Class ${componentName} loaded`)
+            } catch (error) {
+                console.log(error)
+                this.logger.logError("Slice", `Error loading class ${modulePath}`, error);
+            }
+        }
+
+        //Load css if not loaded previously and component category is Visual
+        if (!this.controller.requestedStyles.has(componentName) && isVisual) {
+            try {
+                const css = await this.controller.fetchText(componentName, "css");
+                this.stylesManager.registerComponentStyles(componentName, css);
+                this.logger.logInfo("Slice", `CSS ${componentName} loaded`)
+            } catch (error) {
+                console.log(error)
+                this.logger.logError("Slice", `Error loading css ${componentName}`, error);
+            }
+        }
+
+
+        //Create instance
+        try {
+            let componentIds = {};
+            if(props.id) componentIds.id = props.id;
+            if(props.sliceId) componentIds.sliceId = props.sliceId;
+
+            delete props.id;
+            delete props.sliceId;
+            
+            const ComponentClass = this.controller.classes.get(componentName);
+            const componentInstance = new ComponentClass(props);
+
+            if(componentIds.id) componentInstance.id = componentIds.id;
+            if(componentIds.sliceId) componentInstance.sliceId = componentIds.sliceId;
+
+            this.stylesManager.handleInstanceStyles(componentInstance,props);
+
+            if(!this.controller.registerComponent(componentInstance)) {
+                this.logger.logError("Slice", `Error registering instance ${componentName} ${componentInstance.sliceId}`);
+                return null;
+            }
+
+            if(this.debugger.enabled && compontentCategory === "Visual"){
+                this.debugger.attachDebugMode(componentInstance);
+            }
+
+            //if the component has a method called init, call it
+            if(componentInstance.init ) await componentInstance.init();
+
+            this.logger.logInfo("Slice", `Instance ${componentInstance.sliceId} created`)
+            return componentInstance;
+
+        } catch (error) {
+            console.log(error)
+            this.logger.logError("Slice", `Error creating instance ${componentName}`, error);
+        }
+
+        
+    }
+
+    setPaths(paths) {
+        this.paths = paths;
+    }
+
+    setTheme(themeName) {
+        this.stylesManager.setTheme(themeName);
+    }
+
+    attachTemplate(componentInstance) {
+        this.controller.loadTemplateToComponent(componentInstance);
+    }
+
+    
+
+    
+
+}
+
+async function init() {
+    window.slice = new Slice();
+    window.slice.debugger = new Debugger();
+
+    if(window.slice.debugger.enabled){
+       await window.slice.debugger.enableDebugMode();
+       document.body.appendChild(window.slice.debugger);
+    }
+
+    await window.slice.stylesManager.setTheme(sliceConfig.stylesManager.defaultTheme);
+
+}
+
+init();

package/PROJECT_TEMPLATES/Basic/sliceConfig.json

@@ -0,0 +1,24 @@
+{
+    "debugger": {
+        "enabled": true,
+        "click": "right"
+    },
+    "stylesManager": {
+        "defaultTheme": "Slice"
+    },
+    "logger": {
+        "enabled": true,
+        "showLogs": {
+            "console": {
+                "error": true,
+                "warning": true,
+                "info": true
+            },
+            "toast": {
+                "error": true,
+                "warning": true,
+                "info": true
+            }
+        }
+    }
+}

package/client.js

@@ -0,0 +1,54 @@
+import { program } from "commander";
+import initializeProject from "./commands/init/init.js";
+import createComponent from "./commands/createComponent/createComponent.js";
+import modifyComponent from "./commands/modifyComponent/modifyComponent.js";
+import listComponents from "./commands/listComponents/listComponents.js";
+
+const sliceClient = program;
+
+sliceClient
+    .version('1.0.0')
+    .description('Client for managing framework components');
+
+sliceClient
+    .command('init <projectType>')
+    .description('Initialize the project')
+    .action((projectType) => {
+        initializeProject(projectType);
+    });
+
+    sliceClient
+    .command('create <componentName>')
+    .description('Create a new component')
+    .option('-category <category>', 'Specify the category of the component')
+    .option('-properties <properties>', 'Specify properties for the component (comma-separated)')
+    .action((componentName, options) => {
+        const { Category, Properties } = options;
+        const propertiesList = Properties ? Properties.split(',') : [];
+        createComponent(componentName, Category, propertiesList);
+        
+    });
+
+// Comando para modificar un componente
+sliceClient
+    .command('modify <componentName>')
+    .description('Modify an existing component')
+    .option('-category <category>', 'Component category')
+    .option('-add <addProperties>', 'Add Properties to the component (comma-separated)')
+    .option('-remove <removeProperties>', 'Remove Properties from the component (comma-separated)')
+    .action((componentName, options) => {
+        const { Add, Remove,Category } = options;
+        const addProperties = Add ? Add.split(',') : [];
+        const removeProperties = Remove ? Remove.split(',') : [];
+        modifyComponent(componentName,Category, addProperties, removeProperties);
+    });
+
+// Comando para listar todos los componentes
+sliceClient
+    .command('list')
+    .description('List all components')
+    .action(() => {
+        listComponents();
+    });
+
+sliceClient.parse(process.argv);

package/commands/createComponent/componentTemplate.js

@@ -0,0 +1,30 @@
+export default function componentTemplate(componentName, props) {
+  // Generar la lista de getters y setters para las props
+  const propGettersSetters = props.map(prop => `
+  get ${prop}() {
+      return this._${prop};
+  }
+
+  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() {}
+
+  ${propGettersSetters}
+}
+
+customElements.define("slice-${componentName.toLowerCase()}", ${componentName});
+`;
+}
+

package/commands/createComponent/createComponent.js

@@ -0,0 +1,84 @@
+
+import componentTemplate from './componentTemplate.js';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+function createComponent(componentName, category, properties) {
+
+    if (!componentName) {
+        console.error('Component name is required');
+        return;
+    }
+
+    if (!isValidComponentName(componentName)) {
+        console.error('Invalid component name. Please use only alphanumeric characters and start with a letter.');
+        return;
+    }
+
+    const categoryVariations = {
+        'Service': ['service', 'servicio', 'serv'],
+        'Visual': ['visual', 'vis'],
+        'Provider': ['provider', 'proveedor', 'prov'],
+        'Structural': ['structural', 'estructural', 'est']
+    };
+
+
+
+    // Verificar si la categoría es válida
+    let categoryIsValid = false;
+    Object.keys(categoryVariations).forEach(validCategory => {
+        if (categoryVariations[validCategory].includes(category.toLowerCase())) {
+            category = validCategory
+            categoryIsValid = true;
+        }
+    });
+
+    if (!categoryIsValid) {
+        console.error('Invalid category. Please use one of the following categories: Service, Visual, Provider, Structural');
+        return;
+    }
+
+    // Crear el nombre de la clase y del archivo
+    const className = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+    const fileName = `${className}.js`;
+    const template = componentTemplate(className, properties);
+
+
+
+    // Determinar la ruta del archivo
+
+    const componentDir = path.join(__dirname, '../../../../Slice/Components', category, className);
+
+    // Asegurarse de que el directorio del componente exista
+    fs.ensureDirSync(componentDir);
+
+    // Determinar la ruta del archivo
+    const componentPath = path.join(componentDir, fileName);
+
+    console.log(componentPath);
+
+    // Verificar si el archivo ya existe
+    if (fs.existsSync(componentPath)) {
+        console.error(`Component '${componentName}' already exists.`);
+        return;
+    }
+
+    // Escribir el código del componente en el archivo
+    fs.writeFileSync(componentPath, template);
+    fs.writeFileSync(`${componentDir}/${className}.css`, '');
+    fs.writeFileSync(`${componentDir}/${className}.html`, '');
+
+    console.log(`Component '${componentName}' created successfully.`);
+}
+
+function isValidComponentName(componentName) {
+    // Expresión regular para verificar si el nombre contiene caracteres especiales
+    const regex = /^[a-zA-Z][a-zA-Z0-9]*$/;
+    return regex.test(componentName);
+}
+
+export default createComponent;
+

package/commands/init/init.js

@@ -0,0 +1,34 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default async function initializeProject(projectType) {
+    try {
+        // Directorio de origen en el paquete
+        let sliceDir;
+        let basicPosibilities = ["basic", "Basic", "-b", "-B", "b", "B"];
+        if (basicPosibilities.includes(projectType)) {
+            sliceDir = path.join(__dirname, '../../PROJECT_TEMPLATES/Basic');
+        }
+
+        // Directorio de destino en la raíz del proyecto
+        const destinationDir = path.join(__dirname, '../../../../Slice');
+
+        // Verificar si el directorio de destino ya existe
+        if (fs.existsSync(destinationDir)) {
+            console.error('El proyecto ya cuenta con un directorio "Slice". No es posible inicializar el proyecto nuevamente');
+            return;
+        }
+
+        // Copiar el contenido del directorio de origen al directorio de destino
+        await fs.copy(sliceDir, destinationDir);
+
+        console.log('Proyecto inicializado correctamente.');
+    } catch (error) {
+        console.error('Error al inicializar el proyecto:', error);
+    }
+}
+
+

package/commands/listComponents/listComponents.js

@@ -0,0 +1,41 @@
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default function listComponents() {
+
+  const SlicePath = path.join(__dirname, '../../../../Slice/Components');
+
+  const visualComponents = fs.readdirSync(`${SlicePath}/Visual`);
+  const services = fs.readdirSync(`${SlicePath}/Service`);
+  const providers = fs.readdirSync(`${SlicePath}/Provider`);
+  const structuralComponents = fs.readdirSync(`${SlicePath}/Structural`)
+
+
+  const componentMap = new Map();
+
+  visualComponents.forEach(component => {
+    componentMap.set(component, "Visual");
+  });
+
+  services.forEach(component => {
+    componentMap.set(component, "Service");
+  });
+
+  providers.forEach(component => {
+    componentMap.set(component, "Provider");
+  });
+
+  structuralComponents.forEach(component => {
+    componentMap.set(component, "Structural");
+  });
+
+
+  const mapAsArray = Array.from(componentMap.entries());
+  const mapObject = Object.fromEntries(mapAsArray);
+
+  fs.writeFileSync(`${SlicePath}/components.js`, `const components = ${JSON.stringify(mapObject, null, 2)}; export default components;`);
+  console.log('Components list updated');
+}