Merge pull request #33 from KiranMantha/dev-branch

Fixed issues in nested routes

Author: KiranMantha

Diff for: dist/index.js

@@ -1,23 +1,23 @@
-var b = Object.defineProperty;
-var w = (e, t, a) => t in e ? b(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
-var u = (e, t, a) => w(e, typeof t != "symbol" ? t + "" : t, a);
-import { BehaviourSubjectObs as g, SubjectObs as P, fromEvent as O, wrapIntoObservable as v, Injectable as _, Component as E, signal as S, Subscriptions as T } from "@plumejs/core";
-const C = /:([^/]+)/g, x = (e) => {
+var R = Object.defineProperty;
+var w = (r, t, e) => t in r ? R(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var c = (r, t, e) => w(r, typeof t != "symbol" ? t + "" : t, e);
+import { BehaviourSubjectObs as g, SubjectObs as P, fromEvent as T, wrapIntoObservable as d, Injectable as _, Component as O, signal as E, Subscriptions as S } from "@plumejs/core";
+const A = /:([^/]+)/g, C = (r) => {
   const t = [];
-  let a;
-  for (; (a = C.exec(e)) !== null; )
-    t.push(a[0]);
+  let e;
+  for (; (e = A.exec(r)) !== null; )
+    t.push(e[0]);
   return t;
-}, B = (e, t) => e && t ? new RegExp(`^${e.replace(/:[^\s/]+/g, "([^/]+)")}$`).test(t) : !1;
-function y(e, t) {
-  const r = e.split("?")[0].split("/").filter(Boolean);
+}, B = (r, t) => r && t ? new RegExp(`^${r.replace(/:[^\s/]+/g, "([^/]+)")}$`).test(t) : !1;
+function x(r, t) {
+  const a = r.split("?")[0].split("/").filter(Boolean);
   for (const n of t) {
     const s = n.fragments;
-    if (s.length >= r.length || s.includes("*")) {
-      const i = {};
+    if (s.length >= a.length || s.includes("*")) {
+      const o = {};
       let h = !0;
-      for (let o = 0; o < s.length; o++) {
-        const l = s[o], m = r[o];
+      for (let i = 0; i < s.length; i++) {
+        const l = s[i], m = a[i];
         if (l === "*") {
           h = !0;
           break;
@@ -27,83 +27,80 @@ function y(e, t) {
           break;
         }
         if (l.startsWith(":"))
-          i[l.substring(1)] = m;
+          o[l.substring(1)] = m;
         else if (l !== m) {
           h = !1;
           break;
         }
       }
       if (h) {
-        const o = Object.fromEntries(
+        const i = Object.fromEntries(
           new URLSearchParams(window.location.search).entries()
         );
-        return { route: n, routeData: { path: e, routeParams: i, queryParams: o } };
+        return { route: n, routeData: { path: r, routeParams: o, queryParams: i } };
       }
     }
   }
   return null;
 }
-const A = `
+const y = `
   <div style='text-align: center'>
     <h1>404</h1>
     <h3>not Found</h3>
   </div>
 `, p = class p {
   static formatRoute(t) {
-    const a = {
+    const e = {
       fragments: [],
-      params: x(t.path),
+      params: C(t.path),
       path: t.path,
       template: "",
+      templatePath: null,
       paramCount: 0,
       isRegistered: !1,
       redirectTo: t.redirectTo,
       preload: t.preload,
       canActivate: () => !0
     };
-    if (a.fragments = t.path.split("/").filter((r) => r.length > 0), t.template) {
-      if (!t.templatePath) throw Error("templatePath is required in route if template is mentioned.");
-      a.template = t.template, a.templatePath = t.templatePath;
-    }
-    t.canActivate && (a.canActivate = t.canActivate), a.paramCount = a.params.length, p.routeList.push(a);
+    e.fragments = t.path.split("/").filter((a) => a.length > 0), t.template && (e.template = t.template, e.templatePath = t.templatePath), t.canActivate && (e.canActivate = t.canActivate), e.paramCount = e.params.length, p.routeList.push(e);
   }
   static preloadRoutes() {
     for (const t of p.routeList)
       t.templatePath && t.templatePath();
   }
   static preloadSelectedRoutes() {
-    const t = p.routeList.filter((a) => a.preload === !0);
-    for (const a of t)
-      a.templatePath && a.templatePath();
+    const t = p.routeList.filter((e) => e.preload === !0);
+    for (const e of t)
+      e.templatePath && e.templatePath();
   }
 };
-u(p, "routeList", []);
-let c = p;
-var j = Object.defineProperty, D = Object.getOwnPropertyDescriptor, L = (e, t, a, r) => {
-  for (var n = r > 1 ? void 0 : r ? D(t, a) : t, s = e.length - 1, i; s >= 0; s--)
-    (i = e[s]) && (n = (r ? i(t, a, n) : i(n)) || n);
-  return r && n && j(t, a, n), n;
+c(p, "routeList", []);
+let u = p;
+var L = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, j = (r, t, e, a) => {
+  for (var n = a > 1 ? void 0 : a ? $(t, e) : t, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (n = (a ? o(t, e, n) : o(n)) || n);
+  return a && n && L(t, e, n), n;
 };
 let f = class {
   constructor() {
-    u(this, "_currentRoute", new g({
+    c(this, "_currentRoute", new g({
       path: "",
       routeParams: {},
       queryParams: {},
       state: {}
     }));
-    u(this, "_template", new g(""));
-    u(this, "_navigationEndEvent", new P());
-    u(this, "_routeStateMap", /* @__PURE__ */ new Map());
+    c(this, "_template", new g(""));
+    c(this, "_navigationEndEvent", new P());
+    c(this, "_routeStateMap", /* @__PURE__ */ new Map());
   }
   listenRouteChanges() {
-    const e = "popstate";
-    return window.history.replaceState({}, null, ""), function(t, a) {
-      const r = t.pushState;
+    const r = "popstate";
+    return window.history.replaceState({}, null, ""), function(t, e) {
+      const a = t.pushState;
       t.pushState = function(...n) {
-        r.apply(t, n), a();
+        a.apply(t, n), e();
       };
-    }(window.history, this._registerOnHashChange.bind(this)), O(window, e, () => {
+    }(window.history, this._registerOnHashChange.bind(this)), T(window, r, () => {
       this._registerOnHashChange();
     });
   }
@@ -113,51 +110,51 @@ let f = class {
   getCurrentRoute() {
     return this._currentRoute.asObservable();
   }
-  navigateTo(e = "/", t = null) {
-    const a = window.location.pathname || "/";
-    this._routeStateMap.clear(), this._routeStateMap.set(e, t), a === e ? this._navigateTo(e, t) : window.history.pushState(t, "", e);
+  navigateTo(r = "/", t = null) {
+    const e = window.location.pathname || "/";
+    this._routeStateMap.clear(), this._routeStateMap.set(r, t), e === r ? this._navigateTo(r, t) : window.history.pushState(t, "", r);
   }
   onNavigationEnd() {
     return this._navigationEndEvent.asObservable();
   }
   _registerOnHashChange() {
-    const e = window.location.pathname, t = this._routeStateMap.get(e);
-    this._navigateTo(e, t);
-  }
-  _navigateTo(e, t) {
-    const a = y(e, c.routeList);
-    if (a) {
-      const r = a.route, { routeParams: n, queryParams: s } = a.routeData, i = {
-        path: e,
+    const r = window.location.pathname, t = this._routeStateMap.get(r);
+    this._navigateTo(r, t);
+  }
+  _navigateTo(r, t) {
+    const e = x(r, u.routeList);
+    if (e) {
+      const a = e.route, { routeParams: n, queryParams: s } = e.routeData, o = {
+        path: r,
         state: { ...t || {} },
         routeParams: n,
         queryParams: s
       };
-      v(r.canActivate()).subscribe((h) => {
+      d(a.canActivate()).subscribe((h) => {
         if (h)
-          if (e) {
-            const o = (l) => {
-              l.isRegistered = !0, this._currentRoute.next(i), this._template.next(l.template), this._navigationEndEvent.next(null);
+          if (r) {
+            const i = (l) => {
+              l.isRegistered = !0, this._currentRoute.next(o), this._template.next(l.template), this._navigationEndEvent.next(null);
             };
-            r.isRegistered ? o(r) : r.templatePath ? v(r.templatePath()).subscribe(() => {
-              o(r);
-            }) : r.redirectTo && this.navigateTo(r.redirectTo, t);
+            a.isRegistered ? i(a) : a.templatePath ? d(a.templatePath()).subscribe(() => {
+              i(a);
+            }) : a.redirectTo ? this.navigateTo(a.redirectTo, t) : i(a);
           } else
-            this.navigateTo(r.redirectTo, t);
+            this.navigateTo(a.redirectTo, t);
       });
     } else {
-      const r = c.routeList.find((n) => n.path === "/404");
-      r ? this._navigateTo(r.path, t) : (this._template.next(A), this._navigationEndEvent.next(null));
+      const a = u.routeList.find((n) => n.path === "/404");
+      a ? this._navigateTo(a.path, t) : (this._template.next(y), this._navigationEndEvent.next(null));
     }
   }
 };
-f = L([
+f = j([
   _()
 ], f);
-class M {
+class D {
   constructor(t) {
-    u(this, "_template", S(""));
-    u(this, "_subscriptions", new T());
+    c(this, "_template", E(""));
+    c(this, "_subscriptions", new S());
     this.internalRouterSrvc = t;
   }
   beforeMount() {
@@ -178,49 +175,59 @@ class M {
     return this._template();
   }
 }
-const $ = () => {
-  E({
+const M = () => {
+  O({
     selector: "router-outlet",
     deps: [f]
-  })(M);
+  })(D);
 };
-var N = Object.defineProperty, q = Object.getOwnPropertyDescriptor, F = (e, t, a, r) => {
-  for (var n = r > 1 ? void 0 : r ? q(t, a) : t, s = e.length - 1, i; s >= 0; s--)
-    (i = e[s]) && (n = (r ? i(t, a, n) : i(n)) || n);
-  return r && n && N(t, a, n), n;
+var N = Object.defineProperty, F = Object.getOwnPropertyDescriptor, I = (r, t, e, a) => {
+  for (var n = a > 1 ? void 0 : a ? F(t, e) : t, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (n = (a ? o(t, e, n) : o(n)) || n);
+  return a && n && N(t, e, n), n;
 };
-function R(e, t = "") {
-  const a = `${t}/${e.path}`.replace(/\/+/g, "/");
-  c.formatRoute({ ...e, path: a }), (e.children || []).forEach((r) => {
-    R(r, a);
+function b(r, t = "") {
+  const e = `${t}/${r.path}`.replace(/\/+/g, "/");
+  u.formatRoute({ ...r, path: e }), (r.children || []).forEach((a) => {
+    b({ ...a, canActivate: r.canActivate }, e);
   });
 }
-let d = class {
-  constructor(e) {
-    this.internalRouter = e, $();
+let v = class {
+  constructor(r) {
+    this.internalRouter = r, M();
   }
   getCurrentRoute() {
     return this.internalRouter.getCurrentRoute();
   }
-  navigateTo(e, t) {
-    this.internalRouter.navigateTo(e, t);
+  navigateTo(r, t) {
+    this.internalRouter.navigateTo(r, t);
   }
   onNavigationEnd() {
     return this.internalRouter.onNavigationEnd();
   }
-  static registerRoutes({ routes: e, preloadAllRoutes: t = !1 }) {
-    if (Array.isArray(e)) {
-      for (const a of e)
-        R(a);
-      t ? c.preloadRoutes() : c.preloadSelectedRoutes();
+  static registerRoutes({ routes: r, preloadAllRoutes: t = !1 }) {
+    if (Array.isArray(r)) {
+      for (const e of r) {
+        if (!e.template && !e.redirectTo && !(e.children || []).length)
+          throw Error("A route should have either a template or redirectTo path or child routes.");
+        if (!e.template && !e.redirectTo && (e.children || []).length) {
+          const a = e.children.find((n) => n.redirectTo);
+          e.redirectTo = `${e.path}/${(a == null ? void 0 : a.redirectTo) ?? e.children[0].path}`.replace(
+            "//",
+            "/"
+          );
+        }
+        b(e);
+      }
+      t ? u.preloadRoutes() : u.preloadSelectedRoutes(), console.log(u.routeList);
     } else
       throw Error("router.addRoutes: the parameter must be an array");
   }
 };
-d = F([
+v = I([
   _({ deps: [f] })
-], d);
+], v);
 export {
-  d as Router,
+  v as Router,
   B as matchPath
 };

Diff for: dist/index.js.br

@@ -88,6 +88,8 @@ export class InternalRouter {
               });
             } else if (routeItem.redirectTo) {
               this.navigateTo(routeItem.redirectTo, state);
+            } else {
+              triggerNavigation(routeItem);
             }
           } else {
             triggerNavigation(routeItem);

Diff for: src/internalRouter.service.ts

@@ -11,7 +11,7 @@ function normalizeRoute(route: Route, parentPath = '') {
   StaticRouter.formatRoute({ ...route, path: fullPath });
 
   (route.children || []).forEach((childRoute) => {
-    normalizeRoute(childRoute, fullPath);
+    normalizeRoute({ ...childRoute, canActivate: route.canActivate }, fullPath);
   });
 }
 
@@ -36,6 +36,16 @@ export class Router {
   static registerRoutes({ routes, preloadAllRoutes = false }: { routes: Array<Route>; preloadAllRoutes?: boolean }) {
     if (Array.isArray(routes)) {
       for (const route of routes) {
+        if (!route.template && !route.redirectTo && !(route.children || []).length) {
+          throw Error('A route should have either a template or redirectTo path or child routes.');
+        }
+        if (!route.template && !route.redirectTo && (route.children || []).length) {
+          const redirectedChildRoute = route.children.find((childRoute) => childRoute.redirectTo);
+          route.redirectTo = `${route.path}/${redirectedChildRoute?.redirectTo ?? route.children[0].path}`.replace(
+            '//',
+            '/'
+          );
+        }
         normalizeRoute(route);
       }
       if (preloadAllRoutes) {

Diff for: src/router.service.ts

@@ -10,6 +10,7 @@ export class StaticRouter {
       params: getParams(route.path),
       path: route.path,
       template: '',
+      templatePath: null,
       paramCount: 0,
       isRegistered: false,
       redirectTo: route.redirectTo,
@@ -20,7 +21,6 @@ export class StaticRouter {
       return str.length > 0;
     });
     if (route.template) {
-      if (!route.templatePath) throw Error('templatePath is required in route if template is mentioned.');
       internalRouteItem.template = route.template;
       internalRouteItem.templatePath = route.templatePath;
     }