state-in-url 0.1.6 → 0.2.0

package/README.md

@@ -6,13 +6,28 @@
   <img src="/assets/logo.svg?raw=true" alt="Library logo"/>
 </p>
 
+
+<div align="center">
+
+[![For hire](/assets/hireBadge.svg)](https://www.linkedin.com/in/asmyshlyaev177/)
+
+
+[![npm](https://img.shields.io/npm/v/state-in-url.svg)](https://www.npmjs.com/package/state-in-url)
+![Tests](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml/badge.svg?branch=main)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://github.com/asmyshlyaev177/state-in-url/)
+![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/state-in-url.svg)
+</div>
+
 <div align="center">
 Seamlessly store complex React state object in URL query parameters without losing types. Works with Next.js/React.js applications.
 
 <h4 align="center">Don't hesitate to open issue if you found a bug</h4>
 
 
-<a href="https://state-in-url-wine.vercel.app" target="_blank">DEMO</a>
+https://github.com/asmyshlyaev177/state-in-url/assets/19854148/10456887-f149-4745-b3f1-e799e70b16cd
+
+
+<a href="https://state-in-url-asmyshlyaev177.vercel.app/" target="_blank">DEMO</a>
 
 
 <hr />
@@ -21,32 +36,33 @@ Add a ⭐️ to support the project!
 
   <hr />
 
+  </div>
 
-[![For hire](/assets/hireBadge.svg)](https://www.linkedin.com/in/asmyshlyaev177/)
-
+  ## Why use state-in-url?
 
-[![npm](https://img.shields.io/npm/v/state-in-url.svg)](https://www.npmjs.com/package/state-in-url)
-![Tests](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml/badge.svg?branch=main)
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://github.com/asmyshlyaev177/state-in-url/)
-![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/state-in-url.svg)
+`state-in-url` lets you use URI string for state management.
 
-  </div>
+# Use cases
+- 🔗 Shareable URLs with full application state
+- 🔄 Easy state persistence across page reloads
+- 🧠 Pass data between unrelated client components
+- 🧮 Store unsaved user forms in URL
 
 # Features
-- **Seamless state synchronization with URL query parameters.**
-- **Preserves shape and types of data**
-- **Full TypeScript support for enhanced developer experience.**
-- **Automatic serialization and deserialization of complex objects.**
-- **Separate hooks for Next.js (useUrlState) and React.js (useUrlEncode) usage.**
-- **Efficient updates with minimal re-renders.**
-- **Lightweight, no dependencies.**
+- 🧩 **Simple**: Handles complex objects without extra effort
+- 📘 **Typescript support and type Safety**: Preserves data types and structure, enhances developer experience with strong typing and JSDoc comments
+- ⚛️ **Framework Flexibility**: Separate hooks for Next.js and React.js applications, and functions for pure JS
+- 🪶 **Lightweight**: Zero dependencies for a smaller footprint
+
 
 ## Table of content
 - [Installation](#installation)
 - [`useUrlState` for Next.js](#useurlstate-hook-for-nextjs)
 - [`useUrlEncode` for React.js](#useurlencode-hook-for-reactjs)
 - [`encodeState` and `decodeState` for pure JS usage](#encodestate-and-decodestate-helpers)
+- [auto sync state with url](#auto-sync-state)
 - [Low-level `encode` and `decode` functions](#encode-and-decode-helpers)
+- [Best practices](#best-practices)
 - [Gothas](#gothas)
 - [Contact & Support](#contact--support)
 - [Changelog](#changelog)
@@ -63,12 +79,6 @@ yarn add state-in-url
 pnpm add state-in-url
 ```
 
-## Run locally
-Clone this repo, run `npm install` and
-```sh
-npm run dev
-```
-Go to [localhost:3000](http://localhost:3000)
 
 ## useUrlState hook for Next.js
 
@@ -84,9 +94,12 @@ Go to [localhost:3000](http://localhost:3000)
 import { useUrlState } from 'state-in-url';
 
 // State shape should be stored in a constant, don't pass an object directly
-const countState = { count: 0 };
+const countState: { count: number } = { count: 0 };
 
 function MyComponent() {
+  // for use searchParams from server component
+  // e.g. export default async function Home({ searchParams }: { searchParams: object }) {
+  // const { state, updateState, updateUrl } = useUrlState(countState, searchParams);
   const { state, updateState, updateUrl } = useUrlState(countState);
 
   // won't let you to accidently mutate state directly, requires TS
@@ -103,9 +116,13 @@ function MyComponent() {
       <button onClick={() => updateState({ count: state.count + 1 })}>
         Increment (Local Only)
       </button>
-      <button onClick={() => updateUrl(state)}>
+      <button onClick={() => updateUrl()}>
         Sync changes to url
       </button>
+
+      <button onClick={() => updateUrl(state)}>
+        Reset
+      </button>
     </div>
   )
 }
@@ -164,6 +181,23 @@ function Component() {
 }
 ```
 
+#### Auto sync state
+
+```typescript
+  const timer = React.useRef(0 as unknown as NodeJS.Timeout);
+  React.useEffect(() => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      // will compare state by content not by reference and fire update only for new values
+      updateUrl(state);
+    }, 500);
+
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [state, updateUrl]);
+```
+
 #### With arbitrary state shape (not recommended)
 
 ```typescript
@@ -248,9 +282,25 @@ const obj = Object.fromEntries(
 )
 ```
 
+## Best Practices
+
+- Define your state shape as a constant to ensure consistency
+- Use TypeScript for enhanced type safety and autocomplete
+- Avoid storing sensitive information in URL parameters
+- Use `updateState` for frequent updates and `updateUrl` to sync changes to url
+
 ## Gothas
 
 1. Can pass only serializable values, `Function`, `BigInt` or `Symbol` won't work, probably things like `ArrayBuffer` neither.
+2. Vercel servers limit size of headers (query string and other stuff) to **14KB**, so keep your URL state under ~5000 words. https://vercel.com/docs/errors/URL_TOO_LONG
+
+## Run locally
+Clone this repo, run `npm install` and
+```sh
+npm run dev
+```
+Go to [localhost:3000](http://localhost:3000)
+
 
 ## Contact & Support
 
@@ -263,6 +313,8 @@ const obj = Object.fromEntries(
 This project is licensed under the [MIT license](https://github.com/asmyshlyaev177/state-in-url/blob/main/LICENSE).
 
 ## Inspiration
-[this article](https://www.thisdot.co/blog/communication-between-client-components-in-next-js)
+[Using URL to store state in Vue ](https://dev.to/jacobandrewsky/using-url-to-store-state-in-vue-275c)
+
+[Storing state in the URL](https://antonz.org/storing-state/)
 
 [NextJS useSearchParams](https://nextjs.org/docs/app/api-reference/functions/use-search-params)

package/dist/index.js

@@ -1 +1 @@
-import t from"react";import{useRouter as n,usePathname as e,useSearchParams as r}from"next/navigation";const o=t=>{const n=null===t,e=Array.isArray(t),r=t instanceof Date;return(n?"null":r&&"date")||e&&"array"||!n&&!r&&!e&&"object"==typeof t&&"object"||typeof t},s=t=>new URLSearchParams("string"==typeof t?t:t?.toString?.()||""),a={string:"◖",boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"};function c(t){switch(o(t)){case"function":case"symbol":return"";case"date":return a.date+t.toISOString();case"string":return t.match(/^◖/)?encodeURIComponent(t):`${a.string}${encodeURIComponent(t)}`;case"number":return a.number+String(t);case"boolean":return a.boolean+String(t);case"object":case"array":return u(t);case"null":return a.null;case"undefined":return a.undefined;default:return String(t)}}const u=t=>JSON.stringify(t,i).replaceAll('"',"'"),i=(t,n)=>{const e=o(n);return t&&"object"!==e&&"array"!==e?c(n):n},l=t=>t===a.null?null:t!==a.undefined?t.startsWith(a.number)?Number.parseFloat(t.replace(a.number,"")):t.startsWith(a.boolean)?!!t.includes("true"):t.startsWith(a.date)?new Date(t.slice(1)):t.startsWith(a.string)?decodeURIComponent(t).replace(/^◖/,""):f:void 0,f=Symbol("isError"),p=(t,n)=>{const e="string"==typeof n,r=e&&l(n);return r===f?n:t&&e?r:n};function d(t,n){return function(t,n){try{return JSON.parse(t,p)}catch{const e=l(t);return e!==f?e:n}}(t.replaceAll("'",'"'),n)}function b(t,n,e){const r=s(e);return Object.entries(t||{}).forEach((([t,e])=>{const o=n?.[t];JSON.stringify(e)!==JSON.stringify(o)&&r.set(t,c(e))})),r.toString()}function g(t,n){return{...n||{},...Object.fromEntries([...s(t).entries()].map((([t,e])=>{const r=n?.[t];return[t,d(e,r)??r]})))}}function y(n){const e=t.useCallback((function(t,e){return"object"===o(t)?b(t,n,e):""}),[n]);return{parse:t.useCallback((function(t){return g(t,n)}),[n]),stringify:e}}function m(o){const s=n(),a=e(),{parse:c,stringify:u}=y(o),i=r(),[l,f]=t.useState((()=>c(i)));t.useEffect((()=>{f((t=>{const n=c(i);return JSON.stringify(t)===JSON.stringify(n)?t:n}))}),[c,i]);const p=t.useCallback((t=>{f("function"==typeof t?n=>t(n):t)}),[]);return{updateUrl:t.useCallback(((t,n)=>{const e=i.toString(),r=`${a}${e.length?"?":""}${e}`,o=u("function"==typeof t?t(l):t),c=`${a}${o.length?"?":""}${o}`;if(r!==c){const{replace:t,...e}=n||{};s[t?"replace":"push"](c,{scroll:!1,...e})}}),[a,s,u,i,l]),updateState:p,state:l}}export{d as decode,g as decodeState,c as encode,b as encodeState,y as useUrlEncode,m as useUrlState};
+import t from"react";import{useRouter as e}from"next/navigation";const n=t=>{const e=null===t,n=Array.isArray(t),r=t instanceof Date;return(e?"null":r&&"date")||n&&"array"||!e&&!r&&!n&&"object"==typeof t&&"object"||typeof t},r=()=>"undefined"==typeof window,c=t=>new URLSearchParams("string"==typeof t?t:t?.toString?.()||""),o=(t,e)=>JSON.stringify(t)===JSON.stringify(e),s={string:"◖",boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"};function a(t){switch(n(t)){case"function":case"symbol":return"";case"date":return s.date+t.toISOString();case"string":return t.match(/^◖/)?encodeURIComponent(t):`${s.string}${encodeURIComponent(t)}`;case"number":return s.number+String(t);case"boolean":return s.boolean+String(t);case"object":case"array":return JSON.stringify(t,i).replaceAll('"',"'");case"null":return s.null;case"undefined":return s.undefined;default:return String(t)}}function u(t,e){return function(t,e){try{return JSON.parse(t,g)}catch{const n=l(t);return n!==f?n:e}}(t.replaceAll("'",'"'),e)}const i=(t,e)=>{const r=n(e);return t&&"object"!==r&&"array"!==r?a(e):e},l=t=>t===s.null?null:t!==s.undefined?t?.startsWith?.(s.number)?Number.parseFloat(t.replace(s.number,"")):t?.startsWith?.(s.boolean)?!!t.includes("true"):t?.startsWith?.(s.date)?new Date(t.slice(1)):t?.startsWith?.(s.string)?decodeURIComponent(t).replace(/^◖/,""):f:void 0,f=Symbol("isError"),g=(t,e)=>{const n="string"==typeof e,r=n&&l(e);return r===f?e:t&&n?r:e};function p(t,e){return{...e,...y(JSON.stringify(t),e)}}const d=(t,e)=>{const n="string"==typeof e,r=n&&u(e?.replaceAll?.("'",'"'));return r===f?e:t&&n?r:e};function y(t,e){try{return JSON.parse(t,d)}catch{const n=l(t);return n!==f?n:e}}function b(t,e,n){const r=c(n);return Object.entries(t||{}).forEach((([t,n])=>{const c=e?.[t];JSON.stringify(n)!==JSON.stringify(c)&&r.set(t,a(n))})),r.toString()}function S(t,e){return{...e||{},...Object.fromEntries([...c(t).entries()].map((([t,n])=>{const r=e?.[t];return[t,u(n,r)??r]})))}}function m(e){const r=t.useCallback((function(t,r){return"object"===n(t)?b(t,e,r):""}),[e]);return{parse:t.useCallback((function(t){return S(t,e)}),[e]),stringify:r}}const h=new WeakMap,w=new WeakMap;function O(n,c){const{state:s,getState:a,setState:u,stringify:i}=function(e){const n=t.useRef(e),{parse:c,stringify:s}=m(n.current),[a,u]=t.useState((()=>{const t=h.get(n.current),e=c(r()?"":window.location.search);return t||h.set(n.current,e),e}));return t.useInsertionEffect((()=>{const t=w.get(n.current)||[],r=()=>{u(h.get(n.current)||e)};return w.set(n.current,t.concat(r)),()=>{const t=w.get(n.current)||[];w.set(n.current,t.filter((t=>t!==r)))}}),[]),{state:a,getState:t.useCallback((()=>h.get(n.current)||n.current),[]),setState:t.useCallback((t=>{const e=h.get(n.current)||n.current;if("function"==typeof t){const r=t(e);if(o(e,r))return!1;h.set(n.current,r),(w.get(n.current)||[]).forEach((t=>{t()}))}else{if(o(e,t))return!1;h.set(n.current,t),(w.get(n.current)||[]).forEach((t=>{t()}))}}),[]),parse:c,stringify:s}}(n),l=e();return{updateUrl:t.useCallback(((t,e)=>{const n=window.location.search,r=`${window.location.pathname}${n.length?"?":""}${n}`,c=i("function"==typeof t?t(a()):a()),o=`${window.location.pathname}${c.length?"?":""}${c}`;if(r!==o){const{replace:t,...n}=e||{};l[t?"replace":"push"](o,{scroll:!1,...n})}}),[l,i,a]),updateState:u,state:r()?p(c,n):s}}export{u as decode,S as decodeState,a as encode,b as encodeState,m as useUrlEncode,O as useUrlState};

package/dist/urlstate/encodeState.d.ts

@@ -11,6 +11,8 @@ import { type JSONCompatible, type UnknownObj } from './utils';
  * export const form = { name: '' };
  * encodeState({ name: 'test' }, form, 'someExistingParam=123');
  *  ```
+ *
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
 export declare function encodeState<T>(state: never extends T ? object : JSONCompatible<T>, defaults?: JSONCompatible<T>, paramsToKeep?: string | URLSearchParams): string;
 /**
@@ -24,5 +26,7 @@ export declare function encodeState<T>(state: never extends T ? object : JSONCom
  * export const form = { name: '' };
  * decodeState('key=value&name=Alex', form);
  *  ```
+ *
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
 export declare function decodeState<T>(uriString: string | URLSearchParams, defaults?: JSONCompatible<T>): undefined extends T ? UnknownObj : T;

package/dist/urlstate/encoder.d.ts

@@ -3,25 +3,33 @@
  *
  * @param {unknown} payload any value to serialize
  * @returns {string} URLSearchParams compatible value string
+ *
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
 export declare function encode(payload: unknown): string;
-type Primitive = Exclude<ReturnType<typeof decodePrimitive>, typeof errorSym>;
+/**
+ * Decode value part of URLSearchParams back to JS value
+ *
+ * @param {string} payload URLSearchParams compatible value string
+ * @param {any} fallback optional fallback value
+ * @returns {unknown} decoded object
+ *
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
+ */
+export declare function decode<T>(payload: string, fallback?: T): T | Primitive;
+export declare const replacer: (key: string, value: unknown) => unknown;
+export type Primitive = Exclude<ReturnType<typeof decodePrimitive>, typeof errorSym>;
 export declare const decodePrimitive: (str: string) => string | number | boolean | Date | typeof errorSym | null | undefined;
 export declare const errorSym: unique symbol;
+export declare const reviver: (key: string, value: unknown) => unknown;
 /**
  * Parses a JSON string into a TypeScript object.
  *
  * @param {string} jsonString - The JSON string to parse.
  * @param {T} [fallbackValue] - The fallback value to use if parsing fails.
  * @return {T | Primitive | undefined} - The parsed object or a primitive value, or undefined if parsing fails.
- */
-export declare function parseJSON<T>(jsonString: string, fallbackValue?: T): T | Primitive | undefined;
-/**
- * Decode value part of URLSearchParams back to JS value
  *
- * @param {string} payload URLSearchParams compatible value string
- * @param {any} fallback optional fallback value
- * @returns {unknown} decoded object
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
-export declare function decode<T>(payload: string, fallback?: T): Primitive | T;
-export {};
+export declare function parseJSON<T>(jsonString: string, fallbackValue?: T): T | Primitive | undefined;
+export declare function parseSsrQs<T>(sp: object | undefined, defaults: T): T;

package/dist/urlstate/index.d.ts

@@ -1,7 +1,7 @@
-import { encode, decode } from './encoder';
-import { type Type, type JSONCompatible, typeOf } from './utils';
+import { encode, decode, parseSsrQs } from './encoder';
+import { type Type, type JSONCompatible, typeOf, isSSR } from './utils';
 import { useUrlEncode } from './useUrlEncode';
 import { useUrlState } from './useUrlState';
 import { encodeState, decodeState } from './encodeState';
-export { encode, decode, typeOf, useUrlEncode, useUrlState, encodeState, decodeState, };
+export { encode, decode, typeOf, useUrlEncode, useUrlState, encodeState, decodeState, isSSR, parseSsrQs, };
 export type { Type, JSONCompatible };

package/dist/urlstate/state.d.ts

@@ -0,0 +1,8 @@
+import { type JSONCompatible, type DeepReadonly } from './utils';
+export declare function useState<T>(defaultState: JSONCompatible<T>): {
+    state: JSONCompatible<T>;
+    getState: () => JSONCompatible<T>;
+    setState: (value: JSONCompatible<T> | Readonly<JSONCompatible<T> extends infer T ? { readonly [P in keyof T]: Readonly<JSONCompatible<T>[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<JSONCompatible<T>[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<JSONCompatible<T>[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<JSONCompatible<T>[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<JSONCompatible<T>[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<JSONCompatible<T>[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<JSONCompatible<T>[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<JSONCompatible<T>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<JSONCompatible<T>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<JSONCompatible<T>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never> | ((currState: typeof defaultState) => typeof defaultState)) => false | undefined;
+    parse: (strOrSearchParams: string | URLSearchParams) => Readonly<NonNullable<JSONCompatible<T>> extends infer T_11 ? { readonly [P_11 in keyof T_11]: Readonly<NonNullable<JSONCompatible<T>>[P_11] extends infer T_12 ? { readonly [P_12 in keyof T_12]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12] extends infer T_13 ? { readonly [P_13 in keyof T_13]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13] extends infer T_14 ? { readonly [P_14 in keyof T_14]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14] extends infer T_15 ? { readonly [P_15 in keyof T_15]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15] extends infer T_16 ? { readonly [P_16 in keyof T_16]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16] extends infer T_17 ? { readonly [P_17 in keyof T_17]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16][P_17] extends infer T_18 ? { readonly [P_18 in keyof T_18]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18] extends infer T_19 ? { readonly [P_19 in keyof T_19]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18][P_19] extends infer T_20 ? { readonly [P_20 in keyof T_20]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18][P_19][P_20] extends infer T_21 ? { readonly [P_21 in keyof T_21]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>;
+    stringify: (state: JSONCompatible<T> | NonNullable<JSONCompatible<T>> | Readonly<NonNullable<JSONCompatible<T>> extends infer T_22 ? { readonly [P_11 in keyof T_22]: Readonly<NonNullable<JSONCompatible<T>>[P_11] extends infer T_23 ? { readonly [P_12 in keyof T_23]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12] extends infer T_24 ? { readonly [P_13 in keyof T_24]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13] extends infer T_25 ? { readonly [P_14 in keyof T_25]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14] extends infer T_26 ? { readonly [P_15 in keyof T_26]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15] extends infer T_27 ? { readonly [P_16 in keyof T_27]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16] extends infer T_28 ? { readonly [P_17 in keyof T_28]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16][P_17] extends infer T_29 ? { readonly [P_18 in keyof T_29]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18] extends infer T_30 ? { readonly [P_19 in keyof T_30]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18][P_19] extends infer T_31 ? { readonly [P_20 in keyof T_31]: Readonly<NonNullable<JSONCompatible<T>>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18][P_19][P_20] extends infer T_32 ? { readonly [P_21 in keyof T_32]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>, paramsToKeep?: string | URLSearchParams | undefined) => string;
+};

package/dist/urlstate/subscribers.d.ts

@@ -0,0 +1,3 @@
+export declare const stateMap: WeakMap<object, object>;
+export declare const subscribers: WeakMap<object, Cb[]>;
+export type Cb = () => void;

package/dist/urlstate/useUrlEncode.d.ts

@@ -4,7 +4,7 @@ import { type JSONCompatible, type DeepReadonly } from './utils';
  * to and from URL search parameters.
  *
  * @template T - The type of the state shape
- * @param {JSONCompatible<T>} [stateShape] Optional fallback values for state
+ * @param {JSONCompatible<T>} [stateShape] Fallback values for state
  * @returns {} `stringify` and `parse` functions
  *
  * * Example:
@@ -16,10 +16,10 @@ import { type JSONCompatible, type DeepReadonly } from './utils';
  * // by default it's uses router.push with scroll: false
  * parse('name=Tom');
  *  ```
+ *
+ * * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
-export declare function useUrlEncode<T>(stateShape?: JSONCompatible<T>): {
-    parse: (strOrSearchParams: string | URLSearchParams) => undefined extends T ? Readonly<{
-        readonly [x: string]: Readonly<{}>;
-    }> : Readonly<JSONCompatible<T> & {} extends infer T ? { readonly [P in keyof T]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>;
+export declare function useUrlEncode<T>(stateShape: JSONCompatible<T>): {
+    parse: (strOrSearchParams: string | URLSearchParams) => Readonly<NonNullable<JSONCompatible<T>> extends infer T ? { readonly [P in keyof T]: Readonly<NonNullable<JSONCompatible<T>>[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>;
     stringify: (state: typeof stateShape | NonNullable<typeof stateShape> | DeepReadonly<NonNullable<typeof stateShape>>, paramsToKeep?: string | URLSearchParams) => string;
 };

package/dist/urlstate/useUrlState.d.ts

@@ -1,9 +1,10 @@
 import { useRouter } from 'next/navigation';
-import { type JSONCompatible } from './utils';
+import { DeepReadonly, type JSONCompatible } from './utils';
 /**
  * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions
  *
- * @param {?JSONCompatible<T>} [defaultState] Optional fallback values for state
+ * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
+ * @param {?SearchParams<T>} [searchParams] searchParams from Next server component
  *
  * * Example:
  * ```ts
@@ -14,39 +15,13 @@ import { type JSONCompatible } from './utils';
  * // by default it's uses router.push with scroll: false
  * updateUrl({ name: 'test' }, { replace: true, scroll: true });
  *  ```
- * * Auto update URL
- * ```ts
- * const timer = React.useRef(0 as unknown as NodeJS.Timeout);
- * React.useEffect(() => {
- *   clearTimeout(timer.current);
- *   timer.current = setTimeout(() => {
- *     updateUrl(state);
- *   }, 500);
  *
- *   return () => {
- *    clearTimeout(timer.current);
- *   };
- *  }, [state, updateUrl]);
- * ```
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
-export declare function useUrlState<T>(defaultState?: JSONCompatible<T>): {
-    updateUrl: (value: (undefined extends T ? Readonly<{
-        readonly [x: string]: Readonly<{}>;
-    }> : Readonly<JSONCompatible<T> & {} extends infer T ? { readonly [P in keyof T]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>) | ((currState: undefined extends T ? Readonly<{
-        readonly [x: string]: Readonly<{}>;
-    }> : Readonly<JSONCompatible<T> & {} extends infer T ? { readonly [P in keyof T]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>) => undefined extends T ? Readonly<{
-        readonly [x: string]: Readonly<{}>;
-    }> : Readonly<JSONCompatible<T> & {} extends infer T ? { readonly [P in keyof T]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>), options?: Options) => void;
-    updateState: (value: (undefined extends T ? Readonly<{
-        readonly [x: string]: Readonly<{}>;
-    }> : Readonly<JSONCompatible<T> & {} extends infer T_11 ? { readonly [P in keyof T_11]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_12 ? { readonly [P_1 in keyof T_12]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_13 ? { readonly [P_2 in keyof T_13]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_14 ? { readonly [P_3 in keyof T_14]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_15 ? { readonly [P_4 in keyof T_15]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_16 ? { readonly [P_5 in keyof T_16]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_17 ? { readonly [P_6 in keyof T_17]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_18 ? { readonly [P_7 in keyof T_18]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_19 ? { readonly [P_8 in keyof T_19]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_20 ? { readonly [P_9 in keyof T_20]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_21 ? { readonly [P_10 in keyof T_21]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>) | ((currState: undefined extends T ? Readonly<{
-        readonly [x: string]: Readonly<{}>;
-    }> : Readonly<JSONCompatible<T> & {} extends infer T_11 ? { readonly [P in keyof T_11]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_12 ? { readonly [P_1 in keyof T_12]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_13 ? { readonly [P_2 in keyof T_13]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_14 ? { readonly [P_3 in keyof T_14]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_15 ? { readonly [P_4 in keyof T_15]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_16 ? { readonly [P_5 in keyof T_16]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_17 ? { readonly [P_6 in keyof T_17]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_18 ? { readonly [P_7 in keyof T_18]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_19 ? { readonly [P_8 in keyof T_19]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_20 ? { readonly [P_9 in keyof T_20]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_21 ? { readonly [P_10 in keyof T_21]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>) => undefined extends T ? Readonly<{
-        readonly [x: string]: Readonly<{}>;
-    }> : Readonly<JSONCompatible<T> & {} extends infer T_11 ? { readonly [P in keyof T_11]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_12 ? { readonly [P_1 in keyof T_12]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_13 ? { readonly [P_2 in keyof T_13]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_14 ? { readonly [P_3 in keyof T_14]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_15 ? { readonly [P_4 in keyof T_15]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_16 ? { readonly [P_5 in keyof T_16]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_17 ? { readonly [P_6 in keyof T_17]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_18 ? { readonly [P_7 in keyof T_18]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_19 ? { readonly [P_8 in keyof T_19]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_20 ? { readonly [P_9 in keyof T_20]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_21 ? { readonly [P_10 in keyof T_21]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>)) => void;
-    state: undefined extends T ? Readonly<{
-        readonly [x: string]: Readonly<{}>;
-    }> : Readonly<JSONCompatible<T> & {} extends infer T_22 ? { readonly [P in keyof T_22]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_23 ? { readonly [P_1 in keyof T_23]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_24 ? { readonly [P_2 in keyof T_24]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_25 ? { readonly [P_3 in keyof T_25]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_26 ? { readonly [P_4 in keyof T_26]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_27 ? { readonly [P_5 in keyof T_27]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_28 ? { readonly [P_6 in keyof T_28]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_29 ? { readonly [P_7 in keyof T_29]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_30 ? { readonly [P_8 in keyof T_30]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_31 ? { readonly [P_9 in keyof T_31]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_32 ? { readonly [P_10 in keyof T_32]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>;
+export declare function useUrlState<T>(defaultState: JSONCompatible<T>, sp?: object): {
+    updateUrl: (value?: NonNullable<JSONCompatible<T>> | Readonly<NonNullable<JSONCompatible<T>> extends infer T ? { readonly [P in keyof T]: Readonly<NonNullable<JSONCompatible<T>>[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<NonNullable<JSONCompatible<T>>[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never> | ((currState: typeof defaultState | DeepReadonly<typeof defaultState>) => typeof defaultState) | undefined, options?: Options) => void;
+    updateState: (value: JSONCompatible<T> | Readonly<JSONCompatible<T> extends infer T_11 ? { readonly [P_11 in keyof T_11]: Readonly<JSONCompatible<T>[P_11] extends infer T_12 ? { readonly [P_12 in keyof T_12]: Readonly<JSONCompatible<T>[P_11][P_12] extends infer T_13 ? { readonly [P_13 in keyof T_13]: Readonly<JSONCompatible<T>[P_11][P_12][P_13] extends infer T_14 ? { readonly [P_14 in keyof T_14]: Readonly<JSONCompatible<T>[P_11][P_12][P_13][P_14] extends infer T_15 ? { readonly [P_15 in keyof T_15]: Readonly<JSONCompatible<T>[P_11][P_12][P_13][P_14][P_15] extends infer T_16 ? { readonly [P_16 in keyof T_16]: Readonly<JSONCompatible<T>[P_11][P_12][P_13][P_14][P_15][P_16] extends infer T_17 ? { readonly [P_17 in keyof T_17]: Readonly<JSONCompatible<T>[P_11][P_12][P_13][P_14][P_15][P_16][P_17] extends infer T_18 ? { readonly [P_18 in keyof T_18]: Readonly<JSONCompatible<T>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18] extends infer T_19 ? { readonly [P_19 in keyof T_19]: Readonly<JSONCompatible<T>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18][P_19] extends infer T_20 ? { readonly [P_20 in keyof T_20]: Readonly<JSONCompatible<T>[P_11][P_12][P_13][P_14][P_15][P_16][P_17][P_18][P_19][P_20] extends infer T_21 ? { readonly [P_21 in keyof T_21]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never> | ((currState: JSONCompatible<T>) => JSONCompatible<T>)) => false | undefined;
+    state: JSONCompatible<T>;
 };
 type Router = ReturnType<typeof useRouter>;
 type RouterOptions = NonNullable<Parameters<Router['push']>[1]>;

package/dist/urlstate/utils.d.ts

@@ -8,6 +8,7 @@ export type Type = 'string' | 'date' | 'boolean' | 'number' | 'bigint' | 'undefi
  * `function`, `symbol`, `array`
  */
 export declare const typeOf: (val: unknown) => Type;
+export declare const isSSR: () => boolean;
 type JSONPrimitive = string | number | boolean | Date | null | undefined;
 type JSONValue = JSONPrimitive | JSONValue[] | {
     [key: string]: JSONValue;
@@ -23,4 +24,5 @@ export declare const getParams: (strOrSearchParams?: string | URLSearchParams) =
 export type UnknownObj = {
     [key: string]: unknown;
 };
+export declare const isEqual: (val1: unknown, val2: unknown) => boolean;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Library to store state in browser URL, includes hook for NextJS, hook for pure React, and low level helpers.",
   "homepage": "https://github.com/asmyshlyaev177/state-in-url#readme",
   "keywords": [
@@ -76,10 +76,11 @@
     "bump:ex": "npm i state-in-url@latest --workspace=packages/example-nextjs",
     "build": "wireit",
     "build:demo": "cd packages/example-nextjs && npx cross-env DEMO=true npm run build",
-    "start:demo": "cd packages/example-nextjs && npm run build && npx serve -s ./out",
+    "start:demo": "npm run build && cd packages/example-nextjs && npm run build && npm run start",
     "cleanup": "rm -rf dist",
     "setup": "playwright install --with-deps",
     "cleanupDist": "wireit",
+    "prepack": "npm run test:unit && npm run build",
     "prepare": "npx husky"
   },
   "wireit": {
@@ -157,7 +158,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
-    "@playwright/test": "^1.42.0",
+    "@playwright/test": "^1.45.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -179,7 +180,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "playwright": "^1.42.0",
+    "playwright": "^1.45.1",
     "prettier": "^3.2.5",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",