slicejs-cli 1.0.44 → 1.0.46

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

@@ -1,62 +1,134 @@
- export default class FetchManager {
-    constructor(baseUrl, timeout) {
-        if(baseUrl != undefined){
-            this.url = baseUrl;
+export default class FetchManager {
+    constructor(props) {
+        const { baseUrl, timeout } = props;
+        if (baseUrl !== undefined) {
+            this.baseUrl = baseUrl;
         }
         this.methods = ["GET", "POST", "PUT", "DELETE"];
-        
-        if(timeout != undefined){
-            this.timeout = timeout;
-        } else {this.timeout=5000}
+        this.lastRequest = null;
+        this.cacheEnabled = false;
+        this.defaultHeaders = {};
+        timeout ? (this.timeout = timeout) : (this.timeout = 10000);
     }
 
-    async request(method, data, endpoint) {
-
+    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()
+        if (data && typeof data !== "object")
+            throw new Error("Invalid data, not JSON");
+        const controller = new AbortController();
 
         let options;
-        if(method !="GET"){
+        if (method !== "GET") {
             options = {
                 method: method,
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
+                    ...this.defaultHeaders,
+                    ...requestOptions.headers,
                 },
                 signal: controller.signal,
-            }
-        }else{
+            };
+        } else {
             options = {
                 method: method,
+                headers: {
+                    ...this.defaultHeaders,
+                    ...requestOptions.headers,
+                },
                 signal: controller.signal,
-            }
+            };
         }
-        
-        
-        if(data!=null){
+
+        if (data) {
             options.body = JSON.stringify(data);
         }
-        
-        if(slice.controller.components.has("myLoading")){
-            slice.controller.components.delete("myLoading")
+
+        let loading;
+        if (!slice.controller.getComponent("Loading")) {
+            loading = await slice.build("Loading", { sliceId: "Loading" });
+        } else {
+            loading = slice.controller.getComponent("Loading");
         }
-        
-        let loading = await slice.getInstance("Loading", {id:"myLoading"});
         loading.start();
-        const timeoutId = setTimeout(() => controller.abort(), this.timeout || 10000)
+        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 };
+            }
 
-        let response;
-        if(this.baseUrl != undefined){
-         response = await fetch(this.url + endpoint, options);
-        }else{
-          response = await fetch(endpoint, options);
+            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);
         }
-        
-        let output = await response.json();
-        loading.stop();
+    }
 
-        return output;
+    // 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/Translator/Translator.js

@@ -1,22 +1,16 @@
+import messages from "./messages.json" assert { type: "json" };
+
 export default class Translator {
 
     constructor() {
-            this.messages={
-                "en":{
-        
-                    "myInput":{
-                        "placeholder":"Type here"
-                    }
-        
-                },
-                "es":{
-                   
-                    "myInput":{
-                        "placeholder":"Escribe aquí"
-                    }
-                }
+            this.messages=messages;
+            this.currentLanguage = 'en'; 
+            
+            if(slice.translator){
+              throw new Error("Translator already initialized")
+            }else{
+              slice.translator = this;
             }
-        this.currentLanguage = 'en'; 
         }
   
     
@@ -51,6 +45,12 @@ export default class Translator {
         
       }
 
+      setMessages(messagesObject){
+        this.messages=messagesObject;
+      }
+
+      
+
   }
 
 

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

@@ -0,0 +1,50 @@
+{
+    "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,108 +1,106 @@
 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;
-        
+  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;
+      }
     }
 
-    getComponent(id) {
-        return this.activeComponents.get(id);
-    }
+    let sliceId = component.sliceId;
 
-    //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;
+    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;
+  }
 
-    getComponentCategory(componentSliceId){
-        return this.componentCategories.get(componentSliceId);
-    }
+  getComponent(id) {
+    return this.activeComponents.get(id);
+  }
 
-    async fetchText(componentName, fileType){
+  //Attach template to component
+  loadTemplateToComponent(component) {
+    const className = component.constructor.name;
+    const template = this.templates.get(className);
 
-        const componentCategory = this.getComponentCategory(componentName);
+    if (!template) {
+      console.error(`Template not found for component: ${className}`);
+      return;
+    }
 
-        let path;
+    component.innerHTML = template.innerHTML;
+    return component;
+  }
 
-        if(fileType === "css"){
-            path = `Slice/${slice.paths.components}/${componentCategory}/${componentName}/${componentName}.css`;
-        }
+  getComponentCategory(componentSliceId) {
+    return this.componentCategories.get(componentSliceId);
+  }
 
-        if(fileType === "html"){
-            path = `Slice/${slice.paths.components}/${componentCategory}/${componentName}/${componentName}.html`;
-        }
+  async fetchText(componentName, fileType) {
+    const componentCategory = this.getComponentCategory(componentName);
 
-        if(fileType === "theme"){
-            path = `Slice/${slice.paths.themes}/${componentName}.css`;
-        }
+    let path;
 
-        const response = await fetch(path);
-        const html = await response.text();
-        return html;
-        
+    if (fileType === "css") {
+      path = `Slice/${slice.paths.components}/${componentCategory}/${componentName}/${componentName}.css`;
     }
 
-    setComponentProps(component, props) {
-        for (const prop in props) {
-            component[`_${prop}`] = null;
-            component[prop] = props[prop];
-        }
-      }
+    if (fileType === "html") {
+      path = `Slice/${slice.paths.components}/${componentCategory}/${componentName}/${componentName}.html`;
+    }
 
-    removeVisualPropsFromComponent(component, props){
-        const filteredProps = props.filter(prop => !component.visualProps.includes(prop));
-        component.visualProps = filteredProps;
+    if (fileType === "theme") {
+      path = `Slice/${slice.paths.themes}/${componentName}.css`;
     }
 
-    destroyComponent(component){
-        const sliceId = component.sliceId;
-        this.activeComponents.delete(sliceId);
-        component.remove();
+    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();
+  }
 }

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

@@ -1,10 +1,11 @@
 #debugger-container {
+  font-family: var(--font-family);
   display: none;
   position: fixed;
   top: 20px;
   left: 20px;
-  padding: 15px;
-  border: 1px solid var(--primary-color);
+  padding: 10px;
+  border: var(--slice-border) solid var(--primary-color);
   background-color: var(--primary-background-color);
   z-index: 1000;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -15,6 +16,12 @@
   display: block;
 }
 
+.slice_thead td {
+  font-weight: bold;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+}
+
 #close-debugger {
   cursor: pointer;
   position: absolute;
@@ -29,27 +36,57 @@ h3 {
   margin-bottom: 10px;
 }
 
+#component-details {
+  color: var(--font-primary-color);
+}
+.component-details-table {
+  overflow: scroll;
+  input {
+    outline: none;
+    border-bottom: 1px solid var(--tertiary-background-color);
+  }
+}
+.component-details-table::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.component-details-table::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}
+
 #component-details table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 10px;
+  /* border: 1px solid var(--primary-color); */
+}
+
+.debugger-header {
+  border-bottom: 1px solid var(--primary-color);
+  user-select: none;
+  cursor: grab;
+}
+
+.debugger-header:active {
+  cursor: grabbing;
 }
 
 #component-details th,
 #component-details td {
-  border: 1px solid #2b2a4c;
-  padding: 12px;
+  padding: 10px;
   text-align: left;
+  border-bottom: 1px solid var(--primary-color);
 }
 
-#component-details th {
-  background-color: #ede2de;
-  color: #2b2a4c;
+input {
+  border: 0px;
 }
 
-#component-details td {
-  background-color: #fff;
-  color: #555;
+.slice_component-details td,
+input {
+  background-color: var(--secondary-background-color);
+  color: var(--font-primary-color);
 }
 
 /* Estilo para las filas impares, solo para mejorar la legibilidad */

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

@@ -1,6 +1,10 @@
 <div id="debugger-container">
-    <div id="close-debugger">[Close]</div>
+  <div class="debugger-header">
+    <div id="close-debugger">[×]</div>
     <h3>Component Details</h3>
-    <ul id="component-details"></ul>
+  </div>
+  <div id="component-details">
+    <ul class="component-details-list"></ul>
+    <div class="component-details-table"></div>
+  </div>
 </div>
-