@viewfly/router 0.0.1-alpha.13 → 0.0.1-alpha.15

package/bundles/index.esm.js

@@ -31,24 +31,29 @@ function __metadata(metadataKey, metadataValue) {
 }
 
 class Navigator {
-    constructor(basePath) {
-        this.basePath = basePath;
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl;
     }
 }
 function formatUrl(pathname, query) {
+    pathname = pathname.replace(/\/+/g, '/');
     if (query) {
-        return pathname + '?' + formatQueryParam(query);
+        return pathname + '?' + formatQueryParams(query);
     }
     return pathname;
 }
-function formatQueryParam(queryParam) {
-    const map = new Map();
-    Object.keys(queryParam).forEach(key => {
-        map.set(key, queryParam[key]);
-    });
+function formatQueryParams(queryParams) {
     const params = [];
-    map.forEach((value, key) => {
-        params.push(`${key}=${String(value)}`);
+    Object.keys(queryParams).forEach(key => {
+        const values = queryParams[key];
+        if (Array.isArray(values)) {
+            values.forEach(i => {
+                params.push(`${key}=${decodeURIComponent(i)}`);
+            });
+        }
+        else {
+            params.push(`${key}=${decodeURIComponent(values)}`);
+        }
     });
     return params.join('&');
 }
@@ -56,30 +61,41 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
     get pathname() {
         return location.pathname;
     }
-    constructor(basePath) {
-        super(basePath);
+    constructor(baseUrl) {
+        super(baseUrl);
         this.urlChangeEvent = new Subject();
         this.subscription = new Subscription();
         this.onUrlChanged = this.urlChangeEvent.asObservable();
         this.subscription.add(fromEvent(window, 'popstate').subscribe(() => {
             this.urlChangeEvent.next();
         }));
+        if (!this.pathname.startsWith(this.baseUrl)) {
+            history.replaceState(null, '', this.baseUrl);
+        }
     }
     to(pathName, relative, queryParams) {
         const url = this.join(pathName, relative, queryParams);
         if (location.origin + url === location.href) {
             return true;
         }
-        history.pushState(null, '', this.basePath + url);
+        history.pushState(null, '', url);
+        this.urlChangeEvent.next();
+        return true;
+    }
+    replace(pathName, relative, queryParams) {
+        const url = this.join(pathName, relative, queryParams);
+        if (location.origin + url === location.href) {
+            return true;
+        }
+        history.replaceState(null, '', url);
         this.urlChangeEvent.next();
         return true;
     }
     join(pathname, relative, queryParams) {
-        var _a;
-        let beforePath = relative.beforePath;
         if (pathname.startsWith('/')) {
-            return formatUrl(pathname, queryParams);
+            return formatUrl(this.baseUrl + pathname, queryParams);
         }
+        let beforePath = relative.beforePath;
         while (true) {
             if (pathname.startsWith('./')) {
                 pathname = pathname.substring(2);
@@ -87,7 +103,13 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
             }
             if (pathname.startsWith('../')) {
                 pathname = pathname.substring(3);
-                beforePath = ((_a = relative.parent) === null || _a === void 0 ? void 0 : _a.beforePath) || '';
+                if (relative.parent) {
+                    beforePath = relative.parent.beforePath;
+                    relative = relative.parent;
+                }
+                else {
+                    beforePath = '';
+                }
                 if (!beforePath) {
                     break;
                 }
@@ -95,7 +117,7 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
             }
             break;
         }
-        return formatUrl(beforePath + '/' + pathname, queryParams);
+        return formatUrl(this.baseUrl + '/' + beforePath + '/' + pathname, queryParams);
     }
     back() {
         history.back();
@@ -117,9 +139,11 @@ BrowserNavigator = __decorate([
 
 class Router {
     get pathname() {
-        var _a;
         if (this.parent) {
-            return ((_a = this.parent.path.match(/[^\/?#]+/)) === null || _a === void 0 ? void 0 : _a[0]) || '';
+            const name = this.parent.path.match(/[^\/?#]+/);
+            if (name) {
+                return name[0];
+            }
         }
         return '';
     }
@@ -139,6 +163,9 @@ class Router {
     navigateTo(path, params) {
         this.navigator.to(path, this, params);
     }
+    replaceTo(path, params) {
+        this.navigator.replace(path, this, params);
+    }
     refresh(path) {
         this.path = path;
         this.refreshEvent.next();
@@ -203,7 +230,8 @@ function Link(props) {
     const router = inject(Router);
     function getActive() {
         return props.exact ?
-            navigator.pathname === navigator.join(props.to, router) :
+            (navigator.pathname === navigator.join(props.to, router) ||
+                (navigator.pathname + '/') === navigator.join(props.to, router)) :
             navigator.pathname.startsWith(navigator.join(props.to, router));
     }
     const isActive = useSignal(getActive());
@@ -214,14 +242,15 @@ function Link(props) {
         subscription.unsubscribe();
     });
     function navigate(ev) {
+        if ((!props.tag || props.tag === 'a') && props.target === '_blank') {
+            return;
+        }
         ev.preventDefault();
         router.navigateTo(props.to, props.queryParams);
     }
     return () => {
         const Tag = props.tag || 'a';
-        const attrs = Object.assign({
-            target: '_blank'
-        }, props, Object.assign({ onClick: navigate }, props));
+        const attrs = Object.assign({}, props, Object.assign({ onClick: navigate }, props));
         if (Tag === 'a') {
             attrs.href = navigator.join(props.to, router, props.queryParams);
         }
@@ -232,12 +261,12 @@ function Link(props) {
             else if (typeof attrs.class === 'string') {
                 attrs.class += ' ' + props.active;
             }
-            else if (typeof props.active === 'object') {
-                attrs.class[props.active] = true;
-            }
             else if (Array.isArray(attrs.class)) {
                 attrs.class.push(props.active);
             }
+            else if (typeof attrs.class === 'object') {
+                attrs.class[props.active] = true;
+            }
         }
         return jsx(Tag, Object.assign({}, attrs, { children: props.children }));
     };
@@ -317,4 +346,4 @@ function RouterOutlet(props) {
     };
 }
 
-export { BrowserNavigator, Link, Navigator, RootRouter, Router, RouterOutlet, formatQueryParam, formatUrl };
+export { BrowserNavigator, Link, Navigator, RootRouter, Router, RouterOutlet, formatQueryParams, formatUrl };

package/bundles/index.js

@@ -33,24 +33,29 @@ function __metadata(metadataKey, metadataValue) {
 }
 
 class Navigator {
-    constructor(basePath) {
-        this.basePath = basePath;
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl;
     }
 }
 function formatUrl(pathname, query) {
+    pathname = pathname.replace(/\/+/g, '/');
     if (query) {
-        return pathname + '?' + formatQueryParam(query);
+        return pathname + '?' + formatQueryParams(query);
     }
     return pathname;
 }
-function formatQueryParam(queryParam) {
-    const map = new Map();
-    Object.keys(queryParam).forEach(key => {
-        map.set(key, queryParam[key]);
-    });
+function formatQueryParams(queryParams) {
     const params = [];
-    map.forEach((value, key) => {
-        params.push(`${key}=${String(value)}`);
+    Object.keys(queryParams).forEach(key => {
+        const values = queryParams[key];
+        if (Array.isArray(values)) {
+            values.forEach(i => {
+                params.push(`${key}=${decodeURIComponent(i)}`);
+            });
+        }
+        else {
+            params.push(`${key}=${decodeURIComponent(values)}`);
+        }
     });
     return params.join('&');
 }
@@ -58,30 +63,41 @@ exports.BrowserNavigator = class BrowserNavigator extends Navigator {
     get pathname() {
         return location.pathname;
     }
-    constructor(basePath) {
-        super(basePath);
+    constructor(baseUrl) {
+        super(baseUrl);
         this.urlChangeEvent = new stream.Subject();
         this.subscription = new stream.Subscription();
         this.onUrlChanged = this.urlChangeEvent.asObservable();
         this.subscription.add(stream.fromEvent(window, 'popstate').subscribe(() => {
             this.urlChangeEvent.next();
         }));
+        if (!this.pathname.startsWith(this.baseUrl)) {
+            history.replaceState(null, '', this.baseUrl);
+        }
     }
     to(pathName, relative, queryParams) {
         const url = this.join(pathName, relative, queryParams);
         if (location.origin + url === location.href) {
             return true;
         }
-        history.pushState(null, '', this.basePath + url);
+        history.pushState(null, '', url);
+        this.urlChangeEvent.next();
+        return true;
+    }
+    replace(pathName, relative, queryParams) {
+        const url = this.join(pathName, relative, queryParams);
+        if (location.origin + url === location.href) {
+            return true;
+        }
+        history.replaceState(null, '', url);
         this.urlChangeEvent.next();
         return true;
     }
     join(pathname, relative, queryParams) {
-        var _a;
-        let beforePath = relative.beforePath;
         if (pathname.startsWith('/')) {
-            return formatUrl(pathname, queryParams);
+            return formatUrl(this.baseUrl + pathname, queryParams);
         }
+        let beforePath = relative.beforePath;
         while (true) {
             if (pathname.startsWith('./')) {
                 pathname = pathname.substring(2);
@@ -89,7 +105,13 @@ exports.BrowserNavigator = class BrowserNavigator extends Navigator {
             }
             if (pathname.startsWith('../')) {
                 pathname = pathname.substring(3);
-                beforePath = ((_a = relative.parent) === null || _a === void 0 ? void 0 : _a.beforePath) || '';
+                if (relative.parent) {
+                    beforePath = relative.parent.beforePath;
+                    relative = relative.parent;
+                }
+                else {
+                    beforePath = '';
+                }
                 if (!beforePath) {
                     break;
                 }
@@ -97,7 +119,7 @@ exports.BrowserNavigator = class BrowserNavigator extends Navigator {
             }
             break;
         }
-        return formatUrl(beforePath + '/' + pathname, queryParams);
+        return formatUrl(this.baseUrl + '/' + beforePath + '/' + pathname, queryParams);
     }
     back() {
         history.back();
@@ -119,9 +141,11 @@ exports.BrowserNavigator = __decorate([
 
 class Router {
     get pathname() {
-        var _a;
         if (this.parent) {
-            return ((_a = this.parent.path.match(/[^\/?#]+/)) === null || _a === void 0 ? void 0 : _a[0]) || '';
+            const name = this.parent.path.match(/[^\/?#]+/);
+            if (name) {
+                return name[0];
+            }
         }
         return '';
     }
@@ -141,6 +165,9 @@ class Router {
     navigateTo(path, params) {
         this.navigator.to(path, this, params);
     }
+    replaceTo(path, params) {
+        this.navigator.replace(path, this, params);
+    }
     refresh(path) {
         this.path = path;
         this.refreshEvent.next();
@@ -205,7 +232,8 @@ function Link(props) {
     const router = core.inject(Router);
     function getActive() {
         return props.exact ?
-            navigator.pathname === navigator.join(props.to, router) :
+            (navigator.pathname === navigator.join(props.to, router) ||
+                (navigator.pathname + '/') === navigator.join(props.to, router)) :
             navigator.pathname.startsWith(navigator.join(props.to, router));
     }
     const isActive = core.useSignal(getActive());
@@ -216,14 +244,15 @@ function Link(props) {
         subscription.unsubscribe();
     });
     function navigate(ev) {
+        if ((!props.tag || props.tag === 'a') && props.target === '_blank') {
+            return;
+        }
         ev.preventDefault();
         router.navigateTo(props.to, props.queryParams);
     }
     return () => {
         const Tag = props.tag || 'a';
-        const attrs = Object.assign({
-            target: '_blank'
-        }, props, Object.assign({ onClick: navigate }, props));
+        const attrs = Object.assign({}, props, Object.assign({ onClick: navigate }, props));
         if (Tag === 'a') {
             attrs.href = navigator.join(props.to, router, props.queryParams);
         }
@@ -234,12 +263,12 @@ function Link(props) {
             else if (typeof attrs.class === 'string') {
                 attrs.class += ' ' + props.active;
             }
-            else if (typeof props.active === 'object') {
-                attrs.class[props.active] = true;
-            }
             else if (Array.isArray(attrs.class)) {
                 attrs.class.push(props.active);
             }
+            else if (typeof attrs.class === 'object') {
+                attrs.class[props.active] = true;
+            }
         }
         return jsxRuntime.jsx(Tag, Object.assign({}, attrs, { children: props.children }));
     };
@@ -324,5 +353,5 @@ exports.Navigator = Navigator;
 exports.RootRouter = RootRouter;
 exports.Router = Router;
 exports.RouterOutlet = RouterOutlet;
-exports.formatQueryParam = formatQueryParam;
+exports.formatQueryParams = formatQueryParams;
 exports.formatUrl = formatUrl;

package/bundles/providers/navigator.d.ts

@@ -4,27 +4,28 @@ export interface QueryParams {
     [key: string]: string | string[];
 }
 export declare abstract class Navigator {
-    basePath: string;
-    protected constructor(basePath: string);
+    baseUrl: string;
+    protected constructor(baseUrl: string);
     abstract onUrlChanged: Observable<void>;
     abstract get pathname(): string;
     abstract to(pathName: string, relative: Router, queryParams?: QueryParams): boolean;
+    abstract replace(pathName: string, relative: Router, queryParams?: QueryParams): boolean;
     abstract join(pathName: string, relative: Router, queryParams?: QueryParams): string;
     abstract back(): void;
     abstract forward(): void;
     abstract go(offset: number): void;
     abstract destroy(): void;
 }
-export type QueryParam = Record<string, string | boolean | number>;
 export declare function formatUrl(pathname: string, query?: QueryParams): string;
-export declare function formatQueryParam(queryParam: QueryParams): string;
+export declare function formatQueryParams(queryParams: QueryParams): string;
 export declare class BrowserNavigator extends Navigator {
     onUrlChanged: Observable<void>;
     get pathname(): string;
     private urlChangeEvent;
     private subscription;
-    constructor(basePath: string);
+    constructor(baseUrl: string);
     to(pathName: string, relative: Router, queryParams?: QueryParams): boolean;
+    replace(pathName: string, relative: Router, queryParams?: QueryParams): boolean;
     join(pathname: string, relative: Router, queryParams?: QueryParams): string;
     back(): void;
     forward(): void;

package/bundles/providers/router.d.ts

@@ -16,6 +16,7 @@ export declare class Router {
     private refreshEvent;
     constructor(navigator: Navigator, parent: Router | null, path: string);
     navigateTo(path: string, params?: QueryParams): void;
+    replaceTo(path: string, params?: QueryParams): void;
     refresh(path: string): void;
     consumeConfig(routes: RouteConfig[]): {
         remainingPath: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/router",
-  "version": "0.0.1-alpha.13",
+  "version": "0.0.1-alpha.15",
   "description": "A routing library based on the Viewfly framework that can be run in the browser or Nodejs background.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -12,8 +12,8 @@
   "license": "MIT",
   "keywords": [],
   "dependencies": {
-    "@tanbo/stream": "^1.1.9",
-    "@viewfly/core": "^0.0.1-alpha.13",
+    "@tanbo/stream": "^1.2.0",
+    "@viewfly/core": "^0.0.1-alpha.15",
     "url": "^0.11.1"
   },
   "devDependencies": {
@@ -33,5 +33,6 @@
   },
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
-  }
+  },
+  "gitHead": "8eccbdc9402ab506f98acb5946e19c16d8b74b43"
 }