mobx-route 1.3.4 → 2.1.0

package/README.md

@@ -1,6 +1,6 @@
 <img src="docs/public/logo.png" align="right" width="156" alt="logo" />
 
-# mobx-route  
+# mobx-route
 
 [![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]
 
@@ -14,23 +14,189 @@
 [bundlephobia-url]: https://bundlephobia.com/result?p=mobx-route
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/mobx-route
 
+🚀 Simple and lightweight **typed** MobX router 🚀
+_Uses [`path-to-regexp`](https://www.npmjs.com/package/path-to-regexp) power for path matching_
 
-🚀 Simple and lightweight typed MobX router 🚀    
-_Uses [`path-to-regexp` power](https://www.npmjs.com/package/path-to-regexp)_  
+### [📖 Read the docs →](https://js2me.github.io/mobx-route/)
 
-### [Read the docs →](https://js2me.github.io/mobx-route/)  
+---
 
+## Quick Start
 
 ```ts
 import { createRoute } from "mobx-route";
 
 const userDetails = createRoute("/users/:id");
 
-await userDetails.open({ id: 1 }); // path params are required
+// Path params are required — TypeScript enforces it
+await userDetails.open({ id: 1 });
 
-userDetails.isOpened; // true;
+userDetails.isOpened; // true
+userDetails.params;   // { id: "1" } — fully typed
 ```
 
-## Contribution Guide    
+---
 
-Want to contribute ? [Follow this guide](https://github.com/js2me/mobx-route/blob/master/CONTRIBUTING.md)  
+## ✨ Features
+
+### 🔗 Nested Routes with `.extend()`
+
+Build route trees naturally — no config arrays, no `<Routes>` wrappers:
+
+```ts
+const users = createRoute("/users");
+const userDetails = users.extend("/:userId");
+const userPhotos = userDetails.extend("/photos");
+
+// Path is auto-concatenated: /users/:userId/photos
+await userPhotos.open({ userId: 42 });
+// → /users/42/photos
+
+users.isOpened;        // true (parent is open too)
+users.hasOpenedChildren; // true
+```
+
+### 🛡️ Route Guards & Redirects
+
+Protect routes with `beforeOpen` — cancel navigation or redirect:
+
+```ts
+const dashboard = createRoute("/dashboard", {
+  beforeOpen: async () => {
+    if (!await isAuthenticated()) {
+      return { url: "/login", replace: true }; // redirect
+    }
+    // return undefined → proceed
+  },
+  checkOpened: () => currentUser.isAuthorized, // reactive predicate
+});
+```
+
+### 🔮 Virtual Routes for Modals & Drawers
+
+Same `.open()` / `.close()` / `.isOpened` API — but no URL involved:
+
+```ts
+const authModal = createVirtualRoute({
+  checkOpened: (route) => route.query.data.modal === "auth",
+  open: (_, route) => route.query.update({ modal: "auth" }),
+  close: (route) => route.query.update({ modal: undefined }),
+  beforeClose: () => !hasUnsavedChanges, // prevent closing
+});
+
+authModal.isOpened;  // reactive — auto-updates from query
+authModal.isClosing; // for exit animations
+```
+
+### 🎯 Typed Query Params
+
+```ts
+const search = createRoute<
+  "/search",
+  {},
+  {},
+  { q: string; page?: number; sort?: "asc" | "desc" }
+>("/search");
+
+// TQueryParams types the INPUT — what you pass to open()
+await search.open({}, { query: { q: "mobx", page: 1 } });
+
+// query.data is always Record<string, string> at runtime (values come from URL)
+search.query.data.q;    // string
+search.query.data.page; // string | undefined — use Number() or QueryParam for typed access
+```
+
+### 🔄 `update()` for In-Place Changes
+
+Replace params without polluting browser history:
+
+```ts
+await userRoute.open({ userId: 1 }, { query: { tab: "profile" } });
+await userRoute.update({ userId: 2 });
+// → /users/2?tab=profile (replace: true, mergeQuery: true by default)
+```
+
+### 🧩 React Integration
+
+```tsx
+import { RouteView, RouteViewGroup, Link } from "mobx-route/react";
+
+// Declarative route rendering
+<RouteView route={userRoute} view={UserPage} fallback={<Loading />} />
+
+// Route switching with fallback
+<RouteViewGroup otherwise={notFoundRoute}>
+  <RouteView route={homeRoute} view={HomePage} />
+  <RouteView route={userRoute} view={UserPage} />
+  <div>Not found</div>
+</RouteViewGroup>
+
+// Type-safe links
+<Link to={userRoute} params={{ userId: 42 }}>Profile</Link>
+```
+
+### 🧠 View Model Integration
+
+```ts
+import { RouteViewModel } from "mobx-route/view-model";
+
+class UserPageVM extends RouteViewModel<typeof userRoute> {
+  route = userRoute;
+  // payload, pathParams, query, isMounted — all built-in
+}
+```
+
+### 🌍 Optional Path Segments & Wildcards
+
+```ts
+// Optional segment
+const route = createRoute("/users{/:tab}");
+route.open();          // → /users
+route.open({ tab: 1 }); // → /users/1
+
+// Wildcard/rest params
+const docs = createRoute("/docs/*rest");
+docs.open({ rest: ["api", "v2", "auth"] }); // → /docs/api/v2/auth
+```
+
+### 📦 Tree-Shakeable Subpath Exports
+
+Only pay for what you use:
+
+```ts
+import { createRoute } from "mobx-route";              // core only
+import { RouteView, Link } from "mobx-route/react";    // + React
+import { RouteViewModel } from "mobx-route/view-model"; // + VM
+```
+
+---
+
+## Installation
+
+```bash
+npm install mobx-route
+# or
+pnpm add mobx-route
+# or
+yarn add mobx-route
+```
+
+Peer dependencies (React integration is optional):
+
+```bash
+npm install mobx
+# For React:
+npm install mobx-react-lite react react-dom
+```
+
+---
+
+## Contribution Guide
+
+Want to contribute? [Follow this guide](https://github.com/js2me/mobx-route/blob/master/CONTRIBUTING.md)
+
+---
+
+## License
+
+[MIT](https://github.com/js2me/mobx-route/blob/master/LICENSE)

package/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const mobxLocationHistory = require("mobx-location-history");
-const virtualRoute = require("./virtual-route-B_X_wClE.cjs");
+const virtualRoute = require("./virtual-route-EXYD3rMt.cjs");
 const isRouteEntity = (route) => route && "isOpened" in route;
 exports.Route = virtualRoute.Route;
 exports.RouteGroup = virtualRoute.RouteGroup;

package/index.d.ts

@@ -19,12 +19,12 @@ interface AbstractVirtualRoute<TParams extends AnyObject | EmptyObject = EmptyOb
         extraParams?: VirtualOpenExtraParams<TQueryParams>
     ] : [params: TParams, extraParams?: VirtualOpenExtraParams<TQueryParams>]): Promise<void>;
 }
-interface VirtualRouteConfiguration<TParams extends AnyObject | EmptyObject = EmptyObject, TQueryParams extends Record<string, any> = AnyObject> {
+interface VirtualRouteConfiguration<TParams extends AnyObject | EmptyObject = EmptyObject> {
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#abortsignal)
      */
     abortSignal?: AbortSignal;
-    queryParams?: IQueryParams<TQueryParams>;
+    queryParams?: IQueryParams;
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#initialparams)
      */
@@ -88,10 +88,10 @@ interface VirtualRouteTrx<TQueryParams extends Record<string, any> = AnyObject>
  * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html)
  */
 declare class VirtualRoute<TParams extends AnyObject | EmptyObject = EmptyObject, TQueryParams extends Record<string, any> = AnyObject> implements AbstractVirtualRoute<TParams, TQueryParams> {
-    protected config: VirtualRouteConfiguration<TParams, TQueryParams>;
+    protected config: VirtualRouteConfiguration<TParams>;
     private isDestroyed?;
     private disposer?;
-    query: IQueryParams<TQueryParams>;
+    query: IQueryParams;
     params: TParams | null;
     protected status: 'opening' | 'open-rejected' | 'opened' | 'closing' | 'closed' | 'unknown';
     private openChecker;
@@ -103,7 +103,7 @@ declare class VirtualRoute<TParams extends AnyObject | EmptyObject = EmptyObject
      * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#isouteropened)
      */
     isOuterOpened: boolean | undefined;
-    constructor(config?: VirtualRouteConfiguration<TParams, TQueryParams>);
+    constructor(config?: VirtualRouteConfiguration<TParams>);
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/VirtualRoute.html#isopened)
      */
@@ -135,7 +135,7 @@ declare class VirtualRoute<TParams extends AnyObject | EmptyObject = EmptyObject
     private confirmClosing;
     destroy(): void;
 }
-declare const createVirtualRoute: <TParams extends AnyObject | EmptyObject = EmptyObject, TQueryParams extends Record<string, any> = AnyObject>(config?: VirtualRouteConfiguration<TParams, TQueryParams>) => VirtualRoute<TParams, TQueryParams>;
+declare const createVirtualRoute: <TParams extends AnyObject | EmptyObject = EmptyObject, TQueryParams extends Record<string, any> = AnyObject>(config?: VirtualRouteConfiguration<TParams>) => VirtualRoute<TParams, TQueryParams>;
 
 /**
  * Class for grouping related routes and managing their state.
@@ -224,7 +224,7 @@ interface CreatedUrlOutputParams {
     /** @see [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#createurl) */
     omitQuery?: boolean;
 }
-interface RouteConfiguration<TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TParentRoute extends Route<string, any, any, any, any> | null = null, TQueryParams extends Record<string, any> = AnyObject> extends Omit<Partial<RouteGlobalConfig>, 'createUrl'> {
+interface RouteConfiguration<TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TQueryParams extends Record<string, any> = AnyObject> extends Omit<Partial<RouteGlobalConfig>, 'createUrl'> {
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#abortsignal)
      */
@@ -242,7 +242,7 @@ interface RouteConfiguration<TPath extends string, TInputParams extends InputPat
     meta?: AnyObject;
     parseOptions?: ParseOptions;
     matchOptions?: MatchOptions & ParseOptions;
-    parent?: TParentRoute;
+    parent?: AnyRoute | null;
     children?: AnyRoute[];
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#params)
@@ -263,17 +263,17 @@ interface RouteConfiguration<TPath extends string, TInputParams extends InputPat
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#afteropen)
      */
-    afterOpen?: (data: ParsedPathData<NoInfer<TPath>>, route: Route<NoInfer<TPath>, NoInfer<TInputParams>, NoInfer<TOutputParams>, NoInfer<TParentRoute>, NoInfer<TQueryParams>>) => void;
+    afterOpen?: (data: ParsedPathData<NoInfer<TPath>>, route: Route<NoInfer<TPath>, NoInfer<TInputParams>, NoInfer<TOutputParams>, NoInfer<TQueryParams>>) => void;
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#afterupdate)
      */
-    afterUpdate?: (data: ParsedPathData<NoInfer<TPath>>, route: Route<NoInfer<TPath>, NoInfer<TInputParams>, NoInfer<TOutputParams>, NoInfer<TParentRoute>, NoInfer<TQueryParams>>) => void;
+    afterUpdate?: (data: ParsedPathData<NoInfer<TPath>>, route: Route<NoInfer<TPath>, NoInfer<TInputParams>, NoInfer<TOutputParams>, NoInfer<TQueryParams>>) => void;
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#createurl)
      */
     createUrl?: UrlCreateParamsFn<TInputParams, TQueryParams>;
 }
-type AnyRoute = Route<any, any, any, any, any>;
+type AnyRoute = Route<any, any, any, any>;
 type InputPathParam = string | number | boolean | null;
 type ParsedPathParam = string;
 type Simplify<T> = T extends infer U ? {
@@ -303,18 +303,24 @@ interface ParsedPathData<TPath extends string> {
     path: string;
     params: ParsedPathParams<TPath>;
 }
-type InferPath<T extends AnyRoute> = T extends Route<infer TPath, any, any, any, any> ? TPath : never;
-type InferInputParams<T extends AnyRoute> = T extends VirtualRoute<infer TParams> ? TParams : T extends Route<any, infer TInputParams, any, any, any> ? TInputParams : never;
-type InferParams<T extends AnyRoute> = T extends VirtualRoute<infer TParams> ? TParams : T extends Route<any, any, infer TParams, any, any> ? TParams : never;
-type InferQueryParams<T extends AnyRoute> = T extends Route<any, any, any, any, infer TQueryParams> ? TQueryParams : never;
+type InferPath<T extends AnyRoute> = T extends Route<infer TPath, any, any, any> ? TPath : never;
+type InferInputParams<T extends AnyRoute> = T extends VirtualRoute<infer TParams> ? TParams : T extends Route<any, infer TInputParams, any, any> ? TInputParams : never;
+type InferParams<T extends AnyRoute> = T extends VirtualRoute<infer TParams> ? TParams : T extends Route<any, any, infer TParams, any> ? TParams : never;
+/**
+ * Extracts the query params input type from a route.
+ *
+ * Note: this represents the INPUT shape used in `open()`, `createUrl()`, etc.
+ * The actual `route.query.data` values are always `Record<string, string>` at runtime.
+ */
+type InferQueryParams<T extends AnyRoute> = T extends Route<any, any, any, infer TQueryParams> ? TQueryParams : never;
 
 /**
  * Class for creating path based route.
  *
  * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html)
  */
-declare class Route<TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TParentRoute extends Route<any, any, any, any, any> | null = null, TQueryParams extends Record<string, any> = AnyObject> {
-    protected config: RouteConfiguration<TPath, TInputParams, TOutputParams, TParentRoute, TQueryParams>;
+declare class Route<TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TQueryParams extends Record<string, any> = AnyObject> {
+    protected config: RouteConfiguration<TPath, TInputParams, TOutputParams, TQueryParams>;
     private isDestroyed?;
     private disposer?;
     protected history: History;
@@ -323,8 +329,8 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      *
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#parent)
      */
-    parent: TParentRoute;
-    query: IQueryParams<TQueryParams>;
+    parent: AnyRoute | null;
+    query: IQueryParams;
     private _tokenData;
     private _matcher?;
     private _compiler?;
@@ -357,7 +363,7 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#children)
      */
     children: AnyRoute[];
-    constructor(pathDeclaration: TPath, config?: RouteConfiguration<TPath, TInputParams, TOutputParams, TParentRoute, TQueryParams>);
+    constructor(pathDeclaration: TPath, config?: RouteConfiguration<TPath, TInputParams, TOutputParams, TQueryParams>);
     protected get baseUrl(): string | undefined;
     /**
      * Checks whether current route matches provided path.
@@ -392,7 +398,15 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#params)
      */
     get params(): TOutputParams | null;
-    protected get isPathMatched(): boolean;
+    protected get isConfigPathMatched(): boolean;
+    /**
+     * Whether the current URL path includes this route's path pattern.
+     * Uses prefix matching (`end: false`), so `/users` matches `/users/123`.
+     * Useful for navigation menu highlighting.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#ispathmatched)
+     */
+    get isPathMatched(): boolean;
     /**
      * Defines the "open" state for this route.
      *
@@ -404,7 +418,7 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      *
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#extend)
      */
-    extend<TExtendedPath extends string, TExtendedInputParams extends InputPathParams<`${TPath}${TExtendedPath}`> = InputPathParams<`${TPath}${TExtendedPath}`>, TExtendedOutputParams extends AnyObject = TInputParams & ParsedPathParams<`${TPath}${TExtendedPath}`>, TExtendedQueryParams extends Record<string, any> = TQueryParams>(pathDeclaration: TExtendedPath, config?: Omit<RouteConfiguration<`${TPath}${TExtendedPath}`, TInputParams & TExtendedInputParams, TExtendedOutputParams, any, TExtendedQueryParams>, 'parent'>): Route<`${TPath}${TExtendedPath}`, TInputParams & TExtendedInputParams, TExtendedOutputParams, this, TExtendedQueryParams>;
+    extend<TExtendedPath extends string, TExtendedInputParams extends InputPathParams<`${TPath}${TExtendedPath}`> = InputPathParams<`${TPath}${TExtendedPath}`>, TExtendedOutputParams extends AnyObject = TInputParams & ParsedPathParams<`${TPath}${TExtendedPath}`>, TExtendedQueryParams extends Record<string, any> = TQueryParams>(pathDeclaration: TExtendedPath, config?: Omit<RouteConfiguration<`${TPath}${TExtendedPath}`, TInputParams & TExtendedInputParams, TExtendedOutputParams, TExtendedQueryParams>, 'parent'>): Route<`${TPath}${TExtendedPath}`, TInputParams & TExtendedInputParams, TExtendedOutputParams, TExtendedQueryParams>;
     /**
      * Manually add child routes.
      *
@@ -484,7 +498,7 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      */
     destroy(): void;
 }
-declare const createRoute: <TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TParentRoute extends Route<any, any, any, any, any> | null = null, TQueryParams extends Record<string, any> = AnyObject>(path: TPath, config?: RouteConfiguration<TPath, TInputParams, TOutputParams, TParentRoute, TQueryParams>) => Route<TPath, TInputParams, TOutputParams, TParentRoute, TQueryParams>;
+declare const createRoute: <TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TQueryParams extends Record<string, any> = AnyObject>(path: TPath, config?: RouteConfiguration<TPath, TInputParams, TOutputParams, TQueryParams>) => Route<TPath, TInputParams, TOutputParams, TQueryParams>;
 
 /**
  * Global configuration for routes and router.

package/index.js

@@ -1,5 +1,5 @@
 export * from "mobx-location-history";
-import { R, a, b, V, c, d, e, g, r } from "./virtual-route-C7NPJx5y.js";
+import { R, a, b, V, c, d, e, g, r } from "./virtual-route-DgVGEWRJ.js";
 const isRouteEntity = (route) => route && "isOpened" in route;
 export {
   R as Route,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-route",
-  "version": "1.3.4",
+  "version": "2.1.0",
   "keywords": [
     "mobx",
     "react",
@@ -67,13 +67,13 @@
       "require": "./view-model.cjs",
       "default": "./view-model.js"
     },
-    "./virtual-route-B_X_wClE": {
-      "require": "./virtual-route-B_X_wClE.cjs",
-      "default": "./virtual-route-B_X_wClE.cjs"
+    "./virtual-route-DgVGEWRJ": {
+      "import": "./virtual-route-DgVGEWRJ.js",
+      "default": "./virtual-route-DgVGEWRJ.js"
     },
-    "./virtual-route-C7NPJx5y": {
-      "import": "./virtual-route-C7NPJx5y.js",
-      "default": "./virtual-route-C7NPJx5y.js"
+    "./virtual-route-EXYD3rMt": {
+      "require": "./virtual-route-EXYD3rMt.cjs",
+      "default": "./virtual-route-EXYD3rMt.cjs"
     }
   },
   "files": [

package/view-model.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const mobx = require("mobx");
 const mobxViewModel = require("mobx-view-model");
-const virtualRoute = require("./virtual-route-B_X_wClE.cjs");
+const virtualRoute = require("./virtual-route-EXYD3rMt.cjs");
 const annotations = [
   [mobx.computed.struct, "pathParams"],
   [mobx.computed, "query"]

package/view-model.d.ts

@@ -63,7 +63,7 @@ interface CreatedUrlOutputParams {
     /** @see [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#createurl) */
     omitQuery?: boolean;
 }
-interface RouteConfiguration<TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TParentRoute extends Route<string, any, any, any, any> | null = null, TQueryParams extends Record<string, any> = AnyObject> extends Omit<Partial<RouteGlobalConfig>, 'createUrl'> {
+interface RouteConfiguration<TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TQueryParams extends Record<string, any> = AnyObject> extends Omit<Partial<RouteGlobalConfig>, 'createUrl'> {
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#abortsignal)
      */
@@ -81,7 +81,7 @@ interface RouteConfiguration<TPath extends string, TInputParams extends InputPat
     meta?: AnyObject;
     parseOptions?: ParseOptions;
     matchOptions?: MatchOptions & ParseOptions;
-    parent?: TParentRoute;
+    parent?: AnyRoute | null;
     children?: AnyRoute[];
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#params)
@@ -102,17 +102,17 @@ interface RouteConfiguration<TPath extends string, TInputParams extends InputPat
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#afteropen)
      */
-    afterOpen?: (data: ParsedPathData<NoInfer<TPath>>, route: Route<NoInfer<TPath>, NoInfer<TInputParams>, NoInfer<TOutputParams>, NoInfer<TParentRoute>, NoInfer<TQueryParams>>) => void;
+    afterOpen?: (data: ParsedPathData<NoInfer<TPath>>, route: Route<NoInfer<TPath>, NoInfer<TInputParams>, NoInfer<TOutputParams>, NoInfer<TQueryParams>>) => void;
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#afterupdate)
      */
-    afterUpdate?: (data: ParsedPathData<NoInfer<TPath>>, route: Route<NoInfer<TPath>, NoInfer<TInputParams>, NoInfer<TOutputParams>, NoInfer<TParentRoute>, NoInfer<TQueryParams>>) => void;
+    afterUpdate?: (data: ParsedPathData<NoInfer<TPath>>, route: Route<NoInfer<TPath>, NoInfer<TInputParams>, NoInfer<TOutputParams>, NoInfer<TQueryParams>>) => void;
     /**
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#createurl)
      */
     createUrl?: UrlCreateParamsFn<TInputParams, TQueryParams>;
 }
-type AnyRoute = Route<any, any, any, any, any>;
+type AnyRoute = Route<any, any, any, any>;
 type InputPathParam = string | number | boolean | null;
 type ParsedPathParam = string;
 type Simplify<T> = T extends infer U ? {
@@ -148,8 +148,8 @@ interface ParsedPathData<TPath extends string> {
  *
  * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html)
  */
-declare class Route<TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TParentRoute extends Route<any, any, any, any, any> | null = null, TQueryParams extends Record<string, any> = AnyObject> {
-    protected config: RouteConfiguration<TPath, TInputParams, TOutputParams, TParentRoute, TQueryParams>;
+declare class Route<TPath extends string, TInputParams extends InputPathParams<TPath> = InputPathParams<TPath>, TOutputParams extends AnyObject = ParsedPathParams<TPath>, TQueryParams extends Record<string, any> = AnyObject> {
+    protected config: RouteConfiguration<TPath, TInputParams, TOutputParams, TQueryParams>;
     private isDestroyed?;
     private disposer?;
     protected history: History;
@@ -158,8 +158,8 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      *
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#parent)
      */
-    parent: TParentRoute;
-    query: IQueryParams<TQueryParams>;
+    parent: AnyRoute | null;
+    query: IQueryParams;
     private _tokenData;
     private _matcher?;
     private _compiler?;
@@ -192,7 +192,7 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#children)
      */
     children: AnyRoute[];
-    constructor(pathDeclaration: TPath, config?: RouteConfiguration<TPath, TInputParams, TOutputParams, TParentRoute, TQueryParams>);
+    constructor(pathDeclaration: TPath, config?: RouteConfiguration<TPath, TInputParams, TOutputParams, TQueryParams>);
     protected get baseUrl(): string | undefined;
     /**
      * Checks whether current route matches provided path.
@@ -227,7 +227,15 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#params)
      */
     get params(): TOutputParams | null;
-    protected get isPathMatched(): boolean;
+    protected get isConfigPathMatched(): boolean;
+    /**
+     * Whether the current URL path includes this route's path pattern.
+     * Uses prefix matching (`end: false`), so `/users` matches `/users/123`.
+     * Useful for navigation menu highlighting.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#ispathmatched)
+     */
+    get isPathMatched(): boolean;
     /**
      * Defines the "open" state for this route.
      *
@@ -239,7 +247,7 @@ declare class Route<TPath extends string, TInputParams extends InputPathParams<T
      *
      * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#extend)
      */
-    extend<TExtendedPath extends string, TExtendedInputParams extends InputPathParams<`${TPath}${TExtendedPath}`> = InputPathParams<`${TPath}${TExtendedPath}`>, TExtendedOutputParams extends AnyObject = TInputParams & ParsedPathParams<`${TPath}${TExtendedPath}`>, TExtendedQueryParams extends Record<string, any> = TQueryParams>(pathDeclaration: TExtendedPath, config?: Omit<RouteConfiguration<`${TPath}${TExtendedPath}`, TInputParams & TExtendedInputParams, TExtendedOutputParams, any, TExtendedQueryParams>, 'parent'>): Route<`${TPath}${TExtendedPath}`, TInputParams & TExtendedInputParams, TExtendedOutputParams, this, TExtendedQueryParams>;
+    extend<TExtendedPath extends string, TExtendedInputParams extends InputPathParams<`${TPath}${TExtendedPath}`> = InputPathParams<`${TPath}${TExtendedPath}`>, TExtendedOutputParams extends AnyObject = TInputParams & ParsedPathParams<`${TPath}${TExtendedPath}`>, TExtendedQueryParams extends Record<string, any> = TQueryParams>(pathDeclaration: TExtendedPath, config?: Omit<RouteConfiguration<`${TPath}${TExtendedPath}`, TInputParams & TExtendedInputParams, TExtendedOutputParams, TExtendedQueryParams>, 'parent'>): Route<`${TPath}${TExtendedPath}`, TInputParams & TExtendedInputParams, TExtendedOutputParams, TExtendedQueryParams>;
     /**
      * Manually add child routes.
      *

package/view-model.js

@@ -1,6 +1,6 @@
 import { computed } from "mobx";
 import { ViewModelBase, applyObservable } from "mobx-view-model";
-import { r as routeConfig } from "./virtual-route-C7NPJx5y.js";
+import { r as routeConfig } from "./virtual-route-DgVGEWRJ.js";
 const annotations = [
   [computed.struct, "pathParams"],
   [computed, "query"]

package/{virtual-route-C7NPJx5y.js → virtual-route-DgVGEWRJ.js}

@@ -32,6 +32,7 @@ const routeConfig = createGlobalDynamicConfig(
 const annotations$3 = [
   [
     computed,
+    "isConfigPathMatched",
     "isPathMatched",
     "isOpened",
     "isOpening",
@@ -60,9 +61,13 @@ class Route {
     if (this.config.abortSignal?.aborted) {
       this.isDestroyed = true;
     } else {
-      this.disposer = reaction(() => this.isPathMatched, this.checkPathMatch, {
-        fireImmediately: true
-      });
+      this.disposer = reaction(
+        () => this.isConfigPathMatched,
+        this.checkPathMatch,
+        {
+          fireImmediately: true
+        }
+      );
       this.updateDisposer = reaction(
         () => {
           if (this.status !== "open-confirmed") return void 0;
@@ -179,7 +184,7 @@ class Route {
     if (this.status === "opening") {
       return true;
     }
-    if (this.isDestroyed || !this.isPathMatched || this.params === null || this.status === "open-confirmed" || this.status === "open-rejected") {
+    if (this.isDestroyed || !this.isConfigPathMatched || this.params === null || this.status === "open-confirmed" || this.status === "open-rejected") {
       return false;
     }
     return this.status === "closed" || this.status === "unknown";
@@ -222,16 +227,38 @@ class Route {
     }
     return this.parsedPathData?.params ?? null;
   }
-  get isPathMatched() {
+  get isConfigPathMatched() {
     return this.parsedPathData !== null;
   }
+  /**
+   * Whether the current URL path includes this route's path pattern.
+   * Uses prefix matching (`end: false`), so `/users` matches `/users/123`.
+   * Useful for navigation menu highlighting.
+   *
+   * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#ispathmatched)
+   */
+  get isPathMatched() {
+    let pathname = this.isHash ? this.history.location.hash.slice(1) : this.history.location.pathname;
+    if (this.baseUrl) {
+      if (!pathname.startsWith(this.baseUrl)) return false;
+      pathname = pathname.replace(this.baseUrl, "");
+    }
+    if (this.pathDeclaration === "" || this.pathDeclaration === "/") {
+      return pathname === "/" || pathname === "" || pathname.startsWith("/");
+    }
+    const matcher = match(this.tokenData, {
+      end: false,
+      ...this.config.matchOptions
+    });
+    return matcher(pathname) !== false;
+  }
   /**
    * Defines the "open" state for this route.
    *
    * [**Documentation**](https://js2me.github.io/mobx-route/core/Route.html#isopened)
    */
   get isOpened() {
-    if (this.isDestroyed || !this.isPathMatched || this.params === null || this.status !== "open-confirmed") {
+    if (this.isDestroyed || !this.isConfigPathMatched || this.params === null || this.status !== "open-confirmed") {
       return false;
     }
     return (
@@ -427,7 +454,7 @@ class Route {
         this.history.push(trx.url, trx.state);
       }
     }
-    if (this.isPathMatched) {
+    if (this.isConfigPathMatched) {
       const wasAlreadyConfirmed = this.status === "open-confirmed";
       runInAction(() => {
         this.status = "open-confirmed";
@@ -510,10 +537,7 @@ class Route {
     this.updateDisposer = void 0;
   }
 }
-const createRoute = (path, config) => new Route(
-  path,
-  config
-);
+const createRoute = (path, config) => new Route(path, config);
 const annotations$2 = [
   [computed, "isOpened", "indexRoute", "canNavigate"],
   [observable.shallow, "routes"]
@@ -824,4 +848,4 @@ export {
   groupRoutes as g,
   routeConfig as r
 };
-//# sourceMappingURL=virtual-route-C7NPJx5y.js.map
+//# sourceMappingURL=virtual-route-DgVGEWRJ.js.map