feat!: use 7.x version of mobx-location-history (api like history package), mark type deprecation

Author: js2me

.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
       'error',
       { ignore: Object.keys(packageJson.peerDependencies) },
     ],
+    'sonarjs/deprecation': 'off'
   },
   overrides: [
     {
@@ -23,7 +24,8 @@ module.exports = {
         '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/no-this-alias': 'off',
         'react-hooks/rules-of-hooks': 'off',
-        'sonarjs/use-type-alias': 'off'
+        'sonarjs/use-type-alias': 'off',
+        'sonarjs/deprecation': 'off'
       },
       parserOptions: {
         project: 'tsconfig.test.json',

README.md

@@ -20,6 +20,28 @@ _**MobX** integration with **Wouter**_
 
 ## What package has   
 
+### [`Router`](src/router/router.ts)   
+
+Router for client navigation  
+
+### Usage   
+
+```ts
+import { Router, Location, History, QueryParams } from "mobx-wouter";
+
+const router = new Router({
+  history: //, new Location()
+  queryParams: //, new QueryParams(),
+  abortSignal: //
+})
+```
+
+
+### [`Location`, `History`, `QueryParams` and etc](https://github.com/js2me/mobx-location-history)  
+
+Exports from [mobx-location-history](https://github.com/js2me/mobx-location-history)  
+
+
 ### [`PageViewModelBase`](src/page-view-model/page-view-model.base.ts), [`PageViewModel`](src/page-view-model/page-view-model.ts)   
 
 Simple [`ViewModel`](https://github.com/js2me/mobx-view-model?tab=readme-ov-file#mobx-view-model) wrapper for pages  
@@ -63,23 +85,3 @@ export const HomePage = withPageViewModel(HomePageVM)(HomePageView);
 
 Same as [`withPageViewModel()`](src/page-view-model/with-page-view-model.tsx) but with lazy loading view and view model  
 
-### [`MobxRouter`](src/router/router.ts)   
-
-Router for client navigation  
-
-### [`Location`, `History`, `QueryParams` and etc](https://github.com/js2me/mobx-location-history)  
-
-Exports from [mobx-location-history](https://github.com/js2me/mobx-location-history)  
-
-
-### Usage   
-
-```ts
-import { Router, Location, History, QueryParams } from "mobx-wouter";
-
-const router = new Router({
-  history: //, new Location()
-  queryParams: //, new QueryParams(),
-  abortSignal: //
-})
-```

package.json

@@ -39,7 +39,7 @@
   },
   "type": "module",
   "dependencies": {
-    "mobx-location-history": "^5.1.0",
+    "mobx-location-history": "^7.0.3",
     "yummies": "^3.2.6"
   },
   "peerDependencies": {

pnpm-lock.yaml

@@ -1,36 +1,36 @@
-import { History, To } from 'mobx-location-history';
+import { createBrowserHistory, History } from 'mobx-location-history';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { Router } from './router.js';
-import {
-  RouterNavigateParams,
-  RouterToConfig,
-  RouterType,
-} from './router.types.js';
+import { RouterNavigateParams, RouterToConfig } from './router.types.js';
 
-export class HistoryMock extends History {
-  spies = {
-    push: vi.fn((to: To, state?: any) => super.push(to, state)),
-    replace: vi.fn((to: To, state?: any) => super.replace(to, state)),
+type RouterType = 'browser' | 'hash';
+
+export const mockHistory = (history: History) => {
+  const spies = {
+    push: vi.spyOn(history, 'push'),
+    replace: vi.spyOn(history, 'replace'),
   };
 
-  push(to: To, state?: any): void {
-    return this.spies.push(to, state);
-  }
+  const clearMocks = () => {
+    spies.push.mockClear();
+    spies.replace.mockClear();
+  };
 
-  replace(to: To, state?: any): void {
-    return this.spies.replace(to, state);
-  }
-}
+  return {
+    ...history,
+    spies,
+    clearMocks,
+  };
+};
 
 describe('router', () => {
-  const mockHistory = new HistoryMock();
+  const historyMock = mockHistory(createBrowserHistory());
 
   beforeEach(() => {
     history.replaceState(null, '', '/');
     location.hash = '';
-    mockHistory.spies.push.mockClear();
-    mockHistory.spies.replace.mockClear();
+    historyMock.clearMocks();
   });
 
   type NavigateTestConfig = {
@@ -500,7 +500,7 @@ describe('router', () => {
 
     test(testName, () => {
       const mockRouter = new Router({
-        history: mockHistory,
+        history: historyMock,
         type,
       });
 
@@ -509,19 +509,22 @@ describe('router', () => {
       expect(location.href).toBe(expectedHref);
 
       if (pushStateCalls != null) {
-        expect(mockHistory.spies.push).toHaveBeenCalledTimes(pushStateCalls);
+        expect(historyMock.spies.push).toHaveBeenCalledTimes(pushStateCalls);
       }
       if (replaceStateCalls != null) {
-        expect(mockHistory.spies.replace).toHaveBeenCalledTimes(
+        expect(historyMock.spies.replace).toHaveBeenCalledTimes(
           replaceStateCalls,
         );
       }
       if (expectedSearch != null) {
         expect(location.search).toBe(expectedSearch);
       }
       if (args?.[1]?.state != null) {
-        expect(mockHistory.state).toStrictEqual(args[1].state);
-        expect(history.state).toStrictEqual(args[1].state);
+        expect(historyMock.location.state).toStrictEqual(args[1].state);
+        expect(history.state).toStrictEqual({
+          ...history.state,
+          usr: args[1].state,
+        });
       }
     });
   };

src/router/router.test.ts

@@ -1,9 +1,10 @@
 import {
-  IQueryParams,
   History,
+  IQueryParams,
   QueryParams,
   buildSearchString,
-  AnyHistory,
+  createBrowserHistory,
+  createHashHistory,
 } from 'mobx-location-history';
 import { startTransition } from 'react';
 
@@ -13,27 +14,27 @@ import {
   RouterNavigateParams,
   RouterPath,
   RouterToConfig,
-  RouterType,
 } from './router.types.js';
 
-export class Router<THistory extends AnyHistory = AnyHistory>
+export class Router<THistory extends History = History>
   implements IRouter<THistory>
 {
   history: THistory;
-  location: THistory['location'];
   queryParams: IQueryParams;
   baseUrl: string | undefined;
-  type: RouterType;
 
   constructor(protected config: RouterConfig<THistory>) {
     this.baseUrl = config.baseUrl;
-    this.type = config.type ?? 'browser';
     this.history =
-      config.history ??
-      (new History({
-        abortSignal: config.abortSignal,
-      }) as unknown as THistory);
-    this.location = config.location ?? this.history.location;
+      config.history ?? (createBrowserHistory() as unknown as THistory);
+    if (config.history) {
+      this.history = config.history;
+    } else if (config.type === 'hash') {
+      this.history = createHashHistory() as unknown as THistory;
+    } else {
+      this.history = createBrowserHistory() as unknown as THistory;
+    }
+
     this.queryParams =
       config.queryParams ?? new QueryParams({ history: this.history });
   }
@@ -62,12 +63,16 @@ export class Router<THistory extends AnyHistory = AnyHistory>
     }
   }
 
-  createUrl(to: RouterToConfig, type?: RouterType): string {
+  get location() {
+    return this.history.location;
+  }
+
+  createUrl(to: RouterToConfig): string {
     const path = this.createPath(to);
 
     return [
       path.baseUrl,
-      type === 'hash' ? '#' : '',
+      this.config.type === 'hash' ? '#' : '',
       path.pathname,
       path.hash && `#${path.hash}`,
       path.search,
@@ -76,18 +81,15 @@ export class Router<THistory extends AnyHistory = AnyHistory>
 
   protected hashNavigate(to: RouterToConfig, options?: RouterNavigateParams) {
     const path = this.createPath(to);
-    const url = this.createUrl(
-      {
-        ...path,
-        // This is fixes bug with pathname endings /
-        // If location.pathname is /test-foo then after navigation to /test-foo#bar
-        // navigation back will not work
-        // If location.pathname is /test-foo/ then after navigation to /test-foo/#/bar
-        // navigation back will not work
-        baseUrl: this.location.pathname,
-      },
-      this.type,
-    );
+    const url = this.createUrl({
+      ...path,
+      // This is fixes bug with pathname endings /
+      // If location.pathname is /test-foo then after navigation to /test-foo#bar
+      // navigation back will not work
+      // If location.pathname is /test-foo/ then after navigation to /test-foo/#/bar
+      // navigation back will not work
+      baseUrl: this.location.pathname,
+    });
     const state = options?.state ?? null;
 
     this.wrapInViewTransition(() => {
@@ -101,7 +103,7 @@ export class Router<THistory extends AnyHistory = AnyHistory>
     options?: RouterNavigateParams,
   ) {
     const path = this.createPath(to);
-    const url = this.createUrl(path, this.type);
+    const url = this.createUrl(path);
     const state = options?.state ?? null;
 
     this.wrapInViewTransition(() => {
@@ -140,7 +142,7 @@ export class Router<THistory extends AnyHistory = AnyHistory>
   }
 
   navigate(to: RouterToConfig, options?: RouterNavigateParams): void {
-    if (this.type === 'hash') {
+    if (this.config.type === 'hash') {
       this.hashNavigate(to, options);
     } else {
       this.browserNavigate(to, options);
@@ -158,6 +160,6 @@ export class Router<THistory extends AnyHistory = AnyHistory>
  */
 export const MobxRouter = Router;
 
-export const createRouter = <THistory extends AnyHistory>(
+export const createRouter = <THistory extends History>(
   config: RouterConfig<THistory>,
 ) => new Router<THistory>(config);