slicejs-web-framework 2.3.1 → 2.3.2

package/Slice/Components/Structural/EventManager/EventManagerDebugger.js

@@ -0,0 +1,238 @@
+/**
+ * EventManager debug panel.
+ */
+export default class EventManagerDebugger extends HTMLElement {
+   constructor() {
+      super();
+      this.isOpen = false;
+      this.filterText = '';
+      this.refreshInterval = null;
+   }
+
+   /**
+    * Initialize panel UI.
+    * @returns {Promise<void>}
+    */
+   async init() {
+      this.innerHTML = this.renderTemplate();
+      slice.stylesManager.registerComponentStyles('EventManagerDebugger', this.renderStyles());
+      this.cacheElements();
+      this.bindEvents();
+      this.renderList();
+   }
+
+   /**
+    * Toggle panel visibility.
+    * @returns {void}
+    */
+   toggle() {
+      this.isOpen = !this.isOpen;
+      this.container.classList.toggle('active', this.isOpen);
+      if (this.isOpen) {
+         this.renderList();
+      }
+   }
+
+   /**
+    * Show panel.
+    * @returns {void}
+    */
+   open() {
+      this.isOpen = true;
+      this.container.classList.add('active');
+      this.renderList();
+   }
+
+   /**
+    * Hide panel.
+    * @returns {void}
+    */
+   close() {
+      this.isOpen = false;
+      this.container.classList.remove('active');
+   }
+
+   cacheElements() {
+      this.container = this.querySelector('#events-debugger');
+      this.list = this.querySelector('#events-list');
+      this.filterInput = this.querySelector('#events-filter');
+      this.countLabel = this.querySelector('#events-count');
+      this.refreshButton = this.querySelector('#events-refresh');
+      this.closeButton = this.querySelector('#events-close');
+   }
+
+   bindEvents() {
+      this.refreshButton.addEventListener('click', () => this.renderList());
+      this.closeButton.addEventListener('click', () => this.close());
+      this.filterInput.addEventListener('input', (event) => {
+         this.filterText = event.target.value.trim().toLowerCase();
+         this.renderList();
+      });
+   }
+
+   renderList() {
+      if (!slice?.events?.subscriptions) {
+         this.list.textContent = 'EventManager not available.';
+         this.countLabel.textContent = '0';
+         return;
+      }
+
+      const items = [];
+      slice.events.subscriptions.forEach((subs, eventName) => {
+         const count = subs.size;
+         if (this.filterText && !eventName.toLowerCase().includes(this.filterText)) {
+            return;
+         }
+         items.push({ eventName, count });
+      });
+
+      items.sort((a, b) => a.eventName.localeCompare(b.eventName));
+
+      this.countLabel.textContent = String(items.length);
+      this.list.innerHTML = items.length
+         ? items.map((item) => {
+              return `
+               <div class="event-row">
+                  <div class="event-name">${item.eventName}</div>
+                  <div class="event-count">${item.count}</div>
+               </div>
+            `;
+           }).join('')
+         : '<div class="empty">No events</div>';
+   }
+
+   renderTemplate() {
+      return `
+      <div id="events-debugger">
+         <div class="events-header">
+            <div class="title">Events</div>
+            <div class="actions">
+               <button id="events-refresh" class="btn">Refresh</button>
+               <button id="events-close" class="btn">Close</button>
+            </div>
+         </div>
+         <div class="events-toolbar">
+            <input id="events-filter" type="text" placeholder="Filter events" />
+            <div class="count">Total: <span id="events-count">0</span></div>
+         </div>
+         <div class="events-list" id="events-list"></div>
+      </div>
+      `;
+   }
+
+   renderStyles() {
+      return `
+      #events-debugger {
+         position: fixed;
+         bottom: 20px;
+         right: 20px;
+         width: min(360px, calc(100vw - 40px));
+         max-height: 60vh;
+         background: var(--primary-background-color);
+         border: 1px solid var(--medium-color);
+         border-radius: 12px;
+         box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
+         display: none;
+         flex-direction: column;
+         z-index: 10001;
+         overflow: hidden;
+      }
+
+      #events-debugger.active {
+         display: flex;
+      }
+
+      #events-debugger * {
+         box-sizing: border-box;
+      }
+
+      .events-header {
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         padding: 12px 14px;
+         background: var(--tertiary-background-color);
+         border-bottom: 1px solid var(--medium-color);
+      }
+
+      .events-header .title {
+         font-weight: 600;
+         color: var(--font-primary-color);
+      }
+
+      .events-header .actions {
+         display: flex;
+         gap: 8px;
+      }
+
+      .events-header .btn {
+         padding: 6px 10px;
+         border-radius: 6px;
+         border: 1px solid var(--medium-color);
+         background: var(--primary-background-color);
+         color: var(--font-primary-color);
+         cursor: pointer;
+         font-size: 12px;
+      }
+
+      .events-toolbar {
+         display: flex;
+         gap: 10px;
+         align-items: center;
+         padding: 10px 12px;
+         border-bottom: 1px solid var(--medium-color);
+      }
+
+      .events-toolbar input {
+         flex: 1;
+         min-width: 0;
+         padding: 6px 8px;
+         border-radius: 6px;
+         border: 1px solid var(--medium-color);
+         background: var(--primary-background-color);
+         color: var(--font-primary-color);
+      }
+
+      .events-list {
+         padding: 10px 12px;
+         overflow: auto;
+         display: flex;
+         flex-direction: column;
+         gap: 8px;
+      }
+
+      .event-row {
+         display: flex;
+         justify-content: space-between;
+         padding: 8px 10px;
+         background: var(--tertiary-background-color);
+         border-radius: 6px;
+         border: 1px solid var(--medium-color);
+         gap: 8px;
+      }
+
+      .event-name {
+         font-family: monospace;
+         font-size: 12px;
+         color: var(--font-primary-color);
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;
+      }
+
+      .event-count {
+         font-weight: 600;
+         color: var(--primary-color);
+      }
+
+      .empty {
+         color: var(--font-secondary-color);
+         font-size: 12px;
+         text-align: center;
+         padding: 12px 0;
+      }
+      `;
+   }
+}
+
+customElements.define('slice-eventmanager-debugger', EventManagerDebugger);

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

@@ -1,104 +1,146 @@
-import Log from './Log.js';
-
-export default class Logger {
-   constructor() {
-      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;
-
-         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;
-               }
-            }
-         });
-      };
-   }
-
-   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' || componentSliceId === 'ThemeManager') 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 = [];
-   }
-
-   getLogsByLogType(type) {
-      return this.logs.filter((log) => log.logType === type);
-   }
-
-   getLogsByComponentCategory(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',
-};
+import Log from './Log.js';
+
+export default class Logger {
+   constructor() {
+      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;
+
+         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;
+               }
+            }
+         });
+      };
+   }
+
+   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' || componentSliceId === 'ThemeManager') componentCategory = 'Structural';
+      const log = new Log(logType, componentCategory, componentSliceId, message, error);
+      this.logs.push(log);
+      this.showLog(log);
+   }
+
+   /**
+    * Log an error message.
+    * @param {string} componentSliceId
+    * @param {string} message
+    * @param {any} [error]
+    * @returns {void}
+    */
+   logError(componentSliceId, message, error) {
+      this.createLog(logTypes.ERROR, componentSliceId, message, error);
+   }
+
+   /**
+    * Log a warning message.
+    * @param {string} componentSliceId
+    * @param {string} message
+    * @returns {void}
+    */
+   logWarning(componentSliceId, message) {
+      this.createLog(logTypes.WARNING, componentSliceId, message);
+   }
+
+   /**
+    * Log an info message.
+    * @param {string} componentSliceId
+    * @param {string} message
+    * @returns {void}
+    */
+   logInfo(componentSliceId, message) {
+      this.createLog(logTypes.INFO, componentSliceId, message);
+   }
+
+   /**
+    * Get all logs.
+    * @returns {Array}
+    */
+   getLogs() {
+      return this.logs;
+   }
+
+   /**
+    * Clear all logs.
+    * @returns {void}
+    */
+   clearLogs() {
+      this.logs = [];
+   }
+
+   /**
+    * Filter logs by type.
+    * @param {string} type
+    * @returns {Array}
+    */
+   getLogsByLogType(type) {
+      return this.logs.filter((log) => log.logType === type);
+   }
+
+   /**
+    * Filter logs by component category.
+    * @param {string} componentCategory
+    * @returns {Array}
+    */
+   getLogsByComponentCategory(componentCategory) {
+      return this.logs.filter((log) => log.componentCategory === componentCategory);
+   }
+
+   /**
+    * Filter logs by component sliceId.
+    * @param {string} componentSliceId
+    * @returns {Array}
+    */
+   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',
+};