state-in-url 5.0.0 → 5.2.0

package/README.md

@@ -99,25 +99,46 @@ This library is a good alternative for NUQS.
 
 ## Table of content
 
-- [Installation](#installation)
-- [useUrlState hook](#useurlstate)
-- - [Next.js](#useurlstate-hook-for-nextjs)
-- - [React-Router](#useurlstate-hook-for-react-router)
-- [Other helpers](#other-hooks-and-helpers)
-- - [`useUrlStateBase` for other routers](#useurlstatebase-hook-for-others-routers)
-- - [`useSharedState` hook for React.js/Next.js](#usesharedstate-hook-for-reactjs)
-- - [`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)
-- [Best practices](#best-practices)
-- - [Gotchas](#gotchas)
-- [Other](#other)
-- - [Roadmap](#roadmap)
-- - [Contributing](#contribute-andor-run-locally)
-- - [Contact & Support](#contact--support)
-- - [Changelog](#changelog)
-- - [License](#license)
-- - [Inspiration](#inspiration)
+- [State in url](#state-in-url)
+- [Demo](#demo)
+  - [Why use `state-in-url`?](#why-use-state-in-url)
+    - [Use cases](#use-cases)
+    - [Features](#features)
+  - [Table of content](#table-of-content)
+  - [installation](#installation)
+    - [1. Install package](#1-install-package)
+    - [2. Edit tsconfig.json](#2-edit-tsconfigjson)
+  - [useUrlState](#useurlstate)
+    - [useUrlState hook for Next.js](#useurlstate-hook-for-nextjs)
+      - [Usage examples](#usage-examples)
+        - [Basic](#basic)
+        - [With server side rendering](#with-server-side-rendering)
+        - [Using hook in `layout` component](#using-hook-in-layout-component)
+        - [With arbitrary state shape (not recommended)](#with-arbitrary-state-shape-not-recommended)
+    - [useUrlState hook for Remix.js](#useurlstate-hook-for-remixjs)
+      - [Example](#example)
+    - [useUrlState hook for React-Router](#useurlstate-hook-for-react-router)
+      - [Example](#example-1)
+  - [Recipes](#recipes)
+        - [Custom hook to work with slice of state conveniently](#custom-hook-to-work-with-slice-of-state-conveniently)
+        - [With complex state shape](#with-complex-state-shape)
+        - [Update state only and sync to URL manually](#update-state-only-and-sync-to-url-manually)
+  - [Other hooks and helpers](#other-hooks-and-helpers)
+    - [`useUrlStateBase` hook for others routers](#useurlstatebase-hook-for-others-routers)
+    - [`useSharedState` hook for React.js](#usesharedstate-hook-for-reactjs)
+    - [`useUrlEncode` hook for React.js](#useurlencode-hook-for-reactjs)
+    - [`encodeState` and `decodeState` helpers](#encodestate-and-decodestate-helpers)
+    - [`encode` and `decode` helpers](#encode-and-decode-helpers)
+  - [Best Practices](#best-practices)
+  - [Gotchas](#gotchas)
+  - [Other](#other)
+    - [Contribute and/or run locally](#contribute-andor-run-locally)
+  - [Roadmap](#roadmap)
+  - [Contact \& Support](#contact--support)
+  - [Changelog](#changelog)
+  - [Mentions](#mentions)
+  - [License](#license)
+  - [Inspiration](#inspiration)
 
 ## installation
 
@@ -174,7 +195,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, pass `useHistory: false` if you need to fetch smt in the server component
-  const { urlState, setUrl, setState, reset } = useUrlState(userState);
+  const { urlState, setUrl, setState } = useUrlState(userState);
 
   return (
     <div>
@@ -193,7 +214,7 @@ function MyComponent() {
         onBlur={() => setUrl()}
       />
 
-      <button onClick={reset}>
+      <button onClick={() => setUrl((_, initial) => initial)}>
         Reset
       </button>
 
@@ -202,60 +223,108 @@ function MyComponent() {
 }
 ```
 
-##### Custom hook to work with slice of state conveniently
+##### With server side rendering
+
 <details>
   <Summary>Example</Summary>
 
-  ```typescript
-'use client';
+```typescript
+export default async function Home({ searchParams }: { searchParams: object }) {
+  return (
+    <Form searchParams={searchParams} />
+  )
+}
 
+// Form.tsx
+'use client'
 import React from 'react';
 import { useUrlState } from 'state-in-url/next';
+import { form } from './form';
 
-const form: Form = {
-    name: '',
-    age: undefined,
-    agree_to_terms: false,
-    tags: [],
-};
+const Form = ({ searchParams }: { searchParams: object }) => {
+  const { urlState, setState, setUrl } = useUrlState(form, { searchParams });
+}
+```
 
-type Form = {
-    name: string;
-    age?: number;
-    agree_to_terms: boolean;
-    tags: {id: string; value: {text: string; time: Date } }[];
-};
+</details>
 
-export const useFormState = ({ searchParams }: { searchParams?: object }) => {
-    const { urlState, setUrl: setUrlBase, reset } = useUrlState(form, {
-      searchParams,
-    });
+##### Using hook in `layout` component
 
-    // first navigation will push new history entry
-    // all following will just replace that entry
-    // this way will have history with only 2 entries - ['/url', '/url?key=param']
+<details>
+  <Summary>Example</Summary>
+  That a tricky part, since nextjs with app router doesn't allow to access searchParams from server side. There is workaround with using middleware, but it isn't pretty and can stop working after nextjs update.
 
-    const replace = React.useRef(false);
-    const setUrl = React.useCallback((
-        state: Parameters<typeof setUrlBase>[0],
-        opts?: Parameters<typeof setUrlBase>[1]
-      ) => {
-        setUrlBase(state, { replace: replace.current, ...opts });
-        replace.current = true;
-    }, [setUrlBase]);
+```typescript
+// add to appropriate `layout.tsc`
+export const runtime = 'edge';
 
-    return { urlState, setUrl, resetUrl: reset };
-};
-  ```
-</details>
+// middleware.ts
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
 
-<hr />
+export function middleware(request: NextRequest) {
+  const url = request.url?.includes('_next') ? null : request.url;
+  const sp = url?.split?.('?')?.[1] || '';
 
-##### With complex state shape
+  const response = NextResponse.next();
+
+  if (url !== null) {
+    response.headers.set('searchParams', sp);
+  }
+
+  return response;
+}
+
+// Target layout component
+import { headers } from 'next/headers';
+import { decodeState } from 'state-in-url/encodeState';
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const sp = headers().get('searchParams') || '';
+
+  return (
+    <div>
+      <Comp1 searchParams={decodeState(sp, stateShape)} />
+      {children}
+    </div>
+  );
+}
+
+
+```
+
+</details>
+
+##### With arbitrary state shape (not recommended)
 
 <details>
   <Summary>Example</Summary>
 
+```typescript
+'use client'
+import { useUrlState } from 'state-in-url/next';
+
+const someObj = {};
+
+function SettingsComponent() {
+  const { urlState, setUrl, setState } = useUrlState<object>(someObj);
+}
+```
+
+</details>
+
+### useUrlState hook for Remix.js
+
+API is same as for Next.js version, except can pass options from [NavigateOptions](https://github.com/remix-run/react-router/blob/bc693ed9f39170bda13b9e1b282fb8e9d5925f66/packages/react-router/lib/context.ts#L99) type.
+
+[API Docs](packages/urlstate/remix/useUrlState)
+
+#### Example
+
 ```typescript
 export const form: Form = {
   name: '',
@@ -270,17 +339,16 @@ type Form = {
   agree_to_terms: boolean;
   tags: { id: string; value: { text: string; time: Date } }[];
 };
+
 ```
 
 ```typescript
-'use client'
-import { useUrlState } from 'state-in-url/next';
+import { useUrlState } from 'state-in-url/remix';
 
 import { form } from './form';
 
 function TagsComponent() {
-  // `urlState` will infer from Form type!
-  const { urlState, setUrl } = useUrlState(form);
+  const { urlState, setUrl, setState } = useUrlState(form);
 
   const onChangeTags = React.useCallback(
     (tag: (typeof tags)[number]) => {
@@ -308,6 +376,12 @@ function TagsComponent() {
           ))}
         </div>
       </Field>
+
+      <input value={urlState.name}
+        onChange={(ev) => { setState(curr => ({ ...curr, name: ev.target.value })) }}
+        // Can update state immediately but sync change to url as needed
+        onBlur={() => setUrl()}
+      />
     </div>
   );
 }
@@ -328,139 +402,149 @@ const tags = [
 ];
 ```
 
-[Demo page example code](https://github.com/asmyshlyaev177/state-in-url/blob/master/packages/example-nextjs14/src/app/Form.tsx)
-</details>
-
-##### Update state only and sync to URL manually
-
-<details>
-  <Summary>Example</Summary>
-
-  ```typescript
+[Example code](packages/example-remix2/app/routes/Form-for-test.tsx)
 
-  const timer = React.useRef(0 as unknown as NodeJS.Timeout);
-  React.useEffect(() => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => {
-      // will compare state by content not by reference and fire update only for new values
-      setUrl(urlState);
-    }, 500);
-
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, [urlState, setUrl]);
-```
-
-Syncing state `onBlur` will be more aligned with real world usage.
-
-```typescript
-<input onBlur={() => updateUrl()} .../>
-```
+### useUrlState hook for React-Router
 
-</details>
+API is same as for Next.js version, except can pass options from [NavigateOptions](https://github.com/remix-run/react-router/blob/bc693ed9f39170bda13b9e1b282fb8e9d5925f66/packages/react-router/lib/context.ts#L99) type.
 
-##### With server side rendering
+[API Docs](packages/urlstate/react-router/useUrlState)
 
-<details>
-  <Summary>Example</Summary>
+#### Example
 
 ```typescript
-export default async function Home({ searchParams }: { searchParams: object }) {
-  return (
-    <Form searchParams={searchParams} />
-  )
-}
+export const form: Form = {
+  name: '',
+  age: undefined,
+  agree_to_terms: false,
+  tags: [],
+};
 
-// Form.tsx
-'use client'
-import React from 'react';
-import { useUrlState } from 'state-in-url/next';
-import { form } from './form';
+type Form = {
+  name: string;
+  age?: number;
+  agree_to_terms: boolean;
+  tags: { id: string; value: { text: string; time: Date } }[];
+};
 
-const Form = ({ searchParams }: { searchParams: object }) => {
-  const { urlState, setState, setUrl } = useUrlState(form, { searchParams });
-}
 ```
 
-</details>
-
-##### Using hook in `layout` component
-
-<details>
-  <Summary>Example</Summary>
-  That a tricky part, since nextjs with app router doesn't allow to access searchParams from server side. There is workaround with using middleware, but it isn't pretty and can stop working after nextjs update.
-
 ```typescript
-// add to appropriate `layout.tsc`
-export const runtime = 'edge';
-
-// middleware.ts
-import type { NextRequest } from 'next/server';
-import { NextResponse } from 'next/server';
-
-export function middleware(request: NextRequest) {
-  const url = request.url?.includes('_next') ? null : request.url;
-  const sp = url?.split?.('?')?.[1] || '';
-
-  const response = NextResponse.next();
-
-  if (url !== null) {
-    response.headers.set('searchParams', sp);
-  }
+import { useUrlState } from 'state-in-url/react-router';
 
-  return response;
-}
+import { form } from './form';
 
-// Target layout component
-import { headers } from 'next/headers';
-import { decodeState } from 'state-in-url/encodeState';
+function TagsComponent() {
+  const { urlState, setUrl, setState } = useUrlState(form);
 
-export default async function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const sp = headers().get('searchParams') || '';
+  const onChangeTags = React.useCallback(
+    (tag: (typeof tags)[number]) => {
+      setUrl((curr) => ({
+        ...curr,
+        tags: curr.tags.find((t) => t.id === tag.id)
+          ? curr.tags.filter((t) => t.id !== tag.id)
+          : curr.tags.concat(tag),
+      }));
+    },
+    [setUrl],
+  );
 
   return (
     <div>
-      <Comp1 searchParams={decodeState(sp, stateShape)} />
-      {children}
+      <Field text="Tags">
+        <div className="flex flex-wrap gap-2">
+          {tags.map((tag) => (
+            <Tag
+              active={!!urlState.tags.find((t) => t.id === tag.id)}
+              text={tag.value.text}
+              onClick={() => onChangeTags(tag)}
+              key={tag.id}
+            />
+          ))}
+        </div>
+      </Field>
+
+      <input value={urlState.name}
+        onChange={(ev) => { setState(curr => ({ ...curr, name: ev.target.value })) }}
+        // Can update state immediately but sync change to url as needed
+        onBlur={() => setUrl()}
+      />
     </div>
   );
 }
 
-
+const tags = [
+  {
+    id: '1',
+    value: { text: 'React.js', time: new Date('2024-07-17T04:53:17.000Z') },
+  },
+  {
+    id: '2',
+    value: { text: 'Next.js', time: new Date('2024-07-18T04:53:17.000Z') },
+  },
+  {
+    id: '3',
+    value: { text: 'TailwindCSS', time: new Date('2024-07-19T04:53:17.000Z') },
+  },
+];
 ```
 
-</details>
-
-##### With arbitrary state shape (not recommended)
+[Example code](packages/example-react-router6/src/Form-for-test.tsx)
 
+## Recipes
+##### Custom hook to work with slice of state conveniently
 <details>
   <Summary>Example</Summary>
 
-```typescript
-'use client'
+  ```typescript
+'use client';
+
+import React from 'react';
 import { useUrlState } from 'state-in-url/next';
 
-const someObj = {};
+const form: Form = {
+    name: '',
+    age: undefined,
+    agree_to_terms: false,
+    tags: [],
+};
 
-function SettingsComponent() {
-  const { urlState, setUrl, setState } = useUrlState<object>(someObj);
-}
-```
+type Form = {
+    name: string;
+    age?: number;
+    agree_to_terms: boolean;
+    tags: {id: string; value: {text: string; time: Date } }[];
+};
 
-</details>
+export const useFormState = ({ searchParams }: { searchParams?: object }) => {
+    const { urlState, setUrl: setUrlBase, reset } = useUrlState(form, {
+      searchParams,
+    });
 
-### useUrlState hook for React-Router
+    // first navigation will push new history entry
+    // all following will just replace that entry
+    // this way will have history with only 2 entries - ['/url', '/url?key=param']
 
-API is same as for Next.js version, except can pass options from [NavigateOptions](https://github.com/remix-run/react-router/blob/bc693ed9f39170bda13b9e1b282fb8e9d5925f66/packages/react-router/lib/context.ts#L99) type.
+    const replace = React.useRef(false);
+    const setUrl = React.useCallback((
+        state: Parameters<typeof setUrlBase>[0],
+        opts?: Parameters<typeof setUrlBase>[1]
+      ) => {
+        setUrlBase(state, { replace: replace.current, ...opts });
+        replace.current = true;
+    }, [setUrlBase]);
 
-[API Docs](packages/urlstate/react-router/useUrlState)
+    return { urlState, setUrl, resetUrl: reset };
+};
+  ```
+</details>
 
-#### Example
+<hr />
+
+##### With complex state shape
+
+<details>
+  <Summary>Example</Summary>
 
 ```typescript
 export const form: Form = {
@@ -476,16 +560,17 @@ type Form = {
   agree_to_terms: boolean;
   tags: { id: string; value: { text: string; time: Date } }[];
 };
-
 ```
 
 ```typescript
-import { useUrlState } from 'state-in-url/react-router';
+'use client'
+import { useUrlState } from 'state-in-url/next';
 
 import { form } from './form';
 
 function TagsComponent() {
-  const { urlState, setUrl, setState } = useUrlState(form);
+  // `urlState` will infer from Form type!
+  const { urlState, setUrl } = useUrlState(form);
 
   const onChangeTags = React.useCallback(
     (tag: (typeof tags)[number]) => {
@@ -513,12 +598,6 @@ function TagsComponent() {
           ))}
         </div>
       </Field>
-
-      <input value={urlState.name}
-        onChange={(ev) => { setState(curr => ({ ...curr, name: ev.target.value })) }}
-        // Can update state immediately but sync change to url as needed
-        onBlur={() => setUrl()}
-      />
     </div>
   );
 }
@@ -539,7 +618,37 @@ const tags = [
 ];
 ```
 
-[Example code](packages/example-react-router6/src/Form-for-test.tsx)
+[Demo page example code](https://github.com/asmyshlyaev177/state-in-url/blob/master/packages/example-nextjs14/src/app/Form.tsx)
+</details>
+
+##### Update state only and sync to URL manually
+
+<details>
+  <Summary>Example</Summary>
+
+  ```typescript
+
+  const timer = React.useRef(0 as unknown as NodeJS.Timeout);
+  React.useEffect(() => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      // will compare state by content not by reference and fire update only for new values
+      setUrl(urlState);
+    }, 500);
+
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [urlState, setUrl]);
+```
+
+Syncing state `onBlur` will be more aligned with real world usage.
+
+```typescript
+<input onBlur={() => updateUrl()} .../>
+```
+
+</details>
 
 ## Other hooks and helpers
 
@@ -640,6 +749,12 @@ See [Contributing doc](CONTRIBUTING.md)
 
 ## [Changelog](CHANGELOG.md)
 
+## Mentions
+
+ - [This Week in React 209](https://thisweekinreact.com/newsletter/209)
+ - [JavaScript Weekly](https://javascriptweekly.com/issues/741)
+ - [This Week in React 240](https://thisweekinreact.com/newsletter/240)
+
 ## License
 
 This project is licensed under the [MIT license](LICENSE).

package/dist/constants/constants.js

@@ -0,0 +1 @@
+"use strict";var e=require("../utils.js");const i={date:"\u23F2",undefined:"\u2219undefined"};const u=e.isSafari?330:70;exports.SYMBOLS=i;exports.TIMEOUT=u;

package/dist/constants/index.js

@@ -0,0 +1 @@
+"use strict";var r=require("./constants.js");exports.SYMBOLS=r.SYMBOLS;exports.TIMEOUT=r.TIMEOUT;

package/dist/encodeState/encodeState.js

@@ -0,0 +1 @@
+"use strict";var i=require("../encoder/encoder.js");var s=require("../utils.js");function d(o,t,r){const n=s.getParams(r);for(const[e,c]of Object.entries(o||{})){const a=t?.[e];if(JSON.stringify(c)!==JSON.stringify(a)){n.set(e,i.encode(c))}}return n.toString()}function u(o,t){return{...t||{},...Object.fromEntries([...s.getParams(o).entries()].map(([r,n])=>{const e=t?.[r];return[r,i.decode(n,e)??e]}))}}exports.decodeState=u;exports.encodeState=d;

package/dist/encodeState/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./encodeState.js");exports.decodeState=e.decodeState;exports.encodeState=e.encodeState;

package/dist/encoder/encoder.js

@@ -0,0 +1 @@
+"use strict";var n=require("../constants/constants.js");var o=require("../utils.js");function S(e){if(typeof e==="function"||typeof e==="symbol")return"";if(v(e)){return e}return JSON.stringify(structuredClone(e),c).replace(/'/g,"%27").replace(/"/g,"'")}function c(e,r){const i=o.typeOf(r);if(i!=="object"&&i!=="array"){return s(r)}if(i==="object"){const t=r;for(const u of Object.keys(t)){t[u]=c(e,t[u])}return t}if(i==="array"){return r.map(t=>c(e,t))}return r}const s=e=>{switch(o.typeOf(e)){case"date":return n.SYMBOLS.date+new Date(e).toISOString();case"undefined":return n.SYMBOLS.undefined;default:return e}};function p(e,r){return d(e.replace(/'/g,'"').replace(/%27/g,"'"),r)}function d(e,r){try{return JSON.parse(e,a)}catch{return r}}function a(e,r){return typeof r==="string"?f(r):r}const f=e=>{if(e===n.SYMBOLS.undefined)return void 0;if(e?.startsWith?.(n.SYMBOLS.date))return new Date(e.slice(1));return e};const O=new RegExp(`^(${n.SYMBOLS.undefined}|${n.SYMBOLS.date})`);const v=e=>O.test(String(e));exports.decode=p;exports.decodePrimitive=f;exports.encode=S;exports.encodePrimitive=s;exports.parseJSON=d;exports.reviver=a;

package/dist/encoder/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./encoder.js");exports.decode=e.decode;exports.encode=e.encode;

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./encoder/encoder.js");var r=require("./encodeState/encodeState.js");var a=require("./next/useUrlState/useUrlState.js");var u=require("./useSharedState/useSharedState.js");var S=require("./useUrlEncode/useUrlEncode.js");var d=require("./useUrlStateBase/useUrlStateBase.js");var t=require("./utils.js");exports.decode=e.decode;exports.encode=e.encode;exports.decodeState=r.decodeState;exports.encodeState=r.encodeState;exports.useUrlState=a.useUrlState;exports.useSharedState=u.useSharedState;exports.useUrlEncode=S.useUrlEncode;exports.useUrlStateBase=d.useUrlStateBase;exports.isSSR=t.isSSR;exports.typeOf=t.typeOf;

package/dist/next/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlState/useUrlState.js");exports.useUrlState=e.useUrlState;

package/dist/next/useUrlState/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlState.js");exports.useUrlState=e.useUrlState;

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

@@ -26,10 +26,11 @@ import { type JSONCompatible } from "../../utils";
  * setState({ name: 'test' });
  * setUrl({ name: 'test' }, { replace: true, scroll: true });
  * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true, scroll: true });
- * // reset state and url
+ * // RESET state and url
+ * setUrl((_curr, initialState) => initialState);
+ * // Or
  * reset();
  * reset({ replace: true });
- * // same as setState(form) with setUrl(form)
  *  ```
  *
  *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/next/useUrlState}
@@ -49,18 +50,20 @@ export declare function useUrlState<T extends JSONCompatible>(defaultState: T, p
      *
      *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/next/useUrlState#updatestate}
      */
-    setState: (value: Partial<T> | ((currState: T) => T)) => void;
+    setState: (value: Partial<T> | ((currState: T, initial: T) => T)) => void;
     /**
      * * Example:
      * ```ts
      * setUrl({ name: 'test' });
      * // or
-     * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true, scroll: false  } );
+     * setUrl((curr) => ({ ...curr, name: 'test' }), { replace: true, scroll: false  } );
+     *  * Reset
+     *  setUrl((_curr, initialState) => initialState, { replace: true, scroll: false  } );
      *  ```
      *
      *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/next/useUrlState#updateurl}
      */
-    setUrl: (value?: Partial<T> | ((currState: T) => T), options?: Options) => void;
+    setUrl: (value?: Partial<T> | ((currState: T, initialState: T) => T), options?: Options) => void;
     /**
      * * Example:
      * ```ts

package/dist/next/useUrlState/useUrlState.js

@@ -0,0 +1 @@
+"use strict";var h=require("react");var p=require("next/navigation");var S=require("../../parseSPObj.js");var k=require("../../useUrlStateBase/useUrlStateBase.js");var r=require("../../utils.js");function q(e){return e&&e.__esModule?e:{default:e}}var s=q(h);function _(e,a){const u=a?.useHistory;const l=p.useRouter();const d=s.default.useMemo(()=>({push:(...t)=>{if(u===void 0?true:!!u){r.routerHistory.push(...t)}else{l.push(...t)}},replace:(...t)=>{if(u===void 0?true:!!u){r.routerHistory.replace(...t)}else{l.replace(...t)}}}),[l]);const{state:P,updateState:o,updateUrl:n,reset:c,getState:U}=k.useUrlStateBase(e,d,({parse:t})=>{return r.isSSR?S.parseSPObj(r.filterUnknownParams(e,a?.searchParams),e):t(r.filterUnknownParamsClient(e,a?.searchParams))});const i=s.default.useMemo(()=>({...j,scroll:a?.scroll,replace:a?.replace}),[]);const m=s.default.useCallback((t,b)=>n(t,{...i,...b}),[n]);const f=p.useSearchParams();s.default.useLayoutEffect(()=>{o(r.filterUnknownParams(e,S.parseSPObj(Object.fromEntries([...f.entries()]),e)))},[f]);const v=s.default.useCallback(t=>{c({...i,...t})},[c]);return{setState:o,setUrl:m,urlState:P,reset:v,getState:U}}const j={replace:true,scroll:false};exports.useUrlState=_;

package/dist/parseSPObj.js

@@ -0,0 +1 @@
+"use strict";var c=require("./encoder/encoder.js");function s(r,e){return{...e,...o(JSON.stringify(r),e)}}function o(r,e){try{return JSON.parse(r,u)}catch{return e}}const u=(r,e)=>{const t=typeof e==="string";const n=t&&c.decode(e?.replace?.(/'/g,'"'));return r&&t?n:e};exports.parseSPObj=s;

package/dist/react-router/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlState/useUrlState.js");exports.useUrlState=e.useUrlState;

package/dist/react-router/useUrlState/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlState.js");exports.useUrlState=e.useUrlState;

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

@@ -23,10 +23,11 @@ import { type JSONCompatible } from "../../utils";
  * setUrl({ name: 'test' }, { replace: true });
  * // similar to React.useState
  * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true });
- * // reset state and url
+ * // RESET state and url
+ * setUrl((_curr, initialState) => initialState);
+ * // Or
  * reset();
  * reset({ replace: true });
- * // same as setState(form) with setUrl(form)
  *  ```
  *
  *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState}
@@ -41,25 +42,25 @@ export declare function useUrlState<T extends JSONCompatible>(defaultState: T, p
      * ```ts
      * setState({ name: 'test' });
      * // or
-     * setState(curr => ({ ...curr, name: 'test' }) );
+     * setState((curr, initial) => ({ ...curr, name: 'test' }) );
      *  ```
      *
      *  * 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;
+    setState: (value: Partial<T> | ((currState: T, initial: T) => T)) => void;
     /**
      * * Example:
      * ```ts
      * setUrl({ name: 'test' });
      * // or
-     * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true } );
+     * setUrl((curr, initial) => ({ ...curr, name: 'test' }), { replace: true } );
      * // can pass optional React-Router `NavigateOptions`
      * setUrl(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?: Partial<T> | ((currState: T) => T), options?: Params) => void;
+    setUrl: (value?: Partial<T> | ((currState: T, initial: T) => T), options?: Params) => void;
     /**
      * * Example:
      * ```ts

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

@@ -0,0 +1 @@
+"use strict";var P=require("react");var c=require("react-router-dom");var _=require("../../parseSPObj.js");var g=require("../../useUrlStateBase/useUrlStateBase.js");var u=require("../../utils.js");function k(e){return e&&e.__esModule?e:{default:e}}var s=k(P);function R(e,l){const p=l?.useHistory;const a=s.default.useMemo(()=>({...h,replace:l?.replace,preventScrollReset:l?.preventScrollReset}),[]);const n=c.useNavigate();const v=s.default.useMemo(()=>p?u.routerHistory:{replace:(t,r)=>n(t,{...a,...r}),push:(t,r)=>n(t,{...a,...r})},[n]);const[o]=c.useSearchParams();const d=c.useHref("/");const{state:U,updateState:i,updateUrl:f,getState:m,reset:S}=g.useUrlStateBase(e,v,({parse:t})=>t(u.filterUnknownParamsClient(e,o.entries())),d);const b=s.default.useCallback((t,r)=>f(t,{...a,...r}),[f]);s.default.useEffect(()=>{i(u.assignValue(e,u.filterUnknownParams(e,_.parseSPObj(Object.fromEntries([...o.entries()]),e))))},[o]);const q=s.default.useCallback(t=>{S({...a,...t})},[S]);return{setState:i,setUrl:b,urlState:U,reset:q,getState:m}}const h={replace:true,preventScrollReset:true};exports.useUrlState=R;

package/dist/remix/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlState/useUrlState.js");exports.useUrlState=e.useUrlState;

package/dist/remix/useUrlState/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlState.js");exports.useUrlState=e.useUrlState;

package/dist/remix/useUrlState/useUrlState.d.ts

@@ -23,10 +23,11 @@ import { type JSONCompatible } from "../../utils";
  * setUrl({ name: 'test' }, { replace: true });
  * // similar to React.useState
  * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true });
- * // reset state and url
+ * // RESET state and url
+ * setUrl((_curr, initialState) => initialState);
+ * // Or
  * reset();
  * reset({ replace: true });
- * // same as setState(form) with setUrl(form)
  *  ```
  *
  *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/remix/useUrlState}
@@ -41,25 +42,25 @@ export declare function useUrlState<T extends JSONCompatible>(defaultState: T, p
      * ```ts
      * setState({ name: 'test' });
      * // or
-     * setState(curr => ({ ...curr, name: 'test' }) );
+     * setState((curr, initial) => ({ ...curr, name: 'test' }) );
      *  ```
      *
      *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/remix/useUrlState#updatestate}
      */
-    setState: (value: Partial<T> | ((currState: T) => T)) => void;
+    setState: (value: Partial<T> | ((currState: T, initial: T) => T)) => void;
     /**
      * * Example:
      * ```ts
      * setUrl({ name: 'test' });
      * // or
-     * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true } );
+     * setUrl((curr, initial) => ({ ...curr, name: 'test' }), { replace: true } );
      * // can pass optional React-Router `NavigateOptions`
      * setUrl(curr => ({ ...curr, name: 'test' }), { preventScrollReset: false } );
      *  ```
      *
      *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/remix/useUrlState#updateurl}
      */
-    setUrl: (value?: Partial<T> | ((currState: T) => T), options?: Params) => void;
+    setUrl: (value?: Partial<T> | ((currState: T, initial: T) => T), options?: Params) => void;
     /**
      * * Example:
      * ```ts

package/dist/remix/useUrlState/useUrlState.js

@@ -0,0 +1 @@
+"use strict";var P=require("react");var o=require("@remix-run/react");var _=require("../../parseSPObj.js");var g=require("../../useUrlStateBase/useUrlStateBase.js");var u=require("../../utils.js");function k(e){return e&&e.__esModule?e:{default:e}}var s=k(P);function h(e,l){const p=l?.useHistory;const a=s.default.useMemo(()=>({...j,replace:l?.replace,preventScrollReset:l?.preventScrollReset}),[]);const n=o.useNavigate();const v=s.default.useMemo(()=>p?u.routerHistory:{replace:(t,r)=>n(t,{...a,...r}),push:(t,r)=>n(t,{...a,...r})},[n]);const[c]=o.useSearchParams();const d=o.useHref("/");const{state:U,updateState:i,updateUrl:f,getState:m,reset:S}=g.useUrlStateBase(e,v,({parse:t})=>t(u.filterUnknownParamsClient(e,c.entries())),d);const b=s.default.useCallback((t,r)=>f(t,{...a,...r}),[f]);s.default.useEffect(()=>{i(u.assignValue(e,u.filterUnknownParams(e,_.parseSPObj(Object.fromEntries([...c.entries()]),e))))},[c]);const q=s.default.useCallback(t=>{S({...a,...t})},[S]);return{setState:i,setUrl:b,urlState:U,reset:q,getState:m}}const j={replace:true,preventScrollReset:true};exports.useUrlState=h;

package/dist/subscribers.js

@@ -0,0 +1 @@
+"use strict";const r=new WeakMap;const s=new WeakMap;const a={get(t){return s.get(t)||[]},add(t,e){const n=this.get(t);s.set(t,n.concat(e));return()=>this.remove(t,e)},remove(t,e){const n=this.get(t);const c=n.filter(o=>o!==e);if(c.length){s.set(t,c)}else{s.delete(t)}}};const i={get:function(t){return r.get(t)},set:function(t,e){r.set(t,e)}};exports.stateMap=i;exports.subscribers=a;

package/dist/useInsertionEffect.js

@@ -0,0 +1 @@
+"use strict";var f=require("react");function u(e){return e&&e.__esModule?e:{default:e}}var t=u(f);const s=t.default.useInsertionEffect||t.default.useEffect;exports.useInsertionEffect=s;

package/dist/useSharedState/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useSharedState.js");exports.useSharedState=e.useSharedState;

package/dist/useSharedState/useSharedState.d.ts

@@ -13,12 +13,12 @@ import { type JSONCompatible } from "../utils";
  *
  * setState({ name: 'test' });
  * // OR
- * setState(curr => ({ ...curr, name: 'test' }))
+ * setState((curr, initialState) => ({ ...curr, name: 'test' }))
  *  ```
  *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/useSharedState}
  */
 export declare function useSharedState<T extends JSONCompatible>(defaultState: T, _getInitial?: () => T): {
     state: T;
     getState: () => T;
-    setState: (value: Partial<T> | ((currState: T) => T)) => void;
+    setState: (value: Partial<T> | ((currState: T, defaultState: T) => T)) => void;
 };

package/dist/useSharedState/useSharedState.js

@@ -0,0 +1 @@
+"use strict";var b=require("react");var s=require("../subscribers.js");var M=require("../useInsertionEffect.js");var i=require("../utils.js");function g(u){return u&&u.__esModule?u:{default:u}}var n=g(b);function v(u,a){const t=n.default.useRef(u);const[o,f]=n.default.useState(()=>{if(i.isSSR){return a?a?.():t.current}const e=s.stateMap.get(t.current);if(!e){const r=a?.()||t.current;s.stateMap.set(t.current,r);return r}else{return e}});const l=n.default.useCallback(e=>{const r=s.stateMap.get(t.current);const S=typeof e==="function";const c=S?e(r,u):{...r,...e};if(i.isEqual(r,c))return void 0;s.stateMap.set(t.current,c);s.subscribers.get(t.current).forEach(p=>p())},[]);M.useInsertionEffect(()=>{const e=()=>{f(s.stateMap.get(t.current)||t.current)};const r=s.subscribers.add(t.current,e);return()=>{r()}},[]);const d=n.default.useCallback(()=>s.stateMap.get(t.current)||t.current,[]);return{state:o,getState:d,setState:l}}exports.useSharedState=v;

package/dist/useSharedState/useSharedState.mjs

@@ -1 +1 @@
-import c from"react";import{stateMap as n,subscribers as o}from"../subscribers.mjs";import{useInsertionEffect as l}from"../useInsertionEffect.mjs";import{isSSR as b,isEqual as d}from"../utils.mjs";function E(a,u){const t=c.useRef(a);const[f,i]=c.useState(()=>{if(b){return u?u?.():t.current}const e=n.get(t.current);if(!e){const r=u?.()||t.current;n.set(t.current,r);return r}else{return e}});const m=c.useCallback(e=>{const r=n.get(t.current);const S=typeof e==="function";const s=S?e(r):{...r,...e};if(d(r,s))return void 0;n.set(t.current,s);o.get(t.current).forEach(g=>g())},[]);l(()=>{const e=()=>{i(n.get(t.current)||t.current)};const r=o.add(t.current,e);return()=>{r()}},[]);const p=c.useCallback(()=>n.get(t.current)||t.current,[]);return{state:f,getState:p,setState:m}}export{E as useSharedState};
+import c from"react";import{stateMap as n,subscribers as a}from"../subscribers.mjs";import{useInsertionEffect as l}from"../useInsertionEffect.mjs";import{isSSR as b,isEqual as d}from"../utils.mjs";function E(o,s){const t=c.useRef(o);const[f,i]=c.useState(()=>{if(b){return s?s?.():t.current}const e=n.get(t.current);if(!e){const r=s?.()||t.current;n.set(t.current,r);return r}else{return e}});const m=c.useCallback(e=>{const r=n.get(t.current);const S=typeof e==="function";const u=S?e(r,o):{...r,...e};if(d(r,u))return void 0;n.set(t.current,u);a.get(t.current).forEach(g=>g())},[]);l(()=>{const e=()=>{i(n.get(t.current)||t.current)};const r=a.add(t.current,e);return()=>{r()}},[]);const p=c.useCallback(()=>n.get(t.current)||t.current,[]);return{state:f,getState:p,setState:m}}export{E as useSharedState};

package/dist/useUrlEncode/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlEncode.js");exports.useUrlEncode=e.useUrlEncode;

package/dist/useUrlEncode/useUrlEncode.js

@@ -0,0 +1 @@
+"use strict";var c=require("react");var r=require("../encodeState/encodeState.js");var l=require("../utils.js");function d(e){return e&&e.__esModule?e:{default:e}}var u=d(c);function i(e){const a=u.default.useCallback((t,s)=>{return l.typeOf(t)==="object"?r.encodeState(t,e,s):""},[e]);const n=u.default.useCallback(t=>r.decodeState(t,e),[e]);return{parse:n,stringify:a}}exports.useUrlEncode=i;

package/dist/useUrlStateBase/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./useUrlStateBase.js");exports.useUrlStateBase=e.useUrlStateBase;

package/dist/useUrlStateBase/useUrlStateBase.d.ts

@@ -23,7 +23,7 @@ import { type JSONCompatible, type Router } from "../utils";
  * );
  *
  * updateState({ name: 'John' });
- * updateState(curr => ({ ...curr, name: 'John' }));
+ * updateState((curr, initialState) => ({ ...curr, name: 'John' }));
  * updateUrl({ name: 'John' }, { replace: true });
  * updateUrl(curr => ({ ...curr, name: 'John' }), { replace: true });
  * reset()
@@ -36,8 +36,8 @@ import { type JSONCompatible, type Router } from "../utils";
 export declare function useUrlStateBase<T extends JSONCompatible>(defaultState: T, router: Router, getInitialState?: ({ parse, }: {
     parse: ReturnType<typeof useUrlEncode<T>>["parse"];
 }) => T, basename?: string): {
-    updateState: (value: Partial<T> | ((currState: T) => T)) => void;
-    updateUrl: (value?: Parameters<(value: Partial<T> | ((currState: T) => T)) => void>[0], options?: Options) => void;
+    updateState: (value: Partial<T> | ((currState: T, defaultState: T) => T)) => void;
+    updateUrl: (value?: Parameters<(value: Partial<T> | ((currState: T, defaultState: T) => T)) => void>[0], options?: Options) => void;
     state: T;
     reset: (options?: Options) => void;
     getState: () => T;

package/dist/useUrlStateBase/useUrlStateBase.js

@@ -0,0 +1 @@
+"use strict";var y=require("react");var R=require("../constants/constants.js");var T=require("../useInsertionEffect.js");var _=require("../useSharedState/useSharedState.js");var B=require("../useUrlEncode/useUrlEncode.js");var L=require("../utils.js");function P(e){return e&&e.__esModule?e:{default:e}}var u=P(y);function b(e,t,i,l){const{parse:s,stringify:o}=B.useUrlEncode(e);const{state:f,getState:a,setState:r}=_.useSharedState(e,()=>i?.({parse:s})||e);const d=u.default.useRef(void 0);T.useInsertionEffect(()=>{const n=()=>{const p=s(L.filterUnknownParamsClient(e,I()));r(p)};window.addEventListener(q,n);return()=>{window.removeEventListener(q,n);clearTimeout(d.current)}},[r]);const w=u.default.useRef([]);const h=u.default.useCallback((n,p)=>{const S=typeof n==="function"?n(a(),e):{...a(),...n};const v=o(S,C(e));const m=M(window.location.pathname,l);const U=`${m}${v.length?"?":""}${v}${window.location.hash}`;const $=`${m}${window.location.search}${window.location.hash}`;if(U===$)return;r(S);const{replace:g,...k}=p||{};w.current.push([g?"replace":"push",U,k]);clearTimeout(d.current);const c=w.current.filter(Boolean).at(-1);if(c){queueMicrotask(()=>{d.current=setTimeout(()=>{w.current=[];t[c[0]](c[1],c[2])},R.TIMEOUT)})}},[t,o,a]);const E=u.default.useCallback(n=>{r(e);h(e,n)},[h,r]);return{updateState:r,updateUrl:h,state:f,reset:E,getState:a}}function C(e){const t=Object.keys(e);const i=window.location.search;const l=new URLSearchParams(i);const s=new URLSearchParams;for(const[o,f]of l){!t.includes(o)&&s.set(o,f)}return s}const q="popstate";function I(){return typeof window!=="undefined"&&window.location.search||""}function M(e,t){if(!t||t==="/"){return e}return e.slice(t.length)}exports.useUrlStateBase=b;

package/dist/useUrlStateBase/useUrlStateBase.mjs

@@ -1 +1 @@
-import i from"react";import{TIMEOUT as T}from"../constants/constants.mjs";import{useInsertionEffect as b}from"../useInsertionEffect.mjs";import{useSharedState as v}from"../useSharedState/useSharedState.mjs";import{useUrlEncode as L}from"../useUrlEncode/useUrlEncode.mjs";import{filterUnknownParamsClient as P}from"../utils.mjs";function B(t,e,u,f){const{parse:r,stringify:s}=L(t);const{state:l,getState:c,setState:o}=v(t,()=>u?.({parse:r})||t);const w=i.useRef(void 0);b(()=>{const n=()=>{const d=r(P(t,q()));o(d)};window.addEventListener(g,n);return()=>{window.removeEventListener(g,n);clearTimeout(w.current)}},[o]);const m=i.useRef([]);const p=i.useCallback((n,d)=>{const h=typeof n==="function"?n(c()):{...c(),...n};const S=s(h,C(t));const $=I(window.location.pathname,f);const U=`${$}${S.length?"?":""}${S}${window.location.hash}`;const E=`${$}${window.location.search}${window.location.hash}`;if(U===E)return;o(h);const{replace:y,...R}=d||{};m.current.push([y?"replace":"push",U,R]);clearTimeout(w.current);const a=m.current.filter(Boolean).at(-1);if(a){queueMicrotask(()=>{w.current=setTimeout(()=>{m.current=[];e[a[0]](a[1],a[2])},T)})}},[e,s,c]);const k=i.useCallback(n=>{o(t);p(t,n)},[p,o]);return{updateState:o,updateUrl:p,state:l,reset:k,getState:c}}function C(t){const e=Object.keys(t);const u=window.location.search;const f=new URLSearchParams(u);const r=new URLSearchParams;for(const[s,l]of f){!e.includes(s)&&r.set(s,l)}return r}const g="popstate";function q(){return typeof window!=="undefined"&&window.location.search||""}function I(t,e){if(!e||e==="/"){return t}return t.slice(e.length)}export{B as useUrlStateBase};
+import i from"react";import{TIMEOUT as T}from"../constants/constants.mjs";import{useInsertionEffect as v}from"../useInsertionEffect.mjs";import{useSharedState as L}from"../useSharedState/useSharedState.mjs";import{useUrlEncode as P}from"../useUrlEncode/useUrlEncode.mjs";import{filterUnknownParamsClient as b}from"../utils.mjs";function B(t,e,u,f){const{parse:r,stringify:s}=P(t);const{state:l,getState:c,setState:o}=L(t,()=>u?.({parse:r})||t);const m=i.useRef(void 0);v(()=>{const n=()=>{const d=r(b(t,O()));o(d)};window.addEventListener(g,n);return()=>{window.removeEventListener(g,n);clearTimeout(m.current)}},[o]);const w=i.useRef([]);const p=i.useCallback((n,d)=>{const h=typeof n==="function"?n(c(),t):{...c(),...n};const S=s(h,C(t));const $=q(window.location.pathname,f);const U=`${$}${S.length?"?":""}${S}${window.location.hash}`;const E=`${$}${window.location.search}${window.location.hash}`;if(U===E)return;o(h);const{replace:y,...R}=d||{};w.current.push([y?"replace":"push",U,R]);clearTimeout(m.current);const a=w.current.filter(Boolean).at(-1);if(a){queueMicrotask(()=>{m.current=setTimeout(()=>{w.current=[];e[a[0]](a[1],a[2])},T)})}},[e,s,c]);const k=i.useCallback(n=>{o(t);p(t,n)},[p,o]);return{updateState:o,updateUrl:p,state:l,reset:k,getState:c}}function C(t){const e=Object.keys(t);const u=window.location.search;const f=new URLSearchParams(u);const r=new URLSearchParams;for(const[s,l]of f){!e.includes(s)&&r.set(s,l)}return r}const g="popstate";function O(){return typeof window!=="undefined"&&window.location.search||""}function q(t,e){if(!e||e==="/"){return t}return t.slice(e.length)}export{B as useUrlStateBase};

package/dist/utils.js

@@ -0,0 +1 @@
+"use strict";const c=n=>{const t=typeof n;const r=n===null;const e=Array.isArray(n);const s=n instanceof Date;const o=!r&&!s&&!e&&t==="object";return r&&"null"||s&&"date"||e&&"array"||o&&"object"||t};const a=typeof window==="undefined";const f=n=>new URLSearchParams(typeof n==="string"?l(n):n?.toString?.()||"");const l=n=>n.split("?")?.[1]||n||"";const u=(n,t)=>JSON.stringify(n)===JSON.stringify(t);function w(n,t){const r=new URLSearchParams;const e=i(n,[...new URLSearchParams(t||"").entries()]);for(const[s,o]of e){r.set(s,o)}return r.toString()}function y(n,t){return Object.fromEntries(i(n,Object.entries(t||{})))}function i(n,t){const r=Object.keys(n);const e=[];for(let s=0;s<t.length;s++){if(r.includes(t[s]?.[0])){e.push([t[s][0].replace(/\+/g," "),t[s][1]])}}return e}function S(n,t){const r=Object.assign({},n);for(const[e]of Object.entries(n)){const s=e;const o=t[s]!==void 0;r[s]=o?t[s]:n[s]}return r}const g={push:n=>{window&&window.history.pushState(null,"",n)},replace:n=>{window&&window.history.replaceState(null,"",n)}};const p=/apple/i.test(!a&&navigator?.userAgent||"");exports.assignValue=S;exports.filterUnknown=i;exports.filterUnknownParams=y;exports.filterUnknownParamsClient=w;exports.getParams=f;exports.isEqual=u;exports.isSSR=a;exports.isSafari=p;exports.routerHistory=g;exports.typeOf=c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "Store state in URL as in object, types and structure are preserved, with TS validation. Same API as React.useState, wthout any hasssle or boilerplate. Next.js@14-15, react-router@6-7, and remix@2.",
   "homepage": "https://state-in-url.dev",
   "repository": {
@@ -36,47 +36,58 @@
   "files": [
     "dist"
   ],
-  "main": "dist/index.mjs",
+  "main": "./dist/index.js",
+  "module": "dist/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.mjs"
+      "default": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
     "./next": {
       "types": "./dist/next/index.d.ts",
-      "default": "./dist/next/index.mjs"
+      "default": "./dist/next/index.mjs",
+      "require": "./dist/next/index.js"
     },
     "./react-router": {
       "types": "./dist/react-router/index.d.ts",
-      "default": "./dist/react-router/index.mjs"
+      "default": "./dist/react-router/index.mjs",
+      "require": "./dist/react-router/index.js"
     },
     "./remix": {
       "types": "./dist/remix/index.d.ts",
-      "default": "./dist/remix/index.mjs"
+      "default": "./dist/remix/index.mjs",
+      "require": "./dist/remix/index.js"
     },
     "./encodeState": {
       "types": "./dist/encodeState/index.d.ts",
-      "default": "./dist/encodeState/index.mjs"
+      "default": "./dist/encodeState/index.mjs",
+      "require": "./dist/encodeState/index.js"
     },
     "./encoder": {
       "types": "./dist/encoder/index.d.ts",
-      "default": "./dist/encoder/index.mjs"
+      "default": "./dist/encoder/index.mjs",
+      "require": "./dist/encoder/index.js"
     },
     "./useSharedState": {
       "types": "./dist/useSharedState/index.d.ts",
-      "default": "./dist/useSharedState/index.mjs"
+      "default": "./dist/useSharedState/index.mjs",
+      "require": "./dist/useSharedState/index.js"
     },
     "./useUrlEncode": {
       "types": "./dist/useUrlEncode/index.d.ts",
-      "default": "./dist/useUrlEncode/index.mjs"
+      "default": "./dist/useUrlEncode/index.mjs",
+      "require": "./dist/useUrlEncode/index.js"
     },
     "./useUrlStateBase": {
       "types": "./dist/useUrlStateBase/index.d.ts",
-      "default": "./dist/useUrlStateBase/index.mjs"
+      "default": "./dist/useUrlStateBase/index.mjs",
+      "require": "./dist/useUrlStateBase/index.js"
     },
     "./utils": {
       "types": "./dist/utils.d.ts",
-      "default": "./dist/utils.mjs"
+      "default": "./dist/utils.mjs",
+      "require": "./dist/utils.js"
     }
   },
   "types": "./dist/index.d.ts",