@ktjs/router 0.14.7 → 0.14.9

package/README.md

@@ -8,28 +8,25 @@
 
 Client-side router with navigation guards for KT.js.
 
-**Current Version:** 0.13.0
+**Current Version:** 0.14.9
 
 ## Overview
 
-`@ktjs/router` is a lightweight, hash-based client-side router with powerful navigation guards and async/sync auto-adaptation. It provides all the essential routing features you need without the bloat.
+`@ktjs/router` is a lightweight, hash-based client-side router with powerful async navigation guards. It provides all the essential routing features you need without the bloat. Simplified in v0.14.7+ to focus exclusively on hash-based routing for better performance and maintainability.
 
 ## Features
 
-- **Hash-Based Routing**: Uses URL hash for client-side navigation (`#/path`)
+- **Hash-Based Routing**: Uses URL hash for client-side navigation (`#/path`) - **hash-mode only** since v0.14.7
 - **Path Matching**: Static and dynamic route matching with parameter extraction
   - Dynamic segments: `/user/:id`
   - Wildcard matching support
   - Optimized matching algorithm with pre-flattened routes
-- **Navigation Guards**: Control navigation flow with powerful guard system
+- **Async Navigation Guards**: Control navigation flow with Promise-based guard system
   - `beforeEach`: Global guard before every navigation
   - `beforeEnter`: Per-route guard for specific routes
   - `afterEach`: Global hook after successful navigation
   - Guard-level control with bitwise operations for fine-grained execution
-- **Async/Sync Support**: Automatically adapts to environment
-  - Uses async guards when `Promise` is available
-  - Falls back to synchronous mode in older browsers
-  - No configuration needed - it just works
+  - All guards are async - return `Promise` or immediate values
 - **Named Routes**: Navigate using route names instead of paths
 - **Query Parameters**: Built-in query string parsing and handling
 - **Route Context**: Access route information in handlers
@@ -87,7 +84,7 @@ const router = createRouter({
             h1({}, `User Profile`),
             div({}, `User ID: ${to.params.id}`),
             div({}, `Query: ${JSON.stringify(to.query)}`),
-          ])
+          ]),
         );
       },
     },
@@ -196,27 +193,61 @@ Creates and returns a router instance.
   - `path` (string): Route path with optional dynamic segments (`:param`)
   - `name` (string, optional): Route name for named navigation
   - `meta` (object, optional): Metadata attached to the route
-  - `beforeEnter` (function, optional): Route-specific guard, receives `(to: RouteContext) => boolean | void | Promise<boolean | void>`
+  - `component` (function): Function that returns HTMLElement or Promise<HTMLElement>
+  - `beforeEnter` (function, optional): Route-specific guard, receives `(to: RouteContext) => boolean | string | NavOptions | void | Promise<...>`
   - `after` (function, optional): Route-specific hook after navigation
   - `children` (array, optional): Nested child routes
-- `beforeEach` (function, optional): Global guard before every navigation, receives `(to: RouteContext, from: RouteContext | null)`
-- `afterEach` (function, optional): Global hook after successful navigation, receives `(to: RouteContext, from: RouteContext | null)`
-- `onNotFound` (function, optional): Handler for 404 errors, receives `(path: string)`
-- `onError` (function, optional): Error handler for navigation failures, receives `(error: Error, route?: RouteConfig)`
-- `asyncGuards` (boolean, optional): Enable async guards (default: `true`)
+- `beforeEach` (function, optional): Global guard before every navigation, receives `(to: RouteContext, from: RouteContext | null) => boolean | string | NavOptions | void | Promise<...>`
+- `afterEach` (function, optional): Global hook after successful navigation, receives `(to: RouteContext, from: RouteContext | null) => void | Promise<void>`
+- `onNotFound` (function, optional): Handler for 404 errors, receives `(path: string) => void`
+- `onError` (function, optional): Error handler for navigation failures, receives `(error: Error) => void`
+- `prefix` (string, optional): URL prefix for all routes (default: `''`)
 
 **Router Instance Properties:**
 
 - `current` (property): Current active route context (or `null`)
 - `history` (property): Array of navigation history
+- `routes` (property): Normalized route configurations
 
 **Router Instance Methods:**
 
-- `push(location)`: Navigate to a new location (string path or route object)
-- `silentPush(location)`: Navigate without global guards (`beforeEach` guards)
+- `push(location)`: Navigate to a new location (string path or route object with `name`/`params`)
 - `replace(location)`: Replace current history entry
 - `back()`: Navigate back in history
-- `forward()`: Navigate forward in history
+- `listen()`: Start listening to hash changes (auto-called on router creation since v0.14.7)
+- `init(routes)`: Initialize router with route configurations
+
+### Navigation Guards (v0.14.7+)
+
+All guards are **async** and can return:
+
+- `false`: Cancel navigation
+- `string`: Redirect to the given path
+- `NavOptions` object: Redirect with options `{ name, params, query }`
+- `void` or `undefined`: Continue navigation
+
+```typescript
+// Global guard
+beforeEach: (async (to, from) => {
+  // Check authentication
+  const isAuthenticated = await checkAuth();
+  if (!isAuthenticated && to.path !== '/login') {
+    return '/login'; // Redirect to login
+  }
+  // Return nothing to continue
+},
+  // Route guard
+  {
+    path: '/admin',
+    component: () => AdminPage(),
+    beforeEnter: async (to) => {
+      const hasPermission = await checkAdminPermission();
+      if (!hasPermission) {
+        return false; // Cancel navigation
+      }
+    },
+  });
+```
 
 ### Route Context
 
@@ -231,15 +262,22 @@ Guards and hooks receive a `RouteContext` object with:
 
 The router includes several performance optimizations:
 
-- **Pre-flattened Routes**: Nested routes are flattened during initialization
-- **Efficient Matching**: Optimized regex-based path matching
-- **Cached Methods**: Native DOM methods are cached
-- **Minimal Re-renders**: Only updates DOM when route actually changes
+- **Hash-Mode Only**: Simplified implementation focusing on hash-based routing (v0.14.7+)
+- **Pre-flattened Routes**: Nested routes are flattened during initialization for faster lookups
+- **Efficient Matching**: Optimized regex-based path matching with caching
+- **Async Guards**: All guards use Promise-based architecture for consistent async handling
 - **Guard Level Control**: Fine-grained control over guard execution using bitwise operations
+- **Automatic Initialization**: Router auto-initializes on creation, no manual setup needed
 
 ## Browser Compatibility
 
-Works in all modern browsers and IE9+ with ES5 transpilation. In environments without `Promise` support, navigation guards run synchronously.
+Works in all modern browsers that support:
+
+- Hash-based navigation
+- ES5 (with transpilation)
+- Promise API (required for async guards)
+
+For older browsers without Promise support, include a Promise polyfill.
 
 ## License
 

package/dist/index.d.ts

@@ -99,7 +99,10 @@ interface NavOptions extends NavBaseOptions {
  * Router configuration
  */
 interface RouterConfig {
-  baseUrl?: string;
+  /**
+   * Might not be needed while using hash routing
+   */
+  prefix?: string;
 
   /** Array of route definitions */
   routes: RawRouteConfig[];
@@ -118,12 +121,6 @@ interface RouterConfig {
 
   /** Handler for routing errors */
   onError?: (error: Error, route?: RouteConfig) => void;
-
-  // # options
-  /**
-   * Default is `true`
-   */
-  asyncGuards?: boolean;
 }
 
 /**
@@ -171,7 +168,7 @@ declare function KTRouter({ router }: {
 /**
  * Create a new router instance
  */
-declare const createRouter: (config: RouterConfig) => Router;
+declare const createRouter: ({ beforeEach, afterEach, onNotFound, onError, prefix, }: RouterConfig) => Router;
 
 export { GuardLevel, KTRouter, createRouter };
 export type { NavOptions, RawRouteConfig, RouteConfig, RouteContext, RouteMatch, Router, RouterConfig };

package/dist/index.iife.js

@@ -4,7 +4,7 @@ var __ktjs_router__ = (function (exports) {
     /**
      * Default guard that always returns true
      */
-    const defaultHook = () => true;
+    const fn = (() => true);
     const throws = (m) => {
         throw new Error(`@ktjs/router: ${m}`);
     };
@@ -162,14 +162,7 @@ var __ktjs_router__ = (function (exports) {
     /**
      * Create a new router instance
      */
-    const createRouter = (config) => {
-        // # default configs
-        const beforeEach = config.beforeEach ?? defaultHook;
-        const afterEach = config.afterEach ?? defaultHook;
-        const onNotFound = config.onNotFound ?? defaultHook;
-        const onError = config.onError ?? defaultHook;
-        const asyncGuards = config.asyncGuards ?? true;
-        const baseUrl = config.baseUrl ?? '';
+    const createRouter = ({ beforeEach = fn, afterEach = fn, onNotFound = fn, onError = fn, prefix = '', }) => {
         // # private values
         const routes = [];
         const history = [];
@@ -179,11 +172,11 @@ var __ktjs_router__ = (function (exports) {
         const normalize = (rawRoutes, parentPath) => rawRoutes.map((route) => {
             const path = normalizePath(parentPath, route.path);
             const normalized = {
-                path: baseUrl + path,
+                path: prefix + path,
                 name: route.name ?? '',
                 meta: route.meta ?? {},
-                beforeEnter: route.beforeEnter ?? defaultHook,
-                after: route.after ?? defaultHook,
+                beforeEnter: route.beforeEnter ?? fn,
+                after: route.after ?? fn,
                 children: route.children ? normalize(route.children, path) : [],
                 component: route.component,
             };
@@ -192,44 +185,7 @@ var __ktjs_router__ = (function (exports) {
             routes.push(normalized);
             return normalized;
         });
-        const executeGuardsSync = (to, from, guardLevel) => {
-            try {
-                if (guardLevel === 0 /* GuardLevel.None */) {
-                    return { continue: true };
-                }
-                if (guardLevel & 1 /* GuardLevel.Global */) {
-                    const result = beforeEach(to, from);
-                    if (result === false) {
-                        return { continue: false };
-                    }
-                    if (typeof result === 'string') {
-                        return { continue: false, redirectTo: { path: result } };
-                    }
-                    if (result && typeof result === 'object' && !('then' in result)) {
-                        return { continue: false, redirectTo: result };
-                    }
-                }
-                if (guardLevel & 2 /* GuardLevel.Route */) {
-                    const targetRoute = to.matched[to.matched.length - 1];
-                    const result = targetRoute.beforeEnter(to);
-                    if (result === false) {
-                        return { continue: false };
-                    }
-                    if (typeof result === 'string') {
-                        return { continue: false, redirectTo: { path: result } };
-                    }
-                    if (result && typeof result === 'object' && !('then' in result)) {
-                        return { continue: false, redirectTo: result };
-                    }
-                }
-                return { continue: true };
-            }
-            catch (error) {
-                onError(error);
-                return { continue: false };
-            }
-        };
-        const executeGuards = async (to, from, guardLevel) => {
+        const guard = async (to, from, guardLevel) => {
             try {
                 if (guardLevel === 0 /* GuardLevel.None */) {
                     return { continue: true };
@@ -312,76 +268,7 @@ var __ktjs_router__ = (function (exports) {
                 fullPath,
             };
         };
-        const navigateSync = (options, redirectCount = 0) => {
-            try {
-                // Prevent infinite redirect loop
-                if (redirectCount > 10) {
-                    onError(new Error('Maximum redirect count exceeded'));
-                    return false;
-                }
-                const prep = navigatePrepare(options);
-                if (!prep) {
-                    return false;
-                }
-                const { guardLevel, replace, to, fullPath } = prep;
-                // Execute guards
-                const guardResult = executeGuardsSync(to, current, guardLevel);
-                if (!guardResult.continue) {
-                    // Check if there's a redirect
-                    if (guardResult.redirectTo) {
-                        return navigateSync(guardResult.redirectTo, redirectCount + 1);
-                    }
-                    return false;
-                }
-                // Update browser history depending on mode
-                const url = fullPath;
-                const hashUrl = '#' + fullPath;
-                if (replace) {
-                    window.location.replace(hashUrl);
-                }
-                else {
-                    window.location.hash = fullPath;
-                }
-                // Update current route in memory
-                current = to;
-                if (replace) {
-                    if (history.length > 0) {
-                        history[history.length - 1] = to;
-                    }
-                    else {
-                        history.push(to);
-                    }
-                }
-                else {
-                    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;
-            }
-            catch (error) {
-                onError(error);
-                return false;
-            }
-        };
-        const navigateAsync = async (options, redirectCount = 0) => {
+        const navigate = async (options, redirectCount = 0) => {
             try {
                 // Prevent infinite redirect loop
                 if (redirectCount > 10) {
@@ -393,11 +280,11 @@ var __ktjs_router__ = (function (exports) {
                     return false;
                 }
                 const { guardLevel, replace, to, fullPath } = prep;
-                const guardResult = await executeGuards(to, current, guardLevel);
+                const guardResult = await guard(to, current, guardLevel);
                 if (!guardResult.continue) {
                     // Check if there's a redirect
                     if (guardResult.redirectTo) {
-                        return navigateAsync(guardResult.redirectTo, redirectCount + 1);
+                        return await navigate(guardResult.redirectTo, redirectCount + 1);
                     }
                     return false;
                 }
@@ -438,12 +325,6 @@ var __ktjs_router__ = (function (exports) {
                 return false;
             }
         };
-        const navigate = asyncGuards ? navigateSync : navigateAsync;
-        const executeAfterHooksSync = (to, from) => {
-            const targetRoute = to.matched[to.matched.length - 1];
-            targetRoute.after(to);
-            afterEach(to, from);
-        };
         const executeAfterHooks = async (to, from) => {
             const targetRoute = to.matched[to.matched.length - 1];
             await targetRoute.after(to);
@@ -463,7 +344,6 @@ var __ktjs_router__ = (function (exports) {
             };
         };
         // # register events
-        // hash mode: listen to hashchange
         window.addEventListener('hashchange', () => {
             const hash = window.location.hash.slice(1);
             const [path] = hash.split('?');
@@ -505,13 +385,10 @@ var __ktjs_router__ = (function (exports) {
                     }
                 }
             }
-            executeAfterHooksSync(to, history[history.length - 2] ?? null);
+            executeAfterHooks(to, history[history.length - 2] ?? null);
         });
         // # initialize
-        normalize(config.routes, '/');
-        const { findByName, match } = createMatcher(routes);
-        // Router instance
-        return {
+        const instance = {
             get current() {
                 return current;
             },
@@ -540,6 +417,13 @@ var __ktjs_router__ = (function (exports) {
                 window.history.forward();
             },
         };
+        normalize(routes, '/');
+        const { findByName, match } = createMatcher(routes);
+        const currentHash = window.location.hash.slice(1);
+        if (currentHash) {
+            instance.push(currentHash);
+        }
+        return instance;
     };
 
     exports.KTRouter = KTRouter;

package/dist/index.legacy.js

@@ -85,7 +85,7 @@ var __ktjs_router__ = (function (exports) {
     /**
      * Default guard that always returns true
      */
-    var defaultHook = function () { return true; };
+    var fn = (function () { return true; });
     var throws = function (m) {
         throw new Error("@ktjs/router: ".concat(m));
     };
@@ -252,15 +252,8 @@ var __ktjs_router__ = (function (exports) {
     /**
      * Create a new router instance
      */
-    var createRouter = function (config) {
-        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 : '';
+    var createRouter = function (_a) {
+        var _b = _a.beforeEach, beforeEach = _b === void 0 ? fn : _b, _c = _a.afterEach, afterEach = _c === void 0 ? fn : _c, _d = _a.onNotFound, onNotFound = _d === void 0 ? fn : _d, _e = _a.onError, onError = _e === void 0 ? fn : _e, _f = _a.prefix, prefix = _f === void 0 ? '' : _f;
         // # private values
         var routes = [];
         var history = [];
@@ -272,11 +265,11 @@ var __ktjs_router__ = (function (exports) {
                 var _a, _b, _c, _d;
                 var path = normalizePath(parentPath, route.path);
                 var normalized = {
-                    path: baseUrl + path,
+                    path: prefix + 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,
+                    beforeEnter: (_c = route.beforeEnter) !== null && _c !== void 0 ? _c : fn,
+                    after: (_d = route.after) !== null && _d !== void 0 ? _d : fn,
                     children: route.children ? normalize(route.children, path) : [],
                     component: route.component,
                 };
@@ -286,44 +279,7 @@ var __ktjs_router__ = (function (exports) {
                 return normalized;
             });
         };
-        var executeGuardsSync = function (to, from, guardLevel) {
-            try {
-                if (guardLevel === 0 /* GuardLevel.None */) {
-                    return { continue: true };
-                }
-                if (guardLevel & 1 /* GuardLevel.Global */) {
-                    var result = beforeEach(to, from);
-                    if (result === false) {
-                        return { continue: false };
-                    }
-                    if (typeof result === 'string') {
-                        return { continue: false, redirectTo: { path: result } };
-                    }
-                    if (result && typeof result === 'object' && !('then' in result)) {
-                        return { continue: false, redirectTo: result };
-                    }
-                }
-                if (guardLevel & 2 /* GuardLevel.Route */) {
-                    var targetRoute = to.matched[to.matched.length - 1];
-                    var result = targetRoute.beforeEnter(to);
-                    if (result === false) {
-                        return { continue: false };
-                    }
-                    if (typeof result === 'string') {
-                        return { continue: false, redirectTo: { path: result } };
-                    }
-                    if (result && typeof result === 'object' && !('then' in result)) {
-                        return { continue: false, redirectTo: result };
-                    }
-                }
-                return { continue: true };
-            }
-            catch (error) {
-                onError(error);
-                return { continue: false };
-            }
-        };
-        var executeGuards = function (to, from, guardLevel) { return __awaiter(void 0, void 0, void 0, function () {
+        var guard = function (to, from, guardLevel) { return __awaiter(void 0, void 0, void 0, function () {
             var result, targetRoute, result, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -418,78 +374,7 @@ var __ktjs_router__ = (function (exports) {
                 fullPath: fullPath,
             };
         };
-        var navigateSync = function (options, redirectCount) {
-            var _a;
-            if (redirectCount === void 0) { redirectCount = 0; }
-            try {
-                // Prevent infinite redirect loop
-                if (redirectCount > 10) {
-                    onError(new Error('Maximum redirect count exceeded'));
-                    return false;
-                }
-                var prep = navigatePrepare(options);
-                if (!prep) {
-                    return false;
-                }
-                var guardLevel = prep.guardLevel, replace = prep.replace, to = prep.to, fullPath = prep.fullPath;
-                // Execute guards
-                var guardResult = executeGuardsSync(to, current, guardLevel);
-                if (!guardResult.continue) {
-                    // Check if there's a redirect
-                    if (guardResult.redirectTo) {
-                        return navigateSync(guardResult.redirectTo, redirectCount + 1);
-                    }
-                    return false;
-                }
-                // Update browser history depending on mode
-                var url = fullPath;
-                var hashUrl = '#' + fullPath;
-                if (replace) {
-                    window.location.replace(hashUrl);
-                }
-                else {
-                    window.location.hash = fullPath;
-                }
-                // Update current route in memory
-                current = to;
-                if (replace) {
-                    if (history.length > 0) {
-                        history[history.length - 1] = to;
-                    }
-                    else {
-                        history.push(to);
-                    }
-                }
-                else {
-                    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;
-            }
-            catch (error) {
-                onError(error);
-                return false;
-            }
-        };
-        var navigateAsync = function (options_1) {
+        var navigate = function (options_1) {
             var args_1 = [];
             for (var _i = 1; _i < arguments.length; _i++) {
                 args_1[_i - 1] = arguments[_i];
@@ -501,7 +386,7 @@ var __ktjs_router__ = (function (exports) {
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            _b.trys.push([0, 4, , 5]);
+                            _b.trys.push([0, 7, , 8]);
                             // Prevent infinite redirect loop
                             if (redirectCount > 10) {
                                 onError(new Error('Maximum redirect count exceeded'));
@@ -512,16 +397,15 @@ var __ktjs_router__ = (function (exports) {
                                 return [2 /*return*/, false];
                             }
                             guardLevel = prep.guardLevel, replace = prep.replace, to = prep.to, fullPath = prep.fullPath;
-                            return [4 /*yield*/, executeGuards(to, current, guardLevel)];
+                            return [4 /*yield*/, guard(to, current, guardLevel)];
                         case 1:
                             guardResult = _b.sent();
-                            if (!guardResult.continue) {
-                                // Check if there's a redirect
-                                if (guardResult.redirectTo) {
-                                    return [2 /*return*/, navigateAsync(guardResult.redirectTo, redirectCount + 1)];
-                                }
-                                return [2 /*return*/, false];
-                            }
+                            if (!!guardResult.continue) return [3 /*break*/, 4];
+                            if (!guardResult.redirectTo) return [3 /*break*/, 3];
+                            return [4 /*yield*/, navigate(guardResult.redirectTo, redirectCount + 1)];
+                        case 2: return [2 /*return*/, _b.sent()];
+                        case 3: return [2 /*return*/, false];
+                        case 4:
                             hashUrl = '#' + fullPath;
                             if (replace) {
                                 window.location.replace(hashUrl);
@@ -541,33 +425,27 @@ var __ktjs_router__ = (function (exports) {
                             else {
                                 history.push(to);
                             }
-                            if (!(routerView && to.matched.length > 0)) return [3 /*break*/, 3];
+                            if (!(routerView && to.matched.length > 0)) return [3 /*break*/, 6];
                             route = to.matched[to.matched.length - 1];
-                            if (!route.component) return [3 /*break*/, 3];
+                            if (!route.component) return [3 /*break*/, 6];
                             return [4 /*yield*/, route.component()];
-                        case 2:
+                        case 5:
                             element = _b.sent();
                             routerView.innerHTML = '';
                             routerView.appendChild(element);
-                            _b.label = 3;
-                        case 3:
+                            _b.label = 6;
+                        case 6:
                             executeAfterHooks(to, (_a = history[history.length - 2]) !== null && _a !== void 0 ? _a : null);
                             return [2 /*return*/, true];
-                        case 4:
+                        case 7:
                             error_2 = _b.sent();
                             onError(error_2);
                             return [2 /*return*/, false];
-                        case 5: return [2 /*return*/];
+                        case 8: return [2 /*return*/];
                     }
                 });
             });
         };
-        var navigate = asyncGuards ? navigateSync : navigateAsync;
-        var executeAfterHooksSync = function (to, from) {
-            var targetRoute = to.matched[to.matched.length - 1];
-            targetRoute.after(to);
-            afterEach(to, from);
-        };
         var executeAfterHooks = function (to, from) { return __awaiter(void 0, void 0, void 0, function () {
             var targetRoute;
             return __generator(this, function (_a) {
@@ -598,7 +476,6 @@ var __ktjs_router__ = (function (exports) {
             };
         };
         // # register events
-        // hash mode: listen to hashchange
         window.addEventListener('hashchange', function () {
             var _a, _b;
             var hash = window.location.hash.slice(1);
@@ -641,13 +518,10 @@ var __ktjs_router__ = (function (exports) {
                     }
                 }
             }
-            executeAfterHooksSync(to, (_b = history[history.length - 2]) !== null && _b !== void 0 ? _b : null);
+            executeAfterHooks(to, (_b = history[history.length - 2]) !== null && _b !== void 0 ? _b : null);
         });
         // # initialize
-        normalize(config.routes, '/');
-        var _g = createMatcher(routes), findByName = _g.findByName, match = _g.match;
-        // Router instance
-        return {
+        var instance = {
             get current() {
                 return current;
             },
@@ -676,6 +550,13 @@ var __ktjs_router__ = (function (exports) {
                 window.history.forward();
             },
         };
+        normalize(routes, '/');
+        var _g = createMatcher(routes), findByName = _g.findByName, match = _g.match;
+        var currentHash = window.location.hash.slice(1);
+        if (currentHash) {
+            instance.push(currentHash);
+        }
+        return instance;
     };
 
     exports.KTRouter = KTRouter;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 /**
  * Default guard that always returns true
  */
-const defaultHook = () => true;
+const fn = (() => true);
 const throws = (m) => {
     throw new Error(`@ktjs/router: ${m}`);
 };
@@ -159,14 +159,7 @@ function KTRouter({ router }) {
 /**
  * Create a new router instance
  */
-const createRouter = (config) => {
-    // # default configs
-    const beforeEach = config.beforeEach ?? defaultHook;
-    const afterEach = config.afterEach ?? defaultHook;
-    const onNotFound = config.onNotFound ?? defaultHook;
-    const onError = config.onError ?? defaultHook;
-    const asyncGuards = config.asyncGuards ?? true;
-    const baseUrl = config.baseUrl ?? '';
+const createRouter = ({ beforeEach = fn, afterEach = fn, onNotFound = fn, onError = fn, prefix = '', }) => {
     // # private values
     const routes = [];
     const history = [];
@@ -176,11 +169,11 @@ const createRouter = (config) => {
     const normalize = (rawRoutes, parentPath) => rawRoutes.map((route) => {
         const path = normalizePath(parentPath, route.path);
         const normalized = {
-            path: baseUrl + path,
+            path: prefix + path,
             name: route.name ?? '',
             meta: route.meta ?? {},
-            beforeEnter: route.beforeEnter ?? defaultHook,
-            after: route.after ?? defaultHook,
+            beforeEnter: route.beforeEnter ?? fn,
+            after: route.after ?? fn,
             children: route.children ? normalize(route.children, path) : [],
             component: route.component,
         };
@@ -189,44 +182,7 @@ const createRouter = (config) => {
         routes.push(normalized);
         return normalized;
     });
-    const executeGuardsSync = (to, from, guardLevel) => {
-        try {
-            if (guardLevel === 0 /* GuardLevel.None */) {
-                return { continue: true };
-            }
-            if (guardLevel & 1 /* GuardLevel.Global */) {
-                const result = beforeEach(to, from);
-                if (result === false) {
-                    return { continue: false };
-                }
-                if (typeof result === 'string') {
-                    return { continue: false, redirectTo: { path: result } };
-                }
-                if (result && typeof result === 'object' && !('then' in result)) {
-                    return { continue: false, redirectTo: result };
-                }
-            }
-            if (guardLevel & 2 /* GuardLevel.Route */) {
-                const targetRoute = to.matched[to.matched.length - 1];
-                const result = targetRoute.beforeEnter(to);
-                if (result === false) {
-                    return { continue: false };
-                }
-                if (typeof result === 'string') {
-                    return { continue: false, redirectTo: { path: result } };
-                }
-                if (result && typeof result === 'object' && !('then' in result)) {
-                    return { continue: false, redirectTo: result };
-                }
-            }
-            return { continue: true };
-        }
-        catch (error) {
-            onError(error);
-            return { continue: false };
-        }
-    };
-    const executeGuards = async (to, from, guardLevel) => {
+    const guard = async (to, from, guardLevel) => {
         try {
             if (guardLevel === 0 /* GuardLevel.None */) {
                 return { continue: true };
@@ -309,76 +265,7 @@ const createRouter = (config) => {
             fullPath,
         };
     };
-    const navigateSync = (options, redirectCount = 0) => {
-        try {
-            // Prevent infinite redirect loop
-            if (redirectCount > 10) {
-                onError(new Error('Maximum redirect count exceeded'));
-                return false;
-            }
-            const prep = navigatePrepare(options);
-            if (!prep) {
-                return false;
-            }
-            const { guardLevel, replace, to, fullPath } = prep;
-            // Execute guards
-            const guardResult = executeGuardsSync(to, current, guardLevel);
-            if (!guardResult.continue) {
-                // Check if there's a redirect
-                if (guardResult.redirectTo) {
-                    return navigateSync(guardResult.redirectTo, redirectCount + 1);
-                }
-                return false;
-            }
-            // Update browser history depending on mode
-            const url = fullPath;
-            const hashUrl = '#' + fullPath;
-            if (replace) {
-                window.location.replace(hashUrl);
-            }
-            else {
-                window.location.hash = fullPath;
-            }
-            // Update current route in memory
-            current = to;
-            if (replace) {
-                if (history.length > 0) {
-                    history[history.length - 1] = to;
-                }
-                else {
-                    history.push(to);
-                }
-            }
-            else {
-                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;
-        }
-        catch (error) {
-            onError(error);
-            return false;
-        }
-    };
-    const navigateAsync = async (options, redirectCount = 0) => {
+    const navigate = async (options, redirectCount = 0) => {
         try {
             // Prevent infinite redirect loop
             if (redirectCount > 10) {
@@ -390,11 +277,11 @@ const createRouter = (config) => {
                 return false;
             }
             const { guardLevel, replace, to, fullPath } = prep;
-            const guardResult = await executeGuards(to, current, guardLevel);
+            const guardResult = await guard(to, current, guardLevel);
             if (!guardResult.continue) {
                 // Check if there's a redirect
                 if (guardResult.redirectTo) {
-                    return navigateAsync(guardResult.redirectTo, redirectCount + 1);
+                    return await navigate(guardResult.redirectTo, redirectCount + 1);
                 }
                 return false;
             }
@@ -435,12 +322,6 @@ const createRouter = (config) => {
             return false;
         }
     };
-    const navigate = asyncGuards ? navigateSync : navigateAsync;
-    const executeAfterHooksSync = (to, from) => {
-        const targetRoute = to.matched[to.matched.length - 1];
-        targetRoute.after(to);
-        afterEach(to, from);
-    };
     const executeAfterHooks = async (to, from) => {
         const targetRoute = to.matched[to.matched.length - 1];
         await targetRoute.after(to);
@@ -460,7 +341,6 @@ const createRouter = (config) => {
         };
     };
     // # register events
-    // hash mode: listen to hashchange
     window.addEventListener('hashchange', () => {
         const hash = window.location.hash.slice(1);
         const [path] = hash.split('?');
@@ -502,13 +382,10 @@ const createRouter = (config) => {
                 }
             }
         }
-        executeAfterHooksSync(to, history[history.length - 2] ?? null);
+        executeAfterHooks(to, history[history.length - 2] ?? null);
     });
     // # initialize
-    normalize(config.routes, '/');
-    const { findByName, match } = createMatcher(routes);
-    // Router instance
-    return {
+    const instance = {
         get current() {
             return current;
         },
@@ -537,6 +414,13 @@ const createRouter = (config) => {
             window.history.forward();
         },
     };
+    normalize(routes, '/');
+    const { findByName, match } = createMatcher(routes);
+    const currentHash = window.location.hash.slice(1);
+    if (currentHash) {
+        instance.push(currentHash);
+    }
+    return instance;
 };
 
 export { KTRouter, createRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/router",
-  "version": "0.14.7",
+  "version": "0.14.9",
   "description": "Router for kt.js - client-side routing with navigation guards",
   "type": "module",
   "module": "./dist/index.mjs",