jong-router 0.1.14 → 0.1.15

package/README.md

@@ -12,7 +12,7 @@ Designed for developers who want a simple router for Web Components without brin
 ## Features
 
 * SPA Navigation
-Navigate without reloading the page using the router-link attribute.
+Navigate without reloading the page using the `router-link` attribute.
 * Route Guards
 Protect routes with custom guard logic before navigation.
 * Nested Routing
@@ -154,6 +154,8 @@ Go to About
 4. Programmatic Navigation
 Components can navigate programmatically.
 
+Example outside component
+
 ```js
 import { router } from "../router-instance"
 
@@ -166,7 +168,7 @@ this.shadowRoot
   .getElementById("btn")
   .addEventListener("click", () => {
 
-    router.navigateTo("/profile/admin")
+    this.navigateTo("/profile/admin")
 
   })
 ```
@@ -180,7 +182,7 @@ Implement guards for route conditions
 
 
 
-```javascript
+```js
 
 const router = new JongRouter([
 
@@ -270,29 +272,66 @@ const data = JSON.parse(
 ```
 
 
-8. **Nested Routes**
-JongRouter supports child routers inside components.
+8. **Nested Routes & Sub-Outlest**
+
+JongRouter supports hierarchical routing. This allows you to render a "Shell" or "Layout" component and then inject sub-pages into it dynamically.
+
+Step 1: Define Child Routes
+Create a separate file for your sub-navigation.
 
 Example
-```bash
-/nested
-   ├─ /nested/c1
-   ├─ /nested/c2
-   └─ /nested/c3
+```ts
+// samples/nested/nested-routes.ts
+import { IRoute } from "../../src/jong-router"
+
+const routes: IRoute[] = [
+  { pattern: "/nested/c1", html: "<p>Child Page 1</p>" },
+  { pattern: "/nested/c2", html: "<p>Child Page 2</p>" },
+  { pattern: "/nested/c3", html: "<p>Child Page 3</p>" }
+]
+
+export default routes
+
 ```
 
-A parent component can create its own router instance
-```js
-const childRouter = new JongRouter(
-  childRoutes,
-  this.shadowRoot.getElementById("outlet"),
-  "/nested",
-  true
-)
+Step 2: Prepare the Parent Component
+Your parent component must contain an element with the router-outlet attribute. This is where the child routes will be rendered.
+
+A parent component can create its own router instance w children routes
+```ts
+// samples/nested/sample-nested.ts
+export default class SampleNested extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div class="layout">
+        <nav>
+          <a href="/nested/c1" router-link>Go to C1</a>
+          <a href="/nested/c2" router-link>Go to C2</a>
+        </nav>
+        <!-- Child routes will appear here -->
+        <div router-outlet></div> 
+      </div>
+    `;
+  }
+}
+
+```
+
+Step 3: Register Nested Routes
+Pass the children to the parent route. You can use a static array or a function for Lazy Loading.
+```ts
+const routes: IRoute[] = [
+  {
+    pattern: '/nested',
+    component: import('./samples/nested/sample-nested'),
+    // Lazy-load the child route definitions
+    children: () => import("./samples/nested/nested-routes") 
+  }
+]
 
-childRouter.init()
 ```
 
+
 ## Playground & Examples
 Playground & Examples
 The repository contains a Playground demonstrating:

package/dist/jong-router.d.ts

@@ -1,14 +1,22 @@
+/**
+ * Context passed to Route Guards to decide if a user can access a route.
+ */
 export interface GuardContext {
     path?: string;
     params?: Record<string, string>;
     query?: URLSearchParams;
     data?: any;
 }
+/**
+ * Definition of a single Route.
+ */
 export interface IRoute {
     pattern: string;
     component?: Promise<any>;
     html?: string;
-    children?: IRoute[];
+    children?: IRoute[] | (() => Promise<{
+        default: IRoute[];
+    }>);
     guards?: ((ctx?: any) => boolean)[];
     redirect?: string;
     data?: Record<string, any>;
@@ -16,15 +24,34 @@ export interface IRoute {
 declare class JongRouter {
     private routes;
     private outlet;
-    private basePath;
-    private isRoot;
-    constructor(routes: IRoute[], outlet: HTMLElement, basePath?: string, isRoot?: boolean);
+    constructor(routes: IRoute[], outlet: HTMLElement);
+    /**
+     * Starts the router by listening to browser events and initial navigation.
+     */
     init(): void;
+    /**
+     * Intercepts clicks to handle internal navigation without refreshing the page.
+     */
     private handleClick;
+    /**
+     * Matches the current browser URL against the route table and triggers rendering.
+     */
     private navigate;
+    /**
+     * Handles Guards, Component instantiation, and Nested routes.
+     */
     private renderRoute;
+    /**
+     * Basic string matching. Supports ':param' wildcards and '**' catch-all.
+     */
     private matchRoute;
+    /**
+     * Maps URL values to parameter names based on the pattern.
+     */
     private extractRouteParams;
+    /**
+     * Programmatic navigation (e.g., router.navigateTo('/dashboard'))
+     */
     navigateTo(route: string): void;
 }
 export default JongRouter;

package/dist/jong-router.min.js

@@ -1,2 +1,2 @@
-var s=class c{routes;outlet;basePath;isRoot;constructor(t,a,i="",n=!1){this.routes=t,this.outlet=a,this.basePath=i,this.isRoot=n}init(){this.isRoot&&(window.addEventListener("popstate",()=>this.navigate()),document.addEventListener("click",t=>this.handleClick(t))),this.navigate()}handleClick(t){let i=t.composedPath().find(e=>(e instanceof HTMLAnchorElement||e instanceof HTMLButtonElement)&&e.hasAttribute("router-link"));if(!i)return;let n=i.getAttribute("href");!n||n.startsWith("http")||t instanceof MouseEvent&&(t.metaKey||t.ctrlKey||t.shiftKey||t.altKey)||(t.preventDefault(),this.navigateTo(n))}navigate(){let t=window.location.pathname,a=this.routes.find(n=>this.matchRoute(n.pattern,t));if(!a)return;let i=this.extractRouteParams(a.pattern,t);this.renderRoute(a,i)}async renderRoute(t,a){if(t.guards){let i={path:window.location.pathname,params:a,query:new URLSearchParams(window.location.search),data:t.data};if(!t.guards.every(e=>e(i))){t.redirect&&this.navigateTo(t.redirect);return}}if(t.component){let n=(await t.component).default,e=new n;if(e.setAttribute("route-params",JSON.stringify(a)),e.router=this,this.outlet.innerHTML="",this.outlet.appendChild(e),t.children){let o=e.shadowRoot?.querySelector("[router-outlet]")||e.querySelector("[router-outlet]");o&&new c(t.children,o,t.pattern).navigate()}}else t.html&&(this.outlet.innerHTML=t.html)}matchRoute(t,a){if(t==="**")return!0;let i=t.split("/").filter(Boolean),n=a.split("/").filter(Boolean);return i.length>n.length?!1:i.every((e,o)=>e.startsWith(":")||e===n[o])}extractRouteParams(t,a){let i={},n=t.split("/").filter(Boolean),e=a.split("/").filter(Boolean);return n.forEach((o,r)=>{o.startsWith(":")&&(i[o.slice(1)]=e[r])}),i}navigateTo(t){window.history.pushState({},"",t),this.navigate()}},h=s;export{h as default};
+var l=class{routes;outlet;constructor(t,i){this.routes=t,this.outlet=i}init(){window.addEventListener("popstate",()=>this.navigate()),document.addEventListener("click",t=>this.handleClick(t)),this.navigate()}handleClick(t){let a=t.composedPath().find(n=>(n instanceof HTMLAnchorElement||n instanceof HTMLButtonElement)&&n.hasAttribute("router-link"));if(!a)return;let e=a.getAttribute("href");!e||e.startsWith("http")||t instanceof MouseEvent&&(t.metaKey||t.ctrlKey||t.shiftKey||t.altKey)||(t.preventDefault(),this.navigateTo(e))}navigate(){let t=window.location.pathname,i=this.routes.sort((e,n)=>n.pattern.length-e.pattern.length).find(e=>this.matchRoute(e.pattern,t));if(!i)return;let a=this.extractRouteParams(i.pattern,t);this.renderRoute(i,a)}async renderRoute(t,i,a=this.outlet){if(t.guards){let n={path:window.location.pathname,params:i,query:new URLSearchParams(window.location.search),data:t.data};if(!t.guards.every(o=>o(n))){t.redirect&&this.navigateTo(t.redirect);return}}let e=null;if(t.component){let r=(await t.component).default;e=new r,e.setAttribute("route-params",JSON.stringify(i)),e.router=this,a.innerHTML="",a.appendChild(e)}else t.html&&(a.innerHTML=t.html);if(t.children){let n;typeof t.children=="function"?n=(await t.children()).default:n=t.children;let r=e?.shadowRoot?.querySelector("[router-outlet]")||e?.querySelector("[router-outlet]")||a,o=window.location.pathname,c=n.sort((s,h)=>h.pattern.length-s.pattern.length).find(s=>this.matchRoute(s.pattern,o));if(c){let s=this.extractRouteParams(c.pattern,o);await this.renderRoute(c,s,r)}}}matchRoute(t,i){if(t==="**")return!0;let a=t.split("/").filter(Boolean),e=i.split("/").filter(Boolean);return a.length>e.length?!1:a.every((n,r)=>n.startsWith(":")||n===e[r])}extractRouteParams(t,i){let a={},e=t.split("/").filter(Boolean),n=i.split("/").filter(Boolean);return e.forEach((r,o)=>{r.startsWith(":")&&(a[r.slice(1)]=n[o])}),a}navigateTo(t){window.history.pushState({},"",t),this.navigate()}},u=l;export{u as default};
 //# sourceMappingURL=jong-router.min.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jong-router",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "JongRouter is a lightweight client-side router for Web Components, built with Vanilla JavaScript. It enables Single Page Application (SPA) navigation without page reloads while staying framework-agnostic.Designed for developers who want a simple router for Web Components without bringing in a heavy framework",
   "keywords": [
     "redgin",

package/router-instance.ts

@@ -1,6 +1,6 @@
 // index.ts
 import JongRouter, { IRoute } from './src/jong-router'
-import { authencationGuard } from './src/guard'
+import { authencationGuard } from './samples/guards/guard'
 
 const routes: IRoute[] = [
   { pattern: '/about', html: `<h2>About Page</h2>` },
@@ -15,16 +15,13 @@ const routes: IRoute[] = [
   {
   pattern: '/nested',
   component: import('./samples/nested/sample-nested'),
-  children: [
-    { pattern: '/nested/c1', html: '<p>Nested C1 Page</p>' },
-    { pattern: '/nested/c2', html: '<p>Nested C2 Page</p>' },
-    { pattern: '/nested/c3', html: '<p>Nested C3 Page</p>' },
-    { pattern: '**', html: '<p>Nested 404</p>' }
-  ]
-},
+  children: () => import("./samples/nested/nested-routes")
+  },
   { pattern: '**', html: `<h2>404 Page</h2>` }
 ]
 
-export const router = new JongRouter(routes, document.getElementById('app')!, '', true)
+export const router = new JongRouter(routes, document.getElementById('app')!)
 router.init()
 
+
+