state-in-url 2.5.2 → 3.0.0

package/README.md

@@ -3,7 +3,7 @@ English | [한국어](./README.KO.md) | [简体中文](./README.CN.md)
 <div align="center">
   <img src="/assets/Logo_big.png?raw=true" alt="state-in-url logo"/>
 
-  <div>Easily share state between unrelated React components, with IDE autocomplete and TS validation. Without any hasssle or boilerplate. </div>
+  <div>Easily share complex state between unrelated React components, with IDE autocomplete and TS validation. Without any hasssle or boilerplate. </div>
 </div>
 
 <div align="center">
@@ -13,6 +13,7 @@ English | [한국어](./README.KO.md) | [简体中文](./README.CN.md)
 ![Tests](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml/badge.svg?branch=main)
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/73be54068b7f41b0b74a252579ac09ec)](https://app.codacy.com/gh/asmyshlyaev177/state-in-url/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://github.com/asmyshlyaev177/state-in-url/)
+[![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)
 </div>
 
@@ -22,7 +23,6 @@ English | [한국어](./README.KO.md) | [简体中文](./README.CN.md)
 
 ![Demo-gif](https://github.com/asmyshlyaev177/state-in-url/blob/main/assets/Demo-gif.gif)
 
-
 <a href="https://state-in-url-asmyshlyaev177.vercel.app/" target="_blank">DEMO</a> |
 <a href="https://state-in-url.netlify.app/" target="_blank">DEMO2</a> |
 <a href ="https://codesandbox.io/p/github/asmyshlyaev177/state-in-url/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyk5bd9y00062v6jspcfrkx7%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyk5bd9x00022v6jyg71cr9e%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyk5bd9x00042v6jsos2y043%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyk5bd9x00052v6j5r632b12%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyk5bd9x00022v6jyg71cr9e%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyk5bd9w00012v6j83rq3bvo%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clyk5bd9x00022v6jyg71cr9e%2522%252C%2522activeTabId%2522%253A%2522clyk5bd9w00012v6j83rq3bvo%2522%257D%252C%2522clyk5bd9x00052v6j5r632b12%2522%253A%257B%2522id%2522%253A%2522clyk5bd9x00052v6j5r632b12%2522%252C%2522activeTabId%2522%253A%2522clyk5bdjx000b2v6jfc8ae464%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522SETUP_TASKS%2522%252C%2522id%2522%253A%2522clyk5bdjx000b2v6jfc8ae464%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A2222%252C%2522id%2522%253A%2522clyk5cjbo004d2v6j3u55k74g%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522ENV_SETUP%2522%252C%2522id%2522%253A%2522clyk5h8dp000r2v6j0r7kc7qq%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clyk5bd9x00042v6jsos2y043%2522%253A%257B%2522id%2522%253A%2522clyk5bd9x00042v6jsos2y043%2522%252C%2522activeTabId%2522%253A%2522clyk5cbuv001q2v6joegrxxv6%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyk5bd9x00032v6jtfhj316o%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522NEW_TERMINAL%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clyk5cbuv001q2v6joegrxxv6%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522cleanupDist%2522%252C%2522id%2522%253A%2522clyk5dgvo005i2v6jj950sxft%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D" target="_blank">Demo on Codesandbox</a>
@@ -44,7 +44,7 @@ Add a ⭐️ and <a href="https://github.com/asmyshlyaev177" target="_blank">fol
 - 🧮 Store unsaved user forms in URL
 - 🙃 Share the state between different components without changing url, good as alternative to signals and other state management tools
 - 🧠 Sync data between unrelated client components
-- 🔗 Shareable URLs with full application state
+- 🔗 Shareable URLs with application state
 - 🔄 Easy state persistence across page reloads
 
 # Features
@@ -59,20 +59,24 @@ Add a ⭐️ and <a href="https://github.com/asmyshlyaev177" target="_blank">fol
 ## Table of content
 
 - [Installation](#installation)
-- [`useUrlState` for Next.js](#useurlstate-hook-for-nextjs)
-- [`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)
-- [auto sync state with url](#auto-sync-state)
-- [Low-level `encode` and `decode` functions](#encode-and-decode-helpers)
+- [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)
-- [Gothas](#gothas)
-- [Roadmap](#roadmap)
-- [Contact & Support](#contact--support)
-- [Changelog](#changelog)
-- [License](#license)
-- [Inspiration](#inspiration)
+- - [Gothas](#gothas)
+- [Other](#other)
+- - [Roadmap](#roadmap)
+- - [Contributing](#contribute-andor-run-locally)
+- - [Contact & Support](#contact--support)
+- - [Changelog](#changelog)
+- - [License](#license)
+- - [Inspiration](#inspiration)
 
 ## installation
 
@@ -92,12 +96,14 @@ pnpm add state-in-url
 In `tsconfig.json` in `compilerOptions` set `"moduleResolution": "Bundler"`, or`"moduleResolution": "Node16"`, or `"moduleResolution": "NodeNext"`.
 Possibly need to set `"module": "ES2022"`, or `"module": "ESNext"`
 
+# useUrlState
+
+`useUrlState` is a custom React hook for Next.js/React-Router applications that make communication between client components easy. It allows you to share any complex state and sync it with the URL search parameters, providing a way to persist state across page reloads and share application state via URLs.
+
 ## useUrlState hook for Next.js
 
 [Docs](packages/urlstate/next/useUrlState#api)
 
-`useUrlState` is a custom React hook for Next.js applications that make communication between client components easy. It allows you to share any complex state and sync it with the URL search parameters, providing a way to persist state across page reloads and share application state via URLs.
-
 ### Usage examples
 
 #### Basic
@@ -229,7 +235,7 @@ const tags = [
 ];
 ```
 
-[Demo page example code](https://github.com/asmyshlyaev177/state-in-url/blob/main/packages/example-nextjs/src/app/Form.tsx)
+[Demo page example code](https://github.com/asmyshlyaev177/state-in-url/blob/main/packages/example-nextjs14/src/app/Form.tsx)
 
 #### Auto sync state
 
@@ -334,6 +340,90 @@ function SettingsComponent() {
 }
 ```
 
+## useUrlState hook for React-Router
+
+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.
+
+[Docs](packages/urlstate/react-router/useUrlState#api)
+
+
+### Example
+
+```typescript
+export const form: Form = {
+  name: '',
+  age: undefined,
+  'agree to terms': false,
+  tags: [],
+};
+
+type Form = {
+  name: string;
+  age?: number;
+  'agree to terms': boolean;
+  tags: { id: string; value: { text: string; time: Date } }[];
+};
+
+```
+
+```typescript
+import { useUrlState } from 'state-in-url/react-router';
+
+import { form } from './form';
+
+function TagsComponent() {
+  const { state, updateUrl } = useUrlState({ defaultState: form });
+
+  const onChangeTags = React.useCallback(
+    (tag: (typeof tags)[number]) => {
+      updateUrl((curr) => ({
+        ...curr,
+        tags: curr.tags.find((t) => t.id === tag.id)
+          ? curr.tags.filter((t) => t.id !== tag.id)
+          : curr.tags.concat(tag),
+      }));
+    },
+    [updateUrl],
+  );
+
+  return (
+    <div>
+      <Field text="Tags">
+        <div className="flex flex-wrap gap-2">
+          {tags.map((tag) => (
+            <Tag
+              active={!!state.tags.find((t) => t.id === tag.id)}
+              text={tag.value.text}
+              onClick={() => onChangeTags(tag)}
+              key={tag.id}
+            />
+          ))}
+        </div>
+      </Field>
+    </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') },
+  },
+];
+```
+
+[Example code](packages/example-react-router6/src/Form-for-test.tsx)
+
+# Other hooks and helpers
+
 ## `useUrlStateBase` hook for others routers
 
 Hooks to create your own `useUrlState` hooks with other routers, e.g. react-router or tanstack router.
@@ -369,9 +459,9 @@ function SettingsComponent() {
 
 [Docs](packages/urlstate/encoder/README.md)
 
-## Best Practices
+# Best Practices
 
-- Define your state shape as a constant to ensure consistency
+- Define your state shape as a constant
 - Use TypeScript for enhanced type safety and autocomplete
 - Avoid storing sensitive information in URL parameters (SSN, API keys etc)
 - Use `updateState` for frequent updates and `updateUrl` to sync changes to url
@@ -380,34 +470,33 @@ function SettingsComponent() {
 
 ## Gothas
 
-1. Can pass only serializable values, `Function`, `BigInt` or `Symbol` won't work, probably things like `ArrayBuffer` neither.
+1. Can pass only serializable values, `Function`, `BigInt` or `Symbol` won't work, probably things like `ArrayBuffer` neither. Everything that can be serialized to JSON will work.
 2. Vercel servers limit size of headers (query string and other stuff) to **14KB**, so keep your URL state under ~5000 words. <https://vercel.com/docs/errors/URL_TOO_LONG>
-3. Tested with `next.js` 14 with app router, no plans to support pages.
+3. Tested with `next.js` 14/15  with app router, no plans to support pages.
 
-## Run locally
+# Other
 
-Clone this repo, run `npm install` and
+## Contribute and/or run locally
 
-```sh
-npm run dev
-```
+See [Contributing doc](CONTRIBUTING.md)
 
-Go to [localhost:3000](http://localhost:3000)
 
 ## Roadmap
- - [x] hook for `Next.js`
- - [ ] hook for 'react-router`
- - [ ] hook for store state in hash ?
+
+- [x] hook for `Next.js`
+- [x] hook for 'react-router`
+- [ ] hook for 'remix`
+- [ ] hook for store state in hash ?
 
 ## Contact & Support
 
 - Create a [GitHub issue](https://github.com/asmyshlyaev177/state-in-url/issues) for bug reports, feature requests, or questions
 
-## [Changelog](https://github.com/asmyshlyaev177/state-in-url/blob/main/CHANGELOG.md)
+## [Changelog](CHANGELOG.md)
 
 ## License
 
-This project is licensed under the [MIT license](https://github.com/asmyshlyaev177/state-in-url/blob/main/LICENSE).
+This project is licensed under the [MIT license](LICENSE).
 
 ## Inspiration
 

package/dist/constants/constants.mjs

@@ -1 +1 @@
-const n={date:"⏲",undefined:"∙undefined",string:"◖",boolean:"🗵",null:"∙null",number:"∓"};export{n as SYMBOLS};
+const e={date:"⏲",undefined:"∙undefined"};export{e as SYMBOLS};

package/dist/encodeState/encodeState.mjs

@@ -1 +1 @@
-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};
+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};

package/dist/encoder/encoder.mjs

@@ -1 +1 @@
-import{SYMBOLS as t}from"../constants/constants.mjs";import{typeOf as e}from"../utils.mjs";function n(n){if(c(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 i(t.replaceAll("'",'"'),e)}const s=e=>{if(e!==t.undefined)return e?.startsWith?.(t.date)?new Date(e.slice(1)):e===t.null?null:e?.startsWith?.(t.number)?Number.parseFloat(e.replace(t.number,"")):e?.startsWith?.(t.boolean)?!!e.includes("true"):e?.startsWith?.(t.string)?decodeURIComponent(e).replace(/^◖/,""):u},u=Symbol("isError"),a=(t,e)=>{const n="string"==typeof e,r=n&&s(e);return r===u?e:n?r:e};function i(t,e){try{return JSON.parse(t,a)}catch{const n=s(t);return n!==u?n:e}}const o=new RegExp(`^(${t.string}|${t.boolean}|${t.null}|${t.undefined}|${t.number}|${t.date})`),c=t=>o.test(String(t));export{r as decode,s as decodePrimitive,n as encode,u as errorSym,i as parseJSON,a as reviver};
+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};

package/dist/index.mjs

@@ -1 +1 @@
-export{decode,encode}from"./encoder/encoder.mjs";export{decodeState,encodeState}from"./encodeState/encodeState.mjs";export{parseSPObj}from"./next/parseSPObj.mjs";export{useUrlState}from"./next/useUrlState/useUrlState.mjs";export{useSharedState}from"./useSharedState/useSharedState.mjs";export{useUrlEncode}from"./useUrlEncode/useUrlEncode.mjs";export{useUrlStateBase}from"./useUrlStateBase/useUrlStateBase.mjs";export{isSSR,typeOf}from"./utils.mjs";
+export{decode,encode}from"./encoder/encoder.mjs";export{decodeState,encodeState}from"./encodeState/encodeState.mjs";export{useUrlState}from"./next/useUrlState/useUrlState.mjs";export{useSharedState}from"./useSharedState/useSharedState.mjs";export{useUrlEncode}from"./useUrlEncode/useUrlEncode.mjs";export{useUrlStateBase}from"./useUrlStateBase/useUrlStateBase.mjs";export{isSSR,typeOf}from"./utils.mjs";

package/dist/next/index.mjs

@@ -1 +1 @@
-export{parseSPObj}from"./parseSPObj.mjs";export{useUrlState}from"./useUrlState/useUrlState.mjs";
+export{useUrlState}from"./useUrlState/useUrlState.mjs";

package/dist/next/useUrlState/useUrlState.mjs

@@ -1 +1 @@
-import{useRouter as e,useSearchParams as t}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 c,filterUnknownParamsClient as l}from"../../utils.mjs";function n(n,o){const{_defaultState:u,_searchParams:i,_replace:m}=function(e,t){const a="defaultState"in e,r=a?e.defaultState:e,s=a?e.searchParams:t,c=!!a&&(e.replace??!0);return{_defaultState:r,_searchParams:s,_replace:c}}(n,o),f=e(),{state:p,updateState:S,updateUrl:d,getState:j}=s(u,f,(({parse:e})=>c()?r(function(e,t){const a=Object.keys(e),r=Object.fromEntries(Object.entries(t||{}).map((([e,t])=>[e.replaceAll("+"," "),t])).filter((([e])=>a.includes(e))));return r}(u,i),u):e(l(u)))),b=a.useCallback(((e,t)=>{const a={scroll:!1,replace:m,...t};d(e,a)}),[d,m]),O=t();return a.useEffect((()=>{const e=Object.keys(u),t=Object.fromEntries([...O.entries()].filter((([t])=>e.includes(t))));S(r(t,u))}),[O]),{updateState:S,updateUrl:b,state:p,getState:j}}export{n 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{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};

package/dist/parseSPObj.mjs

@@ -0,0 +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};

package/dist/react-router/index.mjs

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

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

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

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

@@ -0,0 +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};

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 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};
+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};

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: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};
+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};

package/dist/utils.mjs

@@ -1 +1 @@
-const t=t=>{const e=typeof t,n=null===t,r=Array.isArray(t),a=t instanceof Date;return(n?"null":a&&"date")||r&&"array"||!n&&!a&&!r&&"object"===e&&"object"||e},e=()=>"undefined"==typeof window,n=t=>new URLSearchParams("string"==typeof t?r(t):t?.toString?.()||""),r=t=>t.split("?")?.[1]||t||"",a=(t,e)=>JSON.stringify(t)===JSON.stringify(e);function i(t){const e=new URLSearchParams(window.location.search),n=Object.keys(t),r=new URLSearchParams;return[...e.entries()].filter((([t])=>n.includes(t))).forEach((([t,e])=>r.set(t,e))),r.toString()}export{i as filterUnknownParamsClient,n as getParams,a as isEqual,e as isSSR,t as typeOf};
+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};