@viewfly/router 2.1.0 → 3.0.0-alpha.0

package/dist/index.js

@@ -0,0 +1,494 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _viewfly_core = require("@viewfly/core");
+let _tanbo_stream = require("@tanbo/stream");
+//#region src/providers/router.ts
+var routerErrorFn$1 = (0, _viewfly_core.makeError)("Router");
+var Router = class {
+	onRefresh;
+	get deep() {
+		return this.parent ? this.parent.deep + 1 : 0;
+	}
+	get path() {
+		return this.navigator.urlTree.paths.at(this.deep) || "";
+	}
+	refreshEvent = new _tanbo_stream.Subject();
+	constructor(navigator, parent) {
+		this.navigator = navigator;
+		this.parent = parent;
+		this.onRefresh = this.refreshEvent.asObservable();
+	}
+	navigateTo(path, params, fragment) {
+		this.navigator.to(path, this, params, fragment || void 0);
+	}
+	replaceTo(path, params) {
+		this.navigator.replace(path, this, params);
+	}
+	refresh() {
+		this.refreshEvent.next();
+	}
+	consumeConfig(routes) {
+		return this.matchRoute(routes, this.path);
+	}
+	back() {
+		this.navigator.back();
+	}
+	forward() {
+		this.navigator.forward();
+	}
+	go(offset) {
+		this.navigator.go(offset);
+	}
+	matchRoute(configs, pathname) {
+		let matchedConfig = null;
+		let defaultConfig = null;
+		let fallbackConfig = null;
+		for (const item of configs) if (item.path === pathname) {
+			matchedConfig = item;
+			break;
+		} else if (item.path === "*") {
+			if (!fallbackConfig) fallbackConfig = item;
+		} else if (item.path === "") {
+			if (!defaultConfig) defaultConfig = item;
+		}
+		const config = matchedConfig || defaultConfig || fallbackConfig;
+		if (!config) return config;
+		if (typeof config.redirectTo === "function") {
+			const p = config.redirectTo(pathname);
+			if (typeof p === "string") this.navigateTo(p);
+			else if (typeof p === "object") this.navigateTo(p.pathname, p.queryParams, p.fragment);
+			else throw routerErrorFn$1(`Router redirect to '${pathname}' not supported`);
+			return null;
+		}
+		if (typeof config.redirectTo === "string") {
+			this.navigateTo(config.redirectTo);
+			return null;
+		}
+		return config;
+	}
+};
+//#endregion
+//#region src/providers/url-parser.ts
+var UrlParser = class {
+	index = 0;
+	url = "";
+	tokens = [];
+	parse(url) {
+		this.index = 0;
+		this.url = url;
+		this.tokens = [];
+		while (this.index < this.url.length) {
+			this.ignore("/");
+			if (this.peek("../")) {
+				this.tokens.push({ type: "toParent" });
+				this.index += 3;
+			} else if (this.peek("?")) {
+				this.index++;
+				this.tokens.push({
+					type: "query",
+					params: this.readQuery()
+				});
+			} else if (this.peek("#")) {
+				this.index++;
+				this.tokens.push({
+					type: "hash",
+					value: this.readHash()
+				});
+			} else {
+				if (this.peek("./")) this.index += 2;
+				const path = this.readPath();
+				if (path) this.tokens.push({
+					type: "toChild",
+					value: path
+				});
+			}
+		}
+		const urlTree = {
+			paths: [],
+			queryParams: {},
+			hash: null
+		};
+		for (const item of this.tokens) switch (item.type) {
+			case "toParent":
+				urlTree.paths.pop();
+				break;
+			case "toChild":
+				urlTree.paths.push(item.value);
+				break;
+			case "query":
+				urlTree.queryParams = item.params;
+				break;
+			case "hash": urlTree.hash = item.value;
+		}
+		return urlTree;
+	}
+	readHash() {
+		const hash = this.url.substring(this.index);
+		this.index = this.url.length;
+		return hash;
+	}
+	readQuery() {
+		const query = {};
+		while (this.index < this.url.length) {
+			const key = this.readQueryKey();
+			let value = "";
+			if (this.peek("=")) {
+				this.index++;
+				value = this.readQueryValue();
+			}
+			const oldValue = query[key];
+			if (oldValue) if (Array.isArray(oldValue)) oldValue.push(value);
+			else query[key] = [oldValue, value];
+			else query[key] = value;
+			if (this.peek("&")) {
+				this.index++;
+				continue;
+			}
+			break;
+		}
+		return query;
+	}
+	readQueryValue() {
+		const chars = [];
+		while (this.index < this.url.length) {
+			if (this.not("&#")) {
+				chars.push(this.url.at(this.index));
+				this.index++;
+				continue;
+			}
+			break;
+		}
+		return chars.join("");
+	}
+	readQueryKey() {
+		const chars = [];
+		while (this.index < this.url.length) {
+			if (this.not("=&#")) {
+				chars.push(this.url.at(this.index));
+				this.index++;
+				continue;
+			}
+			break;
+		}
+		return chars.join("");
+	}
+	readPath() {
+		const chars = [];
+		while (this.index < this.url.length) {
+			if (this.not("./?#")) {
+				chars.push(this.url.at(this.index));
+				this.index++;
+				continue;
+			}
+			break;
+		}
+		return chars.join("");
+	}
+	not(text) {
+		const ch = this.url.at(this.index);
+		return text.indexOf(ch) === -1;
+	}
+	peek(str) {
+		return this.url.slice(this.index, this.index + str.length) === str;
+	}
+	ignore(str) {
+		while (this.peek(str)) this.index++;
+	}
+};
+//#endregion
+//#region \0@oxc-project+runtime@0.126.0/helpers/decorateMetadata.js
+function __decorateMetadata(k, v) {
+	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.126.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/providers/navigator.ts
+var Navigator = class {
+	constructor(baseUrl) {
+		this.baseUrl = baseUrl;
+	}
+};
+function formatUrl(pathname, urlFormatParams) {
+	pathname = pathname.replace(/\/+/g, "/");
+	const { queryParams, fragment } = urlFormatParams;
+	return pathname + (queryParams ? "?" + formatQueryParams(queryParams) : "") + (fragment ? "#" + fragment : "");
+}
+function formatQueryParams(queryParams) {
+	const params = [];
+	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("&");
+}
+var BrowserNavigator = class BrowserNavigator extends Navigator {
+	onUrlChanged;
+	/** 挂载在 location 上的路径前缀；'' 或 '/' 表示站点根，不做剥离 */
+	get basePathPrefix() {
+		return this.baseUrl === "/" || this.baseUrl === "" ? "" : this.baseUrl;
+	}
+	get pathname() {
+		const pathname = location.pathname;
+		if (!this.basePathPrefix) return pathname;
+		return pathname.startsWith(this.basePathPrefix) ? pathname.substring(this.basePathPrefix.length) : pathname;
+	}
+	urlParser = new UrlParser();
+	urlTree = this.getUrlTree();
+	urlChangeEvent = new _tanbo_stream.Subject();
+	subscription = new _tanbo_stream.Subscription();
+	constructor(baseUrl, hooks = {}) {
+		super(baseUrl);
+		this.hooks = hooks;
+		this.onUrlChanged = this.urlChangeEvent.asObservable();
+		this.subscription.add((0, _tanbo_stream.fromEvent)(window, "popstate").subscribe(() => {
+			this.urlTree = this.getUrlTree();
+			this.urlChangeEvent.next();
+		}));
+		if (this.basePathPrefix && !location.pathname.startsWith(this.basePathPrefix)) history.replaceState(null, "", this.baseUrl);
+	}
+	to(pathName, relative, queryParams, fragment) {
+		const url = this.join(pathName, relative, queryParams, fragment);
+		if (location.origin + url === location.href) return true;
+		this.runHooks({
+			pathname: this.pathname,
+			queryParams: this.urlTree.queryParams,
+			fragment: this.urlTree.hash
+		}, {
+			pathname: pathName,
+			queryParams: queryParams || {},
+			fragment: fragment || null
+		}, () => {
+			history.pushState(null, "", url);
+			this.urlTree = this.getUrlTree();
+			this.urlChangeEvent.next();
+		});
+		return true;
+	}
+	replace(pathName, relative, queryParams, fragment) {
+		const url = this.join(pathName, relative, queryParams, fragment);
+		if (location.origin + url === location.href) return true;
+		this.runHooks({
+			pathname: this.pathname,
+			queryParams: this.urlTree.queryParams,
+			fragment: this.urlTree.hash
+		}, {
+			pathname: pathName,
+			queryParams: queryParams || {},
+			fragment: fragment || null
+		}, () => {
+			history.replaceState(null, "", url);
+			this.urlTree = this.getUrlTree();
+			this.urlChangeEvent.next();
+		});
+		return true;
+	}
+	join(pathname, relative, queryParams, fragment) {
+		if (pathname.startsWith("/")) return formatUrl(this.baseUrl + pathname, {
+			queryParams,
+			fragment
+		});
+		const beforePath = this.urlTree.paths.slice(0, relative.deep);
+		while (true) {
+			if (pathname.startsWith("./")) {
+				pathname = pathname.substring(2);
+				continue;
+			}
+			if (pathname.startsWith("../")) {
+				pathname = pathname.substring(3);
+				beforePath.pop();
+				continue;
+			}
+			break;
+		}
+		return formatUrl(this.baseUrl + "/" + beforePath.join("/") + "/" + pathname, {
+			queryParams,
+			fragment
+		});
+	}
+	back() {
+		history.back();
+	}
+	forward() {
+		history.forward();
+	}
+	go(offset) {
+		history.go(offset);
+	}
+	destroy() {
+		this.subscription.unsubscribe();
+	}
+	runHooks(beforeParams, currentParams, next) {
+		if (typeof this.hooks.beforeEach === "function") this.hooks.beforeEach?.(beforeParams, currentParams, () => {
+			next();
+			this.hooks.afterEach?.(currentParams);
+		});
+		else {
+			next();
+			this.hooks.afterEach?.(currentParams);
+		}
+	}
+	getUrlTree() {
+		return this.urlParser.parse(this.pathname + location.search + location.hash);
+	}
+};
+BrowserNavigator = __decorate([(0, _viewfly_core.Injectable)(), __decorateMetadata("design:paramtypes", [String, Object])], BrowserNavigator);
+//#endregion
+//#region src/hooks/use-query-params.ts
+function useQueryParams() {
+	const router = (0, _viewfly_core.inject)(Router);
+	const navigator = (0, _viewfly_core.inject)(Navigator);
+	const params = { ...navigator.urlTree.queryParams };
+	const queryParams = new Proxy(params, _viewfly_core.readonlyProxyHandler);
+	const subscription = router.onRefresh.subscribe(() => {
+		(0, _viewfly_core.comparePropsWithCallbacks)(params, navigator.urlTree.queryParams, (key) => {
+			(0, _viewfly_core.internalWrite)(() => {
+				Reflect.deleteProperty(params, key);
+			});
+		}, (key, value) => {
+			(0, _viewfly_core.internalWrite)(() => {
+				params[key] = value;
+			});
+		}, (key, value) => {
+			(0, _viewfly_core.internalWrite)(() => {
+				params[key] = value;
+			});
+		});
+	});
+	(0, _viewfly_core.onUnmounted)(() => {
+		subscription.unsubscribe();
+	});
+	return queryParams;
+}
+//#endregion
+//#region src/link.tsx
+function Link(props) {
+	const navigator = (0, _viewfly_core.inject)(Navigator);
+	const router = (0, _viewfly_core.inject)(Router);
+	function getActive() {
+		return props.exact ? navigator.pathname === navigator.join(props.to, router) || navigator.pathname + "/" === navigator.join(props.to, router) : navigator.pathname.startsWith(navigator.join(props.to, router));
+	}
+	const isActive = (0, _viewfly_core.reactive)({ value: getActive() });
+	const subscription = navigator.onUrlChanged.subscribe(() => {
+		isActive.value = getActive();
+	});
+	(0, _viewfly_core.onUnmounted)(() => {
+		subscription.unsubscribe();
+	});
+	function navigate(ev) {
+		if ((!props.tag || props.tag === "a") && props.target === "_blank") return;
+		ev.preventDefault();
+		router.navigateTo(props.to, props.queryParams, props.fragment);
+	}
+	return () => {
+		const Tag = props.tag || "a";
+		const attrs = Object.assign({}, props, {
+			onClick(ev) {
+				navigate(ev);
+				props.onClick?.(ev);
+			},
+			...props
+		});
+		if (Tag === "a") attrs.href = navigator.join(props.to, router, props.queryParams, props.fragment);
+		if (isActive.value && props.active) attrs.class = [attrs.class, props.active];
+		return /* @__PURE__ */ (0, _viewfly_core.jsx)(Tag, {
+			...attrs,
+			children: props.children
+		});
+	};
+}
+//#endregion
+//#region src/router-module.ts
+var RouterModule = class {
+	subscription = new _tanbo_stream.Subscription();
+	navigator;
+	constructor(baseUrl = "", hooks = {}) {
+		this.baseUrl = baseUrl;
+		this.navigator = new BrowserNavigator(this.baseUrl, hooks);
+	}
+	setup(app) {
+		const navigator = this.navigator;
+		const router = new Router(navigator, null);
+		this.subscription.add(navigator.onUrlChanged.subscribe(() => {
+			router.refresh();
+		}));
+		app.provide([{
+			provide: Navigator,
+			useValue: navigator
+		}, {
+			provide: Router,
+			useValue: router
+		}]);
+	}
+	onDestroy() {
+		this.subscription.unsubscribe();
+		this.navigator.destroy();
+	}
+};
+//#endregion
+//#region src/router-outlet.tsx
+var routerErrorFn = (0, _viewfly_core.makeError)("RouterOutlet");
+function RouterOutlet(props) {
+	const router = (0, _viewfly_core.inject)(Router, null);
+	if (router === null) throw routerErrorFn("cannot found parent Router.");
+	const childRouter = new Router((0, _viewfly_core.inject)(Navigator), router);
+	const Context = (0, _viewfly_core.createContext)([{
+		provide: Router,
+		useValue: childRouter
+	}]);
+	const children = (0, _viewfly_core.shallowReactive)({ value: null });
+	const subscription = router.onRefresh.subscribe(() => {
+		updateChildren();
+	});
+	(0, _viewfly_core.onUnmounted)(() => {
+		subscription.unsubscribe();
+	});
+	let currentComponent = null;
+	async function updateChildren() {
+		const routeConfig = router.consumeConfig(props.config);
+		if (!routeConfig) {
+			currentComponent = null;
+			children.value = props.children || null;
+			return;
+		}
+		if (typeof routeConfig.beforeEach === "function") {
+			if (!await routeConfig.beforeEach()) return;
+		}
+		if (routeConfig.component) _updateChildren(routeConfig.component);
+		else if (routeConfig.asyncComponent) _updateChildren(await routeConfig.asyncComponent());
+		if (typeof routeConfig.afterEach === "function") routeConfig.afterEach();
+	}
+	function _updateChildren(Component) {
+		childRouter.refresh();
+		if (Component !== currentComponent) children.value = /* @__PURE__ */ (0, _viewfly_core.jsx)(Component, {});
+		currentComponent = Component;
+	}
+	updateChildren();
+	return () => {
+		return /* @__PURE__ */ (0, _viewfly_core.jsx)(Context, { children: children.value });
+	};
+}
+//#endregion
+Object.defineProperty(exports, "BrowserNavigator", {
+	enumerable: true,
+	get: function() {
+		return BrowserNavigator;
+	}
+});
+exports.Link = Link;
+exports.Navigator = Navigator;
+exports.Router = Router;
+exports.RouterModule = RouterModule;
+exports.RouterOutlet = RouterOutlet;
+exports.UrlParser = UrlParser;
+exports.formatQueryParams = formatQueryParams;
+exports.formatUrl = formatUrl;
+exports.useQueryParams = useQueryParams;

package/dist/link.d.ts

@@ -0,0 +1,12 @@
+import { Props } from '@viewfly/core';
+import { QueryParams } from './providers/_api';
+export interface LinkProps extends Props {
+    to: string;
+    active?: string;
+    exact?: boolean;
+    queryParams?: QueryParams;
+    fragment?: string;
+    tag?: string;
+    [key: string]: any;
+}
+export declare function Link(props: LinkProps): () => import("@viewfly/core").JSX.Element;

package/dist/providers/_api.d.ts

@@ -0,0 +1,3 @@
+export * from './navigator';
+export * from './router';
+export * from './url-parser';

package/dist/providers/navigator.d.ts

@@ -0,0 +1,56 @@
+import { Observable } from '@tanbo/stream';
+import { Router } from './router';
+import { UrlTree } from './url-parser';
+export interface QueryParams {
+    [key: string]: string | string[];
+}
+export declare abstract class Navigator {
+    baseUrl: string;
+    abstract urlTree: UrlTree;
+    protected constructor(baseUrl: string);
+    abstract onUrlChanged: Observable<void>;
+    abstract get pathname(): 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 interface UrlFormatParams {
+    queryParams?: QueryParams;
+    fragment?: string;
+}
+export declare function formatUrl(pathname: string, urlFormatParams: UrlFormatParams): string;
+export declare function formatQueryParams(queryParams: QueryParams): string;
+export interface NavigatorParams {
+    pathname: string;
+    queryParams: QueryParams;
+    fragment: string | null;
+}
+export interface NavigatorHooks {
+    beforeEach?(currentParams: NavigatorParams, nextParams: NavigatorParams, next: () => void): void;
+    afterEach?(params: NavigatorParams): void;
+}
+export declare class BrowserNavigator extends Navigator {
+    private hooks;
+    onUrlChanged: Observable<void>;
+    /** 挂载在 location 上的路径前缀；'' 或 '/' 表示站点根，不做剥离 */
+    private get basePathPrefix();
+    get pathname(): string;
+    private urlParser;
+    urlTree: UrlTree;
+    private urlChangeEvent;
+    private subscription;
+    constructor(baseUrl: string, hooks?: NavigatorHooks);
+    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;
+    destroy(): void;
+    private runHooks;
+    private getUrlTree;
+}

package/dist/providers/router.d.ts

@@ -0,0 +1,28 @@
+import { Observable } from '@tanbo/stream';
+import { ComponentSetup } from '@viewfly/core';
+import { Navigator, NavigatorParams, QueryParams } from './navigator';
+export interface RouteConfig {
+    path: string;
+    component?: ComponentSetup;
+    asyncComponent?: () => Promise<ComponentSetup>;
+    beforeEach?(): boolean | Promise<boolean>;
+    afterEach?(): void;
+    redirectTo?: string | ((path: string) => string | NavigatorParams);
+}
+export declare class Router {
+    private navigator;
+    parent: Router | null;
+    onRefresh: Observable<void>;
+    get deep(): number;
+    get path(): string;
+    private refreshEvent;
+    constructor(navigator: Navigator, parent: Router | null);
+    navigateTo(path: string, params?: QueryParams, fragment?: string | null): void;
+    replaceTo(path: string, params?: QueryParams): void;
+    refresh(): void;
+    consumeConfig(routes: RouteConfig[]): RouteConfig | null;
+    back(): void;
+    forward(): void;
+    go(offset: number): void;
+    private matchRoute;
+}

package/dist/providers/url-parser.d.ts

@@ -0,0 +1,38 @@
+export interface UrlRelativePath {
+    type: 'toParent';
+}
+export interface UrlChildPath {
+    type: 'toChild';
+    value: string;
+}
+export interface UrlQuery {
+    type: 'query';
+    params: UrlQueryParams;
+}
+export interface UrlQueryParams {
+    [key: string]: string | string[];
+}
+export interface UrlHash {
+    type: 'hash';
+    value: string;
+}
+export type UrlToken = UrlRelativePath | UrlChildPath | UrlQuery | UrlHash;
+export interface UrlTree {
+    paths: string[];
+    queryParams: UrlQueryParams;
+    hash: string | null;
+}
+export declare class UrlParser {
+    private index;
+    private url;
+    private tokens;
+    parse(url: string): UrlTree;
+    private readHash;
+    private readQuery;
+    private readQueryValue;
+    private readQueryKey;
+    private readPath;
+    private not;
+    private peek;
+    private ignore;
+}

package/dist/router-module.d.ts

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

package/dist/router-outlet.d.ts

@@ -0,0 +1,6 @@
+import { Props } from '@viewfly/core';
+import { RouteConfig } from './providers/_api';
+export interface RouterOutletProps extends Props {
+    config: RouteConfig[];
+}
+export declare function RouterOutlet(props: RouterOutletProps): () => import("@viewfly/core").JSX.Element;