@ktjs/router 0.14.4 → 0.14.7

package/dist/index.d.ts

@@ -153,8 +153,6 @@ interface Router {
 
   /** Navigate forward in history */
   forward(): void;
-
-  initCurrentRoute(): void;
 }
 
 interface RouteMatch {

package/dist/index.iife.js

@@ -172,10 +172,10 @@ var __ktjs_router__ = (function (exports) {
         const baseUrl = config.baseUrl ?? '';
         // # private values
         const routes = [];
+        const history = [];
         let routerView = null;
-        /**
-         * Normalize routes by adding default guards
-         */
+        let current = null;
+        // # methods
         const normalize = (rawRoutes, parentPath) => rawRoutes.map((route) => {
             const path = normalizePath(parentPath, route.path);
             const normalized = {
@@ -192,38 +192,6 @@ var __ktjs_router__ = (function (exports) {
             routes.push(normalized);
             return normalized;
         });
-        // Normalize routes with default guards
-        normalize(config.routes, '/');
-        const { findByName, match } = createMatcher(routes);
-        /**
-         * Initialize current route from URL
-         */
-        const initCurrentRoute = () => {
-            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,
-            });
-        };
-        let current = null;
-        const history = current ? [current] : [];
-        // # methods
         const executeGuardsSync = (to, from, guardLevel) => {
             try {
                 if (guardLevel === 0 /* GuardLevel.None */) {
@@ -365,17 +333,28 @@ var __ktjs_router__ = (function (exports) {
                     }
                     return false;
                 }
-                // Update browser history
+                // Update browser history depending on mode
                 const url = fullPath;
+                const hashUrl = '#' + fullPath;
                 if (replace) {
-                    window.history.replaceState({ path: to.path }, '', url);
+                    window.location.replace(hashUrl);
                 }
                 else {
-                    window.history.pushState({ path: to.path }, '', url);
+                    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];
@@ -423,15 +402,25 @@ var __ktjs_router__ = (function (exports) {
                     return false;
                 }
                 // ---- Guards passed ----
-                const url = fullPath;
+                const hashUrl = '#' + fullPath;
                 if (replace) {
-                    window.history.replaceState({ path: to.path }, '', url);
+                    window.location.replace(hashUrl);
                 }
                 else {
-                    window.history.pushState({ path: to.path }, '', url);
+                    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];
@@ -464,23 +453,63 @@ var __ktjs_router__ = (function (exports) {
          * Normalize navigation argument
          */
         const normalizeLocation = (loc) => {
-            if (typeof loc === 'string') {
-                // Parse path and query
-                const [path, queryString] = loc.split('?');
-                return {
-                    path,
-                    query: queryString ? parseQuery(queryString) : undefined,
-                };
+            if (typeof loc !== 'string') {
+                return loc;
             }
-            return loc;
+            const [path, queryString] = loc.split('?');
+            return {
+                path,
+                query: queryString ? parseQuery(queryString) : undefined,
+            };
         };
         // # 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 });
+        // 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);
         });
+        // # initialize
+        normalize(config.routes, '/');
+        const { findByName, match } = createMatcher(routes);
         // Router instance
         return {
             get current() {
@@ -510,7 +539,6 @@ var __ktjs_router__ = (function (exports) {
             forward() {
                 window.history.forward();
             },
-            initCurrentRoute,
         };
     };
 

package/dist/index.legacy.js

@@ -263,10 +263,10 @@ var __ktjs_router__ = (function (exports) {
         var baseUrl = (_f = config.baseUrl) !== null && _f !== void 0 ? _f : '';
         // # private values
         var routes = [];
+        var history = [];
         var routerView = null;
-        /**
-         * Normalize routes by adding default guards
-         */
+        var current = null;
+        // # methods
         var normalize = function (rawRoutes, parentPath) {
             return rawRoutes.map(function (route) {
                 var _a, _b, _c, _d;
@@ -286,39 +286,6 @@ var __ktjs_router__ = (function (exports) {
                 return normalized;
             });
         };
-        // Normalize routes with default guards
-        normalize(config.routes, '/');
-        var _g = createMatcher(routes), findByName = _g.findByName, match = _g.match;
-        /**
-         * Initialize current route from URL
-         */
-        var initCurrentRoute = function () {
-            var _a;
-            var hash = window.location.hash.slice(1); // Remove '#'
-            if (!hash) {
-                return (current = null);
-            }
-            // Parse path and query
-            var _b = hash.split('?'), path = _b[0], queryString = _b[1];
-            var normalizedPath = normalizePath(path);
-            // Match route
-            var 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: (_a = matched.route.meta) !== null && _a !== void 0 ? _a : {},
-                matched: matched.result,
-            });
-        };
-        var current = null;
-        var history = current ? [current] : [];
-        // # methods
         var executeGuardsSync = function (to, from, guardLevel) {
             try {
                 if (guardLevel === 0 /* GuardLevel.None */) {
@@ -474,17 +441,28 @@ var __ktjs_router__ = (function (exports) {
                     }
                     return false;
                 }
-                // Update browser history
+                // Update browser history depending on mode
                 var url = fullPath;
+                var hashUrl = '#' + fullPath;
                 if (replace) {
-                    window.history.replaceState({ path: to.path }, '', url);
+                    window.location.replace(hashUrl);
                 }
                 else {
-                    window.history.pushState({ path: to.path }, '', url);
+                    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 +495,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, hashUrl, route, element, error_2;
                 var _a;
                 if (redirectCount === void 0) { redirectCount = 0; }
                 return __generator(this, function (_b) {
@@ -544,15 +522,25 @@ var __ktjs_router__ = (function (exports) {
                                 }
                                 return [2 /*return*/, false];
                             }
-                            url = fullPath;
+                            hashUrl = '#' + fullPath;
                             if (replace) {
-                                window.history.replaceState({ path: to.path }, '', url);
+                                window.location.replace(hashUrl);
                             }
                             else {
-                                window.history.pushState({ path: to.path }, '', url);
+                                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];
@@ -600,24 +588,64 @@ var __ktjs_router__ = (function (exports) {
          * Normalize navigation argument
          */
         var normalizeLocation = function (loc) {
-            if (typeof loc === 'string') {
-                // Parse path and query
-                var _a = loc.split('?'), path = _a[0], queryString = _a[1];
-                return {
-                    path: path,
-                    query: queryString ? parseQuery(queryString) : undefined,
-                };
+            if (typeof loc !== 'string') {
+                return loc;
             }
-            return loc;
+            var _a = loc.split('?'), path = _a[0], queryString = _a[1];
+            return {
+                path: path,
+                query: queryString ? parseQuery(queryString) : undefined,
+            };
         };
         // # 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 });
+        // 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);
         });
+        // # initialize
+        normalize(config.routes, '/');
+        var _g = createMatcher(routes), findByName = _g.findByName, match = _g.match;
         // Router instance
         return {
             get current() {
@@ -647,7 +675,6 @@ var __ktjs_router__ = (function (exports) {
             forward: function () {
                 window.history.forward();
             },
-            initCurrentRoute: initCurrentRoute,
         };
     };
 

package/dist/index.mjs

@@ -169,10 +169,10 @@ const createRouter = (config) => {
     const baseUrl = config.baseUrl ?? '';
     // # private values
     const routes = [];
+    const history = [];
     let routerView = null;
-    /**
-     * Normalize routes by adding default guards
-     */
+    let current = null;
+    // # methods
     const normalize = (rawRoutes, parentPath) => rawRoutes.map((route) => {
         const path = normalizePath(parentPath, route.path);
         const normalized = {
@@ -189,38 +189,6 @@ const createRouter = (config) => {
         routes.push(normalized);
         return normalized;
     });
-    // Normalize routes with default guards
-    normalize(config.routes, '/');
-    const { findByName, match } = createMatcher(routes);
-    /**
-     * Initialize current route from URL
-     */
-    const initCurrentRoute = () => {
-        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,
-        });
-    };
-    let current = null;
-    const history = current ? [current] : [];
-    // # methods
     const executeGuardsSync = (to, from, guardLevel) => {
         try {
             if (guardLevel === 0 /* GuardLevel.None */) {
@@ -362,17 +330,28 @@ const createRouter = (config) => {
                 }
                 return false;
             }
-            // Update browser history
+            // Update browser history depending on mode
             const url = fullPath;
+            const hashUrl = '#' + fullPath;
             if (replace) {
-                window.history.replaceState({ path: to.path }, '', url);
+                window.location.replace(hashUrl);
             }
             else {
-                window.history.pushState({ path: to.path }, '', url);
+                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];
@@ -420,15 +399,25 @@ const createRouter = (config) => {
                 return false;
             }
             // ---- Guards passed ----
-            const url = fullPath;
+            const hashUrl = '#' + fullPath;
             if (replace) {
-                window.history.replaceState({ path: to.path }, '', url);
+                window.location.replace(hashUrl);
             }
             else {
-                window.history.pushState({ path: to.path }, '', url);
+                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];
@@ -461,23 +450,63 @@ const createRouter = (config) => {
      * Normalize navigation argument
      */
     const normalizeLocation = (loc) => {
-        if (typeof loc === 'string') {
-            // Parse path and query
-            const [path, queryString] = loc.split('?');
-            return {
-                path,
-                query: queryString ? parseQuery(queryString) : undefined,
-            };
+        if (typeof loc !== 'string') {
+            return loc;
         }
-        return loc;
+        const [path, queryString] = loc.split('?');
+        return {
+            path,
+            query: queryString ? parseQuery(queryString) : undefined,
+        };
     };
     // # 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 });
+    // 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);
     });
+    // # initialize
+    normalize(config.routes, '/');
+    const { findByName, match } = createMatcher(routes);
     // Router instance
     return {
         get current() {
@@ -507,7 +536,6 @@ const createRouter = (config) => {
         forward() {
             window.history.forward();
         },
-        initCurrentRoute,
     };
 };
 

package/package.json

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