@viewfly/router 0.3.0 → 0.3.2

package/bundles/index.esm.js

@@ -40,10 +40,11 @@ class Navigator {
         this.baseUrl = baseUrl;
     }
 }
-function formatUrl(pathname, query) {
+function formatUrl(pathname, urlFormatParams) {
     pathname = pathname.replace(/\/+/g, '/');
-    if (query) {
-        return pathname + '?' + formatQueryParams(query);
+    if (urlFormatParams) {
+        const { queryParams, fragment } = urlFormatParams;
+        return pathname + (queryParams ? '?' + formatQueryParams(queryParams) : '') + (fragment ? '#' + fragment : '');
     }
     return pathname;
 }
@@ -78,8 +79,8 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
             history.replaceState(null, '', this.baseUrl);
         }
     }
-    to(pathName, relative, queryParams) {
-        const url = this.join(pathName, relative, queryParams);
+    to(pathName, relative, queryParams, fragment) {
+        const url = this.join(pathName, relative, queryParams, fragment);
         if (location.origin + url === location.href) {
             return true;
         }
@@ -87,8 +88,8 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
         this.urlChangeEvent.next();
         return true;
     }
-    replace(pathName, relative, queryParams) {
-        const url = this.join(pathName, relative, queryParams);
+    replace(pathName, relative, queryParams, fragment) {
+        const url = this.join(pathName, relative, queryParams, fragment);
         if (location.origin + url === location.href) {
             return true;
         }
@@ -96,9 +97,9 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
         this.urlChangeEvent.next();
         return true;
     }
-    join(pathname, relative, queryParams) {
+    join(pathname, relative, queryParams, fragment) {
         if (pathname.startsWith('/')) {
-            return formatUrl(this.baseUrl + pathname, queryParams);
+            return formatUrl(this.baseUrl + pathname, { queryParams, fragment });
         }
         let beforePath = relative.beforePath;
         while (true) {
@@ -122,7 +123,7 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
             }
             break;
         }
-        return formatUrl(this.baseUrl + '/' + beforePath + '/' + pathname, queryParams);
+        return formatUrl(this.baseUrl + '/' + beforePath + '/' + pathname, { queryParams, fragment });
     }
     back() {
         history.back();
@@ -165,8 +166,8 @@ class Router {
         this.refreshEvent = new Subject();
         this.onRefresh = this.refreshEvent.asObservable();
     }
-    navigateTo(path, params) {
-        this.navigator.to(path, this, params);
+    navigateTo(path, params, fragment) {
+        this.navigator.to(path, this, params, fragment);
     }
     replaceTo(path, params) {
         this.navigator.replace(path, this, params);
@@ -181,14 +182,14 @@ class Router {
             return null;
         }
         let remainingPath = '';
-        if (routeConfig.name === '') {
+        if (routeConfig.path === '') {
             remainingPath = this.path;
         }
-        else if (routeConfig.name === '*') {
+        else if (routeConfig.path === '*') {
             remainingPath = '';
         }
         else {
-            remainingPath = this.path.substring(routeConfig.name.length + 1);
+            remainingPath = this.path.substring(routeConfig.path.length + 1);
         }
         return {
             remainingPath,
@@ -211,16 +212,16 @@ class Router {
         let fallbackConfig = null;
         const pathname = ((_a = (this.path || '').match(/[^\/?#]+/)) === null || _a === void 0 ? void 0 : _a[0]) || '';
         for (const item of configs) {
-            if (item.name === pathname) {
+            if (item.path === pathname) {
                 matchedConfig = item;
                 break;
             }
-            else if (item.name === '*') {
+            else if (item.path === '*') {
                 if (!fallbackConfig) {
                     fallbackConfig = item;
                 }
             }
-            else if (item.name === '') {
+            else if (item.path === '') {
                 if (!defaultConfig) {
                     defaultConfig = item;
                 }
@@ -251,13 +252,13 @@ function Link(props) {
             return;
         }
         ev.preventDefault();
-        router.navigateTo(props.to, props.queryParams);
+        router.navigateTo(props.to, props.queryParams, props.fragment);
     }
     return () => {
         const Tag = props.tag || 'a';
         const attrs = Object.assign({}, props, Object.assign({ onClick: navigate }, props));
         if (Tag === 'a') {
-            attrs.href = navigator.join(props.to, router, props.queryParams);
+            attrs.href = navigator.join(props.to, router, props.queryParams, props.fragment);
         }
         if (isActive() && props.active) {
             attrs.class = [attrs.class, props.active];
@@ -266,36 +267,6 @@ function Link(props) {
     };
 }
 
-function RootRouter(props) {
-    const basePath = props.basePath || '';
-    const navigator = new BrowserNavigator(basePath);
-    function getPath() {
-        const pathname = navigator.pathname;
-        return pathname.startsWith(basePath) ? pathname.substring(basePath.length) : pathname;
-    }
-    const router = new Router(navigator, null, getPath());
-    provide([
-        {
-            provide: Navigator,
-            useValue: navigator
-        },
-        {
-            provide: Router,
-            useValue: router
-        }
-    ]);
-    const subscription = navigator.onUrlChanged.subscribe(() => {
-        router.refresh(getPath());
-    });
-    onUnmounted(() => {
-        subscription.unsubscribe();
-        navigator.destroy();
-    });
-    return () => {
-        return jsx(Fragment, { children: props.children });
-    };
-}
-
 function RouterOutlet(props) {
     const children = useSignal(null);
     const router = inject(Router);
@@ -341,4 +312,38 @@ function RouterOutlet(props) {
     };
 }
 
-export { BrowserNavigator, Link, Navigator, RootRouter, Router, RouterOutlet, formatQueryParams, formatUrl };
+class RouterModule {
+    constructor(baseUrl = '') {
+        this.baseUrl = baseUrl;
+        this.subscription = new Subscription();
+        this.navigator = new BrowserNavigator(this.baseUrl);
+    }
+    setup(app) {
+        const baseUrl = this.baseUrl;
+        const navigator = this.navigator;
+        function getPath() {
+            const pathname = navigator.pathname;
+            return pathname.startsWith(baseUrl) ? pathname.substring(baseUrl.length) : pathname;
+        }
+        const router = new Router(navigator, null, getPath());
+        this.subscription.add(navigator.onUrlChanged.subscribe(() => {
+            router.refresh(getPath());
+        }));
+        app.provide([
+            {
+                provide: Navigator,
+                useValue: navigator
+            },
+            {
+                provide: Router,
+                useValue: router
+            }
+        ]);
+    }
+    onDestroy() {
+        this.subscription.unsubscribe();
+        this.navigator.destroy();
+    }
+}
+
+export { BrowserNavigator, Link, Navigator, Router, RouterModule, RouterOutlet, formatQueryParams, formatUrl };

package/bundles/index.js

@@ -42,10 +42,11 @@ class Navigator {
         this.baseUrl = baseUrl;
     }
 }
-function formatUrl(pathname, query) {
+function formatUrl(pathname, urlFormatParams) {
     pathname = pathname.replace(/\/+/g, '/');
-    if (query) {
-        return pathname + '?' + formatQueryParams(query);
+    if (urlFormatParams) {
+        const { queryParams, fragment } = urlFormatParams;
+        return pathname + (queryParams ? '?' + formatQueryParams(queryParams) : '') + (fragment ? '#' + fragment : '');
     }
     return pathname;
 }
@@ -80,8 +81,8 @@ exports.BrowserNavigator = class BrowserNavigator extends Navigator {
             history.replaceState(null, '', this.baseUrl);
         }
     }
-    to(pathName, relative, queryParams) {
-        const url = this.join(pathName, relative, queryParams);
+    to(pathName, relative, queryParams, fragment) {
+        const url = this.join(pathName, relative, queryParams, fragment);
         if (location.origin + url === location.href) {
             return true;
         }
@@ -89,8 +90,8 @@ exports.BrowserNavigator = class BrowserNavigator extends Navigator {
         this.urlChangeEvent.next();
         return true;
     }
-    replace(pathName, relative, queryParams) {
-        const url = this.join(pathName, relative, queryParams);
+    replace(pathName, relative, queryParams, fragment) {
+        const url = this.join(pathName, relative, queryParams, fragment);
         if (location.origin + url === location.href) {
             return true;
         }
@@ -98,9 +99,9 @@ exports.BrowserNavigator = class BrowserNavigator extends Navigator {
         this.urlChangeEvent.next();
         return true;
     }
-    join(pathname, relative, queryParams) {
+    join(pathname, relative, queryParams, fragment) {
         if (pathname.startsWith('/')) {
-            return formatUrl(this.baseUrl + pathname, queryParams);
+            return formatUrl(this.baseUrl + pathname, { queryParams, fragment });
         }
         let beforePath = relative.beforePath;
         while (true) {
@@ -124,7 +125,7 @@ exports.BrowserNavigator = class BrowserNavigator extends Navigator {
             }
             break;
         }
-        return formatUrl(this.baseUrl + '/' + beforePath + '/' + pathname, queryParams);
+        return formatUrl(this.baseUrl + '/' + beforePath + '/' + pathname, { queryParams, fragment });
     }
     back() {
         history.back();
@@ -167,8 +168,8 @@ class Router {
         this.refreshEvent = new stream.Subject();
         this.onRefresh = this.refreshEvent.asObservable();
     }
-    navigateTo(path, params) {
-        this.navigator.to(path, this, params);
+    navigateTo(path, params, fragment) {
+        this.navigator.to(path, this, params, fragment);
     }
     replaceTo(path, params) {
         this.navigator.replace(path, this, params);
@@ -183,14 +184,14 @@ class Router {
             return null;
         }
         let remainingPath = '';
-        if (routeConfig.name === '') {
+        if (routeConfig.path === '') {
             remainingPath = this.path;
         }
-        else if (routeConfig.name === '*') {
+        else if (routeConfig.path === '*') {
             remainingPath = '';
         }
         else {
-            remainingPath = this.path.substring(routeConfig.name.length + 1);
+            remainingPath = this.path.substring(routeConfig.path.length + 1);
         }
         return {
             remainingPath,
@@ -213,16 +214,16 @@ class Router {
         let fallbackConfig = null;
         const pathname = ((_a = (this.path || '').match(/[^\/?#]+/)) === null || _a === void 0 ? void 0 : _a[0]) || '';
         for (const item of configs) {
-            if (item.name === pathname) {
+            if (item.path === pathname) {
                 matchedConfig = item;
                 break;
             }
-            else if (item.name === '*') {
+            else if (item.path === '*') {
                 if (!fallbackConfig) {
                     fallbackConfig = item;
                 }
             }
-            else if (item.name === '') {
+            else if (item.path === '') {
                 if (!defaultConfig) {
                     defaultConfig = item;
                 }
@@ -253,13 +254,13 @@ function Link(props) {
             return;
         }
         ev.preventDefault();
-        router.navigateTo(props.to, props.queryParams);
+        router.navigateTo(props.to, props.queryParams, props.fragment);
     }
     return () => {
         const Tag = props.tag || 'a';
         const attrs = Object.assign({}, props, Object.assign({ onClick: navigate }, props));
         if (Tag === 'a') {
-            attrs.href = navigator.join(props.to, router, props.queryParams);
+            attrs.href = navigator.join(props.to, router, props.queryParams, props.fragment);
         }
         if (isActive() && props.active) {
             attrs.class = [attrs.class, props.active];
@@ -268,36 +269,6 @@ function Link(props) {
     };
 }
 
-function RootRouter(props) {
-    const basePath = props.basePath || '';
-    const navigator = new exports.BrowserNavigator(basePath);
-    function getPath() {
-        const pathname = navigator.pathname;
-        return pathname.startsWith(basePath) ? pathname.substring(basePath.length) : pathname;
-    }
-    const router = new Router(navigator, null, getPath());
-    core.provide([
-        {
-            provide: Navigator,
-            useValue: navigator
-        },
-        {
-            provide: Router,
-            useValue: router
-        }
-    ]);
-    const subscription = navigator.onUrlChanged.subscribe(() => {
-        router.refresh(getPath());
-    });
-    core.onUnmounted(() => {
-        subscription.unsubscribe();
-        navigator.destroy();
-    });
-    return () => {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
-    };
-}
-
 function RouterOutlet(props) {
     const children = core.useSignal(null);
     const router = core.inject(Router);
@@ -343,10 +314,44 @@ function RouterOutlet(props) {
     };
 }
 
+class RouterModule {
+    constructor(baseUrl = '') {
+        this.baseUrl = baseUrl;
+        this.subscription = new stream.Subscription();
+        this.navigator = new exports.BrowserNavigator(this.baseUrl);
+    }
+    setup(app) {
+        const baseUrl = this.baseUrl;
+        const navigator = this.navigator;
+        function getPath() {
+            const pathname = navigator.pathname;
+            return pathname.startsWith(baseUrl) ? pathname.substring(baseUrl.length) : pathname;
+        }
+        const router = new Router(navigator, null, getPath());
+        this.subscription.add(navigator.onUrlChanged.subscribe(() => {
+            router.refresh(getPath());
+        }));
+        app.provide([
+            {
+                provide: Navigator,
+                useValue: navigator
+            },
+            {
+                provide: Router,
+                useValue: router
+            }
+        ]);
+    }
+    onDestroy() {
+        this.subscription.unsubscribe();
+        this.navigator.destroy();
+    }
+}
+
 exports.Link = Link;
 exports.Navigator = Navigator;
-exports.RootRouter = RootRouter;
 exports.Router = Router;
+exports.RouterModule = RouterModule;
 exports.RouterOutlet = RouterOutlet;
 exports.formatQueryParams = formatQueryParams;
 exports.formatUrl = formatUrl;

package/bundles/link.d.ts

@@ -5,6 +5,7 @@ export interface LinkProps extends Props {
     active?: string;
     exact?: boolean;
     queryParams?: QueryParams;
+    fragment?: string;
     tag?: string;
 }
 export declare function Link(props: LinkProps): () => any;

package/bundles/providers/navigator.d.ts

@@ -8,15 +8,19 @@ export declare abstract class Navigator {
     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 to(pathName: string, relative: Router, queryParams?: QueryParams, fragment?: string): boolean;
+    abstract replace(pathName: string, relative: Router, queryParams?: QueryParams, fragment?: string): boolean;
+    abstract join(pathName: string, relative: Router, queryParams?: QueryParams, fragment?: string): string;
     abstract back(): void;
     abstract forward(): void;
     abstract go(offset: number): void;
     abstract destroy(): void;
 }
-export declare function formatUrl(pathname: string, query?: QueryParams): string;
+export interface UrlFormatParams {
+    queryParams?: QueryParams;
+    fragment?: string;
+}
+export declare function formatUrl(pathname: string, urlFormatParams?: UrlFormatParams): string;
 export declare function formatQueryParams(queryParams: QueryParams): string;
 export declare class BrowserNavigator extends Navigator {
     onUrlChanged: Observable<void>;
@@ -24,9 +28,9 @@ export declare class BrowserNavigator extends Navigator {
     private urlChangeEvent;
     private subscription;
     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;
+    to(pathName: string, relative: Router, queryParams?: QueryParams, fragment?: string): boolean;
+    replace(pathName: string, relative: Router, queryParams?: QueryParams, fragment?: string): boolean;
+    join(pathname: string, relative: Router, queryParams?: QueryParams, fragment?: string): string;
     back(): void;
     forward(): void;
     go(offset: number): void;

package/bundles/providers/router.d.ts

@@ -2,7 +2,7 @@ import { JSXInternal } from '@viewfly/core';
 import { Observable } from '@tanbo/stream';
 import { Navigator, QueryParams } from './navigator';
 export interface RouteConfig {
-    name: string;
+    path: string;
     component?: JSXInternal.ComponentSetup;
     asyncComponent?: () => Promise<JSXInternal.ComponentSetup>;
     beforeEach?(): boolean | Promise<boolean>;
@@ -16,7 +16,7 @@ export declare class Router {
     get beforePath(): string;
     private refreshEvent;
     constructor(navigator: Navigator, parent: Router | null, path: string);
-    navigateTo(path: string, params?: QueryParams): void;
+    navigateTo(path: string, params?: QueryParams, fragment?: string): void;
     replaceTo(path: string, params?: QueryParams): void;
     refresh(path: string): void;
     consumeConfig(routes: RouteConfig[]): {

package/bundles/public-api.d.ts

@@ -1,4 +1,4 @@
 export * from './link';
-export * from './root-router';
 export * from './router-outlet';
+export * from './router-module';
 export * from './providers/_api';

package/bundles/router-module.d.ts

@@ -0,0 +1,9 @@
+import { Application, Module } from '@viewfly/core';
+export declare class RouterModule implements Module {
+    baseUrl: string;
+    private subscription;
+    private navigator;
+    constructor(baseUrl?: string);
+    setup(app: Application): void;
+    onDestroy(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/router",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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",
@@ -13,7 +13,7 @@
   "keywords": [],
   "dependencies": {
     "@tanbo/stream": "^1.2.3",
-    "@viewfly/core": "^0.3.0",
+    "@viewfly/core": "^0.3.1",
     "url": "^0.11.1"
   },
   "devDependencies": {

package/bundles/root-router.d.ts

@@ -1,6 +0,0 @@
-import { Props, JSXInternal } from '@viewfly/core';
-export interface RootRouterProps extends Props {
-    basePath?: string;
-    children?: JSXInternal.JSXNode;
-}
-export declare function RootRouter(props: RootRouterProps): () => any;