slicejs-web-framework 1.0.25 → 1.0.28

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

@@ -3,6 +3,14 @@ export default class Router {
       this.routes = routes;
       this.activeRoute = null;
       this.pathToRouteMap = this.createPathToRouteMap(routes);
+      
+      // NUEVO: Sistema de caché optimizado
+      this.routeContainersCache = new Map();
+      this.lastCacheUpdate = 0;
+      this.CACHE_DURATION = 100; // ms - caché muy corto pero efectivo
+      
+      // NUEVO: Observer para invalidar caché automáticamente
+      this.setupMutationObserver();
    }
 
    async init() {
@@ -10,13 +18,55 @@ export default class Router {
       window.addEventListener('popstate', this.onRouteChange.bind(this));
    }
 
+   // NUEVO: Observer para detectar cambios en el DOM
+   setupMutationObserver() {
+      if (typeof MutationObserver !== 'undefined') {
+         this.observer = new MutationObserver((mutations) => {
+            let shouldInvalidateCache = false;
+            
+            mutations.forEach((mutation) => {
+               if (mutation.type === 'childList') {
+                  // Solo invalidar si se añadieron/removieron nodos que podrían ser rutas
+                  const addedNodes = Array.from(mutation.addedNodes);
+                  const removedNodes = Array.from(mutation.removedNodes);
+                  
+                  const hasRouteNodes = [...addedNodes, ...removedNodes].some(node => 
+                     node.nodeType === Node.ELEMENT_NODE && 
+                     (node.tagName === 'SLICE-ROUTE' || 
+                      node.tagName === 'SLICE-MULTI-ROUTE' ||
+                      node.querySelector?.('slice-route, slice-multi-route'))
+                  );
+                  
+                  if (hasRouteNodes) {
+                     shouldInvalidateCache = true;
+                  }
+               }
+            });
+            
+            if (shouldInvalidateCache) {
+               this.invalidateCache();
+            }
+         });
+         
+         this.observer.observe(document.body, {
+            childList: true,
+            subtree: true
+         });
+      }
+   }
+
+   // NUEVO: Invalidar caché
+   invalidateCache() {
+      this.routeContainersCache.clear();
+      this.lastCacheUpdate = 0;
+   }
+
    createPathToRouteMap(routes, basePath = '', parentRoute = null) {
       const pathToRouteMap = new Map();
   
       for (const route of routes) {
           const fullPath = `${basePath}${route.path}`.replace(/\/+/g, '/');
           
-          // Guardar la referencia a la ruta padre
           const routeWithParent = { 
               ...route, 
               fullPath,
@@ -25,13 +75,12 @@ export default class Router {
           };
           
           pathToRouteMap.set(fullPath, routeWithParent);
-  
-          // Si tiene rutas secundarias, también agregarlas al mapa
+
           if (route.children) {
               const childPathToRouteMap = this.createPathToRouteMap(
                   route.children, 
                   fullPath, 
-                  routeWithParent // Pasar la ruta actual como padre
+                  routeWithParent
               );
               
               for (const [childPath, childRoute] of childPathToRouteMap.entries()) {
@@ -43,32 +92,109 @@ export default class Router {
       return pathToRouteMap;
    }
 
-   async renderRoutesComponentsInPage() {
-      const routeContainers = document.querySelectorAll('slice-route, slice-multi-route');
+   // OPTIMIZADO: Sistema de caché inteligente
+   async renderRoutesComponentsInPage(searchContainer = document) {
       let routerContainersFlag = false;
+      const routeContainers = this.getCachedRouteContainers(searchContainer);
 
       for (const routeContainer of routeContainers) {
-         let response = await routeContainer.renderIfCurrentRoute();
-         if (response) {
-            this.activeRoute = routeContainer.props;
-            routerContainersFlag = true;
+         try {
+            // Verificar que el componente aún esté conectado al DOM
+            if (!routeContainer.isConnected) {
+               this.invalidateCache();
+               continue;
+            }
+
+            let response = await routeContainer.renderIfCurrentRoute();
+            if (response) {
+               this.activeRoute = routeContainer.props;
+               routerContainersFlag = true;
+            }
+         } catch (error) {
+            slice.logger.logError('Router', `Error rendering route container`, error);
          }
       }
+
       return routerContainersFlag;
    }
 
-   async onRouteChange() {
-      const path = window.location.pathname;
-      const routeContainersFlag = await this.renderRoutesComponentsInPage();
+   // NUEVO: Obtener contenedores con caché
+   getCachedRouteContainers(container) {
+      const containerKey = container === document ? 'document' : container.sliceId || 'anonymous';
+      const now = Date.now();
+      
+      // Verificar si el caché es válido
+      if (this.routeContainersCache.has(containerKey) && 
+          (now - this.lastCacheUpdate) < this.CACHE_DURATION) {
+         return this.routeContainersCache.get(containerKey);
+      }
 
-      if (routeContainersFlag) {
-         return;
+      // Regenerar caché
+      const routeContainers = this.findAllRouteContainersOptimized(container);
+      this.routeContainersCache.set(containerKey, routeContainers);
+      this.lastCacheUpdate = now;
+      
+      return routeContainers;
+   }
+
+   // OPTIMIZADO: Búsqueda más eficiente usando TreeWalker
+   findAllRouteContainersOptimized(container) {
+      const routeContainers = [];
+      
+      // Usar TreeWalker para una búsqueda más eficiente
+      const walker = document.createTreeWalker(
+         container,
+         NodeFilter.SHOW_ELEMENT,
+         {
+            acceptNode: (node) => {
+               // Solo aceptar nodos que sean slice-route o slice-multi-route
+               if (node.tagName === 'SLICE-ROUTE' || node.tagName === 'SLICE-MULTI-ROUTE') {
+                  return NodeFilter.FILTER_ACCEPT;
+               }
+               return NodeFilter.FILTER_SKIP;
+            }
+         }
+      );
+
+      let node;
+      while (node = walker.nextNode()) {
+         routeContainers.push(node);
       }
 
-      const { route, params } = this.matchRoute(path);
-      if (route) {
-         await this.handleRoute(route, params);
+      return routeContainers;
+   }
+
+   // NUEVO: Método específico para renderizar rutas dentro de un componente
+   async renderRoutesInComponent(component) {
+      if (!component) {
+         slice.logger.logWarning('Router', 'No component provided for route rendering');
+         return false;
+      }
+
+      return await this.renderRoutesComponentsInPage(component);
+   }
+
+   // OPTIMIZADO: Debouncing para evitar múltiples llamadas seguidas
+   async onRouteChange() {
+      // Cancelar el timeout anterior si existe
+      if (this.routeChangeTimeout) {
+         clearTimeout(this.routeChangeTimeout);
       }
+
+      // Debounce de 10ms para evitar múltiples llamadas seguidas
+      this.routeChangeTimeout = setTimeout(async () => {
+         const path = window.location.pathname;
+         const routeContainersFlag = await this.renderRoutesComponentsInPage();
+
+         if (routeContainersFlag) {
+            return;
+         }
+
+         const { route, params } = this.matchRoute(path);
+         if (route) {
+            await this.handleRoute(route, params);
+         }
+      }, 10);
    }
 
    async navigate(path) {
@@ -77,70 +203,69 @@ export default class Router {
    }
 
    async handleRoute(route, params) {
-      const targetElement = document.querySelector('#app');
-      
-      // Si tenemos una ruta con parentRoute, usamos el componente del padre
-      const componentName = route.parentRoute ? route.parentRoute.component : route.component;
-      const sliceId = `route-${componentName}`;
-      
-      const existingComponent = slice.controller.getComponent(sliceId);
+   const targetElement = document.querySelector('#app');
+   
+   const componentName = route.parentRoute ? route.parentRoute.component : route.component;
+   const sliceId = `route-${componentName}`;
+   
+   const existingComponent = slice.controller.getComponent(sliceId);
 
-      if (slice.loading) {
-         slice.loading.start();
-      }
+   if (slice.loading) {
+      slice.loading.start();
+   }
 
-      if (existingComponent) {
-         targetElement.innerHTML = '';
-         if (existingComponent.update) {
-            existingComponent.props = { ...existingComponent.props, ...params };
-            await existingComponent.update();
-         }
-         await this.renderRoutesComponentsInPage();
-         targetElement.appendChild(existingComponent);
-      } else {
-         const component = await slice.build(componentName, {
-            params,
-            sliceId: sliceId,
-         });
-         await this.renderRoutesComponentsInPage();
-         targetElement.innerHTML = '';
-         targetElement.appendChild(component);
+   if (existingComponent) {
+      targetElement.innerHTML = '';
+      if (existingComponent.update) {
+         existingComponent.props = { ...existingComponent.props, ...params };
+         await existingComponent.update();
       }
+      targetElement.appendChild(existingComponent);
+      // Renderizar DESPUÉS de insertar (pero antes de mostrar)
+      await this.renderRoutesInComponent(existingComponent);
+   } else {
+      const component = await slice.build(componentName, {
+         params,
+         sliceId: sliceId,
+      });
 
+      targetElement.innerHTML = '';
+      targetElement.appendChild(component);
+      
+      // Renderizar INMEDIATAMENTE después de insertar
+      await this.renderRoutesInComponent(component);
+   }
 
+   // Invalidar caché después de cambios importantes en el DOM
+   this.invalidateCache();
 
-      if (slice.loading) {
-         slice.loading.stop();
-      }
-
-      slice.router.activeRoute = route;
+   if (slice.loading) {
+      slice.loading.stop();
    }
 
+   slice.router.activeRoute = route;
+}
+
    async loadInitialRoute() {
       const path = window.location.pathname;
       const { route, params } = this.matchRoute(path);
 
       await this.handleRoute(route, params);
-      await this.renderRoutesComponentsInPage();
    }
 
    matchRoute(path) {
-      // 1. Buscar coincidencia exacta en el mapa
       const exactMatch = this.pathToRouteMap.get(path);
       if (exactMatch) {
-         // Si es una ruta hija y tiene un padre definido, devolvemos el padre en su lugar
          if (exactMatch.parentRoute) {
-            // Mantenemos la información de parámetros que viene de la ruta actual
             return { 
                route: exactMatch.parentRoute, 
                params: {},
-               childRoute: exactMatch // Guardamos la referencia a la ruta hija original
+               childRoute: exactMatch
             };
          }
          return { route: exactMatch, params: {} };
       }
    
-      // 2. Buscar coincidencias en rutas con parámetros
       for (const [routePattern, route] of this.pathToRouteMap.entries()) {
          if (routePattern.includes('${')) {
             const { regex, paramNames } = this.compilePathPattern(routePattern);
@@ -151,7 +276,6 @@ export default class Router {
                   params[name] = match[i + 1];
                });
                
-               // Si es una ruta hija, devolvemos el padre con los parámetros
                if (route.parentRoute) {
                   return { 
                      route: route.parentRoute, 
@@ -165,7 +289,6 @@ export default class Router {
          }
       }
    
-      // 3. Si no hay coincidencias, retornar la ruta 404
       const notFoundRoute = this.pathToRouteMap.get('/404');
       return { route: notFoundRoute, params: {} };
    }

package/package.json

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