mobx-route 0.15.0 → 0.16.1

package/README.md

@@ -2,13 +2,12 @@
 
 # mobx-route  
 
-[![NPM version][npm-image]][npm-url] [![test status][github-test-actions-image]][github-actions-url] [![build status][github-build-actions-image]][github-actions-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
+[![NPM version][npm-image]][npm-url] [![build status][github-build-actions-image]][github-actions-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
 
 [npm-image]: http://img.shields.io/npm/v/mobx-route.svg
 [npm-url]: http://npmjs.org/package/mobx-route
-[github-build-actions-image]: https://github.com/js2me/mobx-route/workflows/Build/badge.svg
-[github-test-actions-image]: https://github.com/js2me/mobx-route/workflows/Test/badge.svg
+[github-build-actions-image]: https://github.com/js2me/mobx-route/workflows/Builds,%20tests%20&%20co/badge.svg
 [github-actions-url]: https://github.com/js2me/mobx-route/actions
 [download-image]: https://img.shields.io/npm/dm/mobx-route.svg
 [download-url]: https://npmjs.org/package/mobx-route
@@ -16,11 +15,10 @@
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/mobx-route
 
 
+🚀 Simple and lightweight typed MobX router 🚀    
 _Uses [`path-to-regexp` power](https://www.npmjs.com/package/path-to-regexp)_  
 
-
-## WIP  
-## Documentation is [here](https://js2me.github.io/mobx-route)  
+### [Read the docs →](https://js2me.github.io/mobx-route/)  
 
 
 ```ts
@@ -28,7 +26,7 @@ import { Route } from "mobx-route";
 
 const userDetails = new Route("/users/:id");
 
-userDetails.open({ id: 1 }); // path params are required
+await userDetails.open({ id: 1 }); // path params are required
 
 userDetails.isOpened; // true;
 ```

package/core/config/config.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.routeConfig = void 0;
+const mobx_location_history_1 = require("mobx-location-history");
+const complex_1 = require("yummies/complex");
+let localHistory;
+let localQueryParams;
+exports.routeConfig = (0, complex_1.createGlobalDynamicConfig)((update) => {
+    if (localHistory && update?.history && (0, mobx_location_history_1.isObservableHistory)(localHistory)) {
+        localHistory.destroy();
+    }
+    let history;
+    if (update?.history) {
+        history = update.history;
+    }
+    else {
+        history = localHistory = (0, mobx_location_history_1.createBrowserHistory)();
+    }
+    let queryParams;
+    if (update?.history && !update.queryParams) {
+        if (localQueryParams) {
+            localQueryParams.destroy();
+        }
+        queryParams = localQueryParams = new mobx_location_history_1.QueryParams({ history });
+    }
+    else {
+        if (localQueryParams && update?.queryParams) {
+            localQueryParams.destroy();
+        }
+        if (update?.queryParams) {
+            queryParams = update.queryParams;
+        }
+        else {
+            queryParams = localQueryParams = new mobx_location_history_1.QueryParams({ history });
+        }
+    }
+    return {
+        ...update,
+        history,
+        location,
+        queryParams,
+    };
+});

package/core/config/config.d.cts

@@ -0,0 +1,7 @@
+import type { RouteGlobalConfig } from "./config.types.cjs";
+export declare const routeConfig: {
+    get: () => RouteGlobalConfig;
+    set: (value: RouteGlobalConfig | null | undefined) => RouteGlobalConfig | null | undefined;
+    update: (value: Partial<RouteGlobalConfig>) => void;
+};
+//# sourceMappingURL=config.d.ts.map

package/core/config/config.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/core/config/config.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,2BAA0B;AAK3D,eAAO,MAAM,WAAW;;;;CAuCvB,CAAC"}

package/core/config/config.d.ts

@@ -1,4 +1,4 @@
-import type { RouteGlobalConfig } from './config.types.js';
+import type { RouteGlobalConfig } from "./config.types.js";
 export declare const routeConfig: {
     get: () => RouteGlobalConfig;
     set: (value: RouteGlobalConfig | null | undefined) => RouteGlobalConfig | null | undefined;

package/core/config/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/core/config/config.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAK3D,eAAO,MAAM,WAAW;;;;CAuCvB,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/core/config/config.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,0BAA0B;AAK3D,eAAO,MAAM,WAAW;;;;CAuCvB,CAAC"}

package/core/config/config.types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/core/config/config.types.d.cts

@@ -0,0 +1,11 @@
+import type { History, IQueryParams } from 'mobx-location-history';
+import type { UrlCreateParamsFn } from "../route/route.types.cjs";
+export interface RouteGlobalConfig {
+    history: History;
+    queryParams: IQueryParams;
+    baseUrl?: string;
+    mergeQuery?: boolean;
+    createUrl?: UrlCreateParamsFn;
+    formatLinkHref?: (href: string) => string;
+}
+//# sourceMappingURL=config.types.d.ts.map

package/core/config/config.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.types.d.ts","sourceRoot":"","sources":["../../../src/core/config/config.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAAgC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C"}

package/core/config/config.types.d.ts

@@ -1,5 +1,5 @@
 import type { History, IQueryParams } from 'mobx-location-history';
-import type { UrlCreateParamsFn } from '../route/route.types.js';
+import type { UrlCreateParamsFn } from "../route/route.types.js";
 export interface RouteGlobalConfig {
     history: History;
     queryParams: IQueryParams;

package/core/config/config.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.types.d.ts","sourceRoot":"","sources":["../../../src/core/config/config.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C"}
+{"version":3,"file":"config.types.d.ts","sourceRoot":"","sources":["../../../src/core/config/config.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gCAAgC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C"}

package/core/config/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./config.cjs"), exports);
+__exportStar(require("./config.types.cjs"), exports);

package/core/config/index.d.cts

@@ -0,0 +1,3 @@
+export * from "./config.cjs";
+export * from "./config.types.cjs";
+//# sourceMappingURL=index.d.ts.map

package/core/config/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/config/index.ts"],"names":[],"mappings":"AAAA,6BAA4B;AAC5B,mCAAkC"}

package/core/config/index.d.ts

@@ -1,3 +1,3 @@
-export * from './config.js';
-export * from './config.types.js';
+export * from "./config.js";
+export * from "./config.types.js";
 //# sourceMappingURL=index.d.ts.map

package/core/config/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/config/index.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,kCAAkC"}

package/core/config/index.js

@@ -1,2 +1,2 @@
-export * from './config.js';
-export * from './config.types.js';
+export * from "./config.js";
+export * from "./config.types.js";

package/core/index.cjs

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./config/index.cjs"), exports);
+__exportStar(require("./route/index.cjs"), exports);
+__exportStar(require("./route-group/index.cjs"), exports);
+__exportStar(require("./router/index.cjs"), exports);
+__exportStar(require("./virtual-route/index.cjs"), exports);

package/core/index.d.cts

@@ -0,0 +1,6 @@
+export * from "./config/index.cjs";
+export * from "./route/index.cjs";
+export * from "./route-group/index.cjs";
+export * from "./router/index.cjs";
+export * from "./virtual-route/index.cjs";
+//# sourceMappingURL=index.d.ts.map

package/core/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,mCAAkC;AAClC,kCAAiC;AACjC,wCAAuC;AACvC,mCAAkC;AAClC,0CAAyC"}

package/core/index.d.ts

@@ -1,6 +1,6 @@
-export * from './config/index.js';
-export * from './route/index.js';
-export * from './route-group/index.js';
-export * from './router/index.js';
-export * from './virtual-route/index.js';
+export * from "./config/index.js";
+export * from "./route/index.js";
+export * from "./route-group/index.js";
+export * from "./router/index.js";
+export * from "./virtual-route/index.js";
 //# sourceMappingURL=index.d.ts.map

package/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,iCAAiC;AACjC,uCAAuC;AACvC,kCAAkC;AAClC,yCAAyC"}

package/core/index.js

@@ -1,5 +1,5 @@
-export * from './config/index.js';
-export * from './route/index.js';
-export * from './route-group/index.js';
-export * from './router/index.js';
-export * from './virtual-route/index.js';
+export * from "./config/index.js";
+export * from "./route/index.js";
+export * from "./route-group/index.js";
+export * from "./router/index.js";
+export * from "./virtual-route/index.js";

package/core/route/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./route.cjs"), exports);
+__exportStar(require("./route.types.cjs"), exports);

package/core/route/index.d.cts

@@ -0,0 +1,3 @@
+export * from "./route.cjs";
+export * from "./route.types.cjs";
+//# sourceMappingURL=index.d.ts.map

package/core/route/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/route/index.ts"],"names":[],"mappings":"AAAA,4BAA2B;AAC3B,kCAAiC"}

package/core/route/index.d.ts

@@ -1,3 +1,3 @@
-export * from './route.js';
-export * from './route.types.js';
+export * from "./route.js";
+export * from "./route.types.js";
 //# sourceMappingURL=index.d.ts.map

package/core/route/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/route/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/route/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,iCAAiC"}

package/core/route/index.js

@@ -1,2 +1,2 @@
-export * from './route.js';
-export * from './route.types.js';
+export * from "./route.js";
+export * from "./route.types.js";

package/core/route/route.cjs

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRoute = exports.Route = void 0;
+const linked_abort_controller_1 = require("linked-abort-controller");
+const mobx_1 = require("mobx");
+const mobx_location_history_1 = require("mobx-location-history");
+const path_to_regexp_1 = require("path-to-regexp");
+const config_js_1 = require("../config/config.cjs");
+/**
+ * Class for creating path based route.
+ *
+ * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html)
+ */
+class Route {
+    path;
+    config;
+    abortController;
+    history;
+    parent;
+    query;
+    _tokenData;
+    _matcher;
+    _compiler;
+    reactionDisposer;
+    meta;
+    /**
+     * Indicates if this route is an index route. Index routes activate when parent route path matches exactly.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#isindex-boolean)
+     */
+    isIndex;
+    /**
+     * Indicates if this route is an hash route.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#ishash-boolean)
+     */
+    isHash;
+    children = [];
+    constructor(path, config = {}) {
+        this.path = path;
+        this.config = config;
+        this.abortController = new linked_abort_controller_1.LinkedAbortController(config.abortSignal);
+        this.history = config.history ?? config_js_1.routeConfig.get().history;
+        this.query = config.queryParams ?? config_js_1.routeConfig.get().queryParams;
+        this.isIndex = !!this.config.index;
+        this.isHash = !!this.config.hash;
+        this.meta = this.config.meta;
+        this.parent = config.parent ?? null;
+        mobx_1.computed.struct(this, 'isOpened');
+        mobx_1.computed.struct(this, 'data');
+        mobx_1.computed.struct(this, 'params');
+        mobx_1.computed.struct(this, 'currentPath');
+        mobx_1.computed.struct(this, 'hasOpenedChildren');
+        mobx_1.computed.struct(this, 'isAbleToMergeQuery');
+        (0, mobx_1.computed)(this, 'baseUrl');
+        (0, mobx_1.observable)(this, 'children');
+        mobx_1.observable.ref(this, 'parent');
+        (0, mobx_1.action)(this, 'addChildren');
+        (0, mobx_1.action)(this, 'removeChildren');
+        (0, mobx_1.makeObservable)(this);
+        (0, mobx_1.onBecomeObserved)(this, 'isOpened', () => {
+            if (!config.afterOpen && !config.afterClose) {
+                return;
+            }
+            this.reactionDisposer = (0, mobx_1.reaction)(() => this.isOpened, this.processOpenedState, {
+                signal: this.abortController.signal,
+                fireImmediately: true,
+            });
+        });
+        (0, mobx_1.onBecomeUnobserved)(this, 'isOpened', () => {
+            this.reactionDisposer?.();
+            this.reactionDisposer = undefined;
+        });
+    }
+    get baseUrl() {
+        const baseUrl = this.config.baseUrl ?? config_js_1.routeConfig.get().baseUrl;
+        return baseUrl?.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    }
+    get parsedPathData() {
+        let pathnameToCheck;
+        if (this.isHash) {
+            pathnameToCheck = this.history.location.hash.slice(1);
+        }
+        else {
+            pathnameToCheck = this.history.location.pathname;
+        }
+        if (this.baseUrl) {
+            if (!this.history.location.pathname.startsWith(this.baseUrl)) {
+                return null;
+            }
+            pathnameToCheck = pathnameToCheck.replace(this.baseUrl, '');
+        }
+        if ((this.path === '' || this.path === '/') &&
+            (pathnameToCheck === '/' || pathnameToCheck === '')) {
+            return { params: {}, path: pathnameToCheck };
+        }
+        this._matcher ??= (0, path_to_regexp_1.match)(this.tokenData);
+        const parsed = this._matcher(pathnameToCheck);
+        if (parsed === false) {
+            return null;
+        }
+        return parsed;
+    }
+    /**
+     * Matched path segment for current URL.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#currentpath-parsedpathname-null)
+     */
+    get currentPath() {
+        return this.parsedPathData?.path ?? null;
+    }
+    /**
+     * Current parsed path parameters.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#params-parsedpathparams-null)
+     */
+    get params() {
+        if (!this.parsedPathData?.params) {
+            return null;
+        }
+        let params = this.parsedPathData?.params ?? null;
+        if (this.config.params) {
+            const result = this.config.params(this.parsedPathData.params, this.config.meta);
+            if (result) {
+                params = result;
+            }
+            else {
+                return null;
+            }
+        }
+        return params;
+    }
+    /**
+     * Defines the "open" state for this route.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#isopened-boolean)
+     */
+    get isOpened() {
+        if (this.params === null || this.parsedPathData === null) {
+            return false;
+        }
+        return (!this.config.checkOpened || this.config.checkOpened(this.parsedPathData));
+    }
+    /**
+     * Allows to create child route based on this route with merging this route path and extending path.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#extend-path-config-route)
+     */
+    extend(path, config) {
+        // biome-ignore lint/correctness/noUnusedVariables: this is need to extract unused fields
+        const { index, params, ...configFromCurrentRoute } = this.config;
+        const extendedChild = new Route(`${this.path}${path}`, {
+            ...configFromCurrentRoute,
+            ...config,
+            parent: this,
+        });
+        this.addChildren(extendedChild);
+        return extendedChild;
+    }
+    addChildren(...routes) {
+        this.children.push(...routes);
+    }
+    removeChildren(...routes) {
+        this.children = this.children.filter((child) => !routes.includes(child));
+    }
+    /**
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#hasopenedchildren-boolean)
+     */
+    get hasOpenedChildren() {
+        return this.children.some((child) => child.isOpened || child.hasOpenedChildren);
+    }
+    processParams(params) {
+        if (params == null)
+            return undefined;
+        return Object.entries(params).reduce((acc, [key, value]) => {
+            if (value != null) {
+                acc[key] = Array.isArray(value) ? value.map(String) : String(value);
+            }
+            return acc;
+        }, {});
+    }
+    createUrl(...args) {
+        const params = args[0];
+        const rawQuery = args[1];
+        const mergeQueryOrOutputParams = args[2] ?? this.isAbleToMergeQuery;
+        const outputParams = typeof mergeQueryOrOutputParams === 'boolean'
+            ? { mergeQuery: mergeQueryOrOutputParams }
+            : mergeQueryOrOutputParams;
+        const query = outputParams?.mergeQuery
+            ? { ...this.query.data, ...rawQuery }
+            : (rawQuery ?? {});
+        this._compiler ??= (0, path_to_regexp_1.compile)(this.tokenData);
+        const defaultUrlCreateParams = {
+            baseUrl: this.baseUrl,
+            params: params,
+            query,
+        };
+        const urlCreateParams = this.config.createUrl?.(defaultUrlCreateParams, this.query.data) ??
+            config_js_1.routeConfig.get().createUrl?.(defaultUrlCreateParams, this.query.data) ??
+            defaultUrlCreateParams;
+        const path = this._compiler(this.processParams(urlCreateParams.params));
+        const url = [urlCreateParams.baseUrl, this.isHash ? '#' : '', path].join('');
+        if (outputParams?.omitQuery) {
+            return url;
+        }
+        return `${url}${(0, mobx_location_history_1.buildSearchString)(urlCreateParams.query)}`;
+    }
+    /**
+     * Navigates to this route.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#open-args)
+     */
+    async open(...args) {
+        const { replace, state: rawState, query: rawQuery, mergeQuery: rawMergeQuery, } = typeof args[1] === 'boolean' || args.length > 2
+            ? { replace: args[1], query: args[2] }
+            : (args[1] ?? {});
+        let url;
+        let params;
+        const mergeQuery = rawMergeQuery ?? this.isAbleToMergeQuery;
+        const query = mergeQuery ? { ...this.query.data, ...rawQuery } : rawQuery;
+        if (typeof args[0] === 'string') {
+            url = args[0];
+        }
+        else {
+            params = args[0];
+            url = this.createUrl(args[0], query);
+        }
+        const state = rawState ?? null;
+        const navigationData = {
+            url,
+            params: params,
+            replace,
+            state,
+            query,
+        };
+        const feedback = await this.beforeOpen(navigationData);
+        if (feedback === false) {
+            return;
+        }
+        if (typeof feedback === 'object') {
+            Object.assign(navigationData, feedback);
+        }
+        if (replace) {
+            this.history.replace(url, state);
+        }
+        else {
+            this.history.push(url, state);
+        }
+        if (!this.reactionDisposer && this.isOpened) {
+            this.config.afterOpen?.(this.parsedPathData, this);
+        }
+    }
+    beforeOpen(openData) {
+        if (this.config.beforeOpen) {
+            return this.config.beforeOpen(openData);
+        }
+        return true;
+    }
+    afterClose() {
+        if (this.config.afterClose) {
+            return this.config.afterClose();
+        }
+        return true;
+    }
+    get tokenData() {
+        if (!this._tokenData) {
+            this._tokenData = (0, path_to_regexp_1.parse)(this.path, this.config.parseOptions);
+        }
+        return this._tokenData;
+    }
+    firstOpenedStateCheck = true;
+    processOpenedState = (isOpened) => {
+        if (this.firstOpenedStateCheck) {
+            this.firstOpenedStateCheck = false;
+            // ignore first 'afterClose' callback call
+            if (!isOpened) {
+                return;
+            }
+        }
+        if (isOpened) {
+            this.config.afterOpen?.(this.parsedPathData, this);
+        }
+        else {
+            this.config.afterClose?.();
+        }
+    };
+    get isAbleToMergeQuery() {
+        return this.config.mergeQuery ?? config_js_1.routeConfig.get().mergeQuery;
+    }
+    destroy() {
+        this.abortController.abort();
+    }
+}
+exports.Route = Route;
+const createRoute = (path, config) => new Route(path, config);
+exports.createRoute = createRoute;