@ktjs/router 0.14.0 → 0.14.1

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { KTHTMLElement } from '@ktjs/core';
+
 /**
  * Guard level that determines which guards to apply during navigation
  * - there are global and route-level guards
@@ -31,6 +33,8 @@ interface RawRouteConfig {
   name?: string;
   /** Optional metadata attached to the route */
   meta?: Record<string, any>;
+  /** Optional component to render */
+  component: () => HTMLElement | Promise<HTMLElement>;
   /** Route-level guard executed before entering this route. Return false to block, string/object to redirect */
   beforeEnter?: (
     context: RouteContext
@@ -130,6 +134,9 @@ interface Router {
   /** Navigation history */
   history: RouteContext[];
 
+  /** Set the router view container */
+  setRouterView(view: HTMLElement): void;
+
   /** Navigate with guards */
   push(location: string | NavOptions): boolean | Promise<boolean>;
 
@@ -152,10 +159,17 @@ interface RouteMatch {
   result: RouteConfig[];
 }
 
+/**
+ * Create a router view container that automatically renders route components
+ */
+declare function KTRouter({ router }: {
+    router: Router;
+}): KTHTMLElement;
+
 /**
  * Create a new router instance
  */
 declare const createRouter: (config: RouterConfig) => Router;
 
-export { GuardLevel, createRouter };
+export { GuardLevel, KTRouter, createRouter };
 export type { NavOptions, RawRouteConfig, RouteConfig, RouteContext, RouteMatch, Router, RouterConfig };

package/dist/index.iife.js

@@ -150,6 +150,15 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    /**
+     * Create a router view container that automatically renders route components
+     */
+    function KTRouter({ router }) {
+        const view = document.createElement('kt-router-view');
+        router.setRouterView(view);
+        return view;
+    }
+
     /**
      * Create a new router instance
      */
@@ -162,6 +171,7 @@ var __ktjs_router__ = (function (exports) {
         const asyncGuards = config.asyncGuards ?? true;
         // # private values
         const routes = [];
+        let routerView = null;
         /**
          * Normalize routes by adding default guards
          */
@@ -174,6 +184,7 @@ var __ktjs_router__ = (function (exports) {
                 beforeEnter: route.beforeEnter ?? defaultHook,
                 after: route.after ?? defaultHook,
                 children: route.children ? normalize(route.children, path) : [],
+                component: route.component,
             };
             // directly push the normalized route to the list
             // avoid flatten them again
@@ -338,6 +349,23 @@ var __ktjs_router__ = (function (exports) {
                 // Update current route
                 current = to;
                 history.push(to);
+                // Render component if routerView exists
+                if (routerView && to.matched.length > 0) {
+                    const route = to.matched[to.matched.length - 1];
+                    if (route.component) {
+                        const element = route.component();
+                        if (element instanceof Promise) {
+                            element.then((el) => {
+                                routerView.innerHTML = '';
+                                routerView.appendChild(el);
+                            });
+                        }
+                        else {
+                            routerView.innerHTML = '';
+                            routerView.appendChild(element);
+                        }
+                    }
+                }
                 // Execute after hooks
                 executeAfterHooksSync(to, history[history.length - 2] ?? null);
                 return true;
@@ -377,6 +405,15 @@ var __ktjs_router__ = (function (exports) {
                 }
                 current = to;
                 history.push(to);
+                // Render component if routerView exists
+                if (routerView && to.matched.length > 0) {
+                    const route = to.matched[to.matched.length - 1];
+                    if (route.component) {
+                        const element = await route.component();
+                        routerView.innerHTML = '';
+                        routerView.appendChild(element);
+                    }
+                }
                 executeAfterHooks(to, history[history.length - 2] ?? null);
                 return true;
             }
@@ -425,6 +462,9 @@ var __ktjs_router__ = (function (exports) {
             get history() {
                 return history.concat();
             },
+            setRouterView(view) {
+                routerView = view;
+            },
             push(location) {
                 const options = normalizeLocation(location);
                 return navigate(options);
@@ -446,6 +486,7 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    exports.KTRouter = KTRouter;
     exports.createRouter = createRouter;
 
     return exports;

package/dist/index.legacy.js

@@ -239,6 +239,16 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    /**
+     * Create a router view container that automatically renders route components
+     */
+    function KTRouter(_a) {
+        var router = _a.router;
+        var view = document.createElement('kt-router-view');
+        router.setRouterView(view);
+        return view;
+    }
+
     /**
      * Create a new router instance
      */
@@ -252,6 +262,7 @@ var __ktjs_router__ = (function (exports) {
         var asyncGuards = (_e = config.asyncGuards) !== null && _e !== void 0 ? _e : true;
         // # private values
         var routes = [];
+        var routerView = null;
         /**
          * Normalize routes by adding default guards
          */
@@ -266,6 +277,7 @@ var __ktjs_router__ = (function (exports) {
                     beforeEnter: (_c = route.beforeEnter) !== null && _c !== void 0 ? _c : defaultHook,
                     after: (_d = route.after) !== null && _d !== void 0 ? _d : defaultHook,
                     children: route.children ? normalize(route.children, path) : [],
+                    component: route.component,
                 };
                 // directly push the normalized route to the list
                 // avoid flatten them again
@@ -445,6 +457,23 @@ var __ktjs_router__ = (function (exports) {
                 // Update current route
                 current = to;
                 history.push(to);
+                // Render component if routerView exists
+                if (routerView && to.matched.length > 0) {
+                    var route = to.matched[to.matched.length - 1];
+                    if (route.component) {
+                        var element = route.component();
+                        if (element instanceof Promise) {
+                            element.then(function (el) {
+                                routerView.innerHTML = '';
+                                routerView.appendChild(el);
+                            });
+                        }
+                        else {
+                            routerView.innerHTML = '';
+                            routerView.appendChild(element);
+                        }
+                    }
+                }
                 // Execute after hooks
                 executeAfterHooksSync(to, (_a = history[history.length - 2]) !== null && _a !== void 0 ? _a : null);
                 return true;
@@ -460,13 +489,13 @@ var __ktjs_router__ = (function (exports) {
                 args_1[_i - 1] = arguments[_i];
             }
             return __awaiter(void 0, __spreadArray([options_1], args_1, true), void 0, function (options, redirectCount) {
-                var prep, guardLevel, replace, to, fullPath, guardResult, url, error_2;
+                var prep, guardLevel, replace, to, fullPath, guardResult, url, route, element, error_2;
                 var _a;
                 if (redirectCount === void 0) { redirectCount = 0; }
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            _b.trys.push([0, 2, , 3]);
+                            _b.trys.push([0, 4, , 5]);
                             // Prevent infinite redirect loop
                             if (redirectCount > 10) {
                                 onError(new Error('Maximum redirect count exceeded'));
@@ -496,13 +525,23 @@ var __ktjs_router__ = (function (exports) {
                             }
                             current = to;
                             history.push(to);
+                            if (!(routerView && to.matched.length > 0)) return [3 /*break*/, 3];
+                            route = to.matched[to.matched.length - 1];
+                            if (!route.component) return [3 /*break*/, 3];
+                            return [4 /*yield*/, route.component()];
+                        case 2:
+                            element = _b.sent();
+                            routerView.innerHTML = '';
+                            routerView.appendChild(element);
+                            _b.label = 3;
+                        case 3:
                             executeAfterHooks(to, (_a = history[history.length - 2]) !== null && _a !== void 0 ? _a : null);
                             return [2 /*return*/, true];
-                        case 2:
+                        case 4:
                             error_2 = _b.sent();
                             onError(error_2);
                             return [2 /*return*/, false];
-                        case 3: return [2 /*return*/];
+                        case 5: return [2 /*return*/];
                     }
                 });
             });
@@ -559,6 +598,9 @@ var __ktjs_router__ = (function (exports) {
             get history() {
                 return history.concat();
             },
+            setRouterView: function (view) {
+                routerView = view;
+            },
             push: function (location) {
                 var options = normalizeLocation(location);
                 return navigate(options);
@@ -580,6 +622,7 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    exports.KTRouter = KTRouter;
     exports.createRouter = createRouter;
 
     return exports;

package/dist/index.mjs

@@ -147,6 +147,15 @@ const createMatcher = (routes) => {
     };
 };
 
+/**
+ * Create a router view container that automatically renders route components
+ */
+function KTRouter({ router }) {
+    const view = document.createElement('kt-router-view');
+    router.setRouterView(view);
+    return view;
+}
+
 /**
  * Create a new router instance
  */
@@ -159,6 +168,7 @@ const createRouter = (config) => {
     const asyncGuards = config.asyncGuards ?? true;
     // # private values
     const routes = [];
+    let routerView = null;
     /**
      * Normalize routes by adding default guards
      */
@@ -171,6 +181,7 @@ const createRouter = (config) => {
             beforeEnter: route.beforeEnter ?? defaultHook,
             after: route.after ?? defaultHook,
             children: route.children ? normalize(route.children, path) : [],
+            component: route.component,
         };
         // directly push the normalized route to the list
         // avoid flatten them again
@@ -335,6 +346,23 @@ const createRouter = (config) => {
             // Update current route
             current = to;
             history.push(to);
+            // Render component if routerView exists
+            if (routerView && to.matched.length > 0) {
+                const route = to.matched[to.matched.length - 1];
+                if (route.component) {
+                    const element = route.component();
+                    if (element instanceof Promise) {
+                        element.then((el) => {
+                            routerView.innerHTML = '';
+                            routerView.appendChild(el);
+                        });
+                    }
+                    else {
+                        routerView.innerHTML = '';
+                        routerView.appendChild(element);
+                    }
+                }
+            }
             // Execute after hooks
             executeAfterHooksSync(to, history[history.length - 2] ?? null);
             return true;
@@ -374,6 +402,15 @@ const createRouter = (config) => {
             }
             current = to;
             history.push(to);
+            // Render component if routerView exists
+            if (routerView && to.matched.length > 0) {
+                const route = to.matched[to.matched.length - 1];
+                if (route.component) {
+                    const element = await route.component();
+                    routerView.innerHTML = '';
+                    routerView.appendChild(element);
+                }
+            }
             executeAfterHooks(to, history[history.length - 2] ?? null);
             return true;
         }
@@ -422,6 +459,9 @@ const createRouter = (config) => {
         get history() {
             return history.concat();
         },
+        setRouterView(view) {
+            routerView = view;
+        },
         push(location) {
             const options = normalizeLocation(location);
             return navigate(options);
@@ -443,4 +483,4 @@ const createRouter = (config) => {
     };
 };
 
-export { createRouter };
+export { KTRouter, createRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/router",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Router for kt.js - client-side routing with navigation guards",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -31,7 +31,7 @@
     "directory": "packages/router"
   },
   "dependencies": {
-    "@ktjs/core": "0.13.0"
+    "@ktjs/core": "0.14.3"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",