state-in-url 4.0.5 → 4.0.6

package/README.md

@@ -20,6 +20,7 @@ English | [한국어](./README.KO.md) | [简体中文](./README.CN.md)
 [![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=master)
 [![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)
+[![Codacy Badge](https://app.codacy.com/project/badge/Coverage/73be54068b7f41b0b74a252579ac09ec)](https://app.codacy.com/gh/asmyshlyaev177/state-in-url/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_coverage)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://github.com/asmyshlyaev177/state-in-url/)
 [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)]([https://github.com/semantic-release/semantic-release](https://github.com/asmyshlyaev177/state-in-url))
 ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/state-in-url.svg)
@@ -165,7 +166,7 @@ import { userState } from './userState';
 function MyComponent() {
   // can pass `replace` arg, it's control will `setUrl` will use `rounter.push` or `router.replace`, default replace=true
   // can pass `searchParams` from server components
-  const { urlState, setUrl, setState } = useUrlState({ defaultState: userState });
+  const { urlState, setUrl, setState } = useUrlState(userState);
 
   return (
     <div>
@@ -221,7 +222,7 @@ import { form } from './form';
 
 function TagsComponent() {
   // `urlState` will infer from Form type!
-  const { urlState, setUrl } = useUrlState({ defaultState: form });
+  const { urlState, setUrl } = useUrlState(form);
 
   const onChangeTags = React.useCallback(
     (tag: (typeof tags)[number]) => {
@@ -320,7 +321,7 @@ import { useUrlState } from 'state-in-url/next';
 import { form } from './form';
 
 const Form = ({ searchParams }: { searchParams: object }) => {
-  const { urlState, setState, setUrl } = useUrlState({ defaultState: form, searchParams });
+  const { urlState, setState, setUrl } = useUrlState(form, { searchParams });
 }
 ```
 
@@ -426,7 +427,7 @@ import { useUrlState } from 'state-in-url/react-router';
 import { form } from './form';
 
 function TagsComponent() {
-  const { urlState, setUrl, setState } = useUrlState({ defaultState: form });
+  const { urlState, setUrl, setState } = useUrlState(form);
 
   const onChangeTags = React.useCallback(
     (tag: (typeof tags)[number]) => {
@@ -540,7 +541,7 @@ const userState = {
 };
 
 export const useUserState = () => {
-  const { urlState, setUrl } = useUrlState({ defaultState: userState });
+  const { urlState, setUrl } = useUrlState(userState);
 
   return { userState: urlState, setUserState: setUrl };;
 }
@@ -562,8 +563,10 @@ See [Contributing doc](CONTRIBUTING.md)
 ## Roadmap
 
 - [x] hook for `Next.js`
-- [x] hook for 'react-router`
-- [ ] hook for 'remix`
+- [x] hook for `react-router`
+- [ ] hook for `remix`
+- [ ] hook for `svelte`
+- [ ] hook for `astro`
 - [ ] hook for store state in hash ?
 
 ## Contact & Support

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

@@ -1,18 +1,32 @@
-import { useRouter } from "next/navigation";
 import { type JSONCompatible } from "../../utils";
+/**
+ * @deprecated .
+ * * use format `useUrlState(defaultState, { ...otherParams })`
+ *
+ * .
+ */
+export declare function useUrlState<T extends JSONCompatible>({ defaultState: T, searchParams, replace, scroll, useHistory, }: OldParams<T>): {
+    state: T;
+    urlState: T;
+    updateState: (value: Partial<T> | ((currState: T) => T)) => void;
+    setState: (value: Partial<T> | ((currState: T) => T)) => void;
+    updateUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
+    setUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
+};
 /**
  * NextJS hook. Returns `urlState`, `setState`, and `setUrl` functions
  *
  * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
- * @param {?SearchParams<T>} [searchParams] searchParams from Next server component
- * @param {boolean} [useHistory] use window.history for navigation, no _rsc requests https://github.com/vercel/next.js/discussions/59167
+ * @param {Object} params - Object with other parameters
+ * @param {?SearchParams<T>} params.searchParams searchParams from Next server component
+ * @param {boolean} params.useHistory use window.history for navigation, default true, no _rsc requests https://github.com/vercel/next.js/discussions/59167
  *
  * * Example:
  * ```ts
  * export const form = { name: '', age: 0 };
- * const { urlState, setState, setUrl } = useUrlState({ defaultState: form });
- * // for nextjs seerver components
- * // const { urlState, setState, setUrl } = useUrlState({ defaultState: form, searchParams });
+ * const { urlState, setState, setUrl } = useUrlState(form);
+ * // for nextjs server components
+ * const { urlState, setState, setUrl } = useUrlState(form, { searchParams });
  *
  * setState({ name: 'test' });
  * // by default it's uses router.push with scroll: false
@@ -23,56 +37,22 @@ import { type JSONCompatible } from "../../utils";
  *
  *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/next/useUrlState#api}
  */
-export declare function useUrlState<T extends JSONCompatible>({ defaultState, searchParams, useHistory, ...opts }: {
+export declare function useUrlState<T extends JSONCompatible>(defaultState: T, params?: Params): {
+    urlState: T;
+    setState: (value: Partial<T> | ((currState: T) => T)) => void;
+    setUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
+};
+interface OldParams<T> {
     defaultState: T;
     searchParams?: object;
     replace?: boolean;
     scroll?: boolean;
     useHistory?: boolean;
-}): {
-    /**
-     * * Example:
-     * ```ts
-     * setState({ name: 'test' });
-     * // or
-     * setState(curr => ({ ...curr, name: 'test' }) );
-     *  ```
-     *
-     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/next/useUrlState#updatestate}
-     */
-    setState: (value: Partial<T> | ((currState: T) => T)) => void;
-    /**
-     * @deprecated use `setState`
-     */
-    updateState: (value: Partial<T> | ((currState: T) => T)) => void;
-    /**
-     * * Example:
-     * ```ts
-     * setUrl({ name: 'test' });
-     * // or
-     * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true, scroll: false  } );
-     *  ```
-     *
-     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/next/useUrlState#updateurl}
-     */
-    setUrl: (value?: Parameters<(value?: Partial<T> | ((currState: T) => T) | undefined, options?: import("../../useUrlStateBase/useUrlStateBase").Options) => void>[0], options?: Options) => void;
-    /**
-     * @deprecated use `setUrl`
-     */
-    updateUrl: (value?: Parameters<(value?: Partial<T> | ((currState: T) => T) | undefined, options?: import("../../useUrlStateBase/useUrlStateBase").Options) => void>[0], options?: Options) => void;
-    /**
-     * State object. Don't mutate directly, use `setState` or `setUrl`
-     */
-    urlState: T;
-    /**
-     * @deprecated use `urlState`
-     */
-    state: 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;
 }
+type Params = {
+    searchParams?: object;
+    replace?: boolean;
+    scroll?: boolean;
+    useHistory?: boolean;
+};
 export {};

package/dist/next/useUrlState/useUrlState.mjs

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

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

@@ -1,15 +1,30 @@
 import { type NavigateOptions } from "react-router-dom";
 import { type JSONCompatible } from "../../utils";
+/**
+ * @deprecated .
+ * * use format `useUrlState(defaultState, { ...otherParams })`
+ *
+ * .
+ */
+export declare function useUrlState<T extends JSONCompatible>({ defaultState: T, searchParams, replace, useHistory, }: OldParams<T>): {
+    state: T;
+    urlState: T;
+    updateState: (value: Partial<T> | ((currState: T) => T)) => void;
+    setState: (value: Partial<T> | ((currState: T) => T)) => void;
+    updateUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
+    setUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
+};
 /**
  * React-router hook. Returns `urlState`, `setState`, and `setUrl` functions
  *
  * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
- * @param {NavigateOptions} [NavigateOptions] See type from `react-router-dom`
- * @param {boolean} [useHistory] use window.history for navigation
+ * @param {Object} params - Object with other parameters
+ * @param {NavigateOptions} params.NavigateOptions See type from `react-router-dom`
+ * @param {boolean} params.useHistory use window.history for navigation
  * * Example:
  * ```ts
  * export const form = { name: '', age: 0 };
- * const { urlState, setState, setUrl } = useUrlState({ defaultState: form, replace: false, preventScrollReset: false });
+ * const { urlState, setState, setUrl } = useUrlState(form, { replace: false, preventScrollReset: false });
  *
  * setState({ name: 'test' });
  * setUrl({ name: 'test' }, { replace: true });
@@ -19,51 +34,20 @@ import { type JSONCompatible } from "../../utils";
  *
  *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#api}
  */
-export declare function useUrlState<T extends JSONCompatible>({ defaultState, useHistory, ...initOpts }: {
-    defaultState: T;
-    useHistory?: boolean;
-} & NavigateOptions): {
-    /**
-     * * Example:
-     * ```ts
-     * setState({ name: 'test' });
-     * // or
-     * setState(curr => ({ ...curr, name: 'test' }) );
-     * // can pass optional React-Router `NavigateOptions`
-     * setState(curr => ({ ...curr, name: 'test', preventScrollReset: false }) );
-     *  ```
-     *
-     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#updatestate}
-     */
-    setState: (value: Partial<T> | ((currState: T) => T)) => void;
-    /**
-     * @deprecated use `setState`
-     */
-    updateState: (value: Partial<T> | ((currState: T) => T)) => void;
-    /**
-     * * Example:
-     * ```ts
-     * setUrl({ name: 'test' });
-     * // or
-     * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true } );
-     * // can pass optional React-Router `NavigateOptions`
-     * setState(curr => ({ ...curr, name: 'test', preventScrollReset: false }) );
-     *  ```
-     *
-     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState#updateurl}
-     */
-    setUrl: (value?: Parameters<(value?: Partial<T> | ((currState: T) => T) | undefined, options?: import("../../useUrlStateBase/useUrlStateBase").Options) => void>[0], options?: NavigateOptions) => void;
-    /**
-     * @deprecated use `setUrl`
-     */
-    updateUrl: (value?: Parameters<(value?: Partial<T> | ((currState: T) => T) | undefined, options?: import("../../useUrlStateBase/useUrlStateBase").Options) => void>[0], options?: NavigateOptions) => void;
-    /**
-     * State object. Don't mutate directly, use `setState` or `setUrl`
-     */
+export declare function useUrlState<T extends JSONCompatible>(defaultState: T, params?: Params): {
     urlState: T;
-    /**
-     * @deprecated use `urlState`
-     */
-    state: T;
-    getState: () => T;
+    setState: (value: Partial<T> | ((currState: T) => T)) => void;
+    setUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
 };
+type OldParams<T> = {
+    defaultState: T;
+    useHistory?: boolean;
+    searchParams?: object;
+    replace?: boolean;
+} & NavigateOptions;
+interface Params extends NavigateOptions {
+    useHistory?: boolean;
+    searchParams?: object;
+    replace?: boolean;
+}
+export {};

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{routerHistory as o,filterUnknownParamsClient as u,assignValue as m,filterUnknownParams as p}from"../../utils.mjs";function l({defaultState:l,useHistory:S,...f}){const i=e(),n=t.useMemo((()=>S?o:{replace:(t,e)=>i(t,{...c,...f,...e}),push:(t,e)=>i(t,{...c,...f,...e})}),[i,f]),{state:d,updateState:j,updateUrl:U,getState:b}=s(l,n,(({parse:t})=>t(u(l)))),g=t.useCallback(((t,e)=>U(t,{...c,...f,...e})),[f]),[B]=r();return t.useEffect((()=>{j(m(l,d,p(l,a(Object.fromEntries([...B.entries()]),l))))}),[B]),{setState:j,updateState:j,setUrl:g,updateUrl:g,urlState:d,state:d,getState:b}}const c={replace:!0,preventScrollReset:!0};export{l as useUrlState};
+import e from"react";import{useNavigate as t,useSearchParams as r}from"react-router-dom";import{parseSPObj as a}from"../../parseSPObj.mjs";import{useUrlStateBase as s}from"../../useUrlStateBase/useUrlStateBase.mjs";import{routerHistory as l,filterUnknownParamsClient as o,assignValue as p,filterUnknownParams as u}from"../../utils.mjs";function c(c,m){const n="defaultState"in c?c.defaultState:c,i="defaultState"in c?c.useHistory:m?.useHistory,f="defaultState"in c?{replace:c.replace,preventScrollReset:c.preventScrollReset}:{replace:m?.replace,preventScrollReset:m?.preventScrollReset},d=t(),j=e.useMemo((()=>i?l:{replace:(e,t)=>d(e,{...S,...f,...t}),push:(e,t)=>d(e,{...S,...f,...t})}),[d,f]),{state:v,updateState:R,updateUrl:U,getState:b}=s(n,j,(({parse:e})=>e(o(n)))),g=e.useCallback(((e,t)=>U(e,{...S,...f,...t})),[f]),[y]=r();return e.useEffect((()=>{R(p(n,u(n,a(Object.fromEntries([...y.entries()]),n))))}),[y]),{setState:R,updateState:R,setUrl:g,updateUrl:g,urlState:v,state:v,getState:b}}const S={replace:!0,preventScrollReset:!0};export{c as useUrlState};

package/dist/utils.d.ts

@@ -22,7 +22,7 @@ export type UnknownObj = object | {
 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;
+export declare function assignValue<T extends object>(shape: T, newVal: Partial<T>): T;
 export interface Router {
     push: (href: string, opts: object) => void;
     replace: (href: string, opts: object) => void;

package/dist/utils.mjs

@@ -1 +1 @@
-const t=t=>{const n=typeof t,e=null===t,r=Array.isArray(t),o=t instanceof Date;return(e?"null":o&&"date")||r&&"array"||!e&&!o&&!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||"",o=(t,n)=>JSON.stringify(t)===JSON.stringify(n);function i(t){const n=new URLSearchParams;return s(t,[...new URLSearchParams(window.location.search).entries()]).forEach((([t,e])=>n.set(t,e))),n.toString()}function c(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 o=n,i=void 0!==e[o];r[o]=i?e[o]:t[o]})),r}const l={push:t=>{window&&window.history.pushState(null,"",t)},replace:t=>{window&&window.history.replaceState(null,"",t)}};export{a as assignValue,c as filterUnknownParams,i as filterUnknownParamsClient,e as getParams,o as isEqual,n as isSSR,l as routerHistory,t as typeOf};
+const t=t=>{const n=typeof t,e=null===t,r=Array.isArray(t),o=t instanceof Date;return(e?"null":o&&"date")||r&&"array"||!e&&!o&&!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||"",o=(t,n)=>JSON.stringify(t)===JSON.stringify(n);function i(t){const n=new URLSearchParams;return s(t,[...new URLSearchParams(window.location.search).entries()]).forEach((([t,e])=>n.set(t,e))),n.toString()}function c(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){const e=Object.assign({},t);return Object.entries(t).forEach((([r])=>{const o=r,i=void 0!==n[o];e[o]=i?n[o]:t[o]})),e}const l={push:t=>{window&&window.history.pushState(null,"",t)},replace:t=>{window&&window.history.replaceState(null,"",t)}};export{a as assignValue,c as filterUnknownParams,i as filterUnknownParamsClient,e as getParams,o as isEqual,n as isSSR,l as routerHistory,t as typeOf};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Easily share complex state objects between unrelated React components, preserve types and structure, with TS validation. Deep links and url state synchronization wthout any hasssle or boilerplate.",
   "homepage": "https://state-in-url.dev",
   "repository": {