@viewfly/router 2.0.0-alpha.1 → 2.0.0-alpha.4

package/bundles/index.esm.js

@@ -1,6 +1,107 @@
-import { jsx } from '@viewfly/core/jsx-runtime';
-import { Injectable, inject, createSignal, onUnmounted, makeError, createContext } from '@viewfly/core';
+import { makeError, Injectable, inject, readonlyProxyHandler, comparePropsWithCallbacks, internalWrite, onUnmounted, reactive, createContext, shallowReactive } from '@viewfly/core';
 import { Subject, Subscription, fromEvent } from '@tanbo/stream';
+import { jsx } from '@viewfly/core/jsx-runtime';
+
+const routerErrorFn$1 = makeError('Router');
+class Router {
+    get deep() {
+        return this.parent ? this.parent.deep + 1 : 0;
+    }
+    get path() {
+        return this.navigator.urlTree.paths.at(this.deep) || '';
+    }
+    constructor(navigator, parent) {
+        Object.defineProperty(this, "navigator", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: navigator
+        });
+        Object.defineProperty(this, "parent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: parent
+        });
+        Object.defineProperty(this, "onRefresh", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "refreshEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        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;
+    }
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -30,11 +131,187 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+class UrlParser {
+    constructor() {
+        Object.defineProperty(this, "index", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "url", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "tokens", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+    }
+    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++;
+        }
+    }
+}
+
 class Navigator {
     constructor(baseUrl) {
         Object.defineProperty(this, "baseUrl", {
@@ -67,16 +344,35 @@ function formatQueryParams(queryParams) {
 }
 let BrowserNavigator = class BrowserNavigator extends Navigator {
     get pathname() {
-        return location.pathname;
+        const pathname = location.pathname;
+        return pathname.startsWith(this.baseUrl) ? pathname.substring(this.baseUrl.length) : pathname;
     }
-    constructor(baseUrl) {
+    constructor(baseUrl, hooks = {}) {
         super(baseUrl);
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: hooks
+        });
         Object.defineProperty(this, "onUrlChanged", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "urlParser", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new UrlParser()
+        });
+        Object.defineProperty(this, "urlTree", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.getUrlTree()
+        });
         Object.defineProperty(this, "urlChangeEvent", {
             enumerable: true,
             configurable: true,
@@ -91,6 +387,7 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
         });
         this.onUrlChanged = this.urlChangeEvent.asObservable();
         this.subscription.add(fromEvent(window, 'popstate').subscribe(() => {
+            this.urlTree = this.getUrlTree();
             this.urlChangeEvent.next();
         }));
         if (!this.pathname.startsWith(this.baseUrl)) {
@@ -102,8 +399,19 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
         if (location.origin + url === location.href) {
             return true;
         }
-        history.pushState(null, '', url);
-        this.urlChangeEvent.next();
+        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) {
@@ -111,15 +419,26 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
         if (location.origin + url === location.href) {
             return true;
         }
-        history.replaceState(null, '', url);
-        this.urlChangeEvent.next();
+        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 });
         }
-        let beforePath = relative.beforePath;
+        const beforePath = this.urlTree.paths.slice(0, relative.deep);
         while (true) {
             if (pathname.startsWith('./')) {
                 pathname = pathname.substring(2);
@@ -127,21 +446,12 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
             }
             if (pathname.startsWith('../')) {
                 pathname = pathname.substring(3);
-                if (relative.parent) {
-                    beforePath = relative.parent.beforePath;
-                    relative = relative.parent;
-                }
-                else {
-                    beforePath = '';
-                }
-                if (!beforePath) {
-                    break;
-                }
+                beforePath.pop();
                 continue;
             }
             break;
         }
-        return formatUrl(this.baseUrl + '/' + beforePath + '/' + pathname, { queryParams, fragment });
+        return formatUrl(this.baseUrl + '/' + beforePath.join('/') + '/' + pathname, { queryParams, fragment });
     }
     back() {
         history.back();
@@ -155,124 +465,53 @@ let BrowserNavigator = class BrowserNavigator extends Navigator {
     destroy() {
         this.subscription.unsubscribe();
     }
+    runHooks(beforeParams, currentParams, next) {
+        var _a, _b, _c, _d;
+        if (typeof this.hooks.beforeEach === 'function') {
+            (_b = (_a = this.hooks).beforeEach) === null || _b === void 0 ? void 0 : _b.call(_a, beforeParams, currentParams, () => {
+                var _a, _b;
+                next();
+                (_b = (_a = this.hooks).afterEach) === null || _b === void 0 ? void 0 : _b.call(_a, currentParams);
+            });
+        }
+        else {
+            next();
+            (_d = (_c = this.hooks).afterEach) === null || _d === void 0 ? void 0 : _d.call(_c, currentParams);
+        }
+    }
+    getUrlTree() {
+        return this.urlParser.parse(this.pathname + location.search + location.hash);
+    }
 };
 BrowserNavigator = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [String])
+    __metadata("design:paramtypes", [String, Object])
 ], BrowserNavigator);
 
-class Router {
-    get pathname() {
-        if (this.parent) {
-            const name = this.parent.path.match(/[^\/?#]+/);
-            if (name) {
-                return name[0];
-            }
-        }
-        return '';
-    }
-    get beforePath() {
-        if (this.parent) {
-            return this.parent.beforePath + '/' + this.pathname;
-        }
-        return '';
-    }
-    constructor(navigator, parent, path) {
-        Object.defineProperty(this, "navigator", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: navigator
-        });
-        Object.defineProperty(this, "parent", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: parent
-        });
-        Object.defineProperty(this, "path", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: path
-        });
-        Object.defineProperty(this, "onRefresh", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "refreshEvent", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Subject()
+function useQueryParams() {
+    const router = inject(Router);
+    const navigator = inject(Navigator);
+    const params = Object.assign({}, navigator.urlTree.queryParams);
+    const queryParams = new Proxy(params, readonlyProxyHandler);
+    const subscription = router.onRefresh.subscribe(() => {
+        comparePropsWithCallbacks(params, navigator.urlTree.queryParams, key => {
+            internalWrite(() => {
+                Reflect.deleteProperty(params, key);
+            });
+        }, (key, value) => {
+            internalWrite(() => {
+                params[key] = value;
+            });
+        }, (key, value) => {
+            internalWrite(() => {
+                params[key] = value;
+            });
         });
-        this.onRefresh = this.refreshEvent.asObservable();
-    }
-    navigateTo(path, params, fragment) {
-        this.navigator.to(path, this, params, fragment);
-    }
-    replaceTo(path, params) {
-        this.navigator.replace(path, this, params);
-    }
-    refresh(path) {
-        this.path = path;
-        this.refreshEvent.next();
-    }
-    consumeConfig(routes) {
-        const routeConfig = this.matchRoute(routes);
-        if (!routeConfig) {
-            return null;
-        }
-        let remainingPath = '';
-        if (routeConfig.path === '') {
-            remainingPath = this.path;
-        }
-        else if (routeConfig.path === '*') {
-            remainingPath = '';
-        }
-        else {
-            remainingPath = this.path.substring(routeConfig.path.length + 1);
-        }
-        return {
-            remainingPath,
-            routeConfig
-        };
-    }
-    back() {
-        this.navigator.back();
-    }
-    forward() {
-        this.navigator.forward();
-    }
-    go(offset) {
-        this.navigator.go(offset);
-    }
-    matchRoute(configs) {
-        var _a;
-        let matchedConfig = null;
-        let defaultConfig = null;
-        let fallbackConfig = null;
-        const pathname = ((_a = (this.path || '').match(/[^\/?#]+/)) === null || _a === void 0 ? void 0 : _a[0]) || '';
-        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;
-                }
-            }
-        }
-        return matchedConfig || defaultConfig || fallbackConfig;
-    }
+    });
+    onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    return queryParams;
 }
 
 function Link(props) {
@@ -284,9 +523,11 @@ function Link(props) {
                 (navigator.pathname + '/') === navigator.join(props.to, router)) :
             navigator.pathname.startsWith(navigator.join(props.to, router));
     }
-    const isActive = createSignal(getActive());
+    const isActive = reactive({
+        value: getActive()
+    });
     const subscription = navigator.onUrlChanged.subscribe(() => {
-        isActive.set(getActive());
+        isActive.value = getActive();
     });
     onUnmounted(() => {
         subscription.unsubscribe();
@@ -308,65 +549,15 @@ function Link(props) {
         if (Tag === 'a') {
             attrs.href = navigator.join(props.to, router, props.queryParams, props.fragment);
         }
-        if (isActive() && props.active) {
+        if (isActive.value && props.active) {
             attrs.class = [attrs.class, props.active];
         }
         return jsx(Tag, Object.assign({}, attrs, { children: props.children }));
     };
 }
 
-const routerErrorFn = makeError('RouterOutlet');
-function RouterOutlet(props) {
-    const router = inject(Router, null);
-    if (router === null) {
-        throw routerErrorFn('cannot found parent Router.');
-    }
-    const navigator = inject(Navigator);
-    const childRouter = new Router(navigator, router, '');
-    const Context = createContext([{
-            provide: Router,
-            useValue: childRouter
-        }]);
-    const children = createSignal(null);
-    const subscription = router.onRefresh.subscribe(() => {
-        updateChildren();
-    });
-    onUnmounted(() => {
-        subscription.unsubscribe();
-    });
-    let currentComponent = null;
-    function updateChildren() {
-        const result = router.consumeConfig(props.config);
-        if (!result) {
-            currentComponent = null;
-            children.set(props.children || null);
-            return;
-        }
-        const { routeConfig, remainingPath } = result;
-        if (routeConfig.component) {
-            _updateChildren(routeConfig.component, remainingPath);
-        }
-        else if (routeConfig.asyncComponent) {
-            routeConfig.asyncComponent().then(c => {
-                _updateChildren(c, remainingPath);
-            });
-        }
-    }
-    function _updateChildren(Component, remainingPath) {
-        childRouter.refresh(remainingPath);
-        if (Component !== currentComponent) {
-            children.set(jsx(Component, {}));
-        }
-        currentComponent = Component;
-    }
-    updateChildren();
-    return () => {
-        return jsx(Context, { children: children() });
-    };
-}
-
 class RouterModule {
-    constructor(baseUrl = '') {
+    constructor(baseUrl = '', hooks = {}) {
         Object.defineProperty(this, "baseUrl", {
             enumerable: true,
             configurable: true,
@@ -385,18 +576,13 @@ class RouterModule {
             writable: true,
             value: void 0
         });
-        this.navigator = new BrowserNavigator(this.baseUrl);
+        this.navigator = new BrowserNavigator(this.baseUrl, hooks);
     }
     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());
+        const router = new Router(navigator, null);
         this.subscription.add(navigator.onUrlChanged.subscribe(() => {
-            router.refresh(getPath());
+            router.refresh();
         }));
         app.provide([
             {
@@ -415,4 +601,65 @@ class RouterModule {
     }
 }
 
-export { BrowserNavigator, Link, Navigator, Router, RouterModule, RouterOutlet, formatQueryParams, formatUrl };
+const routerErrorFn = makeError('RouterOutlet');
+function RouterOutlet(props) {
+    const router = inject(Router, null);
+    if (router === null) {
+        throw routerErrorFn('cannot found parent Router.');
+    }
+    const navigator = inject(Navigator);
+    const childRouter = new Router(navigator, router);
+    const Context = createContext([{
+            provide: Router,
+            useValue: childRouter
+        }]);
+    const children = shallowReactive({
+        value: null
+    });
+    const subscription = router.onRefresh.subscribe(() => {
+        updateChildren();
+    });
+    onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    let currentComponent = null;
+    function updateChildren() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const routeConfig = router.consumeConfig(props.config);
+            if (!routeConfig) {
+                currentComponent = null;
+                children.value = props.children || null;
+                return;
+            }
+            if (typeof routeConfig.beforeEach === 'function') {
+                const is = yield routeConfig.beforeEach();
+                if (!is) {
+                    return;
+                }
+            }
+            if (routeConfig.component) {
+                _updateChildren(routeConfig.component);
+            }
+            else if (routeConfig.asyncComponent) {
+                const c = yield routeConfig.asyncComponent();
+                _updateChildren(c);
+            }
+            if (typeof routeConfig.afterEach === 'function') {
+                routeConfig.afterEach();
+            }
+        });
+    }
+    function _updateChildren(Component) {
+        childRouter.refresh();
+        if (Component !== currentComponent) {
+            children.value = jsx(Component, {});
+        }
+        currentComponent = Component;
+    }
+    updateChildren();
+    return () => {
+        return jsx(Context, { children: children.value });
+    };
+}
+
+export { BrowserNavigator, Link, Navigator, Router, RouterModule, RouterOutlet, UrlParser, formatQueryParams, formatUrl, useQueryParams };