redux-first-history - npm Package Compare versions

Comparing version 5.0.12 to 5.1.0

build/es5/actions.d.ts

@@ -7,3 +7,3 @@ import type { Location, Action, History } from 'history';
 export declare const locationChangeAction: (location: Location, action: Action) => {
-    type: string;
+    type: "@@router/LOCATION_CHANGE";
     payload: {
@@ -10,0 +10,0 @@ location: Location;

build/es5/create.d.ts

@@ -14,2 +14,3 @@ import type { History } from 'history';
     reachGlobalHistory?: ReachHistory;
+    basename?: string;
 }
@@ -23,2 +24,2 @@ export interface IHistoryContext {
 }
-export declare const createReduxHistoryContext: ({ history, routerReducerKey, reduxTravelling, showHistoryAction, selectRouterState, savePreviousLocations, batch, reachGlobalHistory, }: IHistoryContextOptions) => IHistoryContext;
+export declare const createReduxHistoryContext: ({ history, routerReducerKey, reduxTravelling, showHistoryAction, selectRouterState, savePreviousLocations, batch, reachGlobalHistory, basename, }: IHistoryContextOptions) => IHistoryContext;

build/es5/create.js

@@ -8,3 +8,3 @@ "use strict";
 var createReduxHistoryContext = function (_a) {
-    var history = _a.history, _b = _a.routerReducerKey, routerReducerKey = _b === void 0 ? 'router' : _b, _c = _a.reduxTravelling, reduxTravelling = _c === void 0 ? false : _c, _d = _a.showHistoryAction, showHistoryAction = _d === void 0 ? false : _d, selectRouterState = _a.selectRouterState, _e = _a.savePreviousLocations, savePreviousLocations = _e === void 0 ? 0 : _e, batch = _a.batch, reachGlobalHistory = _a.reachGlobalHistory;
+    var history = _a.history, _b = _a.routerReducerKey, routerReducerKey = _b === void 0 ? 'router' : _b, _c = _a.reduxTravelling, reduxTravelling = _c === void 0 ? false : _c, _d = _a.showHistoryAction, showHistoryAction = _d === void 0 ? false : _d, selectRouterState = _a.selectRouterState, _e = _a.savePreviousLocations, savePreviousLocations = _e === void 0 ? 0 : _e, batch = _a.batch, reachGlobalHistory = _a.reachGlobalHistory, basename = _a.basename;
     var listenObject = false;
@@ -24,4 +24,4 @@ // @ts-ignore
     }
-    var routerReducer = (0, reducer_1.createRouterReducer)({ savePreviousLocations: savePreviousLocations });
-    var routerMiddleware = (0, middleware_1.createRouterMiddleware)({ history: history, showHistoryAction: showHistoryAction });
+    var routerReducer = (0, reducer_1.createRouterReducer)({ savePreviousLocations: savePreviousLocations, basename: basename });
+    var routerMiddleware = (0, middleware_1.createRouterMiddleware)({ history: history, showHistoryAction: showHistoryAction, basename: basename });
     /** ******************************************  REDUX TRAVELLING  ************************************************** */
@@ -28,0 +28,0 @@ var isReduxTravelling = false;

build/es5/middleware.d.ts

@@ -6,4 +6,5 @@ import { History } from 'history';
     showHistoryAction: boolean;
+    basename?: string;
 };
-export declare const createRouterMiddleware: ({ history, showHistoryAction }: CreateRouterMiddlewareArgs) => Middleware;
+export declare const createRouterMiddleware: ({ history, showHistoryAction, basename }: CreateRouterMiddlewareArgs) => Middleware;
 export {};

build/es5/middleware.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRouterMiddleware = void 0;
 var actions_1 = require("./actions");
+function appendBasename(location, basename) {
+    if (typeof location === 'string' && !location.startsWith(basename)) {
+        return basename + location;
+    }
+    if (typeof location === 'object' &&
+        !!location.pathname &&
+        !location.pathname.startsWith(basename)) {
+        return __assign(__assign({}, location), { pathname: basename + location.pathname });
+    }
+    return location;
+}
 var createRouterMiddleware = function (_a) {
-    var history = _a.history, showHistoryAction = _a.showHistoryAction;
+    var history = _a.history, showHistoryAction = _a.showHistoryAction, basename = _a.basename;
     return function () {
@@ -18,8 +49,22 @@ return function (next) {
                 switch (method) {
-                    case 'push':
-                        history.push.apply(history, args);
+                    case 'push': {
+                        var callArgs = args;
+                        if (basename && args.length > 0) {
+                            callArgs = __spreadArray([
+                                appendBasename(args[0], basename)
+                            ], args.slice(1), true);
+                        }
+                        history.push.apply(history, callArgs);
                         break;
-                    case 'replace':
-                        history.replace.apply(history, args);
+                    }
+                    case 'replace': {
+                        var callArgs = args;
+                        if (basename && args.length > 0) {
+                            callArgs = __spreadArray([
+                                appendBasename(args[0], basename)
+                            ], args.slice(1), true);
+                        }
+                        history.replace.apply(history, callArgs);
                         break;
+                    }
                     case 'go':
@@ -26,0 +71,0 @@ history.go.apply(history, args);

build/es5/reducer.d.ts

@@ -10,5 +10,7 @@ import { Action, Location } from 'history';
     }[];
+    basename?: string;
 };
-export declare const createRouterReducer: ({ savePreviousLocations }: {
+export declare const createRouterReducer: ({ savePreviousLocations, basename, }: {
     savePreviousLocations?: number | undefined;
+    basename?: string | undefined;
 }) => Reducer<RouterState>;

build/es5/reducer.js

@@ -26,6 +26,7 @@ "use strict";
 var createRouterReducer = function (_a) {
-    var _b = _a.savePreviousLocations, savePreviousLocations = _b === void 0 ? 0 : _b;
+    var _b = _a.savePreviousLocations, savePreviousLocations = _b === void 0 ? 0 : _b, basename = _a.basename;
     var initialState = {
         location: null,
         action: null,
+        basename: basename,
     };
@@ -32,0 +33,0 @@ // eslint-disable-next-line no-restricted-globals

build/es6/actions.d.ts

@@ -7,3 +7,3 @@ import type { Location, Action, History } from 'history';
 export declare const locationChangeAction: (location: Location, action: Action) => {
-    type: string;
+    type: "@@router/LOCATION_CHANGE";
     payload: {
@@ -10,0 +10,0 @@ location: Location;

build/es6/create.d.ts

@@ -14,2 +14,3 @@ import type { History } from 'history';
     reachGlobalHistory?: ReachHistory;
+    basename?: string;
 }
@@ -23,2 +24,2 @@ export interface IHistoryContext {
 }
-export declare const createReduxHistoryContext: ({ history, routerReducerKey, reduxTravelling, showHistoryAction, selectRouterState, savePreviousLocations, batch, reachGlobalHistory, }: IHistoryContextOptions) => IHistoryContext;
+export declare const createReduxHistoryContext: ({ history, routerReducerKey, reduxTravelling, showHistoryAction, selectRouterState, savePreviousLocations, batch, reachGlobalHistory, basename, }: IHistoryContextOptions) => IHistoryContext;

build/es6/create.js

 import { go, goBack, goForward, back, forward, push, replace, locationChangeAction, } from './actions';
 import { createRouterMiddleware } from './middleware';
 import { createRouterReducer } from './reducer';
-export const createReduxHistoryContext = ({ history, routerReducerKey = 'router', reduxTravelling = false, showHistoryAction = false, selectRouterState, savePreviousLocations = 0, batch, reachGlobalHistory, }) => {
+export const createReduxHistoryContext = ({ history, routerReducerKey = 'router', reduxTravelling = false, showHistoryAction = false, selectRouterState, savePreviousLocations = 0, batch, reachGlobalHistory, basename, }) => {
     let listenObject = false;
@@ -17,4 +17,4 @@ // @ts-ignore
     }
-    const routerReducer = createRouterReducer({ savePreviousLocations });
-    const routerMiddleware = createRouterMiddleware({ history, showHistoryAction });
+    const routerReducer = createRouterReducer({ savePreviousLocations, basename });
+    const routerMiddleware = createRouterMiddleware({ history, showHistoryAction, basename });
     /** ******************************************  REDUX TRAVELLING  ************************************************** */
@@ -21,0 +21,0 @@ let isReduxTravelling = false;

build/es6/middleware.d.ts

@@ -6,4 +6,5 @@ import { History } from 'history';
     showHistoryAction: boolean;
+    basename?: string;
 };
-export declare const createRouterMiddleware: ({ history, showHistoryAction }: CreateRouterMiddlewareArgs) => Middleware;
+export declare const createRouterMiddleware: ({ history, showHistoryAction, basename }: CreateRouterMiddlewareArgs) => Middleware;
 export {};

build/es6/middleware.js

 import { CALL_HISTORY_METHOD } from './actions';
-export const createRouterMiddleware = ({ history, showHistoryAction }) => () => (next) => (action) => {
+function appendBasename(location, basename) {
+    if (typeof location === 'string' && !location.startsWith(basename)) {
+        return basename + location;
+    }
+    if (typeof location === 'object' &&
+        !!location.pathname &&
+        !location.pathname.startsWith(basename)) {
+        return Object.assign(Object.assign({}, location), { pathname: basename + location.pathname });
+    }
+    return location;
+}
+export const createRouterMiddleware = ({ history, showHistoryAction, basename }) => () => (next) => (action) => {
     if (action.type !== CALL_HISTORY_METHOD) {
@@ -11,8 +22,24 @@ return next(action);
     switch (method) {
-        case 'push':
-            history.push(...args);
+        case 'push': {
+            let callArgs = args;
+            if (basename && args.length > 0) {
+                callArgs = [
+                    appendBasename(args[0], basename),
+                    ...args.slice(1),
+                ];
+            }
+            history.push(...callArgs);
             break;
-        case 'replace':
-            history.replace(...args);
+        }
+        case 'replace': {
+            let callArgs = args;
+            if (basename && args.length > 0) {
+                callArgs = [
+                    appendBasename(args[0], basename),
+                    ...args.slice(1),
+                ];
+            }
+            history.replace(...callArgs);
             break;
+        }
         case 'go':
@@ -19,0 +46,0 @@ history.go(...args);

build/es6/reducer.d.ts

@@ -10,5 +10,7 @@ import { Action, Location } from 'history';
     }[];
+    basename?: string;
 };
-export declare const createRouterReducer: ({ savePreviousLocations }: {
+export declare const createRouterReducer: ({ savePreviousLocations, basename, }: {
     savePreviousLocations?: number | undefined;
+    basename?: string | undefined;
 }) => Reducer<RouterState>;

build/es6/reducer.js

 import { LOCATION_CHANGE } from './actions';
-export const createRouterReducer = ({ savePreviousLocations = 0 }) => {
+export const createRouterReducer = ({ savePreviousLocations = 0, basename, }) => {
     const initialState = {
         location: null,
         action: null,
+        basename,
     };
@@ -7,0 +8,0 @@ // eslint-disable-next-line no-restricted-globals

package.json

 {
    "name": "redux-first-history",
-   "version": "5.0.12",
+   "version": "5.1.0",
    "description": "Redux First History - Redux history binding support react-router - @reach/router - wouter",
@@ -5,0 +5,0 @@ "main": "build/es5/index.js",

README.md

@@ -13,3 +13,4 @@ # redux-first-history
 * [`wouter`](https://github.com/molefrog/wouter)
-* Mix `react-router` - `@reach/router` - `wouter` in the same app! See [Demo](#demo).
+* [`react-location`](https://github.com/tanstack/react-location)
+* Mix `react-router` - `@reach/router` - `wouter` - `react-location` in the same app! See [Demo](#demo).
 
@@ -69,3 +70,3 @@ Compatible with `immer` - `redux-immer` - `redux-immutable`.
 
-Mix redux, redux-saga, react-router, @reach/router & wouter
+Mix redux, redux-saga, react-router, @reach/router, wouter and react-location
 without any synchronization issue! <br>
@@ -83,8 +84,8 @@ Why? Because there is no synchronization at all! There is only one history: reduxHistory!
 
+- react-router v6: https://wvst19.csb.app/ 
+  - Source: https://codesandbox.io/s/redux-first-history-demo-rr6-forked-wvst19
+
 - react-router v5: https://wy5qw1125l.codesandbox.io/ 
   - Source: https://codesandbox.io/s/wy5qw1125l
 
-- react-router v6: https://uccuw.csb.app/
-  - Source: https://codesandbox.io/s/redux-first-history-demo-rr6-uccuw
-
 # Main Features
@@ -97,2 +98,3 @@
 * Improve React shallowCompare as there is only one "location"
+* Support react-location 3.x
 * Support react-router v4 / v5 / v6
@@ -99,0 +101,0 @@ * Support @reach/router 1.x

src/actions.ts

@@ -18,3 +18,3 @@ import type { Location, Action, History } from 'history';
 export const locationChangeAction = (location: Location, action: Action) => ({
-   type: LOCATION_CHANGE,
+   type: LOCATION_CHANGE as typeof LOCATION_CHANGE,
    payload: { location, action } as { location: Location; action: Action },
@@ -26,3 +26,3 @@ });
    return (...args: Parameters<History[T]>): ReduxAction => ({
-      type: CALL_HISTORY_METHOD,
+      type: CALL_HISTORY_METHOD as typeof CALL_HISTORY_METHOD,
       payload: { method, args },
@@ -29,0 +29,0 @@ });

src/create.ts

@@ -26,2 +26,3 @@ import type { History, Location } from 'history';
    reachGlobalHistory?: ReachHistory;
+   basename?: string;
 }
@@ -44,2 +45,3 @@
    reachGlobalHistory,
+   basename,
 }: IHistoryContextOptions): IHistoryContext => {
@@ -64,4 +66,4 @@ let listenObject = false;
 
-   const routerReducer = createRouterReducer({ savePreviousLocations });
-   const routerMiddleware = createRouterMiddleware({ history, showHistoryAction });
+   const routerReducer = createRouterReducer({ savePreviousLocations, basename });
+   const routerMiddleware = createRouterMiddleware({ history, showHistoryAction, basename });
 
@@ -68,0 +70,0 @@ /** ******************************************  REDUX TRAVELLING  ************************************************** */

src/middleware.ts

@@ -9,6 +9,21 @@ /* eslint-disable consistent-return,indent */
    showHistoryAction: boolean;
+   basename?: string;
 };
 
+function appendBasename(location: string | Location, basename: string): string | Location {
+   if (typeof location === 'string' && !location.startsWith(basename)) {
+      return basename + location;
+   }
+   if (
+      typeof location === 'object' &&
+      !!location.pathname &&
+      !location.pathname.startsWith(basename)
+   ) {
+      return { ...location, pathname: basename + location.pathname };
+   }
+   return location;
+}
+
 export const createRouterMiddleware =
-   ({ history, showHistoryAction }: CreateRouterMiddlewareArgs): Middleware =>
+   ({ history, showHistoryAction, basename }: CreateRouterMiddlewareArgs): Middleware =>
    () =>
@@ -26,8 +41,24 @@ (next: Dispatch) =>
       switch (method) {
-         case 'push':
-            history.push(...(args as Parameters<History['push']>));
+         case 'push': {
+            let callArgs = args;
+            if (basename && args.length > 0) {
+               callArgs = [
+                  appendBasename(args[0] as string | Location, basename),
+                  ...args.slice(1),
+               ];
+            }
+            history.push(...(callArgs as Parameters<History['push']>));
             break;
-         case 'replace':
-            history.replace(...(args as Parameters<History['replace']>));
+         }
+         case 'replace': {
+            let callArgs = args;
+            if (basename && args.length > 0) {
+               callArgs = [
+                  appendBasename(args[0] as string | Location, basename),
+                  ...args.slice(1),
+               ];
+            }
+            history.replace(...(callArgs as Parameters<History['replace']>));
             break;
+         }
          case 'go':
@@ -34,0 +65,0 @@ history.go(...(args as Parameters<History['go']>));

src/reducer.ts

@@ -9,8 +9,16 @@ import { Action, Location } from 'history';
    previousLocations?: { location?: Location | null; action?: Action | null }[];
+   basename?: string;
 };
 
-export const createRouterReducer = ({ savePreviousLocations = 0 }): Reducer<RouterState> => {
+export const createRouterReducer = ({
+   savePreviousLocations = 0,
+   basename,
+}: {
+   savePreviousLocations?: number;
+   basename?: string;
+}): Reducer<RouterState> => {
    const initialState: RouterState = {
       location: null,
       action: null,
+      basename,
    };
@@ -17,0 +25,0 @@

No alert changes

Improved metrics

Total package byte prevSize

96426

increased by7.14%

Lines of code

1485

increased by8.95%

Number of lines in readme file

300

increased by0.67%

No dependency changes