sibujs 3.2.0 → 3.2.1

package/dist/plugins.cjs

@@ -2801,8 +2801,7 @@ function Route() {
   let currentNode = null;
   let loadingNode = null;
   let errorNode = null;
-  let isUpdating = false;
-  let currentPath = "";
+  let navSeq = 0;
   let currentTopRoute = null;
   const cleanupNodes = () => {
     [currentNode, loadingNode, errorNode].forEach((node) => {
@@ -2880,30 +2879,21 @@ function Route() {
     errorNode.appendChild(retryButton);
     anchor.parentNode.insertBefore(errorNode, anchor.nextSibling);
   };
-  let pendingUpdate = false;
   const update = async () => {
     if (!globalRouter) return;
-    if (isUpdating) {
-      pendingUpdate = true;
-      return;
-    }
+    const seq = ++navSeq;
     const route2 = globalRouter.currentRoute;
     try {
       const match = globalRouter["matcher"].match(route2.path);
       if (!match) {
-        currentPath = route2.path;
         currentTopRoute = null;
         cleanupNodes();
         return;
       }
       const routeDef = match.matched[0] || match.route;
       if (routeDef === currentTopRoute && currentNode) {
-        currentPath = route2.path;
         return;
       }
-      isUpdating = true;
-      currentPath = route2.path;
-      currentTopRoute = routeDef;
       if ("redirect" in routeDef) {
         const redirectPath = typeof routeDef.redirect === "function" ? routeDef.redirect(route2) : routeDef.redirect;
         queueMicrotask(() => {
@@ -2920,27 +2910,25 @@ function Route() {
             showLoading();
           }
           const component = await globalRouter.loadComponent(routeDef, route2.path);
+          if (seq !== navSeq) return;
           const node = component();
-          if (node && anchor.parentNode && route2.path === currentPath) {
+          if (node && anchor.parentNode) {
+            currentTopRoute = routeDef;
             cleanupNodes();
             anchor.parentNode.insertBefore(node, anchor.nextSibling);
             currentNode = node;
           }
         } catch (error) {
+          if (seq !== navSeq) return;
           hideLoading();
           console.error("[Route] Component error:", error);
           showError(error instanceof Error ? error : new Error(String(error)), routeDef);
         }
       }
     } catch (error) {
+      if (seq !== navSeq) return;
       console.error("[Route] Update failed:", error);
       showError(error instanceof Error ? error : new Error(String(error)));
-    } finally {
-      isUpdating = false;
-      if (pendingUpdate) {
-        pendingUpdate = false;
-        update();
-      }
     }
   };
   let routeInitialized = false;
@@ -3287,24 +3275,43 @@ function __removeRouterPagehideHandler() {
 function Outlet() {
   const anchor = document.createComment("route-outlet-nested");
   let currentNode = null;
+  let currentChild = null;
+  let navSeq = 0;
+  const clearCurrent = () => {
+    if (currentNode) {
+      dispose(currentNode);
+      if (currentNode.parentNode) currentNode.parentNode.removeChild(currentNode);
+      currentNode = null;
+    }
+    currentChild = null;
+  };
   const update = async () => {
     if (!globalRouter) return;
+    const seq = ++navSeq;
     const route2 = globalRouter.currentRoute;
-    if (route2.matched.length < 2) return;
+    if (route2.matched.length < 2) {
+      clearCurrent();
+      return;
+    }
     const childRoute = route2.matched[route2.matched.length - 1];
-    if (!childRoute || !("component" in childRoute)) return;
+    if (!childRoute || !("component" in childRoute)) {
+      clearCurrent();
+      return;
+    }
+    if (childRoute === currentChild && currentNode) return;
     try {
       const cacheKey = `${route2.path}\0${childRoute.path}`;
       const component = await globalRouter.loadComponent(childRoute, cacheKey);
+      if (seq !== navSeq) return;
       const node = component();
       if (node && anchor.parentNode) {
-        if (currentNode?.parentNode) {
-          currentNode.parentNode.removeChild(currentNode);
-        }
+        clearCurrent();
         anchor.parentNode.insertBefore(node, anchor.nextSibling);
         currentNode = node;
+        currentChild = childRoute;
       }
     } catch (error) {
+      if (seq !== navSeq) return;
       console.error("[Outlet] Failed to render child route:", error);
     }
   };

package/dist/plugins.js

@@ -964,8 +964,7 @@ function Route() {
   let currentNode = null;
   let loadingNode = null;
   let errorNode = null;
-  let isUpdating = false;
-  let currentPath = "";
+  let navSeq = 0;
   let currentTopRoute = null;
   const cleanupNodes = () => {
     [currentNode, loadingNode, errorNode].forEach((node) => {
@@ -1043,30 +1042,21 @@ function Route() {
     errorNode.appendChild(retryButton);
     anchor.parentNode.insertBefore(errorNode, anchor.nextSibling);
   };
-  let pendingUpdate = false;
   const update = async () => {
     if (!globalRouter) return;
-    if (isUpdating) {
-      pendingUpdate = true;
-      return;
-    }
+    const seq = ++navSeq;
     const route2 = globalRouter.currentRoute;
     try {
       const match = globalRouter["matcher"].match(route2.path);
       if (!match) {
-        currentPath = route2.path;
         currentTopRoute = null;
         cleanupNodes();
         return;
       }
       const routeDef = match.matched[0] || match.route;
       if (routeDef === currentTopRoute && currentNode) {
-        currentPath = route2.path;
         return;
       }
-      isUpdating = true;
-      currentPath = route2.path;
-      currentTopRoute = routeDef;
       if ("redirect" in routeDef) {
         const redirectPath = typeof routeDef.redirect === "function" ? routeDef.redirect(route2) : routeDef.redirect;
         queueMicrotask(() => {
@@ -1083,27 +1073,25 @@ function Route() {
             showLoading();
           }
           const component = await globalRouter.loadComponent(routeDef, route2.path);
+          if (seq !== navSeq) return;
           const node = component();
-          if (node && anchor.parentNode && route2.path === currentPath) {
+          if (node && anchor.parentNode) {
+            currentTopRoute = routeDef;
             cleanupNodes();
             anchor.parentNode.insertBefore(node, anchor.nextSibling);
             currentNode = node;
           }
         } catch (error) {
+          if (seq !== navSeq) return;
           hideLoading();
           console.error("[Route] Component error:", error);
           showError(error instanceof Error ? error : new Error(String(error)), routeDef);
         }
       }
     } catch (error) {
+      if (seq !== navSeq) return;
       console.error("[Route] Update failed:", error);
       showError(error instanceof Error ? error : new Error(String(error)));
-    } finally {
-      isUpdating = false;
-      if (pendingUpdate) {
-        pendingUpdate = false;
-        update();
-      }
     }
   };
   let routeInitialized = false;
@@ -1450,24 +1438,43 @@ function __removeRouterPagehideHandler() {
 function Outlet() {
   const anchor = document.createComment("route-outlet-nested");
   let currentNode = null;
+  let currentChild = null;
+  let navSeq = 0;
+  const clearCurrent = () => {
+    if (currentNode) {
+      dispose(currentNode);
+      if (currentNode.parentNode) currentNode.parentNode.removeChild(currentNode);
+      currentNode = null;
+    }
+    currentChild = null;
+  };
   const update = async () => {
     if (!globalRouter) return;
+    const seq = ++navSeq;
     const route2 = globalRouter.currentRoute;
-    if (route2.matched.length < 2) return;
+    if (route2.matched.length < 2) {
+      clearCurrent();
+      return;
+    }
     const childRoute = route2.matched[route2.matched.length - 1];
-    if (!childRoute || !("component" in childRoute)) return;
+    if (!childRoute || !("component" in childRoute)) {
+      clearCurrent();
+      return;
+    }
+    if (childRoute === currentChild && currentNode) return;
     try {
       const cacheKey = `${route2.path}\0${childRoute.path}`;
       const component = await globalRouter.loadComponent(childRoute, cacheKey);
+      if (seq !== navSeq) return;
       const node = component();
       if (node && anchor.parentNode) {
-        if (currentNode?.parentNode) {
-          currentNode.parentNode.removeChild(currentNode);
-        }
+        clearCurrent();
         anchor.parentNode.insertBefore(node, anchor.nextSibling);
         currentNode = node;
+        currentChild = childRoute;
       }
     } catch (error) {
+      if (seq !== navSeq) return;
       console.error("[Outlet] Failed to render child route:", error);
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sibujs",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "A lightweight, function-based frontend framework that combines the best of React, Svelte, and Vue — with zero VDOM and maximum simplicity. Designed for developers who want fine-grained reactivity and full control without compilation or magic.",
   "keywords": [
     "frontend",