fix: component attached routing

KevinBLT · Mar 10, 2024 · 96e07d0 · 96e07d0
1 parent 810bf0d
commit 96e07d0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/packages/@hec.js/ui/lib/src/plugins/data-route.js b/packages/@hec.js/ui/lib/src/plugins/data-route.js
@@ -32,7 +32,7 @@ export const dataRoutePlugin = {
       }
     }
 
-    addRoute({ path: route, update, node });
+    addRoute({ path: route, update, node, placeholder });
 
     node.replaceWith(placeholder);
   }

diff --git a/packages/@hec.js/ui/lib/src/routing.js b/packages/@hec.js/ui/lib/src/routing.js
@@ -13,7 +13,8 @@ const _pushState    = window.history.pushState,
  *  update: (visible: boolean) => void, 
  *  group?: Route[],
  *  path: string,
- *  node: (HTMLElement | SVGElement)
+ *  node: (HTMLElement | SVGElement),
+ *  placeholder?: Node,
  * }} Route
  * @type { Route[] }
  */
@@ -39,38 +40,35 @@ export function routeCompare(a,b) {
 
 /** @param { Route } route  */
 export function addRoute(route) {
+  let node         = route.node,
+      path         = route.path,
+      placeholder  = route.placeholder,
+      parent       = (node.parentElement ?? placeholder?.parentElement)?.closest('[data-route]'),
+      parentRoute  = routingNodes.get(parent),
+      parentPath   = parentRoute?.pattern?.pathname,
+      targetRoutes = parentRoute?.group ?? routes;
 
-  requestAnimationFrame(() => {
-    let node         = route.node,
-        path         = route.path,
-        parent       = node.parentElement?.closest('[data-route]'),
-        parentRoute  = routingNodes.get(parent),
-        parentPath   = parentRoute?.pattern?.pathname,
-        targetRoutes = parentRoute?.group ?? routes;
-
     route.group = [];
-  
+
     routingNodes.set(node, route);
-  
+
     if (parentPath) {
-      path = path == '/' ? '' : path;
-      path = parentPath.replaceAll(/[^\/a-zA-Z0-9]+$/gm, '') + path.replaceAll(/^[^\/a-zA-Z0-9]+/gm, '');
+    path = path == '/' ? '' : path;
+    path = parentPath.replaceAll(/[^\/a-zA-Z0-9]+$/gm, '') + path.replaceAll(/^[^\/a-zA-Z0-9]+/gm, '');
     }
-  
+
     path = path.replaceAll(/\/+/g, '/').replace(/\/$/m, '');
-  
+
     route.pattern = new URLPattern({ pathname: !path ? '/' : path });
-      
+
     targetRoutes.push(route);
     targetRoutes.sort(routeCompare);
-  
+
     if (!state.updateQueued) {
-      state.updateQueued = true;
-
-      queueMicrotask(updateRouting);
-    }
-  });
+    state.updateQueued = true;
 
+    queueMicrotask(updateRouting);
+}
 }
 
 export function navigate(path = '') {
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ export const dataRoutePlugin = { @@
           }
         }
-        addRoute({ path: route, update, node });
+        addRoute({ path: route, update, node, placeholder });
         node.replaceWith(placeholder);
       }
@@ Expand Down @@