slicejs-web-framework 2.3.0 → 2.3.2

package/README.md

@@ -1,156 +1,155 @@
-<!-- Improved compatibility of back to top link: See: https://github.com/VKneider/slice.js/pull/73 -->
-<a name="readme-top"></a>
-<!--
-*** Thanks for checking out the slice.js. If you have a suggestion
-*** that would make this better, please fork the repo and create a pull request
-*** or simply open an issue with the tag "enhancement".
-*** Don't forget to give the project a star!
-*** Thanks again! Now go create something AMAZING! :D
--->
-
-
-
-<!-- PROJECT SHIELDS -->
-<!--
-*** I'm using markdown "reference style" links for readability.
-*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
-*** See the bottom of this document for the declaration of the reference variables
-*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
-*** https://www.markdownguide.org/basic-syntax/#reference-style-links
--->
-[![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
-[![Stargazers][stars-shield]][stars-url]
-[![Issues][issues-shield]][issues-url]
-[![MIT License][license-shield]][license-url]
-
-
-
-<!-- PROJECT LOGO -->
-<br />
-<div align="center">
-  <a href="https://github.com/VKneider/slice.js">
-    <img src="readme_images/Slice.js-logo.svg" alt="Logo" width="150" height="150">
-  </a>
-
-  <h3 align="center">Slice.js</h3>
-
-  <p align="center">
-    Component-Based Web Development Framework
-    <br />
-    <a href="https://slice-js-docs.vercel.app/Documentation"><strong>Explore the docs »</strong></a>
-    <br />
-    <br />
-    <a href="https://slice-js-docs.vercel.app/">View Demo</a>
-    ·
-    <a href="https://github.com/VKneider/slice.js/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
-    ·
-    <a href="https://github.com/VKneider/slice.js/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
-  </p>
-</div>
-
-
-
-<!-- TABLE OF CONTENTS -->
-<details>
-  <summary>Table of Contents</summary>
-  <ol>
-    <li>
-      <a href="#about-the-project">About The Project</a>
-    </li>
-    <li>
-      <a href="#getting-started">Getting Started</a>
-      <ul>
-        <li><a href="#prerequisites">Prerequisites</a></li>
-        <li><a href="#installation">Installation</a></li>
-      </ul>
-    </li>
-    <li><a href="#roadmap">Roadmap</a></li>
-    <li><a href="#contributing">Contributing</a></li>
-    <li><a href="#license">License</a></li>
-    <li><a href="#contact">Contact</a></li>
-  </ol>
-</details>
-
-
-
-<!-- ABOUT THE PROJECT -->
-## About The Project
-
-[![Product Name Screen Shot][product-screenshot]](https://slice-js-docs.vercel.app/)
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-<!-- GETTING STARTED -->
-## Getting Started
-
-This is an example of how you may give instructions on setting up your project locally.
-To get a local copy up and running follow these simple example steps.
-
-### Installation
-
-_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
-
-1. Install slicejs cli dependencies
-   ```sh
-   npm i slicejs-cli
-   ```
-2. Initialize slice project
-   ```sh
-   npm run slice:init
-   ```
-3. Start web server
-   ```sh
-   npm run slice:start
-   ```
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-
-
-<!-- ROADMAP -->
-## Roadmap
-
-- [x] Add Changelog
-- [ ] Add Image visual component
-- [ ] Modify Slice Card Visual Component
-- [ ] Create internationalization Translator Service component.
-
-See the [open issues](https://github.com/VKneider/slice.js/issues) for a full list of proposed features (and known issues).
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-
-
-<!-- CONTRIBUTING -->
-## Contributing
-
-We welcome contributions to the project! Please make sure to review the guidelines in the [CONTRIBUTING.md](docs/CONTRIBUTING.md) file before submitting any changes.
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-
-
-<!-- LICENSE -->
-## License
-
-Distributed under the MIT License. See `LICENSE` for more information.
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-<!-- MARKDOWN LINKS & IMAGES -->
-<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
-[contributors-shield]: https://img.shields.io/github/contributors/VKneider/slice.js.svg?style=for-the-badge
-[contributors-url]: https://github.com/VKneider/slice.js/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/VKneider/slice.js.svg?style=for-the-badge
-[forks-url]: https://github.com/VKneider/slice.js/network/members
-[stars-shield]: https://img.shields.io/github/stars/VKneider/slice.js.svg?style=for-the-badge
-[stars-url]: https://github.com/VKneider/slice.js/stargazers
-[issues-shield]: https://img.shields.io/github/issues/VKneider/slice.js.svg?style=for-the-badge
-[issues-url]: https://github.com/VKneider/slice.js/issues
-[license-shield]: https://img.shields.io/github/license/VKneider/slice.js.svg?style=for-the-badge
-[license-url]: https://github.com/VKneider/slice.js/blob/master/LICENSE.txt
-[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
-[linkedin-url]: https://linkedin.com/in/VKneider
-[product-screenshot]: readme_images/screenshot.JPG
-
+<!-- Improved compatibility of back to top link: See: https://github.com/VKneider/slice.js/pull/73 -->
+<a name="readme-top"></a>
+<!--
+*** Thanks for checking out the slice.js. If you have a suggestion
+*** that would make this better, please fork the repo and create a pull request
+*** or simply open an issue with the tag "enhancement".
+*** Don't forget to give the project a star!
+*** Thanks again! Now go create something AMAZING! :D
+-->
+
+
+
+<!-- PROJECT SHIELDS -->
+<!--
+*** I'm using markdown "reference style" links for readability.
+*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
+*** See the bottom of this document for the declaration of the reference variables
+*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
+*** https://www.markdownguide.org/basic-syntax/#reference-style-links
+-->
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+
+
+
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <a href="https://github.com/VKneider/slice.js">
+    <img src="readme_images/Slice.js-logo.svg" alt="Logo" width="150" height="150">
+  </a>
+
+  <h3 align="center">Slice.js</h3>
+
+  <p align="center">
+    Component-Based Web Development Framework
+    <br />
+    <a href="https://slice-js-docs.vercel.app/Documentation"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://slice-js-docs.vercel.app/">View Demo</a>
+    ·
+    <a href="https://github.com/VKneider/slice.js/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
+    ·
+    <a href="https://github.com/VKneider/slice.js/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
+  </p>
+</div>
+
+
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ol>
+</details>
+
+
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+[![Product Name Screen Shot][product-screenshot]](https://slice-js-docs.vercel.app/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+This is an example of how you may give instructions on setting up your project locally.
+To get a local copy up and running follow these simple example steps.
+
+### Installation
+
+_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
+
+1. Install slicejs cli dependencies
+   ```sh
+   npm i slicejs-cli
+   ```
+2. Initialize slice project
+   ```sh
+   npm run slice:init
+   ```
+3. Start web server
+   ```sh
+   npm run slice:start
+   ```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- ROADMAP -->
+## Roadmap
+
+- [x] Add Changelog
+- [ ] Add Image visual component
+- [ ] Modify Slice Card Visual Component
+
+See the [open issues](https://github.com/VKneider/slice.js/issues) for a full list of proposed features (and known issues).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- CONTRIBUTING -->
+## Contributing
+
+We welcome contributions to the project! Please make sure to review the guidelines in the [CONTRIBUTING.md](docs/CONTRIBUTING.md) file before submitting any changes.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- LICENSE -->
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+[contributors-shield]: https://img.shields.io/github/contributors/VKneider/slice.js.svg?style=for-the-badge
+[contributors-url]: https://github.com/VKneider/slice.js/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/VKneider/slice.js.svg?style=for-the-badge
+[forks-url]: https://github.com/VKneider/slice.js/network/members
+[stars-shield]: https://img.shields.io/github/stars/VKneider/slice.js.svg?style=for-the-badge
+[stars-url]: https://github.com/VKneider/slice.js/stargazers
+[issues-shield]: https://img.shields.io/github/issues/VKneider/slice.js.svg?style=for-the-badge
+[issues-url]: https://github.com/VKneider/slice.js/issues
+[license-shield]: https://img.shields.io/github/license/VKneider/slice.js.svg?style=for-the-badge
+[license-url]: https://github.com/VKneider/slice.js/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/VKneider
+[product-screenshot]: readme_images/screenshot.JPG
+

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

@@ -9,6 +9,12 @@
  * - Auto-limpieza cuando componentes se destruyen
  * - Persistencia opcional en localStorage
  */
+/**
+ * @typedef {Object} ContextOptions
+ * @property {boolean} [persist]
+ * @property {string} [storageKey]
+ */
+
 export default class ContextManager {
    constructor() {
       // Map<contextName, { state, options }>
@@ -25,9 +31,10 @@ export default class ContextManager {
 
    /**
     * Crear un nuevo contexto
-    * @param {string} name - Nombre único del contexto
-    * @param {Object} initialState - Estado inicial
-    * @param {Object} options - Opciones: { persist: boolean }
+    * @param {string} name - Nombre unico del contexto
+    * @param {Object} [initialState] - Estado inicial
+    * @param {ContextOptions} [options] - Opciones: { persist, storageKey }
+    * @returns {boolean}
     *
     * @example
     * slice.context.create('auth', {
@@ -76,7 +83,7 @@ export default class ContextManager {
    /**
     * Obtener el estado actual de un contexto
     * @param {string} name - Nombre del contexto
-    * @returns {*} Estado actual o null si no existe
+    * @returns {any|null} Estado actual o null si no existe
     *
     * @example
     * const auth = slice.context.getState('auth');
@@ -98,7 +105,8 @@ export default class ContextManager {
    /**
     * Actualizar el estado de un contexto
     * @param {string} name - Nombre del contexto
-    * @param {Object|Function} updater - Nuevo estado o función (prevState) => newState
+    * @param {Object|Function} updater - Nuevo estado o funcion (prevState) => newState
+    * @returns {void}
     *
     * @example
     * // Reemplazar con objeto
@@ -107,7 +115,7 @@ export default class ContextManager {
     *    user: { name: 'Juan' }
     * });
     *
-    * // Usar función para acceder al estado anterior
+    * // Usar funcion para acceder al estado anterior
     * slice.context.setState('cart', (prev) => ({
     *    ...prev,
     *    items: [...prev.items, nuevoProducto],
@@ -153,9 +161,9 @@ export default class ContextManager {
     * Observar cambios en un contexto
     * @param {string} name - Nombre del contexto
     * @param {HTMLElement} component - Componente Slice para auto-cleanup
-    * @param {Function} callback - Función a ejecutar cuando cambia
-    * @param {Function} selector - Opcional. Función para seleccionar campos específicos
-    * @returns {string} subscriptionId
+    * @param {(value: any) => void} callback - Funcion a ejecutar cuando cambia
+    * @param {(state: any) => any} [selector] - Opcional. Funcion para seleccionar campos
+    * @returns {string|null} subscriptionId
     *
     * @example
     * // Observar todo el estado
@@ -163,12 +171,12 @@ export default class ContextManager {
     *    this.render(state);
     * });
     *
-    * // Observar un campo específico
+    * // Observar un campo especifico
     * slice.context.watch('auth', this, (name) => {
     *    this.$name.textContent = name;
     * }, state => state.user.name);
     *
-    * // Observar múltiples campos
+    * // Observar multiples campos
     * slice.context.watch('auth', this, (data) => {
     *    this.$name.textContent = data.name;
     *    this.$avatar.src = data.avatar;
@@ -179,7 +187,7 @@ export default class ContextManager {
     *
     * // Valores computados
     * slice.context.watch('cart', this, (total) => {
-    *    this.$total.textContent = `$${total}`;
+    *    this.$total.textContent = `${total}`;
     * }, state => state.items.reduce((sum, i) => sum + i.price, 0));
     */
    watch(name, component, callback, selector = null) {
@@ -265,7 +273,7 @@ export default class ContextManager {
 
    /**
     * Obtener lista de todos los contextos
-    * @returns {Array<string>}
+    * @returns {string[]}
     */
    list() {
       return Array.from(this.contexts.keys());

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

@@ -0,0 +1,258 @@
+/**
+ * ContextManager debug panel.
+ */
+export default class ContextManagerDebugger extends HTMLElement {
+   constructor() {
+      super();
+      this.isOpen = false;
+      this.filterText = '';
+   }
+
+   /**
+    * Initialize panel UI.
+    * @returns {Promise<void>}
+    */
+   async init() {
+      this.innerHTML = this.renderTemplate();
+      slice.stylesManager.registerComponentStyles('ContextManagerDebugger', 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('#context-debugger');
+      this.list = this.querySelector('#context-list');
+      this.filterInput = this.querySelector('#context-filter');
+      this.countLabel = this.querySelector('#context-count');
+      this.refreshButton = this.querySelector('#context-refresh');
+      this.closeButton = this.querySelector('#context-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?.context?.contexts) {
+         this.list.textContent = 'ContextManager not available.';
+         this.countLabel.textContent = '0';
+         return;
+      }
+
+      const items = [];
+      slice.context.contexts.forEach((value, name) => {
+         if (this.filterText && !name.toLowerCase().includes(this.filterText)) {
+            return;
+         }
+         const keys = value?.state ? Object.keys(value.state).length : 0;
+         items.push({ name, keys, state: value?.state || {} });
+      });
+
+      items.sort((a, b) => a.name.localeCompare(b.name));
+
+      this.countLabel.textContent = String(items.length);
+      this.list.innerHTML = items.length
+         ? items.map((item) => {
+              const preview = JSON.stringify(item.state, null, 2);
+              return `
+               <div class="context-row">
+                  <div class="context-header">
+                     <div class="context-name">${item.name}</div>
+                     <div class="context-keys">${item.keys} keys</div>
+                  </div>
+                  <pre class="context-preview">${this.escapeHtml(preview)}</pre>
+               </div>
+            `;
+           }).join('')
+         : '<div class="empty">No contexts</div>';
+   }
+
+   escapeHtml(value) {
+      return value
+         .replace(/&/g, '&amp;')
+         .replace(/</g, '&lt;')
+         .replace(/>/g, '&gt;')
+         .replace(/"/g, '&quot;')
+         .replace(/'/g, '&#39;');
+   }
+
+   renderTemplate() {
+      return `
+      <div id="context-debugger">
+         <div class="context-header">
+            <div class="title">Contexts</div>
+            <div class="actions">
+               <button id="context-refresh" class="btn">Refresh</button>
+               <button id="context-close" class="btn">Close</button>
+            </div>
+         </div>
+         <div class="context-toolbar">
+            <input id="context-filter" type="text" placeholder="Filter contexts" />
+            <div class="count">Total: <span id="context-count">0</span></div>
+         </div>
+         <div class="context-list" id="context-list"></div>
+      </div>
+      `;
+   }
+
+   renderStyles() {
+      return `
+      #context-debugger {
+         position: fixed;
+         bottom: 20px;
+         left: 20px;
+         width: min(380px, 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;
+      }
+
+      #context-debugger.active {
+         display: flex;
+      }
+
+      #context-debugger * {
+         box-sizing: border-box;
+      }
+
+      .context-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);
+      }
+
+      .context-header .title {
+         font-weight: 600;
+         color: var(--font-primary-color);
+      }
+
+      .context-header .actions {
+         display: flex;
+         gap: 8px;
+      }
+
+      .context-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;
+      }
+
+      .context-toolbar {
+         display: flex;
+         gap: 10px;
+         align-items: center;
+         padding: 10px 12px;
+         border-bottom: 1px solid var(--medium-color);
+      }
+
+      .context-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);
+      }
+
+      .context-list {
+         padding: 10px 12px;
+         overflow: auto;
+         display: flex;
+         flex-direction: column;
+         gap: 10px;
+      }
+
+      .context-row {
+         border: 1px solid var(--medium-color);
+         border-radius: 8px;
+         background: var(--tertiary-background-color);
+         padding: 10px;
+         display: flex;
+         flex-direction: column;
+         gap: 6px;
+      }
+
+      .context-name {
+         font-weight: 600;
+         color: var(--font-primary-color);
+      }
+
+      .context-keys {
+         font-size: 12px;
+         color: var(--font-secondary-color);
+      }
+
+      .context-preview {
+         background: var(--primary-background-color);
+         border-radius: 6px;
+         padding: 8px;
+         border: 1px solid var(--medium-color);
+         max-height: 180px;
+         overflow: auto;
+         font-size: 11px;
+         font-family: monospace;
+         color: var(--font-primary-color);
+      }
+
+      .empty {
+         color: var(--font-secondary-color);
+         font-size: 12px;
+         text-align: center;
+         padding: 12px 0;
+      }
+      `;
+   }
+}
+
+customElements.define('slice-contextmanager-debugger', ContextManagerDebugger);