state-in-url 0.1.2 → 0.1.4

package/README.md

@@ -1,12 +1,16 @@
 
 <h1 align="center">state-in-url</h1>
 
+
 <p align="center">
   <img src="/assets/logo.svg?raw=true" alt="Library logo"/>
 </p>
 
 <div align="center">
-Seamlessly sync React state with URL query parameters in Next.js/React.js applications. Simplify state management, enhance shareability, and maintain type safety—all through your browser's URL.
+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>
 
@@ -39,9 +43,10 @@ Add a ⭐️ to support the project!
 
 ## Table of content
 - [Installation](#installation)
-- [Usage with Next.js](#useurlstate-hook-for-nextjs)
-- [Usage with React.js](#useurlencode-hook-for-reactjs)
-- [Low-level encode/decode functions](#encode-and-decode-helpers)
+- [`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)
+- [Low-level `encode` and `decode` functions](#encode-and-decode-helpers)
 - [Gothas](#gothas)
 - [Contact & Support](#contact--support)
 - [Changelog](#changelog)
@@ -59,7 +64,7 @@ pnpm add state-in-url
 ```
 
 ## Run locally
-Clone this repo, run `npm install` and 
+Clone this repo, run `npm install` and
 ```sh
 npm run dev
 ```
@@ -67,7 +72,7 @@ Go to [localhost:3000](http://localhost:3000)
 
 ## useUrlState hook for Next.js
 
-`useUrlState` is a custom React hook for Next.js applications that manages state in the URL query string. It allows you to store and retrieve state from the URL search parameters, providing a way to persist state across page reloads and share application state via URLs.
+`useUrlState` is a custom React hook for Next.js applications that make communication between client components easy. It allows you to store and retrieve state from the URL search parameters, providing a way to persist state across page reloads and share application state via URLs.
 
 
 ### Usage examples
@@ -91,7 +96,7 @@ function MyComponent() {
     <div>
       <p>Count: {state.count}</p>
 
-      <button onClick={() => updateUrl({ count: state.count + 1 })}>
+      <button onClick={() => updateUrl({ count: state.count + 1 }), { replace: true }}>
         Increment (Update URL)
       </button>
 
@@ -174,7 +179,7 @@ function SettingsComponent() {
 
 ## useUrlEncode hook for React.js
 
-`useUrlEncode` is a custom React hook that provides utility functions for encoding and decoding state to and from URL search parameters. This hook doesn't depend on Nextjs, and will works with any React application.
+`useUrlEncode` is a custom React hook that provides utility functions for encoding and decoding state object to and from URL search parameters. This hook doesn't depend on Nextjs, and will works with any React application.
 
 Accepts optional `defaultState` argument.
 
@@ -201,6 +206,22 @@ const Component = () => {
 }
 ```
 
+## `encodeState` and `decodeState` helpers
+
+`encodeState` let you encode some object with optional `defaults`, and optional existing queryString
+```ts
+ export const form = { name: '' };
+...
+ encodeState({ name: 'test' }, form, 'someExistingParam=123');
+```
+
+`decodeState` let you decode queryString with optional defaults
+```ts
+ export const form = { name: '' };
+...
+ decodeState('name=Alex', form);
+```
+
 ## `encode` and `decode` helpers
 
 There low level helpers to stringify and parse query string params. Useful for other frameworks or pure JS.

package/dist/index.js

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

package/dist/packages/index.d.ts

@@ -0,0 +1 @@
+export { encodeState, decodeState, encode, decode, type Type, useUrlEncode, useUrlState, } from './urlstate';

package/dist/packages/urlstate/encodeState.d.ts

@@ -0,0 +1,28 @@
+import { type JSONCompatible } from './utils';
+/**
+ * Encodes the state object into a URL query string.
+ *
+ * @param {JSONCompatible<T>} state - The state object to encode.
+ * @param {JSONCompatible<T>} [defaults] - Optional default values for the state object.
+ * @return {string} The encoded URL query string representing the state object.
+ *
+ *  * Example:
+ * ```ts
+ * export const form = { name: '' };
+ * encodeState({ name: 'test' }, form, 'someExistingParam=123');
+ *  ```
+ */
+export declare function encodeState<T>(state: never extends T ? object : JSONCompatible<T>, defaults?: JSONCompatible<T>, paramsToKeep?: string | URLSearchParams): string;
+/**
+ * Decodes a URI string into an object of type T.
+ *
+ * @param {string} uriString - The URI string to decode.
+ * @return {T} The decoded object of type T.
+ *
+ *  * Example:
+ * ```ts
+ * export const form = { name: '' };
+ * decodeState('key=value&name=Alex', form);
+ *  ```
+ */
+export declare function decodeState<T>(uriString: string | URLSearchParams, defaults?: never extends T ? object : JSONCompatible<T>): never extends T ? object : T;

package/dist/packages/urlstate/encodeState.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/urlstate/encoder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{urlstate → packages/urlstate}/index.d.ts

@@ -2,5 +2,6 @@ import { encode, decode } from './encoder';
 import { type Type, type JSONCompatible, typeOf } from './utils';
 import { useUrlEncode } from './useUrlEncode';
 import { useUrlState } from './useUrlState';
-export { encode, decode, typeOf, useUrlEncode, useUrlState };
+import { encodeState, decodeState } from './encodeState';
+export { encode, decode, typeOf, useUrlEncode, useUrlState, encodeState, decodeState, };
 export type { Type, JSONCompatible };

package/dist/packages/urlstate/useUrlEncode.d.ts

@@ -0,0 +1,23 @@
+import { type JSONCompatible, type DeepReadonly } from './utils';
+/**
+ * A hook that returns stringify and parse functions for encoding and decoding state
+ * to and from URL search parameters.
+ *
+ * @template T - The type of the state shape
+ * @param {JSONCompatible<T>} [stateShape] Optional fallback values for state
+ * @returns {} `stringify` and `parse` functions
+ *
+ * * Example:
+ * ```ts
+ * export const form = { name: '' };
+ * const { parse, stringify } = useUrlEncode(form);
+ *
+ * stringify({ name: 'John' }, 'someExistingParamToKeep=123');
+ * // by default it's uses router.push with scroll: false
+ * parse('name=Tom');
+ *  ```
+ */
+export declare function useUrlEncode<T>(stateShape?: JSONCompatible<T>): {
+    parse: (strOrSearchParams: string | URLSearchParams) => 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>;
+    stringify: (state: DeepReadonly<NonNullable<typeof stateShape>> | NonNullable<typeof stateShape>, paramsToKeep?: string | URLSearchParams) => string;
+};

package/dist/packages/urlstate/useUrlEncode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{urlstate → packages/urlstate}/useUrlState.d.ts

@@ -1,11 +1,42 @@
+import { useRouter } from 'next/navigation';
 import { type JSONCompatible } from './utils';
 /**
  * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions
  *
  * @param {?JSONCompatible<T>} [defaultState] Optional fallback values for state
+ *
+ * * Example:
+ * ```ts
+ * export const form = { name: '' };
+ * const { state, updateState, updateUrl } = useUrlState(form);
+ *
+ * updateState({ name: 'test' });
+ * // 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]);
+ * ```
  */
 export declare function useUrlState<T>(defaultState?: JSONCompatible<T>): {
-    updateUrl: (value: 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: 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>) => 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?: import("next/dist/shared/lib/app-router-context.shared-runtime").NavigateOptions | undefined) => void;
-    updateState: (value: 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: 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>) => Readonly<JSONCompatible<T> & {} extends infer T_33 ? { readonly [P in keyof T_33]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_34 ? { readonly [P_1 in keyof T_34]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_35 ? { readonly [P_2 in keyof T_35]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_36 ? { readonly [P_3 in keyof T_36]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_37 ? { readonly [P_4 in keyof T_37]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_38 ? { readonly [P_5 in keyof T_38]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_39 ? { readonly [P_6 in keyof T_39]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_40 ? { readonly [P_7 in keyof T_40]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_41 ? { readonly [P_8 in keyof T_41]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_42 ? { readonly [P_9 in keyof T_42]: 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_43 ? { readonly [P_10 in keyof T_43]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>)) => void;
-    state: Readonly<JSONCompatible<T> & {} extends infer T_44 ? { readonly [P in keyof T_44]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_45 ? { readonly [P_1 in keyof T_45]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_46 ? { readonly [P_2 in keyof T_46]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_47 ? { readonly [P_3 in keyof T_47]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_48 ? { readonly [P_4 in keyof T_48]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_49 ? { readonly [P_5 in keyof T_49]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_50 ? { readonly [P_6 in keyof T_50]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_51 ? { readonly [P_7 in keyof T_51]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_52 ? { readonly [P_8 in keyof T_52]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_53 ? { readonly [P_9 in keyof T_53]: 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_54 ? { readonly [P_10 in keyof T_54]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>;
+    updateUrl: (value: 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: 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>) => 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: 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: 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>) => 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: 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>;
 };
+type Router = ReturnType<typeof useRouter>;
+type RouterOptions = NonNullable<Parameters<Router['push']>[1]>;
+interface Options extends RouterOptions {
+    replace?: boolean;
+}
+export {};

package/dist/{urlstate → packages/urlstate}/utils.d.ts

@@ -19,4 +19,5 @@ export type JSONCompatible<T> = unknown extends T ? never : {
 export type DeepReadonly<T> = Readonly<{
     readonly [P in keyof T]: DeepReadonly<T[P]>;
 }>;
+export declare const getParams: (strOrSearchParams?: string | URLSearchParams) => URLSearchParams;
 export {};

package/dist/packages/urlstate/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/smoke-test.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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": [
@@ -72,9 +72,11 @@
     "dev": "wireit",
     "dev:lib": "wireit",
     "dev:nextjs": "wireit",
-    "bump": "standard-version",
+    "bump": "npx standard-version --no-verify",
+    "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",
     "cleanup": "rm -rf dist",
     "setup": "playwright install --with-deps",
     "prepare": "npx husky"

package/dist/index.d.ts

@@ -1 +0,0 @@
-export { encode, decode, type Type, useUrlEncode, useUrlState, } from './urlstate';

package/dist/urlstate/useUrlEncode.d.ts

@@ -1,10 +0,0 @@
-import { type JSONCompatible, type DeepReadonly } from './utils';
-/**
- * Returns stringify and parse functions
- *
- * @param {?JSONCompatible<T>} [stateShape] Optional fallback values for state
- */
-export declare function useUrlEncode<T>(stateShape?: JSONCompatible<T>): {
-    parse: (strOrSearchParams?: string | URLSearchParams) => 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>;
-    stringify: (state: DeepReadonly<NonNullable<typeof stateShape>> | NonNullable<typeof stateShape>, strOrSearchParams?: string | URLSearchParams) => string;
-};