slicejs-web-framework 2.2.0 → 2.2.2

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

@@ -8,6 +8,10 @@ export default class Router {
       this._beforeEachGuard = null;
       this._afterEachGuard = null;
       
+      // Router state
+      this._started = false;
+      this._autoStartTimeout = null;
+      
       // Sistema de caché optimizado
       this.routeContainersCache = new Map();
       this.lastCacheUpdate = 0;
@@ -17,9 +21,43 @@ export default class Router {
       this.setupMutationObserver();
    }
 
-   async init() {
-      await this.loadInitialRoute();
+   /**
+    * Inicializa el router
+    * Si el usuario no llama start() manualmente, se auto-inicia después de un delay
+    */
+   init() {
       window.addEventListener('popstate', this.onRouteChange.bind(this));
+      
+      // Auto-start después de 50ms si el usuario no llama start() manualmente
+      // Esto da tiempo para que el usuario configure guards si lo necesita
+      this._autoStartTimeout = setTimeout(async () => {
+         if (!this._started) {
+            slice.logger.logInfo('Router', 'Auto-starting router (no manual start() called)');
+            await this.start();
+         }
+      }, 50);
+   }
+
+   /**
+    * Inicia el router y carga la ruta inicial
+    * OPCIONAL: Solo necesario si usas guards (beforeEach/afterEach)
+    * Si no lo llamas, el router se auto-inicia después de 50ms
+    */
+   async start() {
+      // Prevenir múltiples llamadas
+      if (this._started) {
+         slice.logger.logWarning('Router', 'start() already called');
+         return;
+      }
+      
+      // Cancelar auto-start si existe
+      if (this._autoStartTimeout) {
+         clearTimeout(this._autoStartTimeout);
+         this._autoStartTimeout = null;
+      }
+      
+      this._started = true;
+      await this.loadInitialRoute();
    }
 
    // ============================================
@@ -56,12 +94,13 @@ export default class Router {
     * Crea un objeto con información de ruta para los guards
     * @param {Object} route - Objeto de ruta
     * @param {Object} params - Parámetros de la ruta
+    * @param {String} requestedPath - Path original solicitado
     * @returns {Object} Objeto con path, component, params, query, metadata
     */
-   _createRouteInfo(route, params = {}) {
+   _createRouteInfo(route, params = {}, requestedPath = null) {
       if (!route) {
          return {
-            path: '/404',
+            path: requestedPath || '/404',
             component: 'NotFound',
             params: {},
             query: this._parseQueryParams(),
@@ -70,7 +109,7 @@ export default class Router {
       }
 
       return {
-         path: route.fullPath || route.path,
+         path: requestedPath || route.fullPath || route.path,
          component: route.parentRoute ? route.parentRoute.component : route.component,
          params: params,
          query: this._parseQueryParams(),
@@ -161,31 +200,48 @@ export default class Router {
    // ROUTING CORE (MODIFICADO CON GUARDS)
    // ============================================
 
-   async navigate(path) {
+   async navigate(path, _redirectChain = []) {
       const currentPath = window.location.pathname;
       
+      
+      // Detectar loops infinitos: si ya visitamos esta ruta en la cadena de redirecciones
+      if (_redirectChain.includes(path)) {
+         slice.logger.logError(
+            'Router', 
+            `Guard redirection loop detected: ${_redirectChain.join(' → ')} → ${path}`
+         );
+         return;
+      }
+      
+      // Límite de seguridad: máximo 10 redirecciones
+      if (_redirectChain.length >= 10) {
+         slice.logger.logError(
+            'Router',
+            `Too many redirections: ${_redirectChain.join(' → ')} → ${path}`
+         );
+         return;
+      }
+      
       // Obtener información de ruta actual
       const { route: fromRoute, params: fromParams } = this.matchRoute(currentPath);
-      const from = this._createRouteInfo(fromRoute, fromParams);
+      const from = this._createRouteInfo(fromRoute, fromParams, currentPath);
 
       // Obtener información de ruta destino
       const { route: toRoute, params: toParams } = this.matchRoute(path);
-      const to = this._createRouteInfo(toRoute, toParams);
+      const to = this._createRouteInfo(toRoute, toParams, path); // ← PASAR EL PATH AQUÍ
+
 
       // EJECUTAR BEFORE EACH GUARD
       const redirectPath = await this._executeBeforeEachGuard(to, from);
 
-      // Si el guard redirige, navegar a la nueva ruta
+      // Si el guard redirige, agregar ruta actual a la cadena y navegar a la nueva ruta
       if (redirectPath) {
-         // Evitar loops infinitos
-         if (redirectPath === path) {
-            slice.logger.logError('Router', `Guard redirection loop detected: ${path}`);
-            return;
-         }
-         return this.navigate(redirectPath);
+         const newChain = [..._redirectChain, path];
+
+         return this.navigate(redirectPath, newChain);
       }
 
-      // Continuar con la navegación normal
+      // No hay redirección - continuar con la navegación normal
       window.history.pushState({}, path, window.location.origin + path);
       await this._performNavigation(to, from);
    }
@@ -272,8 +328,8 @@ export default class Router {
       const { route, params } = this.matchRoute(path);
 
       // Para la carga inicial, también ejecutar guards
-      const from = this._createRouteInfo(null, {});
-      const to = this._createRouteInfo(route, params);
+      const from = this._createRouteInfo(null, {}, null);
+      const to = this._createRouteInfo(route, params, path); // ← PASAR EL PATH AQUÍ
 
       // EJECUTAR BEFORE EACH GUARD en carga inicial
       const redirectPath = await this._executeBeforeEachGuard(to, from);

package/Slice/Slice.js

@@ -217,15 +217,6 @@ async function init() {
    window.slice.router = new RouterModule(routes);
    await window.slice.router.init();
    
-
-   /*
-   if (sliceConfig.translator.enabled) {
-      const translator = await window.slice.build('Translator');
-      window.slice.translator = translator;
-      window.slice.logger.logInfo('Slice', 'Translator succesfuly enabled');
-   }
-   */
-
 }
 
 await init();

package/package.json

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

package/src/App/index.js

@@ -1,63 +1,23 @@
 import Slice from '/Slice/Slice.js';
 
-const CACHE_NAME = 'slice-cache-v1';
-const urlsToCache = [
-   // Añade aquí las rutas de los archivos que deseas almacenar
-   './Slice/Slice.js',
-   './Slice/Components/Structural/Logger/Logger.js',
-   './Slice/Components/Structural/Debugger/Debugger.js',
-   './Slice/Components/Structural/Router/Router.js',
-   './Slice/Components/Structural/Router/routes.js',
-   './Slice/Components/Structural/Controller/Controller.js',
-   './Slice/Components/Structural/StylesManager/StylesManager.js',
-   './Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js',
-];
 
-self.addEventListener('install', (event) => {
-   event.waitUntil(
-      caches.open(CACHE_NAME).then((cache) => {
-         console.log('Opened cache');
-         return cache.addAll(urlsToCache);
-      })
-   );
+/*
+slice.router.beforeEach(async (to, from, next) => {
+  
+   if(to.metadata.private){
+      const isAuthenticated = await //fetchlogic for validation
+      if(!isAuthenticated){
+         return next({ path: '/login' });
+      }
+      return next();
+   }
+   
+   return next();
 });
 
-self.addEventListener('fetch', (event) => {
-   event.respondWith(
-      caches.match(event.request).then((response) => {
-         if (response) {
-            return response;
-         }
-         return fetch(event.request);
-      })
-   );
-});
 
-self.addEventListener('activate', (event) => {
-   const cacheWhitelist = [CACHE_NAME];
+If any beforeEach or afterEach is defined, start the router after defining them
 
-   event.waitUntil(
-      caches.keys().then((cacheNames) => {
-         return Promise.all(
-            cacheNames.map((cacheName) => {
-               if (cacheWhitelist.indexOf(cacheName) === -1) {
-                  return caches.delete(cacheName);
-               }
-            })
-         );
-      })
-   );
-});
+await slice.router.start();
 
-if ('serviceWorker' in navigator) {
-   window.addEventListener('load', () => {
-      navigator.serviceWorker
-         .register('/service-worker.js')
-         .then((registration) => {
-            console.log('Service Worker registrado con éxito:', registration);
-         })
-         .catch((error) => {
-            console.log('Error al registrar el Service Worker:', error);
-         });
-   });
-}
+*/