mobx-route 0.20.2 → 0.22.0

package/index.cjs

@@ -5,41 +5,51 @@ const complex = require("yummies/complex");
 const linkedAbortController = require("linked-abort-controller");
 const mobx = require("mobx");
 const pathToRegexp = require("path-to-regexp");
+const mobx$1 = require("yummies/mobx");
 const common = require("yummies/common");
-let localHistory;
 const routeConfig = complex.createGlobalDynamicConfig(
-  (update) => {
-    if (localHistory && update?.history && mobxLocationHistory.isObservableHistory(localHistory)) {
-      localHistory.destroy();
-    }
+  (update, current) => {
     let history;
+    let queryParams;
     if (update?.history) {
       history = update.history;
-    } else {
-      history = localHistory = mobxLocationHistory.createBrowserHistory();
-    }
-    let queryParams;
-    if (update?.history && !update.queryParams) {
-      queryParams = new mobxLocationHistory.QueryParams({ history });
-    } else {
-      if (update?.queryParams) {
-        queryParams = update.queryParams;
-      } else {
-        queryParams = new mobxLocationHistory.QueryParams({ history });
+      queryParams = update.queryParams;
+      if (current?.history && mobxLocationHistory.isObservableHistory(current.history)) {
+        current.history.destroy();
       }
+    } else if (current?.history) {
+      history = current.history;
+      queryParams = update?.queryParams ?? current.queryParams;
+    } else {
+      history = mobxLocationHistory.createBrowserHistory();
     }
+    queryParams ??= mobxLocationHistory.createQueryParams({ history });
     return {
       ...update,
       history,
-      location,
       queryParams
     };
   },
   Symbol.for("MOBX_ROUTE_CONFIG")
 );
+const annotations$3 = [
+  [
+    mobx.computed,
+    "isPathMatched",
+    "isOpened",
+    "isOpening",
+    "path",
+    "hasOpenedChildren",
+    "isAbleToMergeQuery",
+    "baseUrl"
+  ],
+  [mobx.computed.struct, "parsedPathData", "params"],
+  [mobx.observable, "children"],
+  [mobx.observable.ref, "parent", "status"]
+];
 class Route {
-  constructor(path, config = {}) {
-    this.path = path;
+  constructor(pathDeclaration, config = {}) {
+    this.pathDeclaration = pathDeclaration;
     this.config = config;
     this.abortController = new linkedAbortController.LinkedAbortController(config.abortSignal);
     this.history = config.history ?? routeConfig.get().history;
@@ -49,23 +59,7 @@ class Route {
     this.meta = this.config.meta;
     this.status = "unknown";
     this.parent = config.parent ?? null;
-    mobx.computed(this, "isPathMatched");
-    mobx.computed(this, "isOpened");
-    mobx.computed.struct(this, "data");
-    mobx.computed.struct(this, "params");
-    mobx.computed(this, "currentPath");
-    mobx.computed(this, "hasOpenedChildren");
-    mobx.computed(this, "isAbleToMergeQuery");
-    mobx.computed(this, "baseUrl");
-    mobx.observable(this, "children");
-    mobx.observable.ref(this, "parent");
-    mobx.observable.ref(this, "status");
-    mobx.computed(this, "isOpening");
-    mobx.action(this, "addChildren");
-    mobx.action(this, "confirmOpening");
-    mobx.action(this, "confirmClosing");
-    mobx.action(this, "removeChildren");
-    mobx.makeObservable(this);
+    mobx$1.applyObservable(this, annotations$3);
     mobx.reaction(() => this.isPathMatched, this.checkPathMatch, {
       signal: this.abortController.signal,
       fireImmediately: true
@@ -78,19 +72,19 @@ class Route {
   _tokenData;
   _matcher;
   _compiler;
-  skipPathMatchCheck = false;
+  ignoreOpenByPathMatch = false;
   status;
   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)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#isindex)
    */
   isIndex;
   /**
    * Indicates if this route is an hash route.
    *
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#ishash-boolean)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#ishash)
    */
   isHash;
   children = [];
@@ -111,7 +105,7 @@ class Route {
       }
       pathnameToCheck = pathnameToCheck.replace(this.baseUrl, "");
     }
-    if ((this.path === "" || this.path === "/") && (pathnameToCheck === "/" || pathnameToCheck === "")) {
+    if ((this.pathDeclaration === "" || this.pathDeclaration === "/") && (pathnameToCheck === "/" || pathnameToCheck === "")) {
       return { params: {}, path: pathnameToCheck };
     }
     this._matcher ??= pathToRegexp.match(this.tokenData, {
@@ -124,21 +118,24 @@ class Route {
     }
     return parsed;
   }
+  /**
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#isopening)
+   */
   get isOpening() {
     return this.status === "opening";
   }
   /**
    * Matched path segment for current URL.
    *
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#currentpath-parsedpathname-null)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#path)
    */
-  get currentPath() {
+  get path() {
     return this.parsedPathData?.path ?? null;
   }
   /**
    * Current parsed path parameters.
    *
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#params-parsedpathparams-null)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#params)
    */
   get params() {
     if (!this.parsedPathData?.params) {
@@ -164,22 +161,25 @@ class Route {
   /**
    * Defines the "open" state for this route.
    *
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#isopened-boolean)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#isopened)
    */
   get isOpened() {
     if (!this.isPathMatched || this.params === null || this.status !== "open-confirmed") {
       return false;
     }
-    return !this.config.checkOpened || this.config.checkOpened(this.parsedPathData);
+    return (
+      // this.parsedPathData is defined because this.params !== null
+      !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)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#extend)
    */
-  extend(path, config) {
+  extend(pathDeclaration, config) {
     const { index, params, exact, ...configFromCurrentRoute } = this.config;
-    const extendedChild = new Route(`${this.path}${path}`, {
+    const extendedChild = new Route(`${this.pathDeclaration}${pathDeclaration}`, {
       ...configFromCurrentRoute,
       ...config,
       parent: this
@@ -194,7 +194,7 @@ class Route {
     this.children = this.children.filter((child) => !routes.includes(child));
   }
   /**
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#hasopenedchildren-boolean)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#hasopenedchildren)
    */
   get hasOpenedChildren() {
     return this.children.some(
@@ -223,7 +223,13 @@ class Route {
       query
     };
     const urlCreateParams = this.config.createUrl?.(defaultUrlCreateParams, this.query.data) ?? routeConfig.get().createUrl?.(defaultUrlCreateParams, this.query.data) ?? defaultUrlCreateParams;
-    const path = this._compiler(this.processParams(urlCreateParams.params));
+    let path;
+    try {
+      path = this._compiler(this.processParams(urlCreateParams.params));
+    } catch (e) {
+      console.error("Error while compiling route path", e);
+      path = this.config.fallbackPath ?? routeConfig.get().fallbackPath ?? "/";
+    }
     const url = `${urlCreateParams.baseUrl || ""}${this.isHash ? "#" : ""}${path}`;
     if (outputParams?.omitQuery) {
       return url;
@@ -233,7 +239,7 @@ class Route {
   /**
    * Navigates to this route.
    *
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#open-args)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#open)
    */
   async open(...args) {
     const {
@@ -260,47 +266,55 @@ class Route {
       state,
       query
     };
-    const isConfirmed = await this.confirmOpening(trx);
-    if (!isConfirmed) {
-      return;
-    }
-    this.skipPathMatchCheck = true;
-    if (trx.replace) {
-      this.history.replace(trx.url, trx.state);
-    } else {
-      this.history.push(trx.url, trx.state);
+    if (await this.confirmOpening(trx)) {
+      this.ignoreOpenByPathMatch = true;
     }
   }
   get tokenData() {
     if (!this._tokenData) {
-      this._tokenData = pathToRegexp.parse(this.path, this.config.parseOptions);
+      this._tokenData = pathToRegexp.parse(this.pathDeclaration, this.config.parseOptions);
     }
     return this._tokenData;
   }
   async confirmOpening(trx) {
-    this.status = "opening";
+    mobx.runInAction(() => {
+      this.status = "opening";
+    });
+    let skipHistoryUpdate = !!trx.preferSkipHistoryUpdate;
     if (this.config.beforeOpen) {
       const feedback = await this.config.beforeOpen(trx);
       if (feedback === false) {
         mobx.runInAction(() => {
           this.status = "open-rejected";
         });
-        return false;
       }
       if (typeof feedback === "object") {
-        mobx.runInAction(() => {
-          this.status = "open-confirmed";
-        });
-        return Object.assign(trx, feedback);
+        skipHistoryUpdate = false;
+        Object.assign(trx, feedback);
       }
     }
-    mobx.runInAction(() => {
-      this.status = "open-confirmed";
-    });
+    if (this.abortController.signal.aborted) {
+      return;
+    }
+    if (!skipHistoryUpdate) {
+      if (trx.replace) {
+        this.history.replace(trx.url, trx.state);
+      } else {
+        this.history.push(trx.url, trx.state);
+      }
+    }
+    if (this.isPathMatched) {
+      mobx.runInAction(() => {
+        this.status = "open-confirmed";
+      });
+      this.config.afterOpen?.(this.parsedPathData, this);
+    }
     return true;
   }
   confirmClosing() {
-    this.status = "closed";
+    mobx.runInAction(() => {
+      this.status = "closed";
+    });
     return true;
   }
   firstPathMatchingRun = true;
@@ -311,33 +325,19 @@ class Route {
         return;
       }
     }
-    if (this.skipPathMatchCheck) {
-      this.skipPathMatchCheck = false;
-      return;
-    }
     if (isPathMathched) {
+      if (this.ignoreOpenByPathMatch) {
+        this.ignoreOpenByPathMatch = false;
+        return;
+      }
       const trx = {
         url: this.parsedPathData.path,
         params: this.parsedPathData.params,
         state: this.history.location.state,
-        query: this.query.data
+        query: this.query.data,
+        preferSkipHistoryUpdate: true
       };
-      const nextTrxOrConfirmed = await this.confirmOpening(trx);
-      if (!nextTrxOrConfirmed) {
-        return;
-      }
-      this.config.afterOpen?.(this.parsedPathData, this);
-      if (typeof nextTrxOrConfirmed === "object") {
-        if (nextTrxOrConfirmed.replace) {
-          this.history.replace(
-            nextTrxOrConfirmed.url,
-            nextTrxOrConfirmed.state
-          );
-        } else {
-          this.history.push(nextTrxOrConfirmed.url, nextTrxOrConfirmed.state);
-        }
-      }
-      return;
+      await this.confirmOpening(trx);
     } else {
       const isConfirmed = this.confirmClosing();
       if (isConfirmed) {
@@ -353,20 +353,21 @@ class Route {
   }
 }
 const createRoute = (path, config) => new Route(path, config);
+const annotations$2 = [
+  [mobx.computed, "isOpened", "indexRoute"],
+  [mobx.observable.shallow, "routes"]
+];
 class RouteGroup {
   constructor(routes, _indexRoute) {
     this._indexRoute = _indexRoute;
     this.routes = routes;
-    mobx.computed.struct(this, "isOpened");
-    mobx.computed.struct(this, "indexRoute");
-    mobx.observable.shallow(this, "routes");
-    mobx.makeObservable(this);
+    mobx$1.applyObservable(this, annotations$2);
   }
   routes;
   /**
    * Returns true if at least one route in the group is open.
    *
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/RouteGroup.html#isopened-boolean)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/RouteGroup.html#isopened)
    */
   get isOpened() {
     const routes = Object.values(this.routes);
@@ -377,7 +378,7 @@ class RouteGroup {
   /**
    * First found index route.
    *
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/RouteGroup.html#indexroute-route-undefined)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/RouteGroup.html#indexroute)
    */
   get indexRoute() {
     return this._indexRoute ?? Object.values(this.routes).find(
@@ -387,7 +388,7 @@ class RouteGroup {
   /**
    * Main navigation method for the group.
    *
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/RouteGroup.html#open-args-any-void)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/RouteGroup.html#open)
    */
   open(...args) {
     let lastGroupRoute;
@@ -411,6 +412,9 @@ class RouteGroup {
   }
 }
 const createRouteGroup = (routes, indexRoute) => new RouteGroup(routes, indexRoute);
+const annotations$1 = [
+  [mobx.computed.struct, "location"]
+];
 class Router {
   routes;
   history;
@@ -419,8 +423,7 @@ class Router {
     this.routes = config.routes;
     this.history = config.history ?? routeConfig.get().history;
     this.query = config.queryParams ?? routeConfig.get().queryParams;
-    mobx.computed.struct(this, "location");
-    mobx.makeObservable(this);
+    mobx$1.applyObservable(this, annotations$1);
   }
   get location() {
     return this.history.location;
@@ -438,6 +441,12 @@ class Router {
 }
 const createRouter = (config) => new Router(config);
 const isRouteEntity = (route) => route && "isOpened" in route;
+const annotations = [
+  [mobx.observable, "params"],
+  [mobx.observable.ref, "status", "trx", "openChecker", "isOuterOpened"],
+  [mobx.computed, "isOpened", "isOpening", "isClosing"],
+  [mobx.action, "setOpenChecker", "open", "close"]
+];
 class VirtualRoute {
   constructor(config = {}) {
     this.config = config;
@@ -445,110 +454,156 @@ class VirtualRoute {
     this.query = config.queryParams ?? routeConfig.get().queryParams;
     this.params = common.callFunction(config.initialParams, this) ?? null;
     this.openChecker = config.checkOpened;
-    this.isLocalOpened = this.openChecker?.(this) ?? false;
-    mobx.observable(this, "params");
-    mobx.observable.ref(this, "isLocalOpened");
-    mobx.observable.ref(this, "_isOpened");
-    mobx.computed.struct(this, "isOpened");
-    mobx.action(this, "setOpenChecker");
-    mobx.action(this, "open");
-    mobx.action(this, "close");
-    mobx.makeObservable(this);
-    mobx.onBecomeObserved(this, "isOpened", () => {
-      if (!config.afterOpen && !config.afterClose) {
-        return;
-      }
-      this.reactionDisposer = mobx.reaction(
-        () => this.isOpened,
-        this.processOpenedState,
-        {
-          signal: this.abortController.signal,
-          fireImmediately: true
+    this.skipAutoOpenClose = false;
+    this.isOuterOpened = this.openChecker?.(this);
+    this.status = this.isOuterOpened ? "opened" : "unknown";
+    mobx$1.applyObservable(this, annotations);
+    this.abortController.signal.addEventListener(
+      "abort",
+      mobx.action(() => {
+        this.status = "unknown";
+      })
+    );
+    mobx.reaction(
+      () => this.openChecker?.(this),
+      mobx.action((isOuterOpened) => {
+        this.isOuterOpened = isOuterOpened;
+        if (this.skipAutoOpenClose || this.status === "closing" || this.status === "opening") {
+          return;
         }
-      );
-    });
-    mobx.onBecomeUnobserved(this, "isOpened", () => {
-      this.reactionDisposer?.();
-      this.reactionDisposer = void 0;
-    });
+        if (this.isOuterOpened) {
+          if (this.status === "opened") {
+            return;
+          }
+          this.confirmOpening({
+            params: this.params ?? null,
+            ...this.config.getAutomatedOpenParams?.(this)
+          });
+        } else {
+          if (this.status === "closed" || this.status === "unknown") {
+            return;
+          }
+          this.confirmClosing();
+        }
+      }),
+      { signal: this.abortController.signal, fireImmediately: true }
+    );
+    if (this.status === "opened") {
+      this.config.afterOpen?.(this.params, this);
+    }
   }
-  abortController;
   query;
   params;
-  isLocalOpened;
+  abortController;
+  status;
   openChecker;
-  reactionDisposer;
+  trx;
+  skipAutoOpenClose;
+  /**
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#isouteropened)
+   */
+  isOuterOpened;
   /**
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#isopened-boolean)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#isopened)
    */
   get isOpened() {
-    const isOuterOpened = this.openChecker == null || this.openChecker(this);
-    return this.isLocalOpened && isOuterOpened;
+    return this.status === "opened" && this.isOuterOpened !== false;
+  }
+  /**
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#isopening)
+   */
+  get isOpening() {
+    return this.status === "opening";
+  }
+  /**
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#isclosing)
+   */
+  get isClosing() {
+    return this.status === "closing";
   }
   /**
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#setopenchecker-openchecker-void)
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#setopenchecker)
    */
   setOpenChecker(openChecker) {
     this.openChecker = openChecker;
   }
   async open(...args) {
-    const params = args[0] ?? {};
-    const extraParams = args[1];
-    if (this.config.beforeOpen) {
-      const beforeOpenResult = await this.config.beforeOpen(params, this);
-      if (beforeOpenResult === false) {
-        return;
-      }
-    }
-    if (this.config.open == null) {
+    const params = args[0] ?? null;
+    const extra = args[1];
+    this.skipAutoOpenClose = true;
+    this.trx = {
+      params,
+      extra,
+      manual: true
+    };
+    await this.confirmOpening(this.trx);
+    this.skipAutoOpenClose = false;
+  }
+  /**
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#close)
+   */
+  async close() {
+    this.skipAutoOpenClose = true;
+    const result = await this.confirmClosing();
+    this.skipAutoOpenClose = false;
+    return result;
+  }
+  async confirmOpening(trx) {
+    mobx.runInAction(() => {
+      this.trx = void 0;
+      this.status = "opening";
+    });
+    if (await this.config.beforeOpen?.(trx.params, this) === false) {
       mobx.runInAction(() => {
-        this.isLocalOpened = true;
+        this.status = "open-rejected";
+        this.trx = void 0;
       });
-    } else {
-      const result = await this.config.open(params, this);
+      return;
+    }
+    if (await this.config.open?.(trx.params, this) === false) {
       mobx.runInAction(() => {
-        this.isLocalOpened = result !== false;
+        this.status = "open-rejected";
+        this.trx = void 0;
       });
-    }
-    if (!this.isLocalOpened) {
       return;
     }
-    if (extraParams?.query) {
-      this.query.update(extraParams.query, extraParams.replace);
-    }
     mobx.runInAction(() => {
-      this.params = params;
-    });
-    if (!this.reactionDisposer && this.isOpened) {
+      if (trx.extra?.query) {
+        this.query.update(trx.extra.query, trx.extra.replace);
+      }
+      this.trx = void 0;
+      this.params = trx.params;
+      this.status = "opened";
       this.config.afterOpen?.(this.params, this);
-    }
+    });
+    return true;
   }
-  /**
-   * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#close-void)
-   */
-  close() {
-    if (this.config.close == null) {
-      this.isLocalOpened = false;
-    } else {
-      const result = this.config.close(this);
-      this.isLocalOpened = result !== false;
+  async confirmClosing() {
+    if (this.status === "closed") {
+      return true;
     }
-    this.params = null;
-  }
-  firstOpenedStateCheck = true;
-  processOpenedState = (isOpened) => {
-    if (this.firstOpenedStateCheck) {
-      this.firstOpenedStateCheck = false;
-      if (!isOpened) {
-        return;
-      }
+    const lastStatus = this.status;
+    mobx.runInAction(() => {
+      this.status = "closing";
+    });
+    if (await this.config.beforeClose?.() === false) {
+      mobx.runInAction(() => {
+        this.status = lastStatus;
+      });
+      return;
     }
-    if (isOpened) {
-      this.config.afterOpen?.(this.params, this);
-    } else {
-      this.config.afterClose?.();
+    if (this.config.close?.(this) === false) {
+      mobx.runInAction(() => {
+        this.status = lastStatus;
+      });
+      return;
     }
-  };
+    mobx.runInAction(() => {
+      this.status = "closed";
+      this.params = null;
+    });
+    return true;
+  }
   destroy() {
     this.abortController.abort();
   }