slicejs-web-framework 3.3.0 → 3.3.1

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

@@ -132,7 +132,7 @@ export default class Controller {
          try {
             const bundleInfo = this.getBundleInfo(resolvedBundleName);
             if (!bundleInfo) {
-               console.warn(`Bundle ${resolvedBundleName} not found in configuration`);
+               slice.logger.logWarning('Controller', `Bundle ${resolvedBundleName} not found in configuration`);
                return;
              }
 
@@ -308,7 +308,7 @@ export default class Controller {
    registerBundleLegacy(bundle) {
       const { components, metadata } = bundle;
 
-      console.log(`📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+      slice.logger.logInfo('Controller', `📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
 
       // Phase 1: Register templates and CSS for all components first
       for (const [componentName, componentData] of Object.entries(components)) {
@@ -329,7 +329,7 @@ export default class Controller {
                }
             }
          } catch (error) {
-            console.warn(`❌ Failed to register assets for ${componentName}:`, error);
+            slice.logger.logError('Controller', `❌ Failed to register assets for ${componentName}`, error);
          }
       }
 
@@ -369,8 +369,8 @@ export default class Controller {
                            window.document
                         );
                      } catch (evalError) {
-                        console.warn(`❌ Failed to evaluate processed dependency ${depName}:`, evalError);
-                        console.warn('Processed content preview:', processedContent.substring(0, 200));
+                        slice.logger.logWarning('Controller', `❌ Failed to evaluate processed dependency ${depName}: ${evalError}`);
+                        slice.logger.logWarning('Controller', `Processed content preview: ${processedContent.substring(0, 200)}`);
                         // Try evaluating the original content as fallback
                         try {
                            new Function('slice', 'customElements', 'window', 'document', depContent)(
@@ -379,16 +379,16 @@ export default class Controller {
                               window,
                               window.document
                            );
-                           console.log(`✅ Fallback evaluation succeeded for ${depName}`);
+                           slice.logger.logInfo('Controller', `✅ Fallback evaluation succeeded for ${depName}`);
                         } catch (fallbackError) {
-                           console.warn(`❌ Fallback evaluation also failed for ${depName}:`, fallbackError);
+                           slice.logger.logWarning('Controller', `❌ Fallback evaluation also failed for ${depName}: ${fallbackError}`);
                         }
                      }
 
                      processedDeps.add(depName);
-                     console.log(`📄 Dependency loaded: ${depName}`);
+                     slice.logger.logInfo('Controller', `📄 Dependency loaded: ${depName}`);
                   } catch (depError) {
-                     console.warn(`⚠️ Failed to load dependency ${depName} for ${componentName}:`, depError);
+                     slice.logger.logWarning('Controller', `⚠️ Failed to load dependency ${depName} for ${componentName}: ${depError}`);
                   }
                }
             }
@@ -443,11 +443,11 @@ export default class Controller {
 
                if (componentClass) {
                   this.classes.set(componentName, componentClass);
-                  console.log(`📝 Class registered for: ${componentName}`);
+                  slice.logger.logInfo('Controller', `📝 Class registered for: ${componentName}`);
                }
             } catch (error) {
-               console.warn(`❌ Failed to evaluate class for ${componentName}:`, error);
-               console.warn('Code that failed:', componentData.js.substring(0, 200) + '...');
+               slice.logger.logWarning('Controller', `❌ Failed to evaluate class for ${componentName}: ${error}`);
+               slice.logger.logWarning('Controller', `Code that failed: ${componentData.js.substring(0, 200) + '...'}`);
             }
          }
       }
@@ -459,7 +459,7 @@ export default class Controller {
      registerBundle(bundle) {
        const validation = this.validateBundle(bundle);
        if (!validation.isValid) {
-          console.warn(`❌ Bundle validation failed: ${validation.error}`);
+          slice.logger.logWarning('Controller', `❌ Bundle validation failed: ${validation.error}`);
           return Promise.resolve(false);
        }
 
@@ -474,7 +474,7 @@ export default class Controller {
         }
      }
 
-    console.log(`📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+    slice.logger.logInfo('Controller', `📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
 
       const entries = Object.entries(components);
       const chunkSize = 50;
@@ -505,22 +505,20 @@ export default class Controller {
                       : componentName;
                    this.classes.set(registeredName, componentData.class);
                    if (componentName === 'Loading') {
-                      console.log('🔎 Bundle class registered: Loading', {
-                         registeredName,
-                         type: typeof componentData.class,
-                         isFunction: typeof componentData.class === 'function'
-                      });
+                      slice.logger.logInfo(
+                         'Controller',
+                         `🔎 Bundle class registered: Loading (registeredName=${registeredName}, type=${typeof componentData.class}, isFunction=${typeof componentData.class === 'function'})`
+                      );
                    }
                    if (componentName === 'InputSearchDocs' || componentName === 'MainMenu') {
-                      console.log(`🔎 Bundle class registered: ${componentName}`, {
-                         registeredName,
-                         type: typeof componentData.class,
-                         isFunction: typeof componentData.class === 'function'
-                      });
+                      slice.logger.logInfo(
+                         'Controller',
+                         `🔎 Bundle class registered: ${componentName} (registeredName=${registeredName}, type=${typeof componentData.class}, isFunction=${typeof componentData.class === 'function'})`
+                      );
                    }
                 }
             } catch (error) {
-               console.warn(`❌ Failed to register component ${componentName}:`, error);
+               slice.logger.logError('Controller', `❌ Failed to register component ${componentName}`, error);
             }
          }
 
@@ -534,7 +532,7 @@ export default class Controller {
              return;
           }
 
-          console.log(`✅ Bundle registration completed: ${metadata.componentCount} components processed`);
+          slice.logger.logInfo('Controller', `✅ Bundle registration completed: ${metadata.componentCount} components processed`);
           resolve(true);
         };
 

package/Slice/Components/Structural/Logger/Logger.js

@@ -5,7 +5,6 @@ export default class Logger {
       this.logs = [];
       this.logEnabled = slice.loggerConfig.enabled;
       this.showLogsConfig = slice.loggerConfig.showLogs;
-      console.log(slice.loggerConfig)
 
       this.showLog = function showLog(log) {
          if (!this.showLogsConfig) return;

package/Slice/Slice.js

@@ -161,7 +161,7 @@ export default class Slice {
 
          // 📦 If component is from bundle but not in cache, it should have been registered by registerBundle
          if (isFromBundle) {
-            console.log(`📦 Using bundled component: ${componentName}`);
+            this.logger.logInfo('Slice', `📦 Using bundled component: ${componentName}`);
          }
 
          if (html || html === '') {
@@ -181,7 +181,6 @@ export default class Slice {
             this.logger.logInfo('Slice', `CSS ${componentName} loaded`);
          }
       } catch (error) {
-         console.log(error);
          this.logger.logError('Slice', `Error loading resources for ${componentName}`, error);
          return null;
       }
@@ -196,20 +195,10 @@ export default class Slice {
          delete props.sliceId;
 
        const ComponentClass = this.controller.classes.get(componentName);
-       if (componentName === 'Loading') {
-          console.log('🔎 Build component: Loading', {
-             classType: typeof ComponentClass,
-             isFunction: typeof ComponentClass === 'function',
-             classValue: ComponentClass
-          });
-       }
-       if (componentName === 'InputSearchDocs' || componentName === 'MainMenu') {
-          console.log(`🔎 Build component: ${componentName}`, {
-             classType: typeof ComponentClass,
-             isFunction: typeof ComponentClass === 'function',
-             classValue: ComponentClass
-          });
-       }
+       this.logger.logInfo(
+          'Slice',
+          `🔎 Build component: ${componentName} (classType: ${typeof ComponentClass}, isFunction: ${typeof ComponentClass === 'function'})`
+       );
        const componentInstance = new ComponentClass(props);
 
          if (componentIds.id && isVisual) componentInstance.id = componentIds.id;
@@ -234,7 +223,6 @@ export default class Slice {
          this.logger.logInfo('Slice', `Instance ${componentInstance.sliceId} created`);
          return componentInstance;
       } catch (error) {
-         console.log(error);
          this.logger.logError('Slice', `Error creating instance ${componentName}`, error);
          return null;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "",
   "engines": {
     "node": ">=20"

package/src/Components/components.js

@@ -1,15 +1,8 @@
+// Template registry: only the AppComponents the starter ships in-tree.
+// Visual and Service components are installed from the registry by `slice init`
+// (and any later `slice get`), which registers them here automatically.
 const components = {
   "AppShell": "AppComponents",
   "HomeSection": "AppComponents",
-  "AboutSection": "AppComponents",
-  "Button": "Visual",
-  "Link": "Visual",
-  "Loading": "Visual",
-  "MultiRoute": "Visual",
-  "Navbar": "Visual",
-  "NotFound": "Visual",
-  "Route": "Visual",
-  "FetchManager": "Service",
-  "IndexedDbManager": "Service",
-  "LocalStorageManager": "Service"
+  "AboutSection": "AppComponents"
 }; export default components;

package/src/Components/Service/FetchManager/FetchManager.js

@@ -1,133 +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/src/Components/Service/IndexedDbManager/IndexedDbManager.js

@@ -1,141 +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/src/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/src/Components/Visual/Button/Button.css

@@ -1,47 +0,0 @@
-.slice_button_container {
-  padding: 10px;
-}
-.slice_button_value {
-  user-select: none;
-  cursor: pointer;
-}
-.slice_button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  max-width: fit-content;
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-  border-radius: var(--border-radius-slice);
-  border: var(--slice-border) solid var(--primary-color);
-  font-weight: 800;
-  min-width: 100%;
-  padding: 10px;
-  -webkit-transition-duration: 0.4s; /* Safari */
-  transition-duration: 0.4s;
-}
-.slice_button:after {
-  content: "";
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
-  background: #ffffff50;
-  position: absolute;
-  display: block;
-  opacity: 0;
-  scale: 10;
-  transition: all 1s;
-}
-.slice_button:active {
-  transform: translateY(5px);
-}
-.slice_button:active:after {
-  scale: 0;
-  padding: 0;
-  margin: 0;
-  opacity: 1;
-  transition: 0s;
-}

package/src/Components/Visual/Button/Button.html

@@ -1,5 +0,0 @@
-<div class="slice_button_container">
-  <button class="slice_button">
-    <label class="slice_button_value"></label>
-  </button>
-</div>

package/src/Components/Visual/Button/Button.js

@@ -1,93 +0,0 @@
-export default class Button extends HTMLElement {
-
-   static props = {
-      value: { 
-         type: 'string', 
-         default: 'Button', 
-         required: false 
-      },
-      onClickCallback: { 
-         type: 'function', 
-         default: null 
-      },
-      customColor: { 
-         type: 'object', 
-         default: null 
-      },
-      icon: { 
-         type: 'object', 
-         default: null 
-      }
-   };
-
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$value = this.querySelector('.slice_button_value');
-      this.$button = this.querySelector('.slice_button');
-      this.$container = this.querySelector('.slice_button_container');
-      
-      if (props.onClickCallback) {
-         this.onClickCallback = props.onClickCallback;
-         this.$container.addEventListener('click', async () => await this.onClickCallback());
-      }
-
-      slice.controller.setComponentProps(this, props);
-   }
-
-   async init() {
-      if (this.icon) {
-         this.$icon = await slice.build('Icon', {
-            name: this.icon,
-            size: '20px',
-            color: 'currentColor',
-         });
-         this.$button.insertBefore(this.$icon, this.$value);
-      }
-   }
-
-   get icon() {
-      return this._icon;
-   }
-
-   set icon(value) {
-      this._icon = value;
-      if (!this.$icon) return;
-      this.$icon.name = value.name;
-      this.$icon.iconStyle = value.iconStyle;
-   }
-
-   get value() {
-      return this._value;
-   }
-
-   set value(value) {
-      this._value = value;
-      this.$value.textContent = value;
-   }
-
-   get customColor() {
-      return this._customColor;
-   }
-
-   set customColor(value) {
-      this._customColor = value;
-      if (!value) return;
-
-      // Mantener la misma API: { button: 'color', label: 'color' }
-      if (value.button) {
-         this.$button.style.backgroundColor = value.button;
-         this.$button.style.borderColor = value.button;
-      }
-      if (value.label) {
-         this.$button.style.color = value.label;
-         this.$value.style.color = value.label;
-         // También aplicar al icono si existe
-         if (this.$icon) {
-            this.$icon.style.color = value.label;
-         }
-      }
-   }
-}
-
-customElements.define('slice-button', Button);