state-in-url 4.1.7 → 4.2.0

package/README.md

@@ -85,6 +85,7 @@ This library is a good alternative for NUQS.
 - ✨ **Complex data**: Nested objects, dates and arrays, works same as JSON, but in URL
 - ☂ **Default values**: Giving you default values if parameter not in url
 - ⌨ **Organized**: All possible values defined at start, protect you from getting non existing key
+- **compatible**: Will keep 3rd party query params as is
 - **flexible**: Can use more than 1 state objects on the same page, just use different keys
 - **Fast**: Minimal rerenders, around [1ms](https://github.com/asmyshlyaev177/state-in-url/blob/87c8c7c995c5cd7d9e7aa039c30bfe64b24abe4b/packages/urlstate/encoder/encoder.test.ts#L185) to encode and decode big object
 - **Server Side Rendering**: Can use it in Server Components, Next.js 14 and 15 are supported
@@ -170,7 +171,7 @@ import { userState } from './userState';
 
 function MyComponent() {
   // can pass `replace` arg, it's control will `setUrl` will use `rounter.push` or `router.replace`, default replace=true
-  // can pass `searchParams` from server components
+  // can pass `searchParams` from server components, pass `useHistory: false` if you need to fetch smt in the server component
   const { urlState, setUrl, setState, reset } = useUrlState(userState);
 
   return (

package/dist/next/useUrlState/useUrlState.mjs

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

package/dist/subscribers.d.ts

@@ -6,6 +6,6 @@ export declare const subscribers: {
 };
 export declare const stateMap: {
     get: <T extends JSONCompatible | undefined>(objKey: T) => T | undefined;
-    set: <T extends JSONCompatible>(objKey: T, value: T) => void;
+    set: <T_1 extends JSONCompatible>(objKey: T_1, value: T_1) => void;
 };
 export type Cb = () => void;

package/dist/useUrlEncode/useUrlEncode.d.ts

@@ -30,7 +30,7 @@ console.log(state); // Output: { name: 'Tom' }
  *
  *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/useUrlEncode#parse}
  */
-    parse: (strOrSearchParams: string | URLSearchParams) => typeof stateShape;
+    parse: (strOrSearchParams: string | URLSearchParams) => T;
     /**
 Converts a state object to a URL query string.
 * * Example:

package/dist/useUrlStateBase/useUrlStateBase.d.ts

@@ -37,7 +37,7 @@ export declare function useUrlStateBase<T extends JSONCompatible>(defaultState:
     parse: ReturnType<typeof useUrlEncode<T>>["parse"];
 }) => T): {
     updateState: (value: Partial<T> | ((currState: T) => T)) => void;
-    updateUrl: (value?: Parameters<(value: Partial<T> | ((currState: T) => T)) => void>[0], options?: Options) => void;
+    updateUrl: (value?: Partial<T> | ((currState: T) => T) | undefined, options?: Options) => void;
     state: T;
     reset: (options?: Options) => void;
     getState: () => T;

package/dist/useUrlStateBase/useUrlStateBase.mjs

@@ -1 +1 @@
-import u from"react";import{TIMEOUT as b}from"../constants/constants.mjs";import{useInsertionEffect as v}from"../useInsertionEffect.mjs";import{useSharedState as y}from"../useSharedState/useSharedState.mjs";import{useUrlEncode as L}from"../useUrlEncode/useUrlEncode.mjs";import{filterUnknownParamsClient as P}from"../utils.mjs";function C(t,a,l){const{parse:c,stringify:n}=L(t),{state:m,getState:r,setState:s}=y(t,()=>l?.({parse:c})||t),p=u.useRef(void 0);v(()=>{const e=()=>{const o=c(P(t));s(o)};return window.addEventListener(S,e),()=>{window.removeEventListener(S,e),clearTimeout(p.current)}},[s]);const i=u.useRef([]),f=u.useCallback((e,o)=>{const w=typeof e=="function"?e(r()):e?{...r(),...e}:r(),d=n(w,I(t)),h=`${window.location.pathname}${d.length?"?":""}${d}${window.location.hash}`,$=`${window.location.pathname}${window.location.search}${window.location.hash}`;if(h===$)return;s(w);const E=o?.replace;delete o?.replace,i.current.push([E?"replace":"push",h,o]),clearTimeout(p.current),p.current=setTimeout(()=>{queueMicrotask(()=>{if(!i.current.length)return;const g=i.current.at(-1);i.current=[];const[T,k,R]=g||[];a[T](k,R)})},b)},[a,n,r]),U=u.useCallback(e=>{f(t,e)},[f]);return{updateState:s,updateUrl:f,state:m,reset:U,getState:r}}function I(t){const a=Object.keys(t),l=window.location.search,c=new URLSearchParams(l),n=new URLSearchParams;return c.forEach((m,r)=>!a.includes(r)&&n.set(r,m)),n}const S="popstate";export{C as useUrlStateBase};
+import i from"react";import{TIMEOUT as R}from"../constants/constants.mjs";import{useInsertionEffect as T}from"../useInsertionEffect.mjs";import{useSharedState as v}from"../useSharedState/useSharedState.mjs";import{useUrlEncode as L}from"../useUrlEncode/useUrlEncode.mjs";import{filterUnknownParamsClient as P}from"../utils.mjs";function b(t,o,u){const{parse:a,stringify:n}=L(t),{state:l,getState:r,setState:s}=v(t,()=>u?.({parse:a})||t),m=i.useRef(void 0);T(()=>{const e=()=>{const w=a(P(t));s(w)};return window.addEventListener(U,e),()=>{window.removeEventListener(U,e),clearTimeout(m.current)}},[s]);const c=i.useRef([]),p=i.useCallback((e,w)=>{const d=typeof e=="function"?e(r()):{...r(),...e},h=n(d,y(t)),S=`${window.location.pathname}${h.length?"?":""}${h}${window.location.hash}`,$=`${window.location.pathname}${window.location.search}${window.location.hash}`;if(S===$)return;s(d);const{replace:g,...k}=w||{};c.current.push([g?"replace":"push",S,k]),clearTimeout(m.current),queueMicrotask(()=>{c.current.length&&(m.current=setTimeout(()=>{const f=c.current.at(-1);c.current=[],o[f[0]](f[1],f[2])},R))})},[o,n,r]),E=i.useCallback(e=>{p(t,e)},[p]);return{updateState:s,updateUrl:p,state:l,reset:E,getState:r}}function y(t){const o=Object.keys(t),u=window.location.search,a=new URLSearchParams(u),n=new URLSearchParams;return a.forEach((l,r)=>!o.includes(r)&&n.set(r,l)),n}const U="popstate";export{b as useUrlStateBase};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "4.1.7",
+  "version": "4.2.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 and react-router@6-7.",
   "homepage": "https://state-in-url.dev",
   "repository": {
@@ -14,8 +14,7 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "tag": "latest",
-    "provenance": true
+    "tag": "latest"
   },
   "license": "MIT",
   "funding": {
@@ -364,6 +363,7 @@
     "eslint-plugin-maintainable": "^0.4.4",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "happy-dom": "^15.11.6",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.9",