slicejs-web-framework 3.0.0 → 3.1.1

package/.worktrees/public-env-browser-exposure/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Victor Jose Kneider Alnahi and Julio Antonio Graterol Bracho
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/.worktrees/public-env-browser-exposure/Slice/Components/Structural/ContextManager/ContextManager.js

@@ -0,0 +1,369 @@
+/**
+ * ContextManager - Sistema de contextos compartidos para Slice.js
+ * Ubicación: /Slice/Components/Structural/ContextManager/ContextManager.js
+ *
+ * Características:
+ * - Estado compartido entre componentes
+ * - Usa EventManager internamente para notificaciones
+ * - Selectores para observar campos específicos
+ * - 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 }>
+      this.contexts = new Map();
+   }
+
+   init() {
+      return true;
+   }
+
+   // ============================================
+   // CREAR CONTEXTO
+   // ============================================
+
+   /**
+    * Crear un nuevo contexto
+    * @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', {
+    *    isLoggedIn: false,
+    *    user: null
+    * });
+    *
+    * // Con persistencia en localStorage
+    * slice.context.create('preferences', {
+    *    theme: 'light',
+    *    language: 'es'
+    * }, { persist: true });
+    */
+   create(name, initialState = {}, options = {}) {
+      if (this.contexts.has(name)) {
+         slice.logger.logWarning('ContextManager', `El contexto "${name}" ya existe`);
+         return false;
+      }
+
+      // Cargar estado persistido si existe
+      let state = initialState;
+      if (options.persist) {
+         const persisted = this._loadFromStorage(name);
+         if (persisted !== null) {
+            state = persisted;
+         }
+      }
+
+      this.contexts.set(name, {
+         state,
+         options: {
+            persist: options.persist || false,
+            storageKey: options.storageKey || `slice_context_${name}`,
+         },
+      });
+
+      slice.logger.logInfo('ContextManager', `Contexto "${name}" creado`);
+
+      return true;
+   }
+
+   // ============================================
+   // LEER ESTADO
+   // ============================================
+
+   /**
+    * Obtener el estado actual de un contexto
+    * @param {string} name - Nombre del contexto
+    * @returns {any|null} Estado actual o null si no existe
+    *
+    * @example
+    * const auth = slice.context.getState('auth');
+    * console.log(auth.user.name);
+    */
+   getState(name) {
+      if (!this.contexts.has(name)) {
+         slice.logger.logError('ContextManager', `El contexto "${name}" no existe`);
+         return null;
+      }
+
+      return this.contexts.get(name).state;
+   }
+
+   // ============================================
+   // ACTUALIZAR ESTADO
+   // ============================================
+
+   /**
+    * Actualizar el estado de un contexto
+    * @param {string} name - Nombre del contexto
+    * @param {Object|Function} updater - Nuevo estado o funcion (prevState) => newState
+    * @returns {void}
+    *
+    * @example
+    * // Reemplazar con objeto
+    * slice.context.setState('auth', {
+    *    isLoggedIn: true,
+    *    user: { name: 'Juan' }
+    * });
+    *
+    * // Usar funcion para acceder al estado anterior
+    * slice.context.setState('cart', (prev) => ({
+    *    ...prev,
+    *    items: [...prev.items, nuevoProducto],
+    *    total: prev.total + nuevoProducto.price
+    * }));
+    */
+   setState(name, updater) {
+      if (!this.contexts.has(name)) {
+         slice.logger.logError('ContextManager', `El contexto "${name}" no existe`);
+         return;
+      }
+
+      const context = this.contexts.get(name);
+      const prevState = context.state;
+
+      // Calcular nuevo estado
+      let newState;
+      if (typeof updater === 'function') {
+         newState = updater(prevState);
+      } else {
+         newState = updater;
+      }
+
+      // Guardar nuevo estado
+      context.state = newState;
+
+      // Persistir si está habilitado
+      if (context.options.persist) {
+         this._saveToStorage(name, newState, context.options.storageKey);
+      }
+
+      // Emitir evento para notificar a los watchers
+      slice.events.emit(`context:${name}`, newState, prevState);
+
+      slice.logger.logInfo('ContextManager', `Contexto "${name}" actualizado`);
+   }
+
+   // ============================================
+   // WATCH (OBSERVAR CAMBIOS)
+   // ============================================
+
+   /**
+    * Observar cambios en un contexto
+    * @param {string} name - Nombre del contexto
+    * @param {HTMLElement} component - Componente Slice para auto-cleanup
+    * @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
+    * slice.context.watch('auth', this, (state) => {
+    *    this.render(state);
+    * });
+    *
+    * // Observar un campo especifico
+    * slice.context.watch('auth', this, (name) => {
+    *    this.$name.textContent = name;
+    * }, state => state.user.name);
+    *
+    * // Observar multiples campos
+    * slice.context.watch('auth', this, (data) => {
+    *    this.$name.textContent = data.name;
+    *    this.$avatar.src = data.avatar;
+    * }, state => ({
+    *    name: state.user.name,
+    *    avatar: state.user.avatar
+    * }));
+    *
+    * // Valores computados
+    * slice.context.watch('cart', this, (total) => {
+    *    this.$total.textContent = `${total}`;
+    * }, state => state.items.reduce((sum, i) => sum + i.price, 0));
+    */
+   watch(name, component, callback, selector = null) {
+      if (!this.contexts.has(name)) {
+         slice.logger.logError('ContextManager', `El contexto "${name}" no existe`);
+         return null;
+      }
+
+      if (!component?.sliceId) {
+         slice.logger.logError('ContextManager', 'watch() requiere un componente Slice válido');
+         return null;
+      }
+
+      if (typeof callback !== 'function') {
+         slice.logger.logError('ContextManager', 'El callback debe ser una función');
+         return null;
+      }
+
+      // Guardar el valor anterior del selector para comparar
+      let lastSelectedValue = selector ? this._getSelectedValue(name, selector) : this.getState(name);
+
+      // Crear wrapper que aplica el selector y compara
+      const wrappedCallback = (newState, prevState) => {
+         if (selector) {
+            const newSelectedValue = this._applySelector(newState, selector);
+            const prevSelectedValue = this._applySelector(prevState, selector);
+
+            // Solo ejecutar si el valor seleccionado cambió
+            if (!this._isEqual(newSelectedValue, prevSelectedValue)) {
+               lastSelectedValue = newSelectedValue;
+               callback(newSelectedValue);
+            }
+         } else {
+            // Sin selector, siempre ejecutar
+            callback(newState);
+         }
+      };
+
+      // Suscribirse al evento del contexto
+      const subscriptionId = slice.events.subscribe(`context:${name}`, wrappedCallback, { component });
+
+      slice.logger.logInfo('ContextManager', `Watch registrado en "${name}" para ${component.sliceId}`);
+
+      return subscriptionId;
+   }
+
+   // ============================================
+   // UTILIDADES
+   // ============================================
+
+   /**
+    * Verificar si un contexto existe
+    * @param {string} name - Nombre del contexto
+    * @returns {boolean}
+    */
+   has(name) {
+      return this.contexts.has(name);
+   }
+
+   /**
+    * Eliminar un contexto
+    * @param {string} name - Nombre del contexto
+    * @returns {boolean}
+    */
+   destroy(name) {
+      if (!this.contexts.has(name)) {
+         return false;
+      }
+
+      const context = this.contexts.get(name);
+
+      // Limpiar storage si existe
+      if (context.options.persist) {
+         this._removeFromStorage(context.options.storageKey);
+      }
+
+      this.contexts.delete(name);
+
+      slice.logger.logInfo('ContextManager', `Contexto "${name}" eliminado`);
+
+      return true;
+   }
+
+   /**
+    * Obtener lista de todos los contextos
+    * @returns {string[]}
+    */
+   list() {
+      return Array.from(this.contexts.keys());
+   }
+
+   // ============================================
+   // MÉTODOS PRIVADOS
+   // ============================================
+
+   /**
+    * Aplicar selector al estado
+    */
+   _applySelector(state, selector) {
+      try {
+         return selector(state);
+      } catch (error) {
+         slice.logger.logWarning('ContextManager', 'Error al aplicar selector', error);
+         return undefined;
+      }
+   }
+
+   /**
+    * Obtener valor seleccionado del estado actual
+    */
+   _getSelectedValue(name, selector) {
+      const state = this.getState(name);
+      return this._applySelector(state, selector);
+   }
+
+   /**
+    * Comparar dos valores (shallow)
+    */
+   _isEqual(a, b) {
+      // Mismo valor primitivo o referencia
+      if (a === b) return true;
+
+      // Si alguno es null/undefined
+      if (a == null || b == null) return false;
+
+      // Si no son objetos, ya sabemos que son diferentes
+      if (typeof a !== 'object' || typeof b !== 'object') return false;
+
+      // Comparación shallow de objetos
+      const keysA = Object.keys(a);
+      const keysB = Object.keys(b);
+
+      if (keysA.length !== keysB.length) return false;
+
+      for (const key of keysA) {
+         if (a[key] !== b[key]) return false;
+      }
+
+      return true;
+   }
+
+   /**
+    * Cargar estado desde localStorage
+    */
+   _loadFromStorage(name) {
+      try {
+         const key = `slice_context_${name}`;
+         const data = localStorage.getItem(key);
+         if (data) {
+            return JSON.parse(data);
+         }
+      } catch (error) {
+         slice.logger.logWarning('ContextManager', `Error cargando "${name}" de localStorage`, error);
+      }
+      return null;
+   }
+
+   /**
+    * Guardar estado en localStorage
+    */
+   _saveToStorage(name, state, storageKey) {
+      try {
+         localStorage.setItem(storageKey, JSON.stringify(state));
+      } catch (error) {
+         slice.logger.logWarning('ContextManager', `Error guardando "${name}" en localStorage`, error);
+      }
+   }
+
+   /**
+    * Eliminar estado de localStorage
+    */
+   _removeFromStorage(storageKey) {
+      try {
+         localStorage.removeItem(storageKey);
+      } catch (error) {
+         // Ignorar errores al eliminar
+      }
+   }
+}

package/.worktrees/public-env-browser-exposure/Slice/Components/Structural/ContextManager/ContextManagerDebugger.js

@@ -0,0 +1,297 @@
+/**
+ * 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.makeDraggable();
+      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.header = this.querySelector('.context-header');
+      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();
+      });
+   }
+
+   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.';
+         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);
+         user-select: none;
+      }
+
+      .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);