slicejs-web-framework 1.0.26 → 1.0.30

package/Slice/Components/Structural/Router/EventThrottler.js

@@ -0,0 +1,110 @@
+// Slice/Components/Structural/Router/EventThrottler.js
+
+/**
+ * Sistema de throttling optimizado para eventos del router
+ * Mejora significativa sobre el setTimeout básico actual
+ */
+export default class EventThrottler {
+   constructor() {
+      this.timeouts = new Map();
+      this.executingCallbacks = new Set();
+      this.defaultDelay = 10;
+   }
+
+   /**
+    * Throttle con memoria de callbacks en ejecución
+    * Evita race conditions y callbacks duplicados
+    */
+   throttle(key, callback, delay = this.defaultDelay) {
+      // Si ya se está ejecutando este callback, ignorar
+      if (this.executingCallbacks.has(key)) {
+         return Promise.resolve();
+      }
+
+      // Cancelar timeout anterior si existe
+      if (this.timeouts.has(key)) {
+         clearTimeout(this.timeouts.get(key));
+      }
+
+      return new Promise((resolve, reject) => {
+         const timeoutId = setTimeout(async () => {
+            this.executingCallbacks.add(key);
+            this.timeouts.delete(key);
+            
+            try {
+               const result = await callback();
+               resolve(result);
+            } catch (error) {
+               reject(error);
+            } finally {
+               this.executingCallbacks.delete(key);
+            }
+         }, delay);
+
+         this.timeouts.set(key, timeoutId);
+      });
+   }
+
+   /**
+    * Debounce mejorado con cancelación manual
+    */
+   debounce(key, callback, delay = this.defaultDelay) {
+      if (this.timeouts.has(key)) {
+         clearTimeout(this.timeouts.get(key));
+      }
+
+      return new Promise((resolve) => {
+         const timeoutId = setTimeout(async () => {
+            this.timeouts.delete(key);
+            const result = await callback();
+            resolve(result);
+         }, delay);
+
+         this.timeouts.set(key, timeoutId);
+      });
+   }
+
+   /**
+    * Cancelar un throttle/debounce específico
+    */
+   cancel(key) {
+      if (this.timeouts.has(key)) {
+         clearTimeout(this.timeouts.get(key));
+         this.timeouts.delete(key);
+         return true;
+      }
+      return false;
+   }
+
+   /**
+    * Cancelar todos los throttles/debounces pendientes
+    */
+   cancelAll() {
+      for (const timeoutId of this.timeouts.values()) {
+         clearTimeout(timeoutId);
+      }
+      this.timeouts.clear();
+      this.executingCallbacks.clear();
+   }
+
+   /**
+    * Verificar si hay un throttle/debounce pendiente
+    */
+   isPending(key) {
+      return this.timeouts.has(key);
+   }
+
+   /**
+    * Verificar si un callback se está ejecutando
+    */
+   isExecuting(key) {
+      return this.executingCallbacks.has(key);
+   }
+
+   /**
+    * Cleanup para evitar memory leaks
+    */
+   destroy() {
+      this.cancelAll();
+   }
+}

package/Slice/Components/Structural/Router/RouteCache.js

@@ -0,0 +1,245 @@
+// Slice/Components/Structural/Router/RouteCache.js
+
+/**
+ * Sistema de caché optimizado para contenedores de rutas
+ * Caché individual por contenedor con timestamps y cleanup automático
+ */
+export default class RouteCache {
+   constructor() {
+      this.containerCaches = new Map();
+      this.CACHE_DURATION = 100; // ms
+      this.processedContainers = new WeakMap();
+      this.cleanupInterval = null;
+      
+      // Auto-cleanup cada 5 segundos
+      this.startCleanupScheduler();
+   }
+
+   /**
+    * Obtener contenedores de rutas con caché inteligente
+    */
+   getCachedRouteContainers(container) {
+      const containerKey = this.getContainerKey(container);
+      const now = Date.now();
+      
+      // Verificar caché individual por contenedor
+      if (this.containerCaches.has(containerKey)) {
+         const cached = this.containerCaches.get(containerKey);
+         
+         // Verificar si el caché es válido y el contenedor sigue conectado
+         if ((now - cached.timestamp) < this.CACHE_DURATION && 
+             this.isContainerValid(container, cached.containers)) {
+            return cached.containers;
+         }
+      }
+
+      // Regenerar caché para este contenedor específico
+      const routeContainers = this.findAllRouteContainersOptimized(container);
+      this.containerCaches.set(containerKey, {
+         containers: routeContainers,
+         timestamp: now,
+         containerRef: new WeakRef(container)
+      });
+      
+      return routeContainers;
+   }
+
+   /**
+    * Búsqueda optimizada con WeakMap para evitar recorridos repetidos
+    */
+   findAllRouteContainersOptimized(container) {
+      // Si ya procesamos este contenedor recientemente, usar WeakMap
+      if (this.processedContainers.has(container)) {
+         const cached = this.processedContainers.get(container);
+         if (Date.now() - cached.timestamp < 50) { // Cache ultra corto para WeakMap
+            return cached.containers.filter(c => c.isConnected);
+         }
+      }
+
+      const routeContainers = [];
+      
+      // TreeWalker optimizado con filtro más específico
+      const walker = document.createTreeWalker(
+         container,
+         NodeFilter.SHOW_ELEMENT,
+         {
+            acceptNode: (node) => {
+               // Filtro más eficiente
+               const tagName = node.tagName;
+               if (tagName === 'SLICE-ROUTE' || tagName === 'SLICE-MULTI-ROUTE') {
+                  // Verificar que esté conectado y visible
+                  if (node.isConnected && !node.hasAttribute('disabled')) {
+                     return NodeFilter.FILTER_ACCEPT;
+                  }
+               }
+               return NodeFilter.FILTER_SKIP;
+            }
+         }
+      );
+
+      let node;
+      while (node = walker.nextNode()) {
+         routeContainers.push(node);
+      }
+
+      // Guardar en WeakMap para acceso ultra-rápido
+      this.processedContainers.set(container, {
+         containers: routeContainers,
+         timestamp: Date.now()
+      });
+
+      return routeContainers;
+   }
+
+   /**
+    * Generar clave única para contenedor
+    */
+   getContainerKey(container) {
+      if (container === document) {
+         return 'document';
+      }
+      
+      // Usar sliceId si existe, si no, crear una clave basada en posición
+      return container.sliceId || 
+             container.id || 
+             `${container.tagName}-${this.getElementIndex(container)}`;
+   }
+
+   /**
+    * Obtener índice del elemento para identificación única
+    */
+   getElementIndex(element) {
+      if (!element.parentNode) return 0;
+      
+      const siblings = Array.from(element.parentNode.children);
+      return siblings.indexOf(element);
+   }
+
+   /**
+    * Verificar si los contenedores en caché siguen siendo válidos
+    */
+   isContainerValid(container, cachedContainers) {
+      // Verificar que el contenedor principal siga conectado
+      if (!container.isConnected) {
+         return false;
+      }
+
+      // Verificar que al menos el 80% de los contenedores cached siguen conectados
+      const connectedCount = cachedContainers.filter(c => c.isConnected).length;
+      const validityThreshold = Math.max(1, Math.floor(cachedContainers.length * 0.8));
+      
+      return connectedCount >= validityThreshold;
+   }
+
+   /**
+    * Invalidar caché específico de un contenedor
+    */
+   invalidateContainer(container) {
+      const containerKey = this.getContainerKey(container);
+      this.containerCaches.delete(containerKey);
+      
+      if (this.processedContainers.has(container)) {
+         this.processedContainers.delete(container);
+      }
+   }
+
+   /**
+    * Invalidar todo el caché
+    */
+   invalidateAll() {
+      this.containerCaches.clear();
+      // No podemos limpiar WeakMap directamente, pero se limpiará automáticamente
+   }
+
+   /**
+    * Invalidar caché selectivo basado en cambios DOM
+    */
+   invalidateByMutation(mutations) {
+      const affectedContainers = new Set();
+      
+      mutations.forEach((mutation) => {
+         if (mutation.type === 'childList') {
+            const addedNodes = Array.from(mutation.addedNodes);
+            const removedNodes = Array.from(mutation.removedNodes);
+            
+            // Buscar contenedores afectados
+            [...addedNodes, ...removedNodes].forEach(node => {
+               if (node.nodeType === Node.ELEMENT_NODE) {
+                  if (node.tagName === 'SLICE-ROUTE' || node.tagName === 'SLICE-MULTI-ROUTE') {
+                     affectedContainers.add(mutation.target);
+                  }
+                  
+                  // Buscar contenedores padre que podrían estar afectados
+                  let parent = mutation.target;
+                  while (parent && parent !== document) {
+                     if (parent.tagName && (
+                         parent.tagName.includes('SLICE') || 
+                         parent.hasAttribute('slice-component'))) {
+                        affectedContainers.add(parent);
+                     }
+                     parent = parent.parentElement;
+                  }
+               }
+            });
+         }
+      });
+
+      // Invalidar solo los contenedores afectados
+      affectedContainers.forEach(container => {
+         this.invalidateContainer(container);
+      });
+   }
+
+   /**
+    * Cleanup automático de cachés obsoletos
+    */
+   startCleanupScheduler() {
+      this.cleanupInterval = setInterval(() => {
+         this.cleanupStaleCache();
+      }, 5000); // Cada 5 segundos
+   }
+
+   /**
+    * Limpiar caché obsoleto
+    */
+   cleanupStaleCache() {
+      const now = Date.now();
+      const maxAge = this.CACHE_DURATION * 10; // 10x la duración normal para cleanup
+      
+      for (const [key, cached] of this.containerCaches.entries()) {
+         // Eliminar cachés muy antiguos
+         if ((now - cached.timestamp) > maxAge) {
+            this.containerCaches.delete(key);
+            continue;
+         }
+         
+         // Eliminar cachés de contenedores que ya no existen
+         if (cached.containerRef && !cached.containerRef.deref()) {
+            this.containerCaches.delete(key);
+         }
+      }
+   }
+
+   /**
+    * Obtener estadísticas del caché para debugging
+    */
+   getStats() {
+      return {
+         totalCaches: this.containerCaches.size,
+         oldestCache: Math.min(...Array.from(this.containerCaches.values()).map(c => c.timestamp)),
+         newestCache: Math.max(...Array.from(this.containerCaches.values()).map(c => c.timestamp))
+      };
+   }
+
+   /**
+    * Destruir el caché y cleanup
+    */
+   destroy() {
+      if (this.cleanupInterval) {
+         clearInterval(this.cleanupInterval);
+         this.cleanupInterval = null;
+      }
+      
+      this.invalidateAll();
+   }
+}

package/Slice/Components/Structural/Router/RouteMatcher.js

@@ -0,0 +1,236 @@
+// Slice/Components/Structural/Router/RouteMatcher.js
+
+/**
+ * Sistema de matching de rutas optimizado
+ * Separa la lógica de matching del Router principal
+ */
+export default class RouteMatcher {
+   constructor(routes) {
+      this.routes = routes;
+      this.pathToRouteMap = new Map();
+      this.compiledPatterns = new Map();
+      this.staticRoutes = new Map();
+      this.dynamicRoutes = new Map();
+      
+      this.buildOptimizedMaps();
+   }
+
+   /**
+    * Construir mapas optimizados para matching rápido
+    */
+   buildOptimizedMaps() {
+      this.pathToRouteMap = this.createPathToRouteMap(this.routes);
+      
+      // Separar rutas estáticas de dinámicas para matching más rápido
+      for (const [path, route] of this.pathToRouteMap.entries()) {
+         if (path.includes('${')) {
+            // Ruta dinámica - pre-compilar el patrón
+            const compiled = this.compilePathPattern(path);
+            this.compiledPatterns.set(path, compiled);
+            this.dynamicRoutes.set(path, route);
+         } else {
+            // Ruta estática - acceso directo
+            this.staticRoutes.set(path, route);
+         }
+      }
+   }
+
+   /**
+    * Crear mapa de rutas con optimizaciones
+    */
+   createPathToRouteMap(routes, basePath = '', parentRoute = null) {
+      const pathToRouteMap = new Map();
+
+      for (const route of routes) {
+         const fullPath = `${basePath}${route.path}`.replace(/\/+/g, '/');
+         
+         const routeWithParent = { 
+            ...route, 
+            fullPath,
+            parentPath: parentRoute ? parentRoute.fullPath : null,
+            parentRoute: parentRoute
+         };
+         
+         pathToRouteMap.set(fullPath, routeWithParent);
+
+         if (route.children) {
+            const childPathToRouteMap = this.createPathToRouteMap(
+               route.children, 
+               fullPath, 
+               routeWithParent
+            );
+            
+            for (const [childPath, childRoute] of childPathToRouteMap.entries()) {
+               pathToRouteMap.set(childPath, childRoute);
+            }
+         }
+      }
+
+      return pathToRouteMap;
+   }
+
+   /**
+    * Matching optimizado con separación de rutas estáticas/dinámicas
+    */
+   matchRoute(path) {
+      // 1. Buscar primero en rutas estáticas (más rápido)
+      const staticMatch = this.staticRoutes.get(path);
+      if (staticMatch) {
+         return this.formatMatchResult(staticMatch, {});
+      }
+
+      // 2. Buscar en rutas dinámicas solo si no hay match estático
+      for (const [routePattern, route] of this.dynamicRoutes.entries()) {
+         const compiled = this.compiledPatterns.get(routePattern);
+         const match = path.match(compiled.regex);
+         
+         if (match) {
+            const params = {};
+            compiled.paramNames.forEach((name, i) => {
+               params[name] = match[i + 1];
+            });
+            
+            return this.formatMatchResult(route, params);
+         }
+      }
+
+      // 3. Ruta 404 si no hay matches
+      const notFoundRoute = this.staticRoutes.get('/404');
+      return this.formatMatchResult(notFoundRoute, {});
+   }
+
+   /**
+    * Formatear resultado del match consistentemente
+    */
+   formatMatchResult(route, params) {
+      if (!route) {
+         return { route: null, params: {} };
+      }
+
+      if (route.parentRoute) {
+         return { 
+            route: route.parentRoute, 
+            params: params,
+            childRoute: route
+         };
+      }
+      
+      return { route, params };
+   }
+
+   /**
+    * Compilar patrón de ruta con caché
+    */
+   compilePathPattern(pattern) {
+      // Verificar si ya está compilado
+      if (this.compiledPatterns.has(pattern)) {
+         return this.compiledPatterns.get(pattern);
+      }
+
+      const paramNames = [];
+      const regexPattern = '^' + pattern.replace(/\$\{([^}]+)\}/g, (_, paramName) => {
+         paramNames.push(paramName);
+         return '([^/]+)';
+      }) + '$';
+
+      const compiled = { 
+         regex: new RegExp(regexPattern), 
+         paramNames 
+      };
+
+      this.compiledPatterns.set(pattern, compiled);
+      return compiled;
+   }
+
+   /**
+    * Obtener todas las rutas disponibles
+    */
+   getAllRoutes() {
+      return Array.from(this.pathToRouteMap.values());
+   }
+
+   /**
+    * Obtener rutas por componente
+    */
+   getRoutesByComponent(componentName) {
+      return Array.from(this.pathToRouteMap.values())
+         .filter(route => route.component === componentName);
+   }
+
+   /**
+    * Verificar si una ruta existe
+    */
+   hasRoute(path) {
+      return this.staticRoutes.has(path) || 
+             Array.from(this.dynamicRoutes.keys()).some(pattern => {
+                const compiled = this.compiledPatterns.get(pattern);
+                return compiled.regex.test(path);
+             });
+   }
+
+   /**
+    * Generar URL con parámetros
+    */
+   generateUrl(routePath, params = {}) {
+      if (!routePath.includes('${')) {
+         return routePath;
+      }
+
+      return routePath.replace(/\$\{([^}]+)\}/g, (_, paramName) => {
+         return params[paramName] || paramName;
+      });
+   }
+
+   /**
+    * Actualizar rutas dinámicamente
+    */
+   updateRoutes(newRoutes) {
+      this.routes = newRoutes;
+      this.pathToRouteMap.clear();
+      this.compiledPatterns.clear();
+      this.staticRoutes.clear();
+      this.dynamicRoutes.clear();
+      
+      this.buildOptimizedMaps();
+   }
+
+   /**
+    * Añadir ruta individual
+    */
+   addRoute(route, basePath = '') {
+      const fullPath = `${basePath}${route.path}`.replace(/\/+/g, '/');
+      const routeWithPath = { ...route, fullPath };
+      
+      this.pathToRouteMap.set(fullPath, routeWithPath);
+      
+      if (fullPath.includes('${')) {
+         const compiled = this.compilePathPattern(fullPath);
+         this.compiledPatterns.set(fullPath, compiled);
+         this.dynamicRoutes.set(fullPath, routeWithPath);
+      } else {
+         this.staticRoutes.set(fullPath, routeWithPath);
+      }
+   }
+
+   /**
+    * Remover ruta
+    */
+   removeRoute(path) {
+      this.pathToRouteMap.delete(path);
+      this.staticRoutes.delete(path);
+      this.dynamicRoutes.delete(path);
+      this.compiledPatterns.delete(path);
+   }
+
+   /**
+    * Obtener estadísticas del matcher
+    */
+   getStats() {
+      return {
+         totalRoutes: this.pathToRouteMap.size,
+         staticRoutes: this.staticRoutes.size,
+         dynamicRoutes: this.dynamicRoutes.size,
+         compiledPatterns: this.compiledPatterns.size
+      };
+   }
+}