state-in-url 3.0.0 → 3.0.1

package/dist/constants/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SYMBOLS: {
+    readonly date: "⏲";
+    readonly undefined: "∙undefined";
+};

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './constants';

package/dist/encodeState/encodeState.d.ts

@@ -0,0 +1,32 @@
+import { type JSONCompatible, type UnknownObj } 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');
+ *  ```
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/encodeState#encodestate}
+ */
+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.
+ *
+ * @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);
+ *  ```
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/encodeState#decodestate}
+ */
+export declare function decodeState<T extends JSONCompatible>(uriString: string | URLSearchParams, defaults?: T): undefined extends T ? UnknownObj : T;

package/dist/encodeState/encodeState.mjs

@@ -1 +1 @@
-import{encode as t,decode as n}from"../encoder/encoder.mjs";import{getParams as o}from"../utils.mjs";function r(t){let n,o=t[0],r=1;for(;r<t.length;){const e=t[r],c=t[r+1];if(r+=2,("optionalAccess"===e||"optionalCall"===e)&&null==o)return;"access"===e||"optionalAccess"===e?(n=o,o=c(o)):"call"!==e&&"optionalCall"!==e||(o=c(((...t)=>o.call(n,...t))),n=void 0)}return o}function e(n,e,c){const s=o(c);return Object.entries(n||{}).forEach((([n,o])=>{const c=r([e,"optionalAccess",t=>t[n]]);JSON.stringify(o)!==JSON.stringify(c)&&s.set(n,t(o))})),s.toString()}function c(t,e){return{...e||{},...Object.fromEntries([...o(t).entries()].map((([t,o])=>{const c=r([e,"optionalAccess",n=>n[t]]);return[t,(s=n(o,c),i=()=>c,null!=s?s:i())];var s,i})))}}export{c as decodeState,e as encodeState};
+import{encode as t,decode as r}from"../encoder/encoder.mjs";import{getParams as n}from"../utils.mjs";function e(r,e,o){const i=n(o);return Object.entries(r||{}).forEach((([r,n])=>{const o=e?.[r];JSON.stringify(n)!==JSON.stringify(o)&&i.set(r,t(n))})),i.toString()}function o(t,e){return{...e||{},...Object.fromEntries([...n(t).entries()].map((([t,n])=>{const o=e?.[t];return[t,r(n,o)??o]})))}}export{o as decodeState,e as encodeState};

package/dist/encodeState/index.d.ts

@@ -0,0 +1 @@
+export { decodeState, encodeState } from './encodeState';

package/dist/encoder/encoder.d.ts

@@ -0,0 +1,34 @@
+import { type JSONCompatible } from '../utils';
+/**
+ * Encode any JSON serializable value to URL friendly string
+ *
+ * @param {unknown} payload any value to serialize
+ * @returns {string} URLSearchParams compatible value string
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/encoder#encode}
+ */
+export declare function encode(payload: unknown): string;
+export 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
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/encoder#decode}
+ */
+export declare function decode<T>(payload: string, fallback?: T): JSONCompatible | Primitive;
+export declare const decodePrimitive: (str: string) => Date | typeof errorSym | 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.
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url}
+ */
+export declare function parseJSON<T extends JSONCompatible>(jsonString: string, fallbackValue?: T): T | Primitive | undefined;

package/dist/encoder/encoder.mjs

@@ -1 +1 @@
-import{SYMBOLS as t}from"../constants/constants.mjs";import{typeOf as n}from"../utils.mjs";function e(e){if(l(e))return e;switch(n(e)){case"function":case"symbol":return"";case"date":return r=e,t.date+new Date(r).toISOString();case"undefined":return t.undefined;default:return JSON.stringify(e).replaceAll('"',"'")}var r}function r(t,n){return a(t.replaceAll("'",'"'),n)}const o=n=>{if(n!==t.undefined)return function(t){let n,e=t[0],r=1;for(;r<t.length;){const o=t[r],s=t[r+1];if(r+=2,("optionalAccess"===o||"optionalCall"===o)&&null==e)return;"access"===o||"optionalAccess"===o?(n=e,e=s(e)):"call"!==o&&"optionalCall"!==o||(e=s(((...t)=>e.call(n,...t))),n=void 0)}return e}([n,"optionalAccess",t=>t.startsWith,"optionalCall",n=>n(t.date)])?new Date(n.slice(1)):s},s=Symbol("isError"),c=(t,n)=>{const e="string"==typeof n,r=e&&o(n);return r===s?n:e?r:n};function a(t,n){try{return JSON.parse(t,c)}catch(e){const r=o(t);return r!==s?r:n}}const i=new RegExp(`^(${t.undefined}|${t.date})`),l=t=>i.test(String(t));export{r as decode,o as decodePrimitive,e as encode,s as errorSym,a as parseJSON,c as reviver};
+import{SYMBOLS as t}from"../constants/constants.mjs";import{typeOf as e}from"../utils.mjs";function n(n){if(a(n))return n;switch(e(n)){case"function":case"symbol":return"";case"date":return r=n,t.date+new Date(r).toISOString();case"undefined":return t.undefined;default:return JSON.stringify(n).replaceAll('"',"'")}var r}function r(t,e){return o(t.replaceAll("'",'"'),e)}const s=e=>{if(e!==t.undefined)return e?.startsWith?.(t.date)?new Date(e.slice(1)):i},i=Symbol("isError"),c=(t,e)=>{const n="string"==typeof e,r=n&&s(e);return r===i?e:n?r:e};function o(t,e){try{return JSON.parse(t,c)}catch{const n=s(t);return n!==i?n:e}}const u=new RegExp(`^(${t.undefined}|${t.date})`),a=t=>u.test(String(t));export{r as decode,s as decodePrimitive,n as encode,i as errorSym,o as parseJSON,c as reviver};

package/dist/encoder/index.d.ts

@@ -0,0 +1 @@
+export { decode, encode } from './encoder';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { decode, encode } from './encoder';
+import { decodeState, encodeState } from './encodeState';
+import { useUrlState } from './next';
+import { useSharedState } from './useSharedState';
+import { useUrlEncode } from './useUrlEncode';
+import { useUrlStateBase } from './useUrlStateBase';
+import { isSSR, type JSONCompatible, type Type, typeOf } from './utils';
+export { decode, decodeState, encode, encodeState, isSSR, typeOf, useSharedState, useUrlEncode, useUrlState, useUrlStateBase, };
+export type { JSONCompatible, Type };

package/dist/next/index.d.ts

@@ -0,0 +1 @@
+export { useUrlState } from './useUrlState';

package/dist/next/useUrlState/index.d.ts

@@ -0,0 +1 @@
+export * from './useUrlState';

package/dist/next/useUrlState/useUrlState.d.ts

@@ -0,0 +1,61 @@
+import { useRouter } from 'next/navigation';
+import { type DeepReadonly, type JSONCompatible } from '../../utils';
+/**
+ * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions
+ *
+ * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
+ * @param {?SearchParams<T>} [searchParams] searchParams from Next server component
+ *
+ * * Example:
+ * ```ts
+ * export const form = { name: '', age: 0 };
+ * const { state, updateState, updateUrl } = useUrlState({ defaultState: form });
+ * // for nextjs seerver components
+ * // const { state, updateState, updateUrl } = useUrlState({ defaultState: form, searchParams });
+ *
+ * updateState({ name: 'test' });
+ * // by default it's uses router.push with scroll: false
+ * updateUrl({ name: 'test' }, { replace: true, scroll: true });
+ * // similar to React.useState
+ * updateUrl(curr => ({ ...curr, name: 'test' }), { replace: true, scroll: true });
+ *  ```
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/next/useUrlState#api}
+ */
+export declare function useUrlState<T extends JSONCompatible>({ defaultState, searchParams, ...opts }: {
+    defaultState: T;
+    searchParams?: object;
+    replace?: boolean;
+    scroll?: boolean;
+}): {
+    /**
+     * * Example:
+     * ```ts
+     * updateState({ name: 'test' });
+     * // or
+     * updateState(curr => ({ ...curr, name: 'test' }) );
+     *  ```
+     *
+     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/next/useUrlState#updatestate}
+     */
+    updateState: (value: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T)) => void;
+    /**
+     * * Example:
+     * ```ts
+     * updateUrl({ name: 'test' });
+     * // or
+     * updateUrl(curr => ({ ...curr, name: 'test' }), { replace: true, scroll: false  } );
+     *  ```
+     *
+     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/next/useUrlState#updateurl}
+     */
+    updateUrl: (value?: Parameters<(value?: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T) | undefined, options?: import("../../useUrlStateBase/useUrlStateBase").Options) => void>[0], options?: Options) => void;
+    state: DeepReadonly<DeepReadonly<T>>;
+    getState: () => T;
+};
+type Router = ReturnType<typeof useRouter>;
+type RouterOptions = NonNullable<Parameters<Router['push']>[1] | Parameters<Router['replace']>[1]>;
+interface Options extends RouterOptions {
+    replace?: boolean;
+}
+export {};

package/dist/next/useUrlState/useUrlState.mjs

@@ -1 +1 @@
-import{useRouter as t,useSearchParams as e}from"next/navigation";import a from"react";import{parseSPObj as r}from"../../parseSPObj.mjs";import{useUrlStateBase as s}from"../../useUrlStateBase/useUrlStateBase.mjs";import{filterUnknownParams as o,isSSR as m,filterUnknownParamsClient as p}from"../../utils.mjs";function u({defaultState:u,searchParams:i,...l}){const n=t(),{state:f,updateState:S,updateUrl:d,getState:j}=s(u,n,(({parse:t})=>m()?r(o(u,i),u):t(p(u)))),U=a.useCallback(((t,e)=>{const a={...c,...l,...e};d(t,a)}),[d,l]),b=e();return a.useEffect((()=>{S(o(u,r(Object.fromEntries([...b.entries()]),u)))}),[b]),{updateState:S,updateUrl:U,state:f,getState:j}}const c={replace:!0,scroll:!1};export{u as useUrlState};
+import{useRouter as t,useSearchParams as e}from"next/navigation";import a from"react";import{parseSPObj as r}from"../../parseSPObj.mjs";import{useUrlStateBase as s}from"../../useUrlStateBase/useUrlStateBase.mjs";import{isSSR as o,filterUnknownParams as m,filterUnknownParamsClient as p}from"../../utils.mjs";function u({defaultState:u,searchParams:i,...l}){const n=t(),{state:f,updateState:S,updateUrl:d,getState:j}=s(u,n,(({parse:t})=>o()?r(m(u,i),u):t(p(u)))),U=a.useCallback(((t,e)=>{const a={...c,...l,...e};d(t,a)}),[d,l]),b=e();return a.useEffect((()=>{S(m(u,r(Object.fromEntries([...b.entries()]),u)))}),[b]),{updateState:S,updateUrl:U,state:f,getState:j}}const c={replace:!0,scroll:!1};export{u as useUrlState};

package/dist/parseSPObj.d.ts

@@ -0,0 +1,13 @@
+import { type JSONCompatible } from './utils';
+/**
+ * Parses the Next.js server-side `searchParams` into an object.
+ *
+ * Or with react-router
+ * {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/react-router/useUrlState/useUrlState.ts}
+ *
+ *
+ * @param {object | undefined} sp - The server-side searchParams object to parse.
+ * @param {T} defaults - The default values to use if parsing fails.
+ * @return {T} - The parsed object or the default values.
+ */
+export declare function parseSPObj<T extends JSONCompatible>(sp: object | undefined, defaults: T): T;

package/dist/parseSPObj.mjs

@@ -1 +1 @@
-import{decodePrimitive as n,errorSym as t,decode as o}from"./encoder/encoder.mjs";function l(n,t){return{...t,...r(JSON.stringify(n),t)}}function r(o,l){try{return JSON.parse(o,c)}catch(r){const c=n(o);return c!==t?c:l}}const c=(n,t)=>{const l="string"==typeof t,r=l&&o(function(n){let t,o=n[0],l=1;for(;l<n.length;){const r=n[l],c=n[l+1];if(l+=2,("optionalAccess"===r||"optionalCall"===r)&&null==o)return;"access"===r||"optionalAccess"===r?(t=o,o=c(o)):"call"!==r&&"optionalCall"!==r||(o=c(((...n)=>o.call(t,...n))),t=void 0)}return o}([t,"optionalAccess",n=>n.replaceAll,"optionalCall",n=>n("'",'"')]));return n&&l?r:t};export{l as parseSPObj};
+import{decodePrimitive as r,errorSym as t,decode as n}from"./encoder/encoder.mjs";function e(r,t){return{...t,...o(JSON.stringify(r),t)}}function o(n,e){try{return JSON.parse(n,c)}catch{const o=r(n);return o!==t?o:e}}const c=(r,t)=>{const e="string"==typeof t,o=e&&n(t?.replaceAll?.("'",'"'));return r&&e?o:t};export{e as parseSPObj};

package/dist/react-router/index.d.ts

@@ -0,0 +1 @@
+export { useUrlState } from './useUrlState';

package/dist/react-router/useUrlState/index.d.ts

@@ -0,0 +1 @@
+export { useUrlState } from './useUrlState';

package/dist/react-router/useUrlState/useUrlState.d.ts

@@ -0,0 +1,52 @@
+import { type NavigateOptions } from 'react-router-dom';
+import { type DeepReadonly, type JSONCompatible } from '../../utils';
+/**
+ * React-router hook. Returns `state`, `updateState`, and `updateUrl` functions
+ *
+ * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
+ * @param {NavigateOptions} [NavigateOptions] See type from `react-router-dom`
+ * * Example:
+ * ```ts
+ * export const form = { name: '', age: 0 };
+ * const { state, updateState, updateUrl } = useUrlState({ defaultState: form, replace: false, preventScrollReset: false });
+ *
+ * updateState({ name: 'test' });
+ * updateUrl({ name: 'test' }, { replace: true });
+ * // similar to React.useState
+ * updateUrl(curr => ({ ...curr, name: 'test' }), { replace: true });
+ *  ```
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/react-router/useUrlState#api}
+ */
+export declare function useUrlState<T extends JSONCompatible>({ defaultState, ...initOpts }: {
+    defaultState: T;
+} & NavigateOptions): {
+    /**
+     * * Example:
+     * ```ts
+     * updateState({ name: 'test' });
+     * // or
+     * updateState(curr => ({ ...curr, name: 'test' }) );
+     * // can pass optional React-Router `NavigateOptions`
+     * updateState(curr => ({ ...curr, name: 'test', preventScrollReset: false }) );
+     *  ```
+     *
+     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/react-router/useUrlState#updatestate}
+     */
+    updateState: (value: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T)) => void;
+    /**
+     * * Example:
+     * ```ts
+     * updateUrl({ name: 'test' });
+     * // or
+     * updateUrl(curr => ({ ...curr, name: 'test' }), { replace: true } );
+     * // can pass optional React-Router `NavigateOptions`
+     * updateState(curr => ({ ...curr, name: 'test', preventScrollReset: false }) );
+     *  ```
+     *
+     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/react-router/useUrlState#updateurl}
+     */
+    updateUrl: (value?: Parameters<(value?: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T) | undefined, options?: import("../../useUrlStateBase/useUrlStateBase").Options) => void>[0], options?: NavigateOptions) => void;
+    state: DeepReadonly<DeepReadonly<T>>;
+    getState: () => T;
+};

package/dist/react-router/useUrlState/useUrlState.mjs

@@ -1 +1 @@
-import t from"react";import{useNavigate as e,useSearchParams as r}from"react-router-dom";import{parseSPObj as a}from"../../parseSPObj.mjs";import{useUrlStateBase as s}from"../../useUrlStateBase/useUrlStateBase.mjs";import{assignValue as o,filterUnknownParams as m,filterUnknownParamsClient as p}from"../../utils.mjs";function u({defaultState:u,...l}){const f=e(),i=t.useMemo((()=>({replace:(t,e)=>f(t,{...c,...l,...e}),push:(t,e)=>f(t,{...c,...l,...e})})),[f,l]),{state:n,updateState:S,updateUrl:d,getState:j}=s(u,i,(({parse:t})=>t(p(u)))),U=t.useCallback(((t,e)=>{const r={...c,...l,...e};d(t,r)}),[l]),[b]=r();return t.useEffect((()=>{S(o(u,n,m(u,a(Object.fromEntries([...b.entries()]),u))))}),[b]),{updateState:S,updateUrl:U,state:n,getState:j}}const c={replace:!0,preventScrollReset:!0};export{u as useUrlState};
+import t from"react";import{useNavigate as e,useSearchParams as r}from"react-router-dom";import{parseSPObj as a}from"../../parseSPObj.mjs";import{useUrlStateBase as s}from"../../useUrlStateBase/useUrlStateBase.mjs";import{filterUnknownParamsClient as o,assignValue as m,filterUnknownParams as p}from"../../utils.mjs";function u({defaultState:u,...l}){const f=e(),i=t.useMemo((()=>({replace:(t,e)=>f(t,{...c,...l,...e}),push:(t,e)=>f(t,{...c,...l,...e})})),[f,l]),{state:n,updateState:S,updateUrl:d,getState:j}=s(u,i,(({parse:t})=>t(o(u)))),U=t.useCallback(((t,e)=>{const r={...c,...l,...e};d(t,r)}),[l]),[b]=r();return t.useEffect((()=>{S(m(u,n,p(u,a(Object.fromEntries([...b.entries()]),u))))}),[b]),{updateState:S,updateUrl:U,state:n,getState:j}}const c={replace:!0,preventScrollReset:!0};export{u as useUrlState};

package/dist/subscribers.d.ts

@@ -0,0 +1,11 @@
+import { type JSONCompatible } from './utils';
+export declare const subscribers: {
+    get(obj: JSONCompatible): Cb[];
+    add(obj: JSONCompatible, cb: Cb): () => void;
+    remove(obj: JSONCompatible, cb: Cb): void;
+};
+export declare const stateMap: {
+    get: <T extends JSONCompatible>(objKey: T) => T;
+    set: <T extends JSONCompatible>(objKey: T, value: T) => void;
+};
+export type Cb = () => void;

package/dist/useInsertionEffect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useInsertionEffect: typeof React.useInsertionEffect;

package/dist/useSharedState/index.d.ts

@@ -0,0 +1 @@
+export { useSharedState } from './useSharedState';

package/dist/useSharedState/useSharedState.d.ts

@@ -0,0 +1,24 @@
+import { type DeepReadonly, type JSONCompatible } from '../utils';
+/**
+ * Custom React hook for sharing state between unrelated components.
+ *
+ * @param {T} defaultState - The default state object
+ * @param {() => T} [_getInitial] - Optional function to get initial state
+ * @returns {Object} Object containing `state`, `getState`, and `setState` functions
+ *
+ * * Example:
+ * ```ts
+ * export const form = { name: '', age: 0 };
+ * const { state, setState } = useSharedState(form);
+ *
+ * setState({ name: 'test' });
+ * // OR
+ * setState(curr => ({ ...curr, name: 'test' }))
+ *  ```
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/useSharedState}
+ */
+export declare function useSharedState<T extends JSONCompatible>(defaultState: T, _getInitial?: () => T): {
+    state: T;
+    getState: () => T;
+    setState: (value: (Partial<T> | Partial<DeepReadonly<T>>) | ((currState: T) => T)) => void;
+};

package/dist/useSharedState/useSharedState.mjs

@@ -1 +1 @@
-import t from"react";import{stateMap as r,subscribers as e}from"../subscribers.mjs";import{useInsertionEffect as n}from"../useInsertionEffect.mjs";import{isSSR as c,isEqual as o}from"../utils.mjs";function u(t){let r,e=t[0],n=1;for(;n<t.length;){const c=t[n],o=t[n+1];if(n+=2,("optionalAccess"===c||"optionalCall"===c)&&null==e)return;"access"===c||"optionalAccess"===c?(r=e,e=o(e)):"call"!==c&&"optionalCall"!==c||(e=o(((...t)=>e.call(r,...t))),r=void 0)}return e}function s(s,l){const a=t.useRef(s),[i,f]=t.useState((()=>{if(c())return l?u([l,"optionalCall",t=>t()]):a.current;const t=r.get(a.current);if(t)return t;{const t=u([l,"optionalCall",t=>t()])||a.current;return r.set(a.current,t),t}})),p=t.useCallback((t=>{const n=r.get(a.current),c="function"==typeof t?t(n):{...n,...t};o(n,c)||(r.set(a.current,c),e.get(a.current).forEach((t=>{t()})))}),[]);n((()=>{const t=e.add(a.current,(()=>{f(r.get(a.current)||a.current)}));return()=>{t()}}),[]);return{state:i,getState:t.useCallback((()=>r.get(a.current)||a.current),[]),setState:p}}export{s as useSharedState};
+import t from"react";import{stateMap as r,subscribers as e}from"../subscribers.mjs";import{useInsertionEffect as n}from"../useInsertionEffect.mjs";import{isSSR as u,isEqual as c}from"../utils.mjs";function s(s,o){const f=t.useRef(s),[a,i]=t.useState((()=>{if(u())return o?o?.():f.current;const t=r.get(f.current);if(t)return t;{const t=o?.()||f.current;return r.set(f.current,t),t}})),m=t.useCallback((t=>{const n=r.get(f.current),u="function"==typeof t?t(n):{...n,...t};c(n,u)||(r.set(f.current,u),e.get(f.current).forEach((t=>{t()})))}),[]);n((()=>{const t=e.add(f.current,(()=>{i(r.get(f.current)||f.current)}));return()=>{t()}}),[]);return{state:a,getState:t.useCallback((()=>r.get(f.current)||f.current),[]),setState:m}}export{s as useSharedState};

package/dist/useUrlEncode/index.d.ts

@@ -0,0 +1 @@
+export { useUrlEncode } from './useUrlEncode';

package/dist/useUrlEncode/useUrlEncode.d.ts

@@ -0,0 +1,45 @@
+import { type JSONCompatible } 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] 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');
+ *  ```
+ *
+ * * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/useUrlEncode#api}
+ */
+export declare function useUrlEncode<T extends JSONCompatible>(stateShape: T): {
+    /**
+Parse URL query string to state object
+* * Example:
+ * ```ts
+const state = parse("name='Tom'");
+console.log(state); // Output: { name: 'Tom' }
+ *  ```
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/useUrlEncode#parse}
+ */
+    parse: (strOrSearchParams: string | URLSearchParams) => typeof stateShape;
+    /**
+Converts a state object to a URL query string.
+* * Example:
+* ```ts
+const queryString = stringify({ name: 'John' }, 'someExistingParamToKeep=123');
+console.log(queryString); // Output: name='John'&someExistingParamToKeep=123
+*  ```
+*
+*  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/useUrlEncode#stringify}
+*/
+    stringify: (state: typeof stateShape, paramsToKeep?: string | URLSearchParams) => string;
+};

package/dist/useUrlStateBase/index.d.ts

@@ -0,0 +1 @@
+export { useUrlStateBase } from './useUrlStateBase';

package/dist/useUrlStateBase/useUrlStateBase.d.ts

@@ -0,0 +1,42 @@
+import { useUrlEncode } from '../useUrlEncode';
+import { type DeepReadonly, type JSONCompatible } from '../utils';
+/**
+ * A custom React hook to create custom hooks.
+ *
+ * @template T extends JSONCompatible
+ * @param {T} defaultState - An object representing the default state values.
+ * @param {Router} router - Router object with [push] and [replace] methods.
+ * @param {Function} [getInitialState] - Optional function to get the initial state, passes `parse`, and `filterUnknownParams` helpers
+ * @returns {Object} An object containing `state`, `getState`, `updateState`, and `updateUrl` properties.
+ *
+ *
+ * * Example:
+ * ```ts
+ * export const form = { name: '' };
+ * const router = { push: () => {}, replace: () => {} };
+ * const { state, updateState, updateUrl } = useUrlStateBase(form, router, ({ parse, filterClientSP }) =>
+ *   isSSR() ? getServerState() : getClientState()
+ * );
+ *  ```
+ *
+ * * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/integrations/packages/urlstate/useUrlStateBase#api}
+ */
+export declare function useUrlStateBase<T extends JSONCompatible>(defaultState: T, router: Router, getInitialState?: ({ parse, }: {
+    parse: ReturnType<typeof useUrlEncode<T>>['parse'];
+}) => T): {
+    updateState: (value: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T)) => void;
+    updateUrl: (value?: Parameters<(value: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T)) => void>[0], options?: Options) => void;
+    state: DeepReadonly<T>;
+    getState: () => T;
+};
+interface OptionsObject {
+    [key: string]: unknown;
+}
+export interface Options extends OptionsObject {
+    replace?: boolean;
+}
+type Router = {
+    push: (href: string, opts: object) => void;
+    replace: (href: string, opts: object) => void;
+};
+export {};

package/dist/useUrlStateBase/useUrlStateBase.mjs

@@ -1 +1 @@
-import t from"react";import{useInsertionEffect as e}from"../useInsertionEffect.mjs";import{useSharedState as o}from"../useSharedState/useSharedState.mjs";import{useUrlEncode as n}from"../useUrlEncode/useUrlEncode.mjs";import{filterUnknownParamsClient as a}from"../utils.mjs";function s(s,c,i){const{parse:l,stringify:p}=n(s),{state:u,getState:m,setState:d}=o(s,(()=>function(t){let e,o=t[0],n=1;for(;n<t.length;){const a=t[n],s=t[n+1];if(n+=2,("optionalAccess"===a||"optionalCall"===a)&&null==o)return;"access"===a||"optionalAccess"===a?(e=o,o=s(o)):"call"!==a&&"optionalCall"!==a||(o=s(((...t)=>o.call(e,...t))),e=void 0)}return o}([i,"optionalCall",t=>t({parse:l})])||s));e((()=>{const t=()=>{const t=l(a(s));d(t)};return window.addEventListener(r,t),()=>{window.removeEventListener(r,t)}}),[d]);const w=t.useCallback(((t,e)=>{const o=`${window.location.pathname}${window.location.search}${window.location.hash}`,n="function"==typeof t,a=function(t){const e=Object.keys(t),o=window.location.search,n=new URLSearchParams(o),a=new URLSearchParams;return n.forEach(((t,o)=>!e.includes(o)&&a.set(o,t))),a}(s),r=n?t(m()):t?{...m(),...t}:m(),i=p(r,a);d(r);const l=`${window.location.pathname}${i.length?"?":""}${i}${window.location.hash}`;if(o!==l){const{replace:t,...o}=e||{};c[t?"replace":"push"](l,{...o})}}),[c,p,m]);return{updateState:d,updateUrl:w,state:u,getState:m}}const r="popstate";export{s as useUrlStateBase};
+import t from"react";import{useInsertionEffect as e}from"../useInsertionEffect.mjs";import{useSharedState as o}from"../useSharedState/useSharedState.mjs";import{useUrlEncode as n}from"../useUrlEncode/useUrlEncode.mjs";import{filterUnknownParamsClient as a}from"../utils.mjs";function s(s,c,i){const{parse:m,stringify:p}=n(s),{state:w,getState:d,setState:u}=o(s,(()=>i?.({parse:m})||s));e((()=>{const t=()=>{const t=m(a(s));u(t)};return window.addEventListener(r,t),()=>{window.removeEventListener(r,t)}}),[u]);const l=t.useCallback(((t,e)=>{const o=`${window.location.pathname}${window.location.search}${window.location.hash}`,n="function"==typeof t,a=function(t){const e=Object.keys(t),o=window.location.search,n=new URLSearchParams(o),a=new URLSearchParams;return n.forEach(((t,o)=>!e.includes(o)&&a.set(o,t))),a}(s),r=n?t(d()):t?{...d(),...t}:d(),i=p(r,a);u(r);const m=`${window.location.pathname}${i.length?"?":""}${i}${window.location.hash}`;if(o!==m){const{replace:t,...o}=e||{};c[t?"replace":"push"](m,{...o})}}),[c,p,d]);return{updateState:u,updateUrl:l,state:w,getState:d}}const r="popstate";export{s as useUrlStateBase};

package/dist/utils.d.ts

@@ -0,0 +1,28 @@
+export type Type = 'string' | 'date' | 'boolean' | 'number' | 'bigint' | 'undefined' | 'object' | 'null' | 'function' | 'symbol' | 'array';
+/**
+ * A better replacement for `typeof`
+ *
+ * @param {unknown} val value to detect type
+ * @returns {Type} Type of val - `string`, `date`, `boolean`,
+ * `number`, `bigint`, `undefined`, `null`, `object`,
+ * `function`, `symbol`, `array`
+ */
+export declare const typeOf: (val: unknown) => Type;
+export declare const isSSR: () => boolean;
+export type JSON = null | boolean | Date | number | string | {
+    [prop: string]: JSON | JSON[];
+};
+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 ? {
+    readonly [K in keyof T]: DeepReadonly<T[K]>;
+} : T;
+export declare const getParams: (strOrSearchParams?: string | URLSearchParams) => URLSearchParams;
+export type UnknownObj = object | {
+    [key: string]: unknown;
+};
+export declare const isEqual: (val1: unknown, val2: unknown) => boolean;
+export declare function filterUnknownParamsClient<T extends object>(shape: T): string;
+export declare function filterUnknownParams<T extends object>(shape: T, searchParams?: object): T;
+export declare function assignValue<T extends object>(shape: T, curr: Partial<T>, newVal: Partial<T>): T;

package/dist/utils.mjs

@@ -1 +1 @@
-function t(t){let n,e=t[0],o=1;for(;o<t.length;){const c=t[o],r=t[o+1];if(o+=2,("optionalAccess"===c||"optionalCall"===c)&&null==e)return;"access"===c||"optionalAccess"===c?(n=e,e=r(e)):"call"!==c&&"optionalCall"!==c||(e=r(((...t)=>e.call(n,...t))),n=void 0)}return e}const n=t=>{const n=typeof t,e=null===t,o=Array.isArray(t),c=t instanceof Date;return(e?"null":c&&"date")||o&&"array"||!e&&!c&&!o&&"object"===n&&"object"||n},e=()=>"undefined"==typeof window,o=n=>new URLSearchParams("string"==typeof n?c(n):t([n,"optionalAccess",t=>t.toString,"optionalCall",t=>t()])||""),c=n=>t([n,"access",t=>t.split,"call",t=>t("?"),"optionalAccess",t=>t[1]])||n||"",r=(t,n)=>JSON.stringify(t)===JSON.stringify(n);function a(t){const n=new URLSearchParams;return i(t,[...new URLSearchParams(window.location.search).entries()]).forEach((([t,e])=>n.set(t,e))),n.toString()}function s(t,n){return Object.fromEntries(i(t,Object.entries(n||{})))}function i(t,n){const e=Object.keys(t);return n.filter((([t])=>e.includes(t))).map((([t,n])=>[t.replaceAll("+"," "),n]))}function l(t,n,e){const o=Object.assign({},t,n);return Object.entries(t).forEach((([n])=>{const c=n,r=void 0!==e[c];o[c]=r?e[c]:t[c]})),o}export{l as assignValue,s as filterUnknownParams,a as filterUnknownParamsClient,o as getParams,r as isEqual,e as isSSR,n as typeOf};
+const t=t=>{const n=typeof t,e=null===t,r=Array.isArray(t),c=t instanceof Date;return(e?"null":c&&"date")||r&&"array"||!e&&!c&&!r&&"object"===n&&"object"||n},n=()=>"undefined"==typeof window,e=t=>new URLSearchParams("string"==typeof t?r(t):t?.toString?.()||""),r=t=>t.split("?")?.[1]||t||"",c=(t,n)=>JSON.stringify(t)===JSON.stringify(n);function o(t){const n=new URLSearchParams;return s(t,[...new URLSearchParams(window.location.search).entries()]).forEach((([t,e])=>n.set(t,e))),n.toString()}function i(t,n){return Object.fromEntries(s(t,Object.entries(n||{})))}function s(t,n){const e=Object.keys(t);return n.filter((([t])=>e.includes(t))).map((([t,n])=>[t.replaceAll("+"," "),n]))}function a(t,n,e){const r=Object.assign({},t,n);return Object.entries(t).forEach((([n])=>{const c=n,o=void 0!==e[c];r[c]=o?e[c]:t[c]})),r}export{a as assignValue,i as filterUnknownParams,o as filterUnknownParamsClient,e as getParams,c as isEqual,n as isSSR,t as typeOf};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "state-in-url",
-  "version": "3.0.0",
-  "description": "Library to store complex state in browser URL, includes hook for NextJS, hook for pure React, and low level helpers. https://state-in-url-asmyshlyaev177.vercel.app/",
-  "homepage": "https://github.com/asmyshlyaev177/state-in-url",
+  "version": "3.0.1",
+  "description": "Library to store complex state in browser URL, includes hook for NextJS, hook for pure React, and low level helpers.",
+  "homepage": "https://state-in-url-asmyshlyaev177.vercel.app",
   "keywords": [
     "front-end",
     "state-management",
@@ -348,8 +348,8 @@
     "@commitlint/config-conventional": "^19.0.3",
     "@playwright/test": "^1.45.3",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-sucrase": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.1",
@@ -382,7 +382,7 @@
     "playwright": "^1.45.3",
     "prettier": "^3.2.5",
     "release-it": "^17.6.0",
-    "rollup": "^3.29.5",
+    "rollup": "^4.23.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "semantic-release": "^24.1.0",