slicejs-cli 1.0.0

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

@@ -0,0 +1,62 @@
+ export default class FetchManager {
+    constructor(baseUrl, timeout) {
+        if(baseUrl != undefined){
+            this.url = baseUrl;
+        }
+        this.methods = ["GET", "POST", "PUT", "DELETE"];
+        
+        if(timeout != undefined){
+            this.timeout = timeout;
+        } else {this.timeout=5000}
+    }
+
+    async request(method, data, endpoint) {
+
+        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"
+                },
+                signal: controller.signal,
+            }
+        }else{
+            options = {
+                method: method,
+                signal: controller.signal,
+            }
+        }
+        
+        
+        if(data!=null){
+            options.body = JSON.stringify(data);
+        }
+        
+        if(slice.controller.components.has("myLoading")){
+            slice.controller.components.delete("myLoading")
+        }
+        
+        let loading = await slice.getInstance("Loading", {id:"myLoading"});
+        loading.start();
+        const timeoutId = setTimeout(() => controller.abort(), this.timeout || 10000)
+
+        let response;
+        if(this.baseUrl != undefined){
+         response = await fetch(this.url + endpoint, options);
+        }else{
+          response = await fetch(endpoint, options);
+        }
+        
+        let output = await response.json();
+        loading.stop();
+
+        return output;
+    }
+        
+}
+

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

@@ -0,0 +1,138 @@
+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/Components/Service/LocalStorageManager/LocalStorageManager.js

@@ -0,0 +1,45 @@
+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/Components/Service/Translator/Translator.js

@@ -0,0 +1,59 @@
+export default class Translator {
+
+    constructor() {
+            this.messages={
+                "en":{
+        
+                    "myInput":{
+                        "placeholder":"Type here"
+                    }
+        
+                },
+                "es":{
+                   
+                    "myInput":{
+                        "placeholder":"Escribe aquí"
+                    }
+                }
+            }
+        this.currentLanguage = 'en'; 
+        }
+  
+    
+    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)
+        }
+        
+      }
+
+  }
+
+
+
+
+  

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

@@ -0,0 +1,108 @@
+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 = `slice-${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(componentSliceId){
+        return this.componentCategories.get(componentSliceId);
+    }
+
+    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`;
+        }
+
+        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];
+        }
+      }
+
+    removeVisualPropsFromComponent(component, props){
+        const filteredProps = props.filter(prop => !component.visualProps.includes(prop));
+        component.visualProps = filteredProps;
+    }
+
+    destroyComponent(component){
+        const sliceId = component.sliceId;
+        this.activeComponents.delete(sliceId);
+        component.remove();
+    }
+
+
+}

package/PROJECT_TEMPLATES/Basic/Components/Structural/Debugger/Debugger.css

@@ -0,0 +1,58 @@
+#debugger-container {
+  display: none;
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  padding: 15px;
+  border: 1px solid var(--primary-color);
+  background-color: var(--primary-background-color);
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+#debugger-container.active {
+  display: block;
+}
+
+#close-debugger {
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 14px;
+  color: var(--danger-color);
+}
+
+h3 {
+  color: var(--primary-color);
+  margin-bottom: 10px;
+}
+
+#component-details table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+#component-details th,
+#component-details td {
+  border: 1px solid #2b2a4c;
+  padding: 12px;
+  text-align: left;
+}
+
+#component-details th {
+  background-color: #ede2de;
+  color: #2b2a4c;
+}
+
+#component-details td {
+  background-color: #fff;
+  color: #555;
+}
+
+/* Estilo para las filas impares, solo para mejorar la legibilidad */
+#component-details tr:nth-child(odd) {
+  background-color: #f9f9f9;
+}

package/PROJECT_TEMPLATES/Basic/Components/Structural/Debugger/Debugger.html

@@ -0,0 +1,6 @@
+<div id="debugger-container">
+    <div id="close-debugger">[Close]</div>
+    <h3>Component Details</h3>
+    <ul id="component-details"></ul>
+</div>
+

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

@@ -0,0 +1,177 @@
+import sliceConfig from "../../../sliceConfig.json" assert { type: "json" };
+
+export default class Debugger extends HTMLElement {
+  constructor(slice) {
+    super();
+    this.enabled = sliceConfig.debugger.enabled;
+    this.toggleClick = sliceConfig.debugger.click;
+    this.toggle = "click";
+  }
+
+  async enableDebugMode() {
+    const html = await slice.controller.fetchText("Debugger", "html");
+    this.innerHTML = html;
+    const css = await slice.controller.fetchText("Debugger", "css");
+    slice.stylesManager.registerComponentStyles("Debugger", css);
+
+    this.debuggerContainer = this.querySelector("#debugger-container");
+    this.closeDebugger = this.querySelector("#close-debugger");
+    this.componentDetailsList = this.querySelector("#component-details");
+
+    this.closeDebugger.addEventListener("click", () => this.hideDebugger());
+
+    // Arrastrar y soltar
+    this.makeDraggable();
+
+    slice.logger.logInfo("Logger", "Debug mode enabled");
+    return true;
+  }
+
+  attachDebugMode(component) {
+    if (this.toggleClick === "right") {
+      this.toggle = "contextmenu";
+    } else {
+      this.toggle = "click";
+    }
+    component.addEventListener(this.toggle, (event) =>
+      this.handleDebugClick(event, component)
+    );
+  }
+
+  // VISUAL
+
+  makeDraggable() {
+    let offsetX, offsetY;
+    let isDragging = false;
+
+    this.debuggerContainer.addEventListener("mousedown", (event) => {
+      isDragging = true;
+      offsetX =
+        event.clientX - this.debuggerContainer.getBoundingClientRect().left;
+      offsetY =
+        event.clientY - this.debuggerContainer.getBoundingClientRect().top;
+    });
+
+    document.addEventListener("mousemove", (event) => {
+      if (isDragging) {
+        const x = event.clientX - offsetX;
+        const y = event.clientY - offsetY;
+
+        this.debuggerContainer.style.left = `${x}px`;
+        this.debuggerContainer.style.top = `${y}px`;
+      }
+    });
+
+    document.addEventListener("mouseup", () => {
+      isDragging = false;
+    });
+  }
+
+  handleDebugClick(event, component) {
+    event.preventDefault();
+    const sliceId = component.sliceId;
+
+    const componentDetails = {
+      SliceId: sliceId,
+      ClassName: component.constructor.name,
+      ObservedAttributes: {},
+    };
+
+    const realComponentProps = component.debuggerProps;
+
+    realComponentProps.forEach((attr) => {
+      //verify if the attr doesnt exist in the component, assign the value of _attr
+      if (component[attr] === undefined) {
+        componentDetails.ObservedAttributes[attr] = component[`_${attr}`];
+      } else {
+        componentDetails.ObservedAttributes[attr] = component[attr];
+      }
+    });
+
+    // Mostrar observedAttributes y sus valores
+    this.showComponentDetails(componentDetails);
+  }
+
+  showComponentDetails(details) {
+    this.componentDetailsList.innerHTML = "";
+
+    // Mostrar información general
+    Object.entries(details).forEach(([key, value]) => {
+      const listItem = document.createElement("li");
+      listItem.textContent = `${key}: ${value}`;
+      this.componentDetailsList.appendChild(listItem);
+    });
+
+    // Mostrar observedAttributes y sus valores
+    const observedAttributesWithValues = this.getAttributesWithValues(
+      details.ObservedAttributes
+    );
+    const observedAttributesWithoutValues = this.getAttributesWithoutValues(
+      details.ObservedAttributes
+    );
+
+    if (observedAttributesWithValues.length > 0) {
+      this.createTable(
+        "Attributes with Values",
+        observedAttributesWithValues,
+        details
+      );
+    }
+
+    if (observedAttributesWithoutValues.length > 0) {
+      this.createTable(
+        "Attributes without Values",
+        observedAttributesWithoutValues,
+        details
+      );
+    }
+
+    this.debuggerContainer.classList.add("active");
+  }
+
+  createTable(title, attributes, details) {
+    const tableContainer = document.createElement("div");
+    tableContainer.classList.add("table-container");
+
+    const titleElement = document.createElement("h4");
+    titleElement.textContent = title;
+    tableContainer.appendChild(titleElement);
+
+    const table = document.createElement("table");
+    const thead = table.createTHead();
+    const tbody = table.createTBody();
+
+    const headerRow = thead.insertRow();
+    const headerCell1 = headerRow.insertCell(0);
+    const headerCell2 = headerRow.insertCell(1);
+
+    headerCell1.textContent = "Attribute";
+    headerCell2.textContent = "Value";
+
+    attributes.forEach((attr) => {
+      const row = tbody.insertRow();
+      const cell1 = row.insertCell(0);
+      const cell2 = row.insertCell(1);
+
+      cell1.textContent = attr;
+      cell2.textContent = details.ObservedAttributes[attr];
+    });
+
+    tableContainer.appendChild(table);
+    this.componentDetailsList.appendChild(tableContainer);
+  }
+
+  getAttributesWithValues(attributes) {
+    return Object.keys(attributes).filter((attr) => attributes[attr] !== null);
+  }
+
+  getAttributesWithoutValues(attributes) {
+    return Object.keys(attributes).filter((attr) => attributes[attr] === null);
+  }
+
+  hideDebugger() {
+    this.debuggerContainer.classList.remove("active");
+  }
+}
+
+customElements.define("slice-debugger", Debugger);

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

@@ -0,0 +1,10 @@
+export default class Log {
+    constructor(logType, componentCategory, componentSliceId, message, error = null) {
+        this.logType = logType;
+        this.componentCategory = componentCategory;
+        this.componentSliceId = componentSliceId;
+        this.message = message;
+        this.error = error;
+        this.timestamp = new Date();
+    }
+}