@lagunovsky/redux-react-router - npm Package Compare versions

Comparing version 2.3.0 to 3.0.0

dist/index.d.ts

@@ -36,6 +36,47 @@ import { Action, History, Location } from 'history';
  */
+/**
+ * Pushes a new location onto the history stack, increasing its length by one.
+ * If there were any entries in the stack after the current one, they are
+ * lost.
+ *
+ * @param to - The new URL
+ * @param state - Data to associate with the new location
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.push
+ */
 export declare const push: (to: import("history").To, state?: any) => UpdateLocationAction<"push">;
+/**
+ * Replaces the current location in the history stack with a new one.  The
+ * location that was replaced will no longer be available.
+ *
+ * @param to - The new URL
+ * @param state - Data to associate with the new location
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.replace
+ */
 export declare const replace: (to: import("history").To, state?: any) => UpdateLocationAction<"replace">;
+/**
+ * Navigates `n` entries backward/forward in the history stack relative to the
+ * current index. For example, a "back" navigation would use go(-1).
+ *
+ * @param delta - The delta in the stack index
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.go
+ */
 export declare const go: (delta: number) => UpdateLocationAction<"go">;
+/**
+ * Navigates to the next entry in the stack. Identical to go(1).
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.forward
+ */
 export declare const back: () => UpdateLocationAction<"back">;
+/**
+ * Sets up a listener that will be called whenever the current location
+ * changes.
+ *
+ * @param listener - A function that will be called when the location changes
+ * @returns unlisten - A function that may be used to stop listening
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.listen
+ */
 export declare const forward: () => UpdateLocationAction<"forward">;
@@ -56,5 +97,8 @@ export declare const routerActions: {
 export declare function createRouterReducer(history: History): Reducer<ReduxRouterState, RouterActions>;
-export declare type ReduxRouterSelector = (store: Store) => ReduxRouterState;
-export declare function reduxRouterSelector(state: any): ReduxRouterState;
-declare type Props = {
+export declare type ReduxRouterSelector<T = any> = (state: T) => ReduxRouterState;
+export declare type ReduxRouterStoreState = {
+    router: ReduxRouterState;
+};
+export declare function reduxRouterSelector<T extends ReduxRouterStoreState = ReduxRouterStoreState>(state: T): ReduxRouterState;
+export declare type ReduxRouterProps = {
     store: Store;
@@ -67,20 +111,2 @@ history: History;
 };
-declare type State = {
-    action: Action;
-    location: Location;
-};
-export declare class ReduxRouter extends React.Component<Props, State> {
-    removeHistoryListener?: Function;
-    removeStoreSubscription?: Function;
-    timeTravelling: boolean;
-    static defaultProps: {
-        enableTimeTravelling: boolean;
-        routerSelector: typeof reduxRouterSelector;
-    };
-    constructor(props: Props);
-    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
-export {};
+export declare function ReduxRouter({ enableTimeTravelling, routerSelector, ...props }: ReduxRouterProps): JSX.Element;

dist/index.es.js

@@ -1,4 +0,32 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import { Router } from 'react-router';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 /**
@@ -30,6 +58,47 @@ * This action type will be dispatched when your history
  */
+/**
+ * Pushes a new location onto the history stack, increasing its length by one.
+ * If there were any entries in the stack after the current one, they are
+ * lost.
+ *
+ * @param to - The new URL
+ * @param state - Data to associate with the new location
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.push
+ */
 const push = updateLocation('push');
+/**
+ * Replaces the current location in the history stack with a new one.  The
+ * location that was replaced will no longer be available.
+ *
+ * @param to - The new URL
+ * @param state - Data to associate with the new location
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.replace
+ */
 const replace = updateLocation('replace');
+/**
+ * Navigates `n` entries backward/forward in the history stack relative to the
+ * current index. For example, a "back" navigation would use go(-1).
+ *
+ * @param delta - The delta in the stack index
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.go
+ */
 const go = updateLocation('go');
+/**
+ * Navigates to the next entry in the stack. Identical to go(1).
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.forward
+ */
 const back = updateLocation('back');
+/**
+ * Sets up a listener that will be called whenever the current location
+ * changes.
+ *
+ * @param listener - A function that will be called when the location changes
+ * @returns unlisten - A function that may be used to stop listening
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.listen
+ */
 const forward = updateLocation('forward');
@@ -71,15 +140,17 @@ const routerActions = {
 }
-class ReduxRouter extends React.Component {
-    constructor(props) {
-        super(props);
-        this.timeTravelling = false;
-        this.state = {
-            action: props.history.action,
-            location: props.history.location,
-        };
-        if (this.props.enableTimeTravelling === true) {
-            // Subscribe to store changes to check if we are in time travelling
-            this.removeStoreSubscription = props.store.subscribe(() => {
+const development = process.env.NODE_ENV === 'development';
+function ReduxRouter(_a) {
+    var { enableTimeTravelling = development, routerSelector = reduxRouterSelector } = _a, props = __rest(_a, ["enableTimeTravelling", "routerSelector"]);
+    const [state, setState] = useState({
+        action: props.history.action,
+        location: props.history.location,
+    });
+    const timeTravellingRef = useRef(false);
+    useEffect(() => {
+        let removeStoreSubscription;
+        let removeHistoryListener;
+        if (enableTimeTravelling === true) {
+            removeStoreSubscription = props.store.subscribe(() => {
                 // Extract store's location and browser location
-                const locationInStore = props.routerSelector(props.store.getState()).location;
+                const locationInStore = routerSelector(props.store.getState()).location;
                 const historyLocation = props.history.location;
@@ -92,3 +163,3 @@ // If we do time travelling, the location in store is changed but location in history is not changed
                         historyLocation.state !== locationInStore.state)) {
-                    this.timeTravelling = true;
+                    timeTravellingRef.current = true;
                     props.history.push(locationInStore);
@@ -98,36 +169,22 @@ }
         }
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        return this.state.location.key !== nextState.location.key;
-    }
-    componentDidMount() {
-        // Listen to history changes
-        this.removeHistoryListener = this.props.history.listen(({ location, action }) => {
-            if (this.timeTravelling === false) {
-                this.props.store.dispatch(onLocationChanged(location, action));
+        removeHistoryListener = props.history.listen(({ location, action }) => {
+            if (timeTravellingRef.current === false) {
+                props.store.dispatch(onLocationChanged(location, action));
             }
             else {
-                this.timeTravelling = false;
+                timeTravellingRef.current = false;
             }
-            this.setState({ action, location });
+            setState({ action, location });
         });
-    }
-    componentWillUnmount() {
-        if (this.removeHistoryListener !== undefined) {
-            this.removeHistoryListener();
-        }
-        if (this.removeStoreSubscription !== undefined) {
-            this.removeStoreSubscription();
-        }
-    }
-    render() {
-        return (React.createElement(Router, { navigationType: this.state.action, location: this.state.location, basename: this.props.basename, navigator: this.props.history, children: this.props.children }));
-    }
+        return function cleanup() {
+            removeHistoryListener();
+            if (removeStoreSubscription !== undefined) {
+                removeStoreSubscription();
+            }
+        };
+    }, development ? [enableTimeTravelling, history, routerSelector] : []);
+    return (jsx(Router, { navigationType: state.action, location: state.location, basename: props.basename, navigator: props.history, children: props.children }));
 }
-ReduxRouter.defaultProps = {
-    enableTimeTravelling: process.env.NODE_ENV === 'development',
-    routerSelector: reduxRouterSelector,
-};
 
 export { ROUTER_CALL_HISTORY_METHOD, ROUTER_ON_LOCATION_CHANGED, ReduxRouter, back, createRouterMiddleware, createRouterReducer, forward, go, onLocationChanged, push, reduxRouterSelector, replace, routerActions };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -5,9 +5,33 @@ 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var reactRouter = require('react-router');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
 
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 /**
@@ -39,6 +63,47 @@ * This action type will be dispatched when your history
  */
+/**
+ * Pushes a new location onto the history stack, increasing its length by one.
+ * If there were any entries in the stack after the current one, they are
+ * lost.
+ *
+ * @param to - The new URL
+ * @param state - Data to associate with the new location
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.push
+ */
 const push = updateLocation('push');
+/**
+ * Replaces the current location in the history stack with a new one.  The
+ * location that was replaced will no longer be available.
+ *
+ * @param to - The new URL
+ * @param state - Data to associate with the new location
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.replace
+ */
 const replace = updateLocation('replace');
+/**
+ * Navigates `n` entries backward/forward in the history stack relative to the
+ * current index. For example, a "back" navigation would use go(-1).
+ *
+ * @param delta - The delta in the stack index
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.go
+ */
 const go = updateLocation('go');
+/**
+ * Navigates to the next entry in the stack. Identical to go(1).
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.forward
+ */
 const back = updateLocation('back');
+/**
+ * Sets up a listener that will be called whenever the current location
+ * changes.
+ *
+ * @param listener - A function that will be called when the location changes
+ * @returns unlisten - A function that may be used to stop listening
+ *
+ * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#history.listen
+ */
 const forward = updateLocation('forward');
@@ -80,15 +145,17 @@ const routerActions = {
 }
-class ReduxRouter extends React__default["default"].Component {
-    constructor(props) {
-        super(props);
-        this.timeTravelling = false;
-        this.state = {
-            action: props.history.action,
-            location: props.history.location,
-        };
-        if (this.props.enableTimeTravelling === true) {
-            // Subscribe to store changes to check if we are in time travelling
-            this.removeStoreSubscription = props.store.subscribe(() => {
+const development = process.env.NODE_ENV === 'development';
+function ReduxRouter(_a) {
+    var { enableTimeTravelling = development, routerSelector = reduxRouterSelector } = _a, props = __rest(_a, ["enableTimeTravelling", "routerSelector"]);
+    const [state, setState] = react.useState({
+        action: props.history.action,
+        location: props.history.location,
+    });
+    const timeTravellingRef = react.useRef(false);
+    react.useEffect(() => {
+        let removeStoreSubscription;
+        let removeHistoryListener;
+        if (enableTimeTravelling === true) {
+            removeStoreSubscription = props.store.subscribe(() => {
                 // Extract store's location and browser location
-                const locationInStore = props.routerSelector(props.store.getState()).location;
+                const locationInStore = routerSelector(props.store.getState()).location;
                 const historyLocation = props.history.location;
@@ -101,3 +168,3 @@ // If we do time travelling, the location in store is changed but location in history is not changed
                         historyLocation.state !== locationInStore.state)) {
-                    this.timeTravelling = true;
+                    timeTravellingRef.current = true;
                     props.history.push(locationInStore);
@@ -107,34 +174,20 @@ }
         }
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        return this.state.location.key !== nextState.location.key;
-    }
-    componentDidMount() {
-        // Listen to history changes
-        this.removeHistoryListener = this.props.history.listen(({ location, action }) => {
-            if (this.timeTravelling === false) {
-                this.props.store.dispatch(onLocationChanged(location, action));
+        removeHistoryListener = props.history.listen(({ location, action }) => {
+            if (timeTravellingRef.current === false) {
+                props.store.dispatch(onLocationChanged(location, action));
             }
             else {
-                this.timeTravelling = false;
+                timeTravellingRef.current = false;
             }
-            this.setState({ action, location });
+            setState({ action, location });
         });
-    }
-    componentWillUnmount() {
-        if (this.removeHistoryListener !== undefined) {
-            this.removeHistoryListener();
-        }
-        if (this.removeStoreSubscription !== undefined) {
-            this.removeStoreSubscription();
-        }
-    }
-    render() {
-        return (React__default["default"].createElement(reactRouter.Router, { navigationType: this.state.action, location: this.state.location, basename: this.props.basename, navigator: this.props.history, children: this.props.children }));
-    }
+        return function cleanup() {
+            removeHistoryListener();
+            if (removeStoreSubscription !== undefined) {
+                removeStoreSubscription();
+            }
+        };
+    }, development ? [enableTimeTravelling, history, routerSelector] : []);
+    return (jsxRuntime.jsx(reactRouter.Router, { navigationType: state.action, location: state.location, basename: props.basename, navigator: props.history, children: props.children }));
 }
-ReduxRouter.defaultProps = {
-    enableTimeTravelling: process.env.NODE_ENV === 'development',
-    routerSelector: reduxRouterSelector,
-};
 
@@ -141,0 +194,0 @@ exports.ROUTER_CALL_HISTORY_METHOD = ROUTER_CALL_HISTORY_METHOD;

package.json

 {
   "name": "@lagunovsky/redux-react-router",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "A Redux binding for React Router v6",
@@ -37,2 +37,3 @@ "author": "Ivan Lagunovsky",
     "@rollup/plugin-node-resolve": "^13.3.0",
+    "@types/node": "^17.0.31",
     "@types/react": "^18.0.8",
@@ -39,0 +40,0 @@ "install-peers-cli": "^2.2.0",

No alert changes

Improved metrics

Total package byte prevSize

59367

increased by146.37%

Lines of code

685

increased by29.49%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes