slicejs-web-framework 2.3.3 → 2.3.5

package/Slice/Components/Structural/ContextManager/ContextManagerDebugger.js

@@ -17,6 +17,7 @@ export default class ContextManagerDebugger extends HTMLElement {
       slice.stylesManager.registerComponentStyles('ContextManagerDebugger', this.renderStyles());
       this.cacheElements();
       this.bindEvents();
+      this.makeDraggable();
       this.renderList();
    }
 
@@ -53,6 +54,7 @@ export default class ContextManagerDebugger extends HTMLElement {
 
    cacheElements() {
       this.container = this.querySelector('#context-debugger');
+      this.header = this.querySelector('.context-header');
       this.list = this.querySelector('#context-list');
       this.filterInput = this.querySelector('#context-filter');
       this.countLabel = this.querySelector('#context-count');
@@ -69,6 +71,42 @@ export default class ContextManagerDebugger extends HTMLElement {
       });
    }
 
+   makeDraggable() {
+      if (!this.header || !this.container) return;
+
+      let offset = { x: 0, y: 0 };
+      let isDragging = false;
+
+      this.header.style.cursor = 'grab';
+
+      this.header.addEventListener('mousedown', (event) => {
+         if (event.target.closest('.btn')) return;
+         isDragging = true;
+         offset.x = event.clientX - this.container.getBoundingClientRect().left;
+         offset.y = event.clientY - this.container.getBoundingClientRect().top;
+         this.header.style.cursor = 'grabbing';
+      });
+
+      document.addEventListener('mousemove', (event) => {
+         if (!isDragging) return;
+         const rect = this.container.getBoundingClientRect();
+         const maxX = window.innerWidth - rect.width;
+         const maxY = window.innerHeight - rect.height;
+         const x = Math.min(Math.max(event.clientX - offset.x, 0), maxX);
+         const y = Math.min(Math.max(event.clientY - offset.y, 0), maxY);
+         this.container.style.left = `${x}px`;
+         this.container.style.top = `${y}px`;
+         this.container.style.right = 'auto';
+         this.container.style.bottom = 'auto';
+      });
+
+      document.addEventListener('mouseup', () => {
+         if (!isDragging) return;
+         isDragging = false;
+         this.header.style.cursor = 'grab';
+      });
+   }
+
    renderList() {
       if (!slice?.context?.contexts) {
          this.list.textContent = 'ContextManager not available.';
@@ -165,6 +203,7 @@ export default class ContextManagerDebugger extends HTMLElement {
          padding: 12px 14px;
          background: var(--tertiary-background-color);
          border-bottom: 1px solid var(--medium-color);
+         user-select: none;
       }
 
       .context-header .title {

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

@@ -18,6 +18,7 @@ export default class EventManagerDebugger extends HTMLElement {
       slice.stylesManager.registerComponentStyles('EventManagerDebugger', this.renderStyles());
       this.cacheElements();
       this.bindEvents();
+      this.makeDraggable();
       this.renderList();
    }
 
@@ -54,6 +55,7 @@ export default class EventManagerDebugger extends HTMLElement {
 
    cacheElements() {
       this.container = this.querySelector('#events-debugger');
+      this.header = this.querySelector('.events-header');
       this.list = this.querySelector('#events-list');
       this.filterInput = this.querySelector('#events-filter');
       this.countLabel = this.querySelector('#events-count');
@@ -70,6 +72,42 @@ export default class EventManagerDebugger extends HTMLElement {
       });
    }
 
+   makeDraggable() {
+      if (!this.header || !this.container) return;
+
+      let offset = { x: 0, y: 0 };
+      let isDragging = false;
+
+      this.header.style.cursor = 'grab';
+
+      this.header.addEventListener('mousedown', (event) => {
+         if (event.target.closest('.btn')) return;
+         isDragging = true;
+         offset.x = event.clientX - this.container.getBoundingClientRect().left;
+         offset.y = event.clientY - this.container.getBoundingClientRect().top;
+         this.header.style.cursor = 'grabbing';
+      });
+
+      document.addEventListener('mousemove', (event) => {
+         if (!isDragging) return;
+         const rect = this.container.getBoundingClientRect();
+         const maxX = window.innerWidth - rect.width;
+         const maxY = window.innerHeight - rect.height;
+         const x = Math.min(Math.max(event.clientX - offset.x, 0), maxX);
+         const y = Math.min(Math.max(event.clientY - offset.y, 0), maxY);
+         this.container.style.left = `${x}px`;
+         this.container.style.top = `${y}px`;
+         this.container.style.right = 'auto';
+         this.container.style.bottom = 'auto';
+      });
+
+      document.addEventListener('mouseup', () => {
+         if (!isDragging) return;
+         isDragging = false;
+         this.header.style.cursor = 'grab';
+      });
+   }
+
    renderList() {
       if (!slice?.events?.subscriptions) {
          this.list.textContent = 'EventManager not available.';
@@ -79,11 +117,23 @@ export default class EventManagerDebugger extends HTMLElement {
 
       const items = [];
       slice.events.subscriptions.forEach((subs, eventName) => {
-         const count = subs.size;
+         const entries = Array.from(subs.entries()).map(([id, sub]) => {
+            const componentSliceId = sub.componentSliceId || null;
+            const component = componentSliceId ? slice.controller.getComponent(componentSliceId) : null;
+            const componentName = component?.constructor?.name || null;
+            return {
+               id,
+               once: sub.once,
+               componentSliceId,
+               componentName
+            };
+         });
+
          if (this.filterText && !eventName.toLowerCase().includes(this.filterText)) {
             return;
          }
-         items.push({ eventName, count });
+
+         items.push({ eventName, count: subs.size, entries });
       });
 
       items.sort((a, b) => a.eventName.localeCompare(b.eventName));
@@ -91,11 +141,29 @@ export default class EventManagerDebugger extends HTMLElement {
       this.countLabel.textContent = String(items.length);
       this.list.innerHTML = items.length
          ? items.map((item) => {
+              const details = item.entries.map((entry) => {
+                 const label = entry.componentName
+                    ? `${entry.componentName} (${entry.componentSliceId})`
+                    : entry.componentSliceId || 'Global';
+                 const onceBadge = entry.once ? '<span class="badge">once</span>' : '';
+                 return `
+                  <div class="subscriber-row">
+                     <div class="subscriber-name">${label}</div>
+                     <div class="subscriber-meta">${entry.id}${onceBadge}</div>
+                  </div>
+               `;
+              }).join('');
+
               return `
-               <div class="event-row">
-                  <div class="event-name">${item.eventName}</div>
-                  <div class="event-count">${item.count}</div>
-               </div>
+               <details class="event-row">
+                  <summary>
+                     <div class="event-name">${item.eventName}</div>
+                     <div class="event-count">${item.count}</div>
+                  </summary>
+                  <div class="subscriber-list">
+                     ${details || '<div class="empty">No subscribers</div>'}
+                  </div>
+               </details>
             `;
            }).join('')
          : '<div class="empty">No events</div>';
@@ -153,6 +221,7 @@ export default class EventManagerDebugger extends HTMLElement {
          padding: 12px 14px;
          background: var(--tertiary-background-color);
          border-bottom: 1px solid var(--medium-color);
+         user-select: none;
       }
 
       .events-header .title {
@@ -202,13 +271,24 @@ export default class EventManagerDebugger extends HTMLElement {
       }
 
       .event-row {
-         display: flex;
-         justify-content: space-between;
+         display: block;
          padding: 8px 10px;
          background: var(--tertiary-background-color);
          border-radius: 6px;
          border: 1px solid var(--medium-color);
+      }
+
+      .event-row summary {
+         display: flex;
+         align-items: center;
+         justify-content: space-between;
          gap: 8px;
+         cursor: pointer;
+         list-style: none;
+      }
+
+      .event-row summary::-webkit-details-marker {
+         display: none;
       }
 
       .event-name {
@@ -225,6 +305,49 @@ export default class EventManagerDebugger extends HTMLElement {
          color: var(--primary-color);
       }
 
+      .subscriber-list {
+         margin-top: 10px;
+         display: flex;
+         flex-direction: column;
+         gap: 8px;
+      }
+
+      .subscriber-row {
+         display: flex;
+         justify-content: space-between;
+         gap: 8px;
+         padding: 6px 8px;
+         border-radius: 6px;
+         background: var(--primary-background-color);
+         border: 1px solid var(--medium-color);
+      }
+
+      .subscriber-name {
+         font-size: 12px;
+         color: var(--font-primary-color);
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;
+      }
+
+      .subscriber-meta {
+         font-size: 11px;
+         color: var(--font-secondary-color);
+         display: flex;
+         align-items: center;
+         gap: 6px;
+         white-space: nowrap;
+      }
+
+      .badge {
+         padding: 2px 6px;
+         border-radius: 999px;
+         background: var(--secondary-color);
+         color: var(--secondary-color-contrast);
+         font-size: 10px;
+         text-transform: uppercase;
+      }
+
       .empty {
          color: var(--font-secondary-color);
          font-size: 12px;

package/api/index.js

@@ -97,12 +97,6 @@ function bundlesDirectoryExists() {
   return fs.existsSync(bundleDir) && fs.statSync(bundleDir).isDirectory();
 }
 
-// Capturar todas las peticiones a bundles para debugging
-app.use('/bundles/', (req, res, next) => {
-  console.log(`🔍 Bundle request: ${req.method} ${req.originalUrl}`);
-  next();
-});
-
 // Middleware personalizado para archivos de bundles con MIME types correctos
 // ⚠️ DEBE IR ANTES del middleware general para tener prioridad
 app.use('/bundles/', (req, res, next) => {

package/package.json

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

package/src/Components/Visual/Link/Link.css

@@ -0,0 +1,8 @@
+slice-link {
+  display: inline-flex;
+}
+
+slice-link .slice-link {
+  color: inherit;
+  text-decoration: none;
+}

package/src/Components/Visual/Link/Link.html

@@ -0,0 +1 @@
+<a href="#" class="slice-link" data-route></a>

package/src/Components/Visual/Link/Link.js

@@ -0,0 +1,63 @@
+export default class Link extends HTMLElement {
+  static props = {
+    path: { type: 'string', default: '#' },
+    classes: { type: 'string', default: '' },
+    text: { type: 'string', default: '' }
+  };
+
+  constructor(props = {}) {
+    super();
+    slice.attachTemplate(this);
+    this.$anchor = this.querySelector('.slice-link');
+
+    slice.controller.setComponentProps(this, props);
+    this.debuggerProps = ['path', 'classes', 'text'];
+  }
+
+  async init() {
+    this.updateLink();
+    this.addEventListener('click', this.onClick.bind(this));
+  }
+
+  updateLink() {
+    if (!this.$anchor) return;
+    this.$anchor.setAttribute('href', this.path || '#');
+    this.$anchor.textContent = this.text || '';
+    this.$anchor.className = `slice-link ${this.classes || ''}`.trim();
+  }
+
+  async onClick(event) {
+    event.preventDefault();
+    const path = this.path || this.$anchor?.getAttribute('href') || '#';
+    slice.router.navigate(path);
+  }
+
+  set path(value) {
+    this._path = value;
+    this.updateLink();
+  }
+
+  get path() {
+    return this._path;
+  }
+
+  set classes(value) {
+    this._classes = value;
+    this.updateLink();
+  }
+
+  get classes() {
+    return this._classes;
+  }
+
+  set text(value) {
+    this._text = value;
+    this.updateLink();
+  }
+
+  get text() {
+    return this._text;
+  }
+}
+
+customElements.define('slice-link', Link);

package/src/Components/components.js

@@ -16,12 +16,12 @@ const components = {
   "Navbar": "Visual",
   "NotFound": "Visual",
   "Route": "Visual",
+  "Link": "Visual",
   "Select": "Visual",
   "Switch": "Visual",
   "TreeItem": "Visual",
   "TreeView": "Visual",
   "FetchManager": "Service",
   "IndexedDbManager": "Service",
-  "Link": "Service",
   "LocalStorageManager": "Service"
-}; export default components;
+}; export default components;

package/src/sliceConfig.json

@@ -1,60 +1,68 @@
-{
-   "server": {
-      "port": 3001,
-      "host": "localhost"
-   },
-   "debugger": {
-      "enabled": false,
-      "click": "right"
-   },
-   "events": {
-      "enabled": true
-   },
-   "context": {
-      "enabled": true
-   },
-   "stylesManager": {
-      "requestedStyles": ["sliceStyles"]
-   },
-   "themeManager": {
-      "enabled": true,
-      "defaultTheme": "Slice",
-      "saveThemeLocally": false,
-      "useBrowserTheme": false
-   },
-   "logger": {
-      "enabled": true,
-      "showLogs": {
-         "console": {
-            "error": true,
-            "warning": true,
-            "info": false
-         }
-      }
-   },
-   "paths": {
-      "components": {
-         "AppComponents": {
-            "path": "/Components/AppComponents",
-            "type": "Visual"
-         },
-         "Visual": {
-            "path": "/Components/Visual",
-            "type": "Visual"
-         },
-         "Service": {
-            "path": "/Components/Service",
-            "type": "Service"
-         }
-      },
-      "themes": "/Themes",
-      "styles": "/Styles",
-      "routesFile": "/routes.js"
-   },
-   "router": {
-      "defaultRoute": "/"
-   },
-   "loading": {
-      "enabled": true
-   }
-}
+{
+   "server": {
+      "port": 3001,
+      "host": "localhost"
+   },
+   "debugger": {
+      "enabled": false,
+      "click": "right"
+   },
+   "events": {
+      "enabled": true,
+      "ui": {
+         "enabled": true,
+         "shortcut": "alt+shift+e"
+      }
+   },
+   "context": {
+      "enabled": true,
+      "ui": {
+         "enabled": true,
+         "shortcut": "alt+shift+c"
+      }
+   },
+   "stylesManager": {
+      "requestedStyles": ["sliceStyles"]
+   },
+   "themeManager": {
+      "enabled": true,
+      "defaultTheme": "Slice",
+      "saveThemeLocally": false,
+      "useBrowserTheme": false
+   },
+   "logger": {
+      "enabled": true,
+      "showLogs": {
+         "console": {
+            "error": true,
+            "warning": true,
+            "info": false
+         }
+      }
+   },
+   "paths": {
+      "components": {
+         "AppComponents": {
+            "path": "/Components/AppComponents",
+            "type": "Visual"
+         },
+         "Visual": {
+            "path": "/Components/Visual",
+            "type": "Visual"
+         },
+         "Service": {
+            "path": "/Components/Service",
+            "type": "Service"
+         }
+      },
+      "themes": "/Themes",
+      "styles": "/Styles",
+      "routesFile": "/routes.js"
+   },
+   "router": {
+      "defaultRoute": "/"
+   },
+   "loading": {
+      "enabled": true
+   }
+}

package/src/Components/Service/Link/Link.js

@@ -1,26 +0,0 @@
-export default class Link extends HTMLElement {
-   constructor(props = {}) {
-      super();
-      this.props = props;
-      this.innerHTML = this.getTemplate(props);
-      this.init();
-   }
-
-   init() {
-      this.addEventListener('click', this.onClick);
-   }
-
-   async onClick(event) {
-      event.preventDefault();
-      const path = this.querySelector('a').getAttribute('href');
-      const routeTargets = document.querySelectorAll('slice-routetarget');
-      slice.router.navigate(path);
-   }
-
-   getTemplate(props = {}) {
-      const { path = '#', classes = '', text = '' } = props;
-      return `<a href="${path}" class="${classes}" data-route>${text}</a>`;
-   }
-}
-
-customElements.define('slice-link', Link);