redux-first-history - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

build/es5/actions.d.ts

@@ -5,7 +5,7 @@ import { Location, Action, History } from 'history';
 export declare const LOCATION_CHANGE = "@@router/LOCATION_CHANGE";
-export declare type HistoryMethods = 'push' | 'replace' | 'go' | 'goBack' | 'goForward';
-export declare const locationChangeAction: <T>(location: Location<T>, action: Action) => {
+export declare type HistoryMethods = 'push' | 'replace' | 'go' | 'goBack' | 'goForward' | 'back' | 'forward';
+export declare const locationChangeAction: (location: Location, action: Action) => {
     type: string;
     payload: {
-        location: Location<T>;
+        location: Location<unknown>;
         action: Action;
@@ -19,1 +19,3 @@ };
 export declare const goForward: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
+export declare const back: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
+export declare const forward: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;

build/es5/actions.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.goForward = exports.goBack = exports.go = exports.replace = exports.push = exports.locationChangeAction = exports.LOCATION_CHANGE = exports.CALL_HISTORY_METHOD = void 0;
+exports.forward = exports.back = exports.goForward = exports.goBack = exports.go = exports.replace = exports.push = exports.locationChangeAction = exports.LOCATION_CHANGE = exports.CALL_HISTORY_METHOD = void 0;
 exports.CALL_HISTORY_METHOD = '@@router/CALL_HISTORY_METHOD';
@@ -12,2 +12,3 @@ exports.LOCATION_CHANGE = '@@router/LOCATION_CHANGE';
 function updateLocation(method) {
+    // @ts-ignore
     return function () {
@@ -29,2 +30,4 @@ var args = [];
 exports.goForward = updateLocation('goForward');
+exports.back = updateLocation('back');
+exports.forward = updateLocation('forward');
 //# sourceMappingURL=actions.js.map

build/es5/create.js

@@ -50,2 +50,3 @@ "use strict";
         // listen to history API
+        // @ts-ignore
         history.listen(function (location, action) {
@@ -95,2 +96,3 @@ // support history v5
                     batch(function () {
+                        // @ts-ignore
                         store.dispatch((0, actions_1.locationChangeAction)(loc_1, action));
@@ -106,16 +108,2 @@ // @ts-ignore
         }
-        var back = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            return store.dispatch(actions_1.goBack.apply(void 0, args));
-        };
-        var forward = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            return store.dispatch(actions_1.goForward.apply(void 0, args));
-        };
         // @ts-ignore
@@ -146,6 +134,34 @@ return {
             },
-            goBack: back,
-            goForward: forward,
-            back: back,
-            forward: forward,
+            // @ts-ignore
+            goBack: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                return store.dispatch(actions_1.goBack.apply(void 0, args));
+            },
+            // @ts-ignore
+            goForward: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                return store.dispatch(actions_1.goForward.apply(void 0, args));
+            },
+            // @ts-ignore
+            back: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                return store.dispatch(actions_1.back.apply(void 0, args));
+            },
+            // @ts-ignore
+            forward: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                return store.dispatch(actions_1.forward.apply(void 0, args));
+            },
             listen: function (callback) {
@@ -170,2 +186,3 @@ if (registeredCallback.indexOf(callback) < 0) {
             get length() {
+                // @ts-ignore
                 return history.length;
@@ -172,0 +189,0 @@ },

build/es5/middleware.js

@@ -14,2 +14,3 @@ "use strict";
                 var method = action.payload.method;
+                // @ts-ignore
                 var args = action.payload.args;
@@ -27,3 +28,5 @@ // eslint-disable-next-line default-case
                         break;
+                    case 'back':
                     case 'goBack':
+                        // @ts-ignore
                         history.goBack && history.goBack.apply(history, args);
@@ -33,3 +36,5 @@ //@ts-ignore //support history 5.x
                         break;
+                    case 'forward':
                     case 'goForward':
+                        // @ts-ignore
                         history.goForward && history.goForward.apply(history, args);
@@ -36,0 +41,0 @@ //@ts-ignore //support history 5.x

build/es6/actions.d.ts

@@ -5,7 +5,7 @@ import { Location, Action, History } from 'history';
 export declare const LOCATION_CHANGE = "@@router/LOCATION_CHANGE";
-export declare type HistoryMethods = 'push' | 'replace' | 'go' | 'goBack' | 'goForward';
-export declare const locationChangeAction: <T>(location: Location<T>, action: Action) => {
+export declare type HistoryMethods = 'push' | 'replace' | 'go' | 'goBack' | 'goForward' | 'back' | 'forward';
+export declare const locationChangeAction: (location: Location, action: Action) => {
     type: string;
     payload: {
-        location: Location<T>;
+        location: Location<unknown>;
         action: Action;
@@ -19,1 +19,3 @@ };
 export declare const goForward: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
+export declare const back: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
+export declare const forward: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;

build/es6/actions.js

@@ -8,2 +8,3 @@ export const CALL_HISTORY_METHOD = '@@router/CALL_HISTORY_METHOD';
 function updateLocation(method) {
+    // @ts-ignore
     return (...args) => ({
@@ -19,2 +20,4 @@ type: CALL_HISTORY_METHOD,
 export const goForward = updateLocation('goForward');
+export const back = updateLocation('back');
+export const forward = updateLocation('forward');
 //# sourceMappingURL=actions.js.map

build/es6/create.js

@@ -1,2 +0,2 @@
-import { go, goBack, goForward, push, replace, locationChangeAction } from './actions';
+import { go, goBack, goForward, back, forward, push, replace, locationChangeAction, } from './actions';
 import { createRouterMiddleware } from './middleware';
@@ -42,2 +42,3 @@ import { createRouterReducer } from './reducer';
         // listen to history API
+        // @ts-ignore
         history.listen((location, action) => {
@@ -82,2 +83,3 @@ // support history v5
                     batch(() => {
+                        // @ts-ignore
                         store.dispatch(locationChangeAction(loc, action));
@@ -91,4 +93,2 @@ // @ts-ignore
         }
-        const back = (...args) => store.dispatch(goBack(...args));
-        const forward = (...args) => store.dispatch(goForward(...args));
         // @ts-ignore
@@ -101,6 +101,10 @@ return {
             go: (...args) => store.dispatch(go(...args)),
-            goBack: back,
-            goForward: forward,
-            back,
-            forward,
+            // @ts-ignore
+            goBack: (...args) => store.dispatch(goBack(...args)),
+            // @ts-ignore
+            goForward: (...args) => store.dispatch(goForward(...args)),
+            // @ts-ignore
+            back: (...args) => store.dispatch(back(...args)),
+            // @ts-ignore
+            forward: (...args) => store.dispatch(forward(...args)),
             listen: callback => {
@@ -125,2 +129,3 @@ if (registeredCallback.indexOf(callback) < 0) {
             get length() {
+                // @ts-ignore
                 return history.length;
@@ -127,0 +132,0 @@ },

build/es6/middleware.js

@@ -7,2 +7,3 @@ import { CALL_HISTORY_METHOD } from './actions';
     const method = action.payload.method;
+    // @ts-ignore
     const args = action.payload.args;
@@ -20,3 +21,5 @@ // eslint-disable-next-line default-case
             break;
+        case 'back':
         case 'goBack':
+            // @ts-ignore
             history.goBack && history.goBack(...args);
@@ -26,3 +29,5 @@ //@ts-ignore //support history 5.x
             break;
+        case 'forward':
         case 'goForward':
+            // @ts-ignore
             history.goForward && history.goForward(...args);
@@ -29,0 +34,0 @@ //@ts-ignore //support history 5.x

package.json

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

README.md

@@ -10,6 +10,6 @@ # redux-first-history
 Redux history binding for
-* [`react-router`](https://github.com/ReactTraining/react-router)
+* [`react-router`](https://github.com/remix-run/react-router)
 * [`@reach/router`](https://github.com/reach/router)
 * [`wouter`](https://github.com/molefrog/wouter)
-* mix `react-router` - `@reach-router` - `wouter` in the same app!! Demo : https://wy5qw1125l.codesandbox.io/.
+* mix `react-router` - `@reach/router` - `wouter` in the same app!! Demo : https://wy5qw1125l.codesandbox.io/.
 
@@ -25,8 +25,6 @@ Compatible with `immer` - `redux-immer` - `redux-immutable`.
 ```javascript
-//react-router v6
+//react-router v5 - v6
 useLocation() === state.router.location
 
-//react-router v4 - v5
-this.context.router.history.location === state.router.location
-this.context.route.location === state.router.location
+//react-router v5
 this.props.history.location === state.router.location
@@ -36,2 +34,6 @@ this.props.location === state.router.location
 
+//react-router v4
+this.context.router.history.location === state.router.location
+this.context.route.location === state.router.location
+
 //@reach/router
@@ -68,4 +70,4 @@ this.props.location === state.router.location
 * support @reach/router 1.x
-* support @wouter 2.x
-* support mix react-router, @reach-router & wouter in the same app!
+* support wouter 2.x
+* support mix react-router, @reach/router & wouter in the same app!
 * fast migration from existing project, with same `LOCATION_CHANGE` and push actions (taken from RRR)
@@ -117,2 +119,25 @@ * handle Redux Travelling from devTools (that's a non sense in production, but at the end of the day this decision it's up to you ...)
 
+store.js (with @reduxjs/toolkit)
+```javascript
+import { combineReducers } from "redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { createReduxHistoryContext, reachify } from "redux-first-history";
+import { createBrowserHistory } from "history";
+
+const {
+  createReduxHistory,
+  routerMiddleware,
+  routerReducer
+} = createReduxHistoryContext({ history: createBrowserHistory() });
+
+export const store = configureStore({
+  reducer: combineReducers({
+    router: routerReducer
+  }),
+  middleware: [routerMiddleware]
+});
+
+export const history = createReduxHistory(store);
+```
+
 app.js 
@@ -122,3 +147,2 @@ ```javascript
 import { Provider, connect } from "react-redux";
-import { push } from "redux-first-history";
 import { Router } from "react-router-dom";
@@ -137,2 +161,21 @@ import { store, history } from "./store";
 ```
+
+app.js (react-router v6)
+```javascript
+import React, { Component } from "react";
+import { Provider, connect } from "react-redux";
+import { HistoryRouter as Router } from "redux-first-history/rr6";
+import { store, history } from "./store";
+
+const App = () => (
+      <Provider store={store}>
+        <Router history={history}>
+        //.....
+        </Router>
+      </Provider>
+    );
+
+export default App;
+```
+
 * just simple Router with no more ConnectedRouter!
@@ -160,3 +203,2 @@ * use `push` action creator from `redux-first-history` if you need to dispatch location from `saga` or connected components.
   routerReducerKey = 'router', 
-  oldLocationChangePayload = false, 
   reduxTravelling = false, 
@@ -174,3 +216,2 @@ selectRouterState = null,
 |routerReducerKey | yes | if you don't like `router` name for reducer.
-|oldLocationChangePayload | yes | if you use the old`LOCATION_CHANGE`payload`{ ...location }`instead of the new`{ location }`, setting this flag will make you able to not change your app at all! (removed in v5)
 |reduxTravelling | yes | if you want to play with redux-dev-tools :D.
@@ -177,0 +218,0 @@ |selectRouterState |yes | custom selector for router state. With redux-immutable selectRouterState = state => state.get("router")

rr6/index.js

@@ -1,6 +0,6 @@
-/* eslint-disable prefer-object-spread, import/no-unresolved*/
+/* eslint-disable react/no-children-prop */
 import React from 'react';
 import { Router } from 'react-router';
 
-export function HistoryRouter({ children, history }) {
+export function HistoryRouter({ basename, children, history }) {
    const [state, setState] = React.useState({
@@ -11,3 +11,9 @@ action: history.action,
    React.useLayoutEffect(() => history.listen(setState), [history]);
-   return React.createElement(Router, Object.assign({ children, navigator: history }, state));
-}
+   return React.createElement(Router, {
+      basename,
+      children,
+      location: state.location,
+      navigationType: state.action,
+      navigator: history,
+   });
+}

src/actions.ts

@@ -7,5 +7,13 @@ import { Location, Action, History } from 'history';
 
-export type HistoryMethods = 'push' | 'replace' | 'go' | 'goBack' | 'goForward';
+//support history v4/ v5
+export type HistoryMethods =
+   | 'push'
+   | 'replace'
+   | 'go'
+   | 'goBack'
+   | 'goForward'
+   | 'back'
+   | 'forward';
 
-export const locationChangeAction = <T>(location: Location<T>, action: Action) => ({
+export const locationChangeAction = (location: Location, action: Action) => ({
    type: LOCATION_CHANGE,
@@ -16,2 +24,3 @@ payload: { location, action },
 function updateLocation(method: HistoryMethods) {
+   // @ts-ignore
    return (...args: Parameters<History[HistoryMethods]>): ReduxAction => ({
@@ -28,1 +37,3 @@ type: CALL_HISTORY_METHOD,
 export const goForward = updateLocation('goForward');
+export const back = updateLocation('back');
+export const forward = updateLocation('forward');

src/create.ts

 import type { History, Location } from 'history';
 import type { History as ReachHistory } from '@reach/router';
 import type { Middleware, Reducer, Store } from 'redux';
-import { go, goBack, goForward, push, replace, locationChangeAction } from './actions';
+import {
+   go,
+   goBack,
+   goForward,
+   back,
+   forward,
+   push,
+   replace,
+   locationChangeAction,
+} from './actions';
 import { createRouterMiddleware } from './middleware';
@@ -88,2 +97,3 @@ import { createRouterReducer, RouterState } from './reducer';
       // listen to history API
+      // @ts-ignore
       history.listen((location, action) => {
@@ -134,2 +144,3 @@ // support history v5
                batch(() => {
+                  // @ts-ignore
                   store.dispatch(locationChangeAction(loc, action));
@@ -146,5 +157,2 @@ // @ts-ignore
 
-      const back = (...args: Parameters<History['goBack']>) => store.dispatch(goBack(...args));
-      const forward = (...args: Parameters<History['goForward']>) =>
-         store.dispatch(goForward(...args));
       // @ts-ignore
@@ -157,6 +165,11 @@ return {
          go: (...args: Parameters<History['go']>) => store.dispatch(go(...args)),
-         goBack: back,
-         goForward: forward,
-         back,
-         forward,
+         // @ts-ignore
+         goBack: (...args: Parameters<History['goBack']>) => store.dispatch(goBack(...args)),
+         // @ts-ignore
+         goForward: (...args: Parameters<History['goForward']>) =>
+            store.dispatch(goForward(...args)),
+         // @ts-ignore
+         back: (...args: Parameters<History['back']>) => store.dispatch(back(...args)),
+         // @ts-ignore
+         forward: (...args: Parameters<History['forward']>) => store.dispatch(forward(...args)),
          listen: callback => {
@@ -181,2 +194,3 @@ if (registeredCallback.indexOf(callback) < 0) {
          get length() {
+            // @ts-ignore
             return history.length;
@@ -183,0 +197,0 @@ },

src/middleware.ts

@@ -20,2 +20,3 @@ /* eslint-disable consistent-return,indent */
       const method = action.payload.method as HistoryMethods;
+      // @ts-ignore
       const args = action.payload.args as Parameters<History[HistoryMethods]>;
@@ -34,3 +35,5 @@
             break;
+         case 'back':
          case 'goBack':
+            // @ts-ignore
             history.goBack && history.goBack(...(args as Parameters<History['goBack']>));
@@ -40,3 +43,5 @@ //@ts-ignore //support history 5.x
             break;
+         case 'forward':
          case 'goForward':
+            // @ts-ignore
             history.goForward && history.goForward(...(args as Parameters<History['goForward']>));
@@ -43,0 +48,0 @@ //@ts-ignore //support history 5.x

No alert changes

Improved metrics

Total package byte prevSize

83453

increased by5.59%

Number of package files

54

increased by1.89%

Lines of code

1216

increased by7.9%

Number of lines in readme file

258

increased by18.89%

No dependency changes