@ktjs/router 0.14.0 → 0.14.2

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,9 +33,11 @@ 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
+    context: RouteContext,
   ) => string | NavBaseOptions | boolean | void | Promise<string | NavBaseOptions | boolean | void>;
   /** Route-level hook executed after navigation */
   after?: (context: RouteContext) => void | Promise<void>;
@@ -95,13 +99,15 @@ interface NavOptions extends NavBaseOptions {
  * Router configuration
  */
 interface RouterConfig {
+  baseUrl?: string;
+
   /** Array of route definitions */
   routes: RawRouteConfig[];
 
   /** Global guard executed before each navigation (except silentPush). Return false to block, string/object to redirect */
   beforeEach?: (
     to: RouteContext,
-    from: RouteContext | null
+    from: RouteContext | null,
   ) => string | NavBaseOptions | boolean | void | Promise<string | NavBaseOptions | boolean | void>;
 
   /** Global hook executed after each navigation */
@@ -130,6 +136,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 +161,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
      */
@@ -160,20 +169,23 @@ var __ktjs_router__ = (function (exports) {
         const onNotFound = config.onNotFound ?? defaultHook;
         const onError = config.onError ?? defaultHook;
         const asyncGuards = config.asyncGuards ?? true;
+        const baseUrl = config.baseUrl ?? '';
         // # private values
         const routes = [];
+        let routerView = null;
         /**
          * Normalize routes by adding default guards
          */
         const normalize = (rawRoutes, parentPath) => rawRoutes.map((route) => {
             const path = normalizePath(parentPath, route.path);
             const normalized = {
-                path,
+                path: baseUrl + path,
                 name: route.name ?? '',
                 meta: route.meta ?? {},
                 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 +350,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 +406,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 +463,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 +487,7 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    exports.KTRouter = KTRouter;
     exports.createRouter = createRouter;
 
     return exports;

package/dist/index.legacy.js

@@ -239,19 +239,31 @@ 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
      */
     var createRouter = function (config) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         // # default configs
         var beforeEach = (_a = config.beforeEach) !== null && _a !== void 0 ? _a : defaultHook;
         var afterEach = (_b = config.afterEach) !== null && _b !== void 0 ? _b : defaultHook;
         var onNotFound = (_c = config.onNotFound) !== null && _c !== void 0 ? _c : defaultHook;
         var onError = (_d = config.onError) !== null && _d !== void 0 ? _d : defaultHook;
         var asyncGuards = (_e = config.asyncGuards) !== null && _e !== void 0 ? _e : true;
+        var baseUrl = (_f = config.baseUrl) !== null && _f !== void 0 ? _f : '';
         // # private values
         var routes = [];
+        var routerView = null;
         /**
          * Normalize routes by adding default guards
          */
@@ -260,12 +272,13 @@ var __ktjs_router__ = (function (exports) {
                 var _a, _b, _c, _d;
                 var path = normalizePath(parentPath, route.path);
                 var normalized = {
-                    path: path,
+                    path: baseUrl + path,
                     name: (_a = route.name) !== null && _a !== void 0 ? _a : '',
                     meta: (_b = route.meta) !== null && _b !== void 0 ? _b : {},
                     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
@@ -275,7 +288,7 @@ var __ktjs_router__ = (function (exports) {
         };
         // Normalize routes with default guards
         normalize(config.routes, '/');
-        var _f = createMatcher(routes), findByName = _f.findByName, match = _f.match;
+        var _g = createMatcher(routes), findByName = _g.findByName, match = _g.match;
         var current = null;
         var history = [];
         // # methods
@@ -445,6 +458,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 +490,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 +526,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 +599,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 +623,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
  */
@@ -157,20 +166,23 @@ const createRouter = (config) => {
     const onNotFound = config.onNotFound ?? defaultHook;
     const onError = config.onError ?? defaultHook;
     const asyncGuards = config.asyncGuards ?? true;
+    const baseUrl = config.baseUrl ?? '';
     // # private values
     const routes = [];
+    let routerView = null;
     /**
      * Normalize routes by adding default guards
      */
     const normalize = (rawRoutes, parentPath) => rawRoutes.map((route) => {
         const path = normalizePath(parentPath, route.path);
         const normalized = {
-            path,
+            path: baseUrl + path,
             name: route.name ?? '',
             meta: route.meta ?? {},
             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 +347,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 +403,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 +460,9 @@ const createRouter = (config) => {
         get history() {
             return history.concat();
         },
+        setRouterView(view) {
+            routerView = view;
+        },
         push(location) {
             const options = normalizeLocation(location);
             return navigate(options);
@@ -443,4 +484,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.2",
   "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.6"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",