state-in-url 0.2.4 → 0.2.6

package/README.md

@@ -17,6 +17,7 @@
 
 [![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)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/73be54068b7f41b0b74a252579ac09ec)](https://app.codacy.com/gh/asmyshlyaev177/state-in-url/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
 [![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>
@@ -25,8 +26,7 @@
 
 <h4 align="center">Don't hesitate to open issue if you found a bug</h4>
 
-
-https://github.com/asmyshlyaev177/state-in-url/assets/19854148/10456887-f149-4745-b3f1-e799e70b16cd
+![Demo-gif](https://github.com/asmyshlyaev177/state-in-url/assets/19854148/c9802601-4d42-4362-b3e4-37ff87c3b97f)
 
 
 <a href="https://state-in-url-asmyshlyaev177.vercel.app/" target="_blank">DEMO</a>
@@ -56,6 +56,7 @@ Add a ⭐️ to support the project!
 - 📘 **Typescript support and type Safety**: Preserves data types and structure, enhances developer experience with IDE suggestions, strong typing and JSDoc comments
 - ⚛️ **Framework Flexibility**: Separate hooks for Next.js and React.js applications, and functions for pure JS
 - ⚙ **Well tested**: Unit tests and Playwright tests
+- ⚡ **Fast**: Minimal rerenders
 - 🪶 **Lightweight**: Zero dependencies for a smaller footprint
 
 
@@ -96,12 +97,21 @@ set `"moduleResolution": "Node16"` or `"moduleResolution": "NodeNext"` in your `
 
 #### Basic
 
+1. Define state shape
+   ```typescript
+   // countState.ts
+   // State shape should be stored in a constant, don't pass an object directly
+   export const countState: CountState = { count: 0 }
+
+   type CountState = { count: number }
+   ```
+
+2. Import it and use
 ```typescript
 'use client'
 import { useUrlState } from 'state-in-url';
 
-// State shape should be stored in a constant, don't pass an object directly
-const countState: { count: number } = { count: 0 };
+import { countState } from './countState';
 
 function MyComponent() {
   // for use searchParams from server component
@@ -140,24 +150,28 @@ function MyComponent() {
 #### With complex state shape
 
 ```typescript
-'use client'
-import { useUrlState } from 'state-in-url';
-
 interface UserSettings {
   theme: 'light' | 'dark';
   fontSize: number;
   notifications: boolean;
 }
 
-const defaultSettings: UserSettings {
+export const userSettings: UserSettings {
   theme: 'light',
   fontSize: 16,
   notifications: true,
 }
+```
+
+```typescript
+'use client'
+import { useUrlState } from 'state-in-url';
+
+import { userSettings } from './userSettings';
 
 function SettingsComponent() {
   // `state` will infer from UserSettings type!
-  const { state, updateUrl } = useUrlState(defaultSettings);
+  const { state, updateUrl } = useUrlState(userSettings);
 
   const toggleTheme = () => {
     updateUrl(current => ({
@@ -243,11 +257,14 @@ Accepts optional `defaultState` argument.
 ```typescript
 import { useUrlEncode } from 'state-in-url';
 
+const ageState = { age: 0 };
+
 const Component = () => {
   const { parse, stringify } = useUrlEncode();
 
   const str = stringify({ age: 36 }); // age=∓36
-  const obj = parse(str); // { age: 36 }
+  const obj = parse(str, ageState); // { age: 36 }
+  // Or const obj = parse(str); // { age: 36 }
 
   const currentParams = parse(window.location.search);
   // OR
@@ -328,7 +345,6 @@ Go to [localhost:3000](http://localhost:3000)
 ## Contact & Support
 
 - Create a [GitHub issue](https://github.com/asmyshlyaev177/state-in-url/issues) for bug reports, feature requests, or questions
-- Add a ⭐️ [star on GitHub](https://github.com/asmyshlyaev177/state-in-url) to support the project!
 
 ## [Changelog](https://github.com/asmyshlyaev177/state-in-url/blob/main/CHANGELOG.md)
 

package/dist/index.cjs

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

package/dist/index.mjs

@@ -1 +1 @@
-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,p)}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"),p=(t,e)=>{const n="string"==typeof e,r=n&&l(e);return r===f?e:t&&n?r:e};const d=(t,e)=>{const n="string"==typeof e,r=n&&u(e?.replaceAll?.("'",'"'));return r===f?e:t&&n?r:e};function g(t,e){try{return JSON.parse(t,d)}catch{const n=l(t);return n!==f?n:e}}function y(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 b(t,e){return{...e||{},...Object.fromEntries([...c(t).entries()].map((([t,n])=>{const r=e?.[t];return[t,u(n,r)??r]})))}}function S(e){const r=t.useCallback((function(t,r){return"object"===n(t)?y(t,e,r):""}),[e]);return{parse:t.useCallback((function(t){return b(t,e)}),[e]),stringify:r}}const m=new WeakMap,w=new WeakMap;function h(n,c){const{state:s,getState:a,setState:u,stringify:i,parse:l}=function(e){const n=t.useRef(e),{parse:c,stringify:s}=S(n.current),[a,u]=t.useState((()=>{const t=m.get(n.current),e=c(r()?"":window.location.search);return t||m.set(n.current,e),e}));return t.useInsertionEffect((()=>{const t=w.get(n.current)||[],r=()=>{u(m.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((()=>m.get(n.current)||n.current),[]),setState:t.useCallback((t=>{const e=m.get(n.current)||n.current;if("function"==typeof t){const r=t(e);if(o(e,r))return!1;m.set(n.current,r),(w.get(n.current)||[]).forEach((t=>{t()}))}else{if(o(e,t))return!1;m.set(n.current,t),(w.get(n.current)||[]).forEach((t=>{t()}))}}),[]),parse:c,stringify:s}}(r()?function(t,e){return{...e,...g(JSON.stringify(t),e)}}(c,n):n);t.useInsertionEffect((()=>{const t=()=>{if(r())return;const t=l(window.location.search);u(t)},e="popstate";return window.addEventListener(e,t),()=>{window.removeEventListener(e,t)}}),[]);const f=e();return{updateUrl:t.useCallback(((t,e)=>{u(t??a());const n=window.location.search,r=`${window.location.pathname}${n.length&&!n.includes("?")?"?":""}${n}`,c=i("function"==typeof t?t(a()):t??a()),o=`${window.location.pathname}${c.length?"?":""}${c}`;if(r!==o){const{replace:t,...n}=e||{};f[t?"replace":"push"](o,{scroll:!1,...n})}}),[f,i,a]),updateState:u,state:s}}export{u as decode,b as decodeState,a as encode,y as encodeState,S as useUrlEncode,h 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};const d=(t,e)=>{const n="string"==typeof e,r=n&&u(e?.replaceAll?.("'",'"'));return t&&n?r:e};function p(t,e){try{return JSON.parse(t,d)}catch{const n=l(t);return n!==f?n:e}}function y(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 b(t,e){return{...e||{},...Object.fromEntries([...c(t).entries()].map((([t,n])=>{const r=e?.[t];return[t,u(n,r)??r]})))}}function S(e){const r=t.useCallback((function(t,r){return"object"===n(t)?y(t,e,r):""}),[e]);return{parse:t.useCallback((function(t){return b(t,e)}),[e]),stringify:r}}const m=new WeakMap,w=new WeakMap,h={get:function(t){return m.get(t)},set:function(t,e){m.set(t,e)}};function O(n,c){const{state:s,getState:a,setState:u,stringify:i}=function(e){const n=t.useRef(e),{parse:c,stringify:s}=S(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)})),i=t.useCallback((t=>{const e=h.get(n.current)||n.current;if("function"==typeof t){const r=t(e);if(o(e,r))return;h.set(n.current,r),(w.get(n.current)||[]).forEach((t=>{t()}))}else{if(o(e,t))return;h.set(n.current,t),(w.get(n.current)||[]).forEach((t=>{t()}))}}),[]);return t.useInsertionEffect((()=>{const t=w.get(n.current)||[],r=()=>{u(h.get(n.current)||e)};w.set(n.current,t.concat(r));const o=()=>{const t=c(window.location.search);i(t)},s="popstate";return window.addEventListener(s,o),()=>{const t=w.get(n.current)||[];w.set(n.current,t.filter((t=>t!==r))),window.removeEventListener(s,o)}}),[i]),{state:a,getState:t.useCallback((()=>h.get(n.current)||n.current),[]),setState:i,stringify:s}}(r()?function(t,e){return{...e,...p(JSON.stringify(t),e)}}(c,n):n),l=e();return{updateUrl:t.useCallback(((t,e)=>{const n=window.location.search,r=`${window.location.pathname}${n.length&&!n.includes("?")?"?":""}${n}`;let c;if("function"==typeof t){const e=t(a());c=i(e),u(e)}else{const e=t??a();c=i(e),u(e)}const 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:s}}export{u as decode,b as decodeState,a as encode,y as encodeState,S as useUrlEncode,O as useUrlState};

package/dist/urlstate/encodeState.d.ts

@@ -14,7 +14,7 @@ import { type JSONCompatible, type UnknownObj } from './utils';
  *
  *  * 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;
+export declare function encodeState<T extends JSONCompatible>(state: T, defaults?: T, paramsToKeep?: string | URLSearchParams): string;
 /**
  * Decodes a URI string into an object of type T.
  *
@@ -29,4 +29,4 @@ export declare function encodeState<T>(state: never extends T ? object : JSONCom
  *
  *  * 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;
+export declare function decodeState<T extends JSONCompatible>(uriString: string | URLSearchParams, defaults?: T): undefined extends T ? UnknownObj : T;

package/dist/urlstate/encoder.d.ts

@@ -1,3 +1,4 @@
+import { type JSONCompatible } from './utils';
 /**
  * Encode any JSON serializable value to URL friendly string
  *
@@ -16,7 +17,7 @@ export declare function encode(payload: unknown): string;
  *
  *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
-export declare function decode<T>(payload: string, fallback?: T): T | Primitive;
+export declare function decode<T>(payload: string, fallback?: T): JSONCompatible | 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;
@@ -31,5 +32,5 @@ export declare const reviver: (key: string, value: unknown) => unknown;
  *
  *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
-export declare function parseJSON<T>(jsonString: string, fallbackValue?: T): T | Primitive | undefined;
-export declare function parseSsrQs<T>(sp: object | undefined, defaults: T): T;
+export declare function parseJSON<T extends JSONCompatible>(jsonString: string, fallbackValue?: T): T | Primitive | undefined;
+export declare function parseSsrQs<T extends JSONCompatible>(sp: object | undefined, defaults: T): T;

package/dist/urlstate/state.d.ts

@@ -1,8 +1,7 @@
-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> | DeepReadonly<JSONCompatible<T>> | ((currState: typeof defaultState | DeepReadonly<typeof defaultState>) => typeof defaultState | DeepReadonly<typeof defaultState>)) => false | undefined;
-    parse: (strOrSearchParams: string | URLSearchParams) => DeepReadonly<JSONCompatible<T>>;
-    stringify: (state: JSONCompatible<T> | DeepReadonly<JSONCompatible<T>>, paramsToKeep?: string | URLSearchParams | undefined) => string;
+import { type JSONCompatible } from './utils';
+export declare function useState<T extends JSONCompatible>(defaultState: T): {
+    state: T;
+    getState: () => T;
+    setState: (value: T | ((currState: typeof defaultState) => typeof defaultState)) => void;
+    stringify: (state: T, paramsToKeep?: string | URLSearchParams | undefined) => string;
 };

package/dist/urlstate/subscribers.d.ts

@@ -1,3 +1,7 @@
-export declare const stateMap: WeakMap<object, object>;
-export declare const subscribers: WeakMap<object, Cb[]>;
+import { type JSONCompatible } from './utils';
+export declare const subscribers: WeakMap<JSONCompatible, Cb[]>;
 export type Cb = () => void;
+export declare const stateMap: {
+    get: <T extends JSONCompatible>(objKey: T) => T;
+    set: <T_1 extends JSONCompatible>(objKey: T_1, value: T_1) => void;
+};

package/dist/urlstate/useUrlEncode.d.ts

@@ -1,4 +1,4 @@
-import { type JSONCompatible, type DeepReadonly } from './utils';
+import { type JSONCompatible } from './utils';
 /**
  * A hook that returns stringify and parse functions for encoding and decoding state
  * to and from URL search parameters.
@@ -19,7 +19,7 @@ import { type JSONCompatible, type DeepReadonly } from './utils';
  *
  * * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
-export declare function useUrlEncode<T>(stateShape: JSONCompatible<T>): {
-    parse: (strOrSearchParams: string | URLSearchParams) => DeepReadonly<JSONCompatible<T>>;
-    stringify: (state: typeof stateShape | DeepReadonly<typeof stateShape>, paramsToKeep?: string | URLSearchParams) => string;
+export declare function useUrlEncode<T extends JSONCompatible>(stateShape: T): {
+    parse: (strOrSearchParams: string | URLSearchParams) => T;
+    stringify: (state: typeof stateShape, paramsToKeep?: string | URLSearchParams) => string;
 };

package/dist/urlstate/useUrlState.d.ts

@@ -18,10 +18,10 @@ import { DeepReadonly, type JSONCompatible } from './utils';
  *
  *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
-export declare function useUrlState<T>(defaultState: JSONCompatible<T>, sp?: object): {
-    updateUrl: (value?: JSONCompatible<T> | DeepReadonly<JSONCompatible<T>> | ((currState: typeof defaultState | DeepReadonly<typeof defaultState>) => typeof defaultState | DeepReadonly<typeof defaultState>) | undefined, options?: Options) => void;
-    updateState: (value: JSONCompatible<T> | DeepReadonly<JSONCompatible<T>> | ((currState: JSONCompatible<T> | DeepReadonly<JSONCompatible<T>>) => JSONCompatible<T> | DeepReadonly<JSONCompatible<T>>)) => false | undefined;
-    state: DeepReadonly<JSONCompatible<T>>;
+export declare function useUrlState<T extends JSONCompatible>(defaultState: T, sp?: object): {
+    updateUrl: (value?: T | ((currState: typeof defaultState) => typeof defaultState) | undefined, options?: Options) => void;
+    updateState: (value: T | ((currState: T) => T)) => void;
+    state: DeepReadonly<T>;
 };
 type Router = ReturnType<typeof useRouter>;
 type RouterOptions = NonNullable<Parameters<Router['push']>[1]>;

package/dist/urlstate/utils.d.ts

@@ -9,13 +9,13 @@ export type Type = 'string' | 'date' | 'boolean' | 'number' | 'bigint' | 'undefi
  */
 export declare const typeOf: (val: unknown) => Type;
 export declare const isSSR: () => boolean;
-type JSONPrimitive = null | boolean | Date | number | string | JSONPrimitive[] | {
-    [prop: string]: JSONPrimitive;
+export type JSON = null | boolean | Date | number | string | {
+    [prop: string]: JSON | JSON[];
 };
-export type JSONCompatible<T> = {
-    [P in keyof T]: T[P] extends JSONPrimitive ? T[P] : Pick<T, P> extends Required<Pick<T, P>> ? never : JSONCompatible<T[P]>;
+export type JSONCompatible = {
+    [prop: string]: JSON | JSON[];
 };
-export type DeepReadonly<T> = T extends Map<infer K, infer V> ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> : T extends Set<infer S> ? ReadonlySet<DeepReadonly<S>> : T extends object ? {
+export type DeepReadonly<T> = T extends Map<infer K, infer V> ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> : T extends Set<infer S> ? ReadonlySet<DeepReadonly<S>> : T extends JSONCompatible ? {
     readonly [K in keyof T]: DeepReadonly<T[K]>;
 } : T;
 export declare const getParams: (strOrSearchParams?: string | URLSearchParams) => URLSearchParams;
@@ -23,4 +23,3 @@ 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.2.4",
+  "version": "0.2.6",
   "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": [
@@ -65,13 +65,6 @@
     }
   },
   "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/types/"
-      ]
-    }
-  },
   "scripts": {
     "test:unit": "wireit",
     "test:int": "playwright test",