state-in-url 5.2.0 → 6.0.0

package/README.md

@@ -431,6 +431,8 @@ type Form = {
 
 ```typescript
 import { useUrlState } from 'state-in-url/react-router';
+// for react-router v6
+// import { useUrlState } from 'state-in-url/react-router6';
 
 import { form } from './form';
 

package/dist/react-router/useUrlState/useUrlState.d.ts

@@ -1,4 +1,4 @@
-import { type NavigateOptions } from "react-router-dom";
+import { type NavigateOptions } from "react-router";
 import { type JSONCompatible } from "../../utils";
 /**
  * React-router hook. Returns `urlState`, `setState`, and `setUrl` functions

package/dist/react-router/useUrlState/useUrlState.js

@@ -1 +1 @@
-"use strict";var P=require("react");var c=require("react-router-dom");var _=require("../../parseSPObj.js");var g=require("../../useUrlStateBase/useUrlStateBase.js");var u=require("../../utils.js");function k(e){return e&&e.__esModule?e:{default:e}}var s=k(P);function R(e,l){const p=l?.useHistory;const a=s.default.useMemo(()=>({...h,replace:l?.replace,preventScrollReset:l?.preventScrollReset}),[]);const n=c.useNavigate();const v=s.default.useMemo(()=>p?u.routerHistory:{replace:(t,r)=>n(t,{...a,...r}),push:(t,r)=>n(t,{...a,...r})},[n]);const[o]=c.useSearchParams();const d=c.useHref("/");const{state:U,updateState:i,updateUrl:f,getState:m,reset:S}=g.useUrlStateBase(e,v,({parse:t})=>t(u.filterUnknownParamsClient(e,o.entries())),d);const b=s.default.useCallback((t,r)=>f(t,{...a,...r}),[f]);s.default.useEffect(()=>{i(u.assignValue(e,u.filterUnknownParams(e,_.parseSPObj(Object.fromEntries([...o.entries()]),e))))},[o]);const q=s.default.useCallback(t=>{S({...a,...t})},[S]);return{setState:i,setUrl:b,urlState:U,reset:q,getState:m}}const h={replace:true,preventScrollReset:true};exports.useUrlState=R;
+"use strict";var P=require("react");var o=require("react-router");var _=require("../../parseSPObj.js");var g=require("../../useUrlStateBase/useUrlStateBase.js");var u=require("../../utils.js");function k(e){return e&&e.__esModule?e:{default:e}}var s=k(P);function R(e,l){const p=l?.useHistory;const a=s.default.useMemo(()=>({...h,replace:l?.replace,preventScrollReset:l?.preventScrollReset}),[]);const n=o.useNavigate();const v=s.default.useMemo(()=>p?u.routerHistory:{replace:(t,r)=>n(t,{...a,...r}),push:(t,r)=>n(t,{...a,...r})},[n]);const[c]=o.useSearchParams();const d=o.useHref("/");const{state:U,updateState:i,updateUrl:f,getState:m,reset:S}=g.useUrlStateBase(e,v,({parse:t})=>t(u.filterUnknownParamsClient(e,c.entries())),d);const b=s.default.useCallback((t,r)=>f(t,{...a,...r}),[f]);s.default.useEffect(()=>{i(u.assignValue(e,u.filterUnknownParams(e,_.parseSPObj(Object.fromEntries([...c.entries()]),e))))},[c]);const q=s.default.useCallback(t=>{S({...a,...t})},[S]);return{setState:i,setUrl:b,urlState:U,reset:q,getState:m}}const h={replace:true,preventScrollReset:true};exports.useUrlState=R;

package/dist/react-router/useUrlState/useUrlState.mjs

@@ -1 +1 @@
-import s from"react";import{useNavigate as g,useSearchParams as k,useHref as P}from"react-router-dom";import{parseSPObj as h}from"../../parseSPObj.mjs";import{useUrlStateBase as C}from"../../useUrlStateBase/useUrlStateBase.mjs";import{routerHistory as H,filterUnknownParamsClient as R,assignValue as d,filterUnknownParams as j}from"../../utils.mjs";function w(t,a){const i=a?.useHistory;const o=s.useMemo(()=>({...y,replace:a?.replace,preventScrollReset:a?.preventScrollReset}),[]);const n=g();const m=s.useMemo(()=>i?H:{replace:(e,r)=>n(e,{...o,...r}),push:(e,r)=>n(e,{...o,...r})},[n]);const[c]=k();const f=P("/");const{state:S,updateState:l,updateUrl:u,getState:U,reset:p}=C(t,m,({parse:e})=>e(R(t,c.entries())),f);const b=s.useCallback((e,r)=>u(e,{...o,...r}),[u]);s.useEffect(()=>{l(d(t,j(t,h(Object.fromEntries([...c.entries()]),t))))},[c]);const v=s.useCallback(e=>{p({...o,...e})},[p]);return{setState:l,setUrl:b,urlState:S,reset:v,getState:U}}const y={replace:true,preventScrollReset:true};export{w as useUrlState};
+import s from"react";import{useNavigate as g,useSearchParams as k,useHref as P}from"react-router";import{parseSPObj as h}from"../../parseSPObj.mjs";import{useUrlStateBase as C}from"../../useUrlStateBase/useUrlStateBase.mjs";import{routerHistory as H,filterUnknownParamsClient as R,assignValue as d,filterUnknownParams as j}from"../../utils.mjs";function w(t,a){const i=a?.useHistory;const o=s.useMemo(()=>({...y,replace:a?.replace,preventScrollReset:a?.preventScrollReset}),[]);const n=g();const m=s.useMemo(()=>i?H:{replace:(e,r)=>n(e,{...o,...r}),push:(e,r)=>n(e,{...o,...r})},[n]);const[c]=k();const f=P("/");const{state:S,updateState:l,updateUrl:u,getState:U,reset:p}=C(t,m,({parse:e})=>e(R(t,c.entries())),f);const b=s.useCallback((e,r)=>u(e,{...o,...r}),[u]);s.useEffect(()=>{l(d(t,j(t,h(Object.fromEntries([...c.entries()]),t))))},[c]);const v=s.useCallback(e=>{p({...o,...e})},[p]);return{setState:l,setUrl:b,urlState:S,reset:v,getState:U}}const y={replace:true,preventScrollReset:true};export{w as useUrlState};

package/dist/react-router6/index.d.ts

@@ -0,0 +1 @@
+export { useUrlState } from "./useUrlState";

package/dist/react-router6/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlState/useUrlState.js");exports.useUrlState=e.useUrlState;

package/dist/react-router6/index.mjs

@@ -0,0 +1 @@
+import{useUrlState as t}from"./useUrlState/useUrlState.mjs";export{t as useUrlState};

package/dist/react-router6/useUrlState/index.d.ts

@@ -0,0 +1 @@
+export { useUrlState } from "./useUrlState";

package/dist/react-router6/useUrlState/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlState.js");exports.useUrlState=e.useUrlState;

package/dist/react-router6/useUrlState/index.mjs

@@ -0,0 +1 @@
+import{useUrlState as t}from"./useUrlState.mjs";export{t as useUrlState};

package/dist/react-router6/useUrlState/useUrlState.d.ts

@@ -0,0 +1,83 @@
+import { type NavigateOptions } from "react-router-dom";
+import { type JSONCompatible } from "../../utils";
+/**
+ * React-router hook. Returns `urlState`, `setState`, and `setUrl` functions
+ *
+ * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
+ * @param {Object} params - Object with other parameters
+ * @param {NavigateOptions} params.NavigateOptions See type from [`react-router-dom`](https://api.reactrouter.com/v7/interfaces/react_router.NavigateOptions.html)
+ * @param {boolean} params.replace replace URL or push, default `true`
+ * @param {boolean} params.useHistory use window.history for navigation, default `false`
+ * @param {boolean} params.preventScrollReset keep scroll position, default `true`
+ * @returns {Object} [result] State and callbacks
+ * @returns {Object} [result.state] - current state object
+ * @returns {Function} [result.setUrl] - function to update state and url
+ * @returns {Function} [result.setState] - function to update state only
+ * @returns {Function} [result.reset] - function to reset state and url to default
+ * * Example:
+ * ```ts
+ * export const form = { name: '', age: 0 };
+ * const { urlState, setState, setUrl } = useUrlState(form, { replace: false, preventScrollReset: false });
+ *
+ * setState({ name: 'test' });
+ * setUrl({ name: 'test' }, { replace: true });
+ * // similar to React.useState
+ * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true });
+ * // RESET state and url
+ * setUrl((_curr, initialState) => initialState);
+ * // Or
+ * reset();
+ * reset({ replace: true });
+ *  ```
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState}
+ */
+export declare function useUrlState<T extends JSONCompatible>(defaultState: T, params?: Params): {
+    /**
+     * State object. Don't mutate directly, use `setState` or `setUrl`
+     */
+    urlState: T;
+    /**
+     * * Example:
+     * ```ts
+     * setState({ name: 'test' });
+     * // or
+     * setState((curr, initial) => ({ ...curr, name: 'test' }) );
+     *  ```
+     *
+     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#updatestate}
+     */
+    setState: (value: Partial<T> | ((currState: T, initial: T) => T)) => void;
+    /**
+     * * Example:
+     * ```ts
+     * setUrl({ name: 'test' });
+     * // or
+     * setUrl((curr, initial) => ({ ...curr, name: 'test' }), { replace: true } );
+     * // can pass optional React-Router `NavigateOptions`
+     * setUrl(curr => ({ ...curr, name: 'test' }), { preventScrollReset: false } );
+     *  ```
+     *
+     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#updateurl}
+     */
+    setUrl: (value?: Partial<T> | ((currState: T, initial: T) => T), options?: Params) => void;
+    /**
+     * * Example:
+     * ```ts
+     * reset();
+     * // or
+     * reset({ replace: false, preventScrollReset: false })
+     *  ```
+     *
+     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#reset}
+     */
+    reset: (options?: NavigateOptions & {
+        [key: string]: unknown;
+    }) => void;
+};
+interface Params extends NavigateOptions {
+    useHistory?: boolean;
+    searchParams?: object;
+    replace?: boolean;
+}
+export {};

package/dist/react-router6/useUrlState/useUrlState.js

@@ -0,0 +1 @@
+"use strict";var P=require("react");var c=require("react-router-dom");var _=require("../../parseSPObj.js");var g=require("../../useUrlStateBase/useUrlStateBase.js");var u=require("../../utils.js");function k(e){return e&&e.__esModule?e:{default:e}}var s=k(P);function R(e,l){const p=l?.useHistory;const a=s.default.useMemo(()=>({...h,replace:l?.replace,preventScrollReset:l?.preventScrollReset}),[]);const n=c.useNavigate();const v=s.default.useMemo(()=>p?u.routerHistory:{replace:(t,r)=>n(t,{...a,...r}),push:(t,r)=>n(t,{...a,...r})},[n]);const[o]=c.useSearchParams();const d=c.useHref("/");const{state:U,updateState:i,updateUrl:f,getState:m,reset:S}=g.useUrlStateBase(e,v,({parse:t})=>t(u.filterUnknownParamsClient(e,o.entries())),d);const b=s.default.useCallback((t,r)=>f(t,{...a,...r}),[f]);s.default.useEffect(()=>{i(u.assignValue(e,u.filterUnknownParams(e,_.parseSPObj(Object.fromEntries([...o.entries()]),e))))},[o]);const q=s.default.useCallback(t=>{S({...a,...t})},[S]);return{setState:i,setUrl:b,urlState:U,reset:q,getState:m}}const h={replace:true,preventScrollReset:true};exports.useUrlState=R;

package/dist/react-router6/useUrlState/useUrlState.mjs

@@ -0,0 +1 @@
+import s from"react";import{useNavigate as g,useSearchParams as k,useHref as P}from"react-router-dom";import{parseSPObj as h}from"../../parseSPObj.mjs";import{useUrlStateBase as C}from"../../useUrlStateBase/useUrlStateBase.mjs";import{routerHistory as H,filterUnknownParamsClient as R,assignValue as d,filterUnknownParams as j}from"../../utils.mjs";function w(t,a){const i=a?.useHistory;const o=s.useMemo(()=>({...y,replace:a?.replace,preventScrollReset:a?.preventScrollReset}),[]);const n=g();const m=s.useMemo(()=>i?H:{replace:(e,r)=>n(e,{...o,...r}),push:(e,r)=>n(e,{...o,...r})},[n]);const[c]=k();const f=P("/");const{state:S,updateState:l,updateUrl:u,getState:U,reset:p}=C(t,m,({parse:e})=>e(R(t,c.entries())),f);const b=s.useCallback((e,r)=>u(e,{...o,...r}),[u]);s.useEffect(()=>{l(d(t,j(t,h(Object.fromEntries([...c.entries()]),t))))},[c]);const v=s.useCallback(e=>{p({...o,...e})},[p]);return{setState:l,setUrl:b,urlState:S,reset:v,getState:U}}const y={replace:true,preventScrollReset:true};export{w as useUrlState};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "description": "Store state in URL as in object, types and structure are preserved, with TS validation. Same API as React.useState, wthout any hasssle or boilerplate. Next.js@14-15, react-router@6-7, and remix@2.",
   "homepage": "https://state-in-url.dev",
   "repository": {
@@ -31,6 +31,7 @@
     "packages/example-nextjs15",
     "packages/example-react",
     "packages/example-react-router6",
+    "packages/example-react-router7",
     "packages/example-remix2"
   ],
   "files": [
@@ -49,6 +50,11 @@
       "default": "./dist/next/index.mjs",
       "require": "./dist/next/index.js"
     },
+    "./react-router6": {
+      "types": "./dist/react-router6/index.d.ts",
+      "default": "./dist/react-router6/index.mjs",
+      "require": "./dist/react-router6/index.js"
+    },
     "./react-router": {
       "types": "./dist/react-router/index.d.ts",
       "default": "./dist/react-router/index.mjs",
@@ -118,7 +124,7 @@
     "kill-vite": "wireit",
     "kill": "wireit",
     "rmdist": "rm -rf dist",
-    "cleanup": "rm -rf dist .wireit node_modules test-results playwright-report coverage-reports nyc_coverage packages/example-nextjs14/node_modules packages/example-nextjs14/.next packages/example-nextjs15/node_modules packages/example-nextjs15/.next packages/example-react/node_modules packages/example-react-router6/node_modules packages/example-remix2/node_modules",
+    "cleanup": "rm -rf dist .wireit node_modules test-results playwright-report coverage-reports nyc_coverage packages/example-nextjs14/node_modules packages/example-nextjs14/.next packages/example-nextjs15/node_modules packages/example-nextjs15/.next packages/example-react/node_modules packages/example-react-router6/node_modules packages/example-react-router7/node_modules packages/example-remix2/node_modules",
     "reinstall": "npm run cleanup && npm install",
     "setup": "playwright install --with-deps",
     "prepack": "npm run build && cp package.json dist/package.json && npm run build:demo",
@@ -172,6 +178,7 @@
         "dev:react",
         "dev:remix2",
         "dev:router6",
+        "dev:router7",
         "dev:nextjs15"
       ],
       "service": {
@@ -196,6 +203,10 @@
       "command": "cd packages/example-react-router6 && npm run dev",
       "service": true
     },
+    "dev:router7": {
+      "command": "cd packages/example-react-router7 && npm run dev",
+      "service": true
+    },
     "dev:remix2": {
       "command": "cd packages/example-remix2 && PORT=3003 npm run dev",
       "service": true
@@ -220,6 +231,12 @@
         "build"
       ]
     },
+    "build:router7": {
+      "command": "cd packages/example-react-router7 && npm run build",
+      "dependencies": [
+        "build"
+      ]
+    },
     "build:remix2": {
       "command": "cd packages/example-remix2 && npm run build",
       "dependencies": [
@@ -271,6 +288,17 @@
       "command": "npx vite preview --port 5181 packages/example-react-router6",
       "service": true
     },
+    "start:router7": {
+      "command": "npx vite preview --port 5183 packages/example-react-router7",
+      "dependencies": [
+        "build:router7"
+      ],
+      "service": true
+    },
+    "start:router7:ci": {
+      "command": "npx vite preview --port 5183 packages/example-react-router7",
+      "service": true
+    },
     "start:remix2": {
       "command": "cd packages/example-remix2 && npm run start",
       "dependencies": [
@@ -299,6 +327,7 @@
         "start:demo",
         "start:react",
         "start:router6",
+        "start:router7",
         "start:remix2"
       ],
       "service": true
@@ -309,6 +338,7 @@
         "start:demo:ci",
         "start:react:ci",
         "start:router6:ci",
+        "start:router7:ci",
         "start:remix2:ci"
       ],
       "service": true
@@ -324,6 +354,7 @@
         "build:demo:tests",
         "build:next15",
         "build:router6",
+        "build:router7",
         "build:remix2"
       ]
     },
@@ -488,5 +519,8 @@
     "decode url",
     "fast"
   ],
-  "packageManager": "npm@10.8.2"
+  "packageManager": "npm@10.8.2",
+  "dependencies": {
+    "react-router": "^7.7.1"
+  }
 }