state-in-url 4.1.6 → 4.1.8

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

@@ -1 +1 @@
-import u from"react";import{stateMap as n,subscribers as s}from"../subscribers.mjs";import{useInsertionEffect as g}from"../useInsertionEffect.mjs";import{isSSR as l,isEqual as b}from"../utils.mjs";function d(a,c){const t=u.useRef(a),[f,i]=u.useState(()=>{if(l)return c?c?.():t.current;const e=n.get(t.current);if(e)return e;{const r=c?.()||t.current;return n.set(t.current,r),r}}),m=u.useCallback(e=>{const r=n.get(t.current),o=typeof e=="function"?e(r):{...r,...e};b(r,o)||(n.set(t.current,o),s.get(t.current).forEach(p=>p()))},[]);g(()=>{const e=()=>{i(n.get(t.current)||t.current)},r=s.add(t.current,e);return()=>{r()}},[]);const S=u.useCallback(()=>n.get(t.current)||t.current,[]);return{state:f,getState:S,setState:m}}export{d as useSharedState};
+import u from"react";import{stateMap as n,subscribers as o}from"../subscribers.mjs";import{useInsertionEffect as g}from"../useInsertionEffect.mjs";import{isSSR as l,isEqual as b}from"../utils.mjs";function d(a,c){const t=u.useRef(a),[f,i]=u.useState(()=>{if(l)return c?c?.():t.current;const e=n.get(t.current);if(e)return e;{const r=c?.()||t.current;return n.set(t.current,r),r}}),m=u.useCallback(e=>{const r=n.get(t.current),s=typeof e=="function"?e(r):{...r,...e};b(r,s)||(n.set(t.current,s),o.get(t.current).forEach(p=>p()))},[]);g(()=>{const e=()=>{i(n.get(t.current)||t.current)},r=o.add(t.current,e);return()=>{r()}},[]);const S=u.useCallback(()=>n.get(t.current)||t.current,[]);return{state:f,getState:S,setState:m}}export{d as useSharedState};

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/useUrlEncode/useUrlEncode.mjs

@@ -1 +1 @@
-import o from"react";import{encodeState as a,decodeState as n}from"../encodeState/encodeState.mjs";import{typeOf as f}from"../utils.mjs";function i(e){const c=o.useCallback((t,r)=>f(t)==="object"?a(t,e,r):"",[e]);return{parse:o.useCallback(t=>n(t,e),[e]),stringify:c}}export{i as useUrlEncode};
+import o from"react";import{encodeState as a,decodeState as n}from"../encodeState/encodeState.mjs";import{typeOf as s}from"../utils.mjs";function f(e){const c=o.useCallback((t,r)=>s(t)==="object"?a(t,e,r):"",[e]);return{parse:o.useCallback(t=>n(t,e),[e]),stringify:c}}export{f as useUrlEncode};

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

package/dist/utils.d.ts

@@ -27,8 +27,8 @@ export declare function filterUnknownParams<T extends object>(shape: T, searchPa
 export declare function filterUnknown<T extends object>(shape: T, entries: [key: string, value: string][]): string[][];
 export declare function assignValue<T extends object>(shape: T, newVal: Partial<T>): T;
 export interface Router {
-    push: (href: string, opts: object) => void;
-    replace: (href: string, opts: object) => void;
+    push: (href: string, opts?: object) => void;
+    replace: (href: string, opts?: object) => void;
 }
 export declare const routerHistory: Router;
 export declare const isSafari: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "4.1.6",
+  "version": "4.1.8",
   "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": {
@@ -364,6 +364,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",