@ktjs/router 0.14.3 → 0.14.5

package/dist/index.d.ts

@@ -124,6 +124,10 @@ interface RouterConfig {
    * Default is `true`
    */
   asyncGuards?: boolean;
+  /**
+   * Router mode: 'history' uses HTML5 history API, 'hash' uses URL hash. Default is 'hash'.
+   */
+  mode?: 'history' | 'hash';
 }
 
 /**
@@ -153,6 +157,8 @@ interface Router {
 
   /** Navigate forward in history */
   forward(): void;
+
+  initCurrentRoute(): void;
 }
 
 interface RouteMatch {

package/dist/index.iife.js

@@ -169,6 +169,8 @@ var __ktjs_router__ = (function (exports) {
         const onNotFound = config.onNotFound ?? defaultHook;
         const onError = config.onError ?? defaultHook;
         const asyncGuards = config.asyncGuards ?? true;
+        // default to 'hash' mode
+        const mode = config.mode ?? 'hash';
         const baseUrl = config.baseUrl ?? '';
         // # private values
         const routes = [];
@@ -199,29 +201,47 @@ var __ktjs_router__ = (function (exports) {
          * Initialize current route from URL
          */
         const initCurrentRoute = () => {
-            const hash = window.location.hash.slice(1); // Remove '#'
-            if (!hash) {
-                return null;
+            if (mode === 'hash') {
+                const hash = window.location.hash.slice(1); // Remove '#'
+                if (!hash) {
+                    return (current = null);
+                }
+                // Parse path and query
+                const [path, queryString] = hash.split('?');
+                const normalizedPath = normalizePath(path);
+                // Match route
+                const matched = match(normalizedPath);
+                if (!matched) {
+                    return (current = null);
+                }
+                // Build route context
+                return (current = {
+                    path: normalizedPath,
+                    name: matched.route.name,
+                    params: matched.params,
+                    query: queryString ? parseQuery(queryString) : {},
+                    meta: matched.route.meta ?? {},
+                    matched: matched.result,
+                });
             }
-            // Parse path and query
-            const [path, queryString] = hash.split('?');
+            // history mode
+            const pathWithQuery = window.location.pathname + window.location.search;
+            const [path, queryString] = pathWithQuery.split('?');
             const normalizedPath = normalizePath(path);
-            // Match route
             const matched = match(normalizedPath);
             if (!matched) {
-                return null;
+                return (current = null);
             }
-            // Build route context
-            return {
+            return (current = {
                 path: normalizedPath,
                 name: matched.route.name,
                 params: matched.params,
                 query: queryString ? parseQuery(queryString) : {},
                 meta: matched.route.meta ?? {},
                 matched: matched.result,
-            };
+            });
         };
-        let current = initCurrentRoute();
+        let current = null;
         const history = current ? [current] : [];
         // # methods
         const executeGuardsSync = (to, from, guardLevel) => {
@@ -365,17 +385,38 @@ var __ktjs_router__ = (function (exports) {
                     }
                     return false;
                 }
-                // Update browser history
+                // Update browser history depending on mode
                 const url = fullPath;
-                if (replace) {
-                    window.history.replaceState({ path: to.path }, '', url);
+                if (mode === 'history') {
+                    if (replace) {
+                        window.history.replaceState({ path: to.path }, '', url);
+                    }
+                    else {
+                        window.history.pushState({ path: to.path }, '', url);
+                    }
                 }
                 else {
-                    window.history.pushState({ path: to.path }, '', url);
+                    const hashUrl = '#' + fullPath;
+                    if (replace) {
+                        window.location.replace(hashUrl);
+                    }
+                    else {
+                        window.location.hash = fullPath;
+                    }
                 }
-                // Update current route
+                // Update current route in memory
                 current = to;
-                history.push(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];
@@ -424,14 +465,35 @@ var __ktjs_router__ = (function (exports) {
                 }
                 // ---- Guards passed ----
                 const url = fullPath;
-                if (replace) {
-                    window.history.replaceState({ path: to.path }, '', url);
+                if (mode === 'history') {
+                    if (replace) {
+                        window.history.replaceState({ path: to.path }, '', url);
+                    }
+                    else {
+                        window.history.pushState({ path: to.path }, '', url);
+                    }
                 }
                 else {
-                    window.history.pushState({ path: to.path }, '', url);
+                    const hashUrl = '#' + fullPath;
+                    if (replace) {
+                        window.location.replace(hashUrl);
+                    }
+                    else {
+                        window.location.hash = fullPath;
+                    }
                 }
                 current = to;
-                history.push(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];
@@ -475,12 +537,61 @@ var __ktjs_router__ = (function (exports) {
             return loc;
         };
         // # register events
-        // Listen to browser back/forward
-        window.addEventListener('popstate', (event) => {
-            if (event.state?.path) {
-                navigate({ path: event.state.path, guardLevel: 1 /* GuardLevel.Global */, replace: true });
-            }
-        });
+        if (mode === 'history') {
+            // Listen to browser back/forward for history mode
+            window.addEventListener('popstate', (event) => {
+                if (event.state?.path) {
+                    // navigate without pushing new history entry
+                    navigate({ path: event.state.path, guardLevel: 1 /* GuardLevel.Global */, replace: true });
+                }
+            });
+        }
+        else {
+            // hash mode: listen to hashchange
+            window.addEventListener('hashchange', () => {
+                const hash = window.location.hash.slice(1);
+                const [path] = hash.split('?');
+                const normalizedPath = normalizePath(path);
+                if (current && current.path === normalizedPath) {
+                    return;
+                }
+                // render route for new hash without adding extra history entry
+                const matched = match(normalizedPath);
+                if (!matched) {
+                    onNotFound(normalizedPath);
+                    return;
+                }
+                const queryString = window.location.hash.slice(1).split('?')[1];
+                const to = {
+                    path: normalizedPath,
+                    name: matched.route.name,
+                    params: matched.params,
+                    query: queryString ? parseQuery(queryString) : {},
+                    meta: matched.route.meta ?? {},
+                    matched: matched.result,
+                };
+                // apply without modifying browser history
+                current = to;
+                history.push(to);
+                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);
+                        }
+                    }
+                }
+                executeAfterHooksSync(to, history[history.length - 2] ?? null);
+            });
+        }
         // Router instance
         return {
             get current() {
@@ -510,6 +621,7 @@ var __ktjs_router__ = (function (exports) {
             forward() {
                 window.history.forward();
             },
+            initCurrentRoute,
         };
     };
 

package/dist/index.legacy.js

@@ -253,14 +253,16 @@ var __ktjs_router__ = (function (exports) {
      * Create a new router instance
      */
     var createRouter = function (config) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         // # 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 : '';
+        // default to 'hash' mode
+        var mode = (_f = config.mode) !== null && _f !== void 0 ? _f : 'hash';
+        var baseUrl = (_g = config.baseUrl) !== null && _g !== void 0 ? _g : '';
         // # private values
         var routes = [];
         var routerView = null;
@@ -288,35 +290,53 @@ var __ktjs_router__ = (function (exports) {
         };
         // Normalize routes with default guards
         normalize(config.routes, '/');
-        var _g = createMatcher(routes), findByName = _g.findByName, match = _g.match;
+        var _h = createMatcher(routes), findByName = _h.findByName, match = _h.match;
         /**
          * Initialize current route from URL
          */
         var initCurrentRoute = function () {
-            var _a;
-            var hash = window.location.hash.slice(1); // Remove '#'
-            if (!hash) {
-                return null;
+            var _a, _b;
+            if (mode === 'hash') {
+                var hash = window.location.hash.slice(1); // Remove '#'
+                if (!hash) {
+                    return (current = null);
+                }
+                // Parse path and query
+                var _c = hash.split('?'), path_1 = _c[0], queryString_1 = _c[1];
+                var normalizedPath_1 = normalizePath(path_1);
+                // Match route
+                var matched_1 = match(normalizedPath_1);
+                if (!matched_1) {
+                    return (current = null);
+                }
+                // Build route context
+                return (current = {
+                    path: normalizedPath_1,
+                    name: matched_1.route.name,
+                    params: matched_1.params,
+                    query: queryString_1 ? parseQuery(queryString_1) : {},
+                    meta: (_a = matched_1.route.meta) !== null && _a !== void 0 ? _a : {},
+                    matched: matched_1.result,
+                });
             }
-            // Parse path and query
-            var _b = hash.split('?'), path = _b[0], queryString = _b[1];
+            // history mode
+            var pathWithQuery = window.location.pathname + window.location.search;
+            var _d = pathWithQuery.split('?'), path = _d[0], queryString = _d[1];
             var normalizedPath = normalizePath(path);
-            // Match route
             var matched = match(normalizedPath);
             if (!matched) {
-                return null;
+                return (current = null);
             }
-            // Build route context
-            return {
+            return (current = {
                 path: normalizedPath,
                 name: matched.route.name,
                 params: matched.params,
                 query: queryString ? parseQuery(queryString) : {},
-                meta: (_a = matched.route.meta) !== null && _a !== void 0 ? _a : {},
+                meta: (_b = matched.route.meta) !== null && _b !== void 0 ? _b : {},
                 matched: matched.result,
-            };
+            });
         };
-        var current = initCurrentRoute();
+        var current = null;
         var history = current ? [current] : [];
         // # methods
         var executeGuardsSync = function (to, from, guardLevel) {
@@ -474,17 +494,38 @@ var __ktjs_router__ = (function (exports) {
                     }
                     return false;
                 }
-                // Update browser history
+                // Update browser history depending on mode
                 var url = fullPath;
-                if (replace) {
-                    window.history.replaceState({ path: to.path }, '', url);
+                if (mode === 'history') {
+                    if (replace) {
+                        window.history.replaceState({ path: to.path }, '', url);
+                    }
+                    else {
+                        window.history.pushState({ path: to.path }, '', url);
+                    }
                 }
                 else {
-                    window.history.pushState({ path: to.path }, '', url);
+                    var hashUrl = '#' + fullPath;
+                    if (replace) {
+                        window.location.replace(hashUrl);
+                    }
+                    else {
+                        window.location.hash = fullPath;
+                    }
                 }
-                // Update current route
+                // Update current route in memory
                 current = to;
-                history.push(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];
@@ -517,7 +558,7 @@ 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, route, element, error_2;
+                var prep, guardLevel, replace, to, fullPath, guardResult, url, hashUrl, route, element, error_2;
                 var _a;
                 if (redirectCount === void 0) { redirectCount = 0; }
                 return __generator(this, function (_b) {
@@ -545,14 +586,35 @@ var __ktjs_router__ = (function (exports) {
                                 return [2 /*return*/, false];
                             }
                             url = fullPath;
-                            if (replace) {
-                                window.history.replaceState({ path: to.path }, '', url);
+                            if (mode === 'history') {
+                                if (replace) {
+                                    window.history.replaceState({ path: to.path }, '', url);
+                                }
+                                else {
+                                    window.history.pushState({ path: to.path }, '', url);
+                                }
                             }
                             else {
-                                window.history.pushState({ path: to.path }, '', url);
+                                hashUrl = '#' + fullPath;
+                                if (replace) {
+                                    window.location.replace(hashUrl);
+                                }
+                                else {
+                                    window.location.hash = fullPath;
+                                }
                             }
                             current = to;
-                            history.push(to);
+                            if (replace) {
+                                if (history.length > 0) {
+                                    history[history.length - 1] = to;
+                                }
+                                else {
+                                    history.push(to);
+                                }
+                            }
+                            else {
+                                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];
@@ -611,13 +673,63 @@ var __ktjs_router__ = (function (exports) {
             return loc;
         };
         // # register events
-        // Listen to browser back/forward
-        window.addEventListener('popstate', function (event) {
-            var _a;
-            if ((_a = event.state) === null || _a === void 0 ? void 0 : _a.path) {
-                navigate({ path: event.state.path, guardLevel: 1 /* GuardLevel.Global */, replace: true });
-            }
-        });
+        if (mode === 'history') {
+            // Listen to browser back/forward for history mode
+            window.addEventListener('popstate', function (event) {
+                var _a;
+                if ((_a = event.state) === null || _a === void 0 ? void 0 : _a.path) {
+                    // navigate without pushing new history entry
+                    navigate({ path: event.state.path, guardLevel: 1 /* GuardLevel.Global */, replace: true });
+                }
+            });
+        }
+        else {
+            // hash mode: listen to hashchange
+            window.addEventListener('hashchange', function () {
+                var _a, _b;
+                var hash = window.location.hash.slice(1);
+                var path = hash.split('?')[0];
+                var normalizedPath = normalizePath(path);
+                if (current && current.path === normalizedPath) {
+                    return;
+                }
+                // render route for new hash without adding extra history entry
+                var matched = match(normalizedPath);
+                if (!matched) {
+                    onNotFound(normalizedPath);
+                    return;
+                }
+                var queryString = window.location.hash.slice(1).split('?')[1];
+                var to = {
+                    path: normalizedPath,
+                    name: matched.route.name,
+                    params: matched.params,
+                    query: queryString ? parseQuery(queryString) : {},
+                    meta: (_a = matched.route.meta) !== null && _a !== void 0 ? _a : {},
+                    matched: matched.result,
+                };
+                // apply without modifying browser history
+                current = to;
+                history.push(to);
+                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);
+                        }
+                    }
+                }
+                executeAfterHooksSync(to, (_b = history[history.length - 2]) !== null && _b !== void 0 ? _b : null);
+            });
+        }
         // Router instance
         return {
             get current() {
@@ -647,6 +759,7 @@ var __ktjs_router__ = (function (exports) {
             forward: function () {
                 window.history.forward();
             },
+            initCurrentRoute: initCurrentRoute,
         };
     };
 

package/dist/index.mjs

@@ -166,6 +166,8 @@ const createRouter = (config) => {
     const onNotFound = config.onNotFound ?? defaultHook;
     const onError = config.onError ?? defaultHook;
     const asyncGuards = config.asyncGuards ?? true;
+    // default to 'hash' mode
+    const mode = config.mode ?? 'hash';
     const baseUrl = config.baseUrl ?? '';
     // # private values
     const routes = [];
@@ -196,29 +198,47 @@ const createRouter = (config) => {
      * Initialize current route from URL
      */
     const initCurrentRoute = () => {
-        const hash = window.location.hash.slice(1); // Remove '#'
-        if (!hash) {
-            return null;
+        if (mode === 'hash') {
+            const hash = window.location.hash.slice(1); // Remove '#'
+            if (!hash) {
+                return (current = null);
+            }
+            // Parse path and query
+            const [path, queryString] = hash.split('?');
+            const normalizedPath = normalizePath(path);
+            // Match route
+            const matched = match(normalizedPath);
+            if (!matched) {
+                return (current = null);
+            }
+            // Build route context
+            return (current = {
+                path: normalizedPath,
+                name: matched.route.name,
+                params: matched.params,
+                query: queryString ? parseQuery(queryString) : {},
+                meta: matched.route.meta ?? {},
+                matched: matched.result,
+            });
         }
-        // Parse path and query
-        const [path, queryString] = hash.split('?');
+        // history mode
+        const pathWithQuery = window.location.pathname + window.location.search;
+        const [path, queryString] = pathWithQuery.split('?');
         const normalizedPath = normalizePath(path);
-        // Match route
         const matched = match(normalizedPath);
         if (!matched) {
-            return null;
+            return (current = null);
         }
-        // Build route context
-        return {
+        return (current = {
             path: normalizedPath,
             name: matched.route.name,
             params: matched.params,
             query: queryString ? parseQuery(queryString) : {},
             meta: matched.route.meta ?? {},
             matched: matched.result,
-        };
+        });
     };
-    let current = initCurrentRoute();
+    let current = null;
     const history = current ? [current] : [];
     // # methods
     const executeGuardsSync = (to, from, guardLevel) => {
@@ -362,17 +382,38 @@ const createRouter = (config) => {
                 }
                 return false;
             }
-            // Update browser history
+            // Update browser history depending on mode
             const url = fullPath;
-            if (replace) {
-                window.history.replaceState({ path: to.path }, '', url);
+            if (mode === 'history') {
+                if (replace) {
+                    window.history.replaceState({ path: to.path }, '', url);
+                }
+                else {
+                    window.history.pushState({ path: to.path }, '', url);
+                }
             }
             else {
-                window.history.pushState({ path: to.path }, '', url);
+                const hashUrl = '#' + fullPath;
+                if (replace) {
+                    window.location.replace(hashUrl);
+                }
+                else {
+                    window.location.hash = fullPath;
+                }
             }
-            // Update current route
+            // Update current route in memory
             current = to;
-            history.push(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];
@@ -421,14 +462,35 @@ const createRouter = (config) => {
             }
             // ---- Guards passed ----
             const url = fullPath;
-            if (replace) {
-                window.history.replaceState({ path: to.path }, '', url);
+            if (mode === 'history') {
+                if (replace) {
+                    window.history.replaceState({ path: to.path }, '', url);
+                }
+                else {
+                    window.history.pushState({ path: to.path }, '', url);
+                }
             }
             else {
-                window.history.pushState({ path: to.path }, '', url);
+                const hashUrl = '#' + fullPath;
+                if (replace) {
+                    window.location.replace(hashUrl);
+                }
+                else {
+                    window.location.hash = fullPath;
+                }
             }
             current = to;
-            history.push(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];
@@ -472,12 +534,61 @@ const createRouter = (config) => {
         return loc;
     };
     // # register events
-    // Listen to browser back/forward
-    window.addEventListener('popstate', (event) => {
-        if (event.state?.path) {
-            navigate({ path: event.state.path, guardLevel: 1 /* GuardLevel.Global */, replace: true });
-        }
-    });
+    if (mode === 'history') {
+        // Listen to browser back/forward for history mode
+        window.addEventListener('popstate', (event) => {
+            if (event.state?.path) {
+                // navigate without pushing new history entry
+                navigate({ path: event.state.path, guardLevel: 1 /* GuardLevel.Global */, replace: true });
+            }
+        });
+    }
+    else {
+        // hash mode: listen to hashchange
+        window.addEventListener('hashchange', () => {
+            const hash = window.location.hash.slice(1);
+            const [path] = hash.split('?');
+            const normalizedPath = normalizePath(path);
+            if (current && current.path === normalizedPath) {
+                return;
+            }
+            // render route for new hash without adding extra history entry
+            const matched = match(normalizedPath);
+            if (!matched) {
+                onNotFound(normalizedPath);
+                return;
+            }
+            const queryString = window.location.hash.slice(1).split('?')[1];
+            const to = {
+                path: normalizedPath,
+                name: matched.route.name,
+                params: matched.params,
+                query: queryString ? parseQuery(queryString) : {},
+                meta: matched.route.meta ?? {},
+                matched: matched.result,
+            };
+            // apply without modifying browser history
+            current = to;
+            history.push(to);
+            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);
+                    }
+                }
+            }
+            executeAfterHooksSync(to, history[history.length - 2] ?? null);
+        });
+    }
     // Router instance
     return {
         get current() {
@@ -507,6 +618,7 @@ const createRouter = (config) => {
         forward() {
             window.history.forward();
         },
+        initCurrentRoute,
     };
 };
 

package/package.json

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