state-in-url 4.3.3 → 5.1.0

package/README.md

@@ -102,6 +102,7 @@ This library is a good alternative for NUQS.
 - [Installation](#installation)
 - [useUrlState hook](#useurlstate)
 - - [Next.js](#useurlstate-hook-for-nextjs)
+- - [Remix](#useurlstate-hook-for-remixjs)
 - - [React-Router](#useurlstate-hook-for-react-router)
 - [Other helpers](#other-hooks-and-helpers)
 - - [`useUrlStateBase` for other routers](#useurlstatebase-hook-for-others-routers)
@@ -454,6 +455,93 @@ function SettingsComponent() {
 
 </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: '',
+  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/remix';
+
+import { form } from './form';
+
+function TagsComponent() {
+  const { urlState, setUrl, setState } = useUrlState(form);
+
+  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>
+      <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') },
+  },
+];
+```
+
+[Example code](packages/example-remix2/app/routes/Form-for-test.tsx)
+
 ### 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.
@@ -629,7 +717,7 @@ See [Contributing doc](CONTRIBUTING.md)
 
 - [x] hook for `Next.js`
 - [x] hook for `react-router`
-- [ ] hook for `remix`
+- [x] hook for `remix`
 - [ ] hook for `svelte`
 - [ ] hook for `astro`
 - [ ] hook for store state in hash ?

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

@@ -1,28 +1,5 @@
 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>): {
-    /**
-     * @deprecated use `urlState`
-     */
-    state: T;
-    urlState: T;
-    /**
-     * @deprecated use `setState`
-     */
-    updateState: (value: Partial<T> | ((currState: T) => T)) => void;
-    setState: (value: Partial<T> | ((currState: T) => T)) => void;
-    /**
-     * @deprecated use `setUrl`
-     */
-    updateUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
-    setUrl: (value?: Partial<T> | ((currState: T) => T)) => void;
-};
 /**
  * NextJS hook. Returns `urlState`, `setState`, and `setUrl` functions
  *
@@ -103,13 +80,6 @@ type RouterOptions = NonNullable<Parameters<Router["push"]>[1] | Parameters<Rout
 interface Options extends RouterOptions {
     replace?: boolean;
 }
-interface OldParams<T> {
-    defaultState: T;
-    searchParams?: object;
-    replace?: boolean;
-    scroll?: boolean;
-    useHistory?: boolean;
-}
 type Params = {
     searchParams?: object;
     replace?: boolean;

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/next/useUrlState/useUrlState.mjs

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

@@ -1,25 +1,5 @@
 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>): {
-    /**
-     * @deprecated use `urlState`
-     */
-    state: T;
-    urlState: T;
-    /**
-     * @deprecated use `setState`
-     */
-    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
  *
@@ -94,12 +74,6 @@ export declare function useUrlState<T extends JSONCompatible>(defaultState: T, p
         [key: string]: unknown;
     }) => void;
 };
-type OldParams<T> = {
-    defaultState: T;
-    useHistory?: boolean;
-    searchParams?: object;
-    replace?: boolean;
-} & NavigateOptions;
 interface Params extends NavigateOptions {
     useHistory?: boolean;
     searchParams?: object;

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/react-router/useUrlState/useUrlState.mjs

@@ -1 +1 @@
-import a from"react";import{useNavigate as H,useSearchParams as g,useHref as k}from"react-router-dom";import{parseSPObj as P}from"../../parseSPObj.mjs";import{useUrlStateBase as h}from"../../useUrlStateBase/useUrlStateBase.mjs";import{routerHistory as y,filterUnknownParamsClient as C,assignValue as j,filterUnknownParams as w}from"../../utils.mjs";function E(t,l){const r="defaultState"in t?t.defaultState:t;const m="defaultState"in t?t.useHistory:l?.useHistory;const d="defaultState"in t?{replace:t.replace,preventScrollReset:t.preventScrollReset}:{replace:l?.replace,preventScrollReset:l?.preventScrollReset};const o=a.useMemo(()=>({...M,...d}),[]);const n=H();const U=a.useMemo(()=>m?y:{replace:(e,s)=>n(e,{...o,...s}),push:(e,s)=>n(e,{...o,...s})},[n]);const[c]=g();const v=k("/");const{state:p,updateState:u,updateUrl:i,getState:R,reset:S}=h(r,U,({parse:e})=>e(C(r,c.entries())),v);const f=a.useCallback((e,s)=>i(e,{...o,...s}),[i]);a.useEffect(()=>{u(j(r,w(r,P(Object.fromEntries([...c.entries()]),r))))},[c]);const b=a.useCallback(e=>{S({...o,...e})},[S]);return{setState:u,updateState:u,setUrl:f,updateUrl:f,urlState:p,state:p,reset:b,getState:R}}const M={replace:true,preventScrollReset:true};export{E as useUrlState};
+import s from"react";import{useNavigate as g,useSearchParams as k,useHref as P}from"react-router-dom";import{parseSPObj as h}from"../../parseSPObj.mjs";import{useUrlStateBase as C}from"../../useUrlStateBase/useUrlStateBase.mjs";import{routerHistory as H,filterUnknownParamsClient as R,assignValue as d,filterUnknownParams as j}from"../../utils.mjs";function w(t,a){const i=a?.useHistory;const o=s.useMemo(()=>({...y,replace:a?.replace,preventScrollReset:a?.preventScrollReset}),[]);const n=g();const m=s.useMemo(()=>i?H:{replace:(e,r)=>n(e,{...o,...r}),push:(e,r)=>n(e,{...o,...r})},[n]);const[c]=k();const f=P("/");const{state:S,updateState:l,updateUrl:u,getState:U,reset:p}=C(t,m,({parse:e})=>e(R(t,c.entries())),f);const b=s.useCallback((e,r)=>u(e,{...o,...r}),[u]);s.useEffect(()=>{l(d(t,j(t,h(Object.fromEntries([...c.entries()]),t))))},[c]);const v=s.useCallback(e=>{p({...o,...e})},[p]);return{setState:l,setUrl:b,urlState:S,reset:v,getState:U}}const y={replace:true,preventScrollReset:true};export{w as useUrlState};

package/dist/remix/index.d.ts

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

package/dist/remix/index.js

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

package/dist/remix/index.mjs

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

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

@@ -0,0 +1 @@
+export { useUrlState } from "./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/index.mjs

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

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

@@ -0,0 +1,82 @@
+import { type NavigateOptions } from "react-router-dom";
+import { type JSONCompatible } from "../../utils";
+/**
+ * Remix hook. Returns `urlState`, `setState`, and `setUrl` functions
+ *
+ * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
+ * @param {Object} params - Object with other parameters
+ * @param {NavigateOptions} params.NavigateOptions See type from [`react-router-dom`](https://api.reactrouter.com/v7/interfaces/react_router.NavigateOptions.html)
+ * @param {boolean} params.replace replace URL or push, default `true`
+ * @param {boolean} params.useHistory use window.history for navigation, default `false`
+ * @param {boolean} params.preventScrollReset keep scroll position, default `true`
+ * @returns {Object} [result] State and callbacks
+ * @returns {Object} [result.state] - current state object
+ * @returns {Function} [result.setUrl] - function to update state and url
+ * @returns {Function} [result.setState] - function to update state only
+ * @returns {Function} [result.reset] - function to reset state and url to default
+ * * Example:
+ * ```ts
+ * export const form = { name: '', age: 0 };
+ * const { urlState, setState, setUrl } = useUrlState(form, { replace: false, preventScrollReset: false });
+ *
+ * setState({ name: 'test' });
+ * setUrl({ name: 'test' }, { replace: true });
+ * // similar to React.useState
+ * setUrl(curr => ({ ...curr, name: 'test' }), { replace: true });
+ * // reset state and url
+ * 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}
+ */
+export declare function useUrlState<T extends JSONCompatible>(defaultState: T, params?: Params): {
+    /**
+     * State object. Don't mutate directly, use `setState` or `setUrl`
+     */
+    urlState: T;
+    /**
+     * * Example:
+     * ```ts
+     * setState({ name: 'test' });
+     * // or
+     * setState(curr => ({ ...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;
+    /**
+     * * Example:
+     * ```ts
+     * setUrl({ name: 'test' });
+     * // or
+     * setUrl(curr => ({ ...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;
+    /**
+     * * Example:
+     * ```ts
+     * reset();
+     * // or
+     * reset({ replace: false, preventScrollReset: false })
+     *  ```
+     *
+     *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/remix/useUrlState#reset}
+     */
+    reset: (options?: NavigateOptions & {
+        [key: string]: unknown;
+    }) => void;
+};
+interface Params extends NavigateOptions {
+    useHistory?: boolean;
+    searchParams?: object;
+    replace?: boolean;
+}
+export {};

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/remix/useUrlState/useUrlState.mjs

@@ -0,0 +1 @@
+import s from"react";import{useNavigate as g,useSearchParams as k,useHref as P}from"@remix-run/react";import{parseSPObj as h}from"../../parseSPObj.mjs";import{useUrlStateBase as C}from"../../useUrlStateBase/useUrlStateBase.mjs";import{routerHistory as H,filterUnknownParamsClient as R,assignValue as d,filterUnknownParams as j}from"../../utils.mjs";function w(t,a){const i=a?.useHistory;const o=s.useMemo(()=>({...y,replace:a?.replace,preventScrollReset:a?.preventScrollReset}),[]);const n=g();const m=s.useMemo(()=>i?H:{replace:(e,r)=>n(e,{...o,...r}),push:(e,r)=>n(e,{...o,...r})},[n]);const[c]=k();const f=P("/");const{state:S,updateState:l,updateUrl:u,getState:U,reset:p}=C(t,m,({parse:e})=>e(R(t,c.entries())),f);const b=s.useCallback((e,r)=>u(e,{...o,...r}),[u]);s.useEffect(()=>{l(d(t,j(t,h(Object.fromEntries([...c.entries()]),t))))},[c]);const v=s.useCallback(e=>{p({...o,...e})},[p]);return{setState:l,setUrl:b,urlState:S,reset:v,getState:U}}const y={replace:true,preventScrollReset:true};export{w as useUrlState};

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.js

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

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/useUrlEncode/useUrlEncode.mjs

@@ -1 +1 @@
-import r from"react";import{encodeState as a,decodeState as s}from"../encodeState/encodeState.mjs";import{typeOf as f}from"../utils.mjs";function i(e){const o=r.useCallback((t,n)=>{return f(t)==="object"?a(t,e,n):""},[e]);const c=r.useCallback(t=>s(t,e),[e]);return{parse:c,stringify:o}}export{i as useUrlEncode};
+import r from"react";import{encodeState as s,decodeState as a}from"../encodeState/encodeState.mjs";import{typeOf as f}from"../utils.mjs";function i(e){const o=r.useCallback((t,c)=>{return f(t)==="object"?s(t,e,c):""},[e]);const n=r.useCallback(t=>a(t,e),[e]);return{parse:n,stringify:o}}export{i as useUrlEncode};

package/dist/useUrlStateBase/index.js

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

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 B=require("../utils.js");function L(e){return e&&e.__esModule?e:{default:e}}var u=L(y);function P(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(B.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()):{...a(),...n};const v=o(S,C(e));const U=M(window.location.pathname,l);const m=`${U}${v.length?"?":""}${v}${window.location.hash}`;const $=`${U}${window.location.search}${window.location.hash}`;if(m===$)return;r(S);const{replace:g,...k}=p||{};w.current.push([g?"replace":"push",m,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=P;

package/dist/utils.d.ts

@@ -22,7 +22,7 @@ export type UnknownObj = object | {
     [key: string]: unknown;
 };
 export declare const isEqual: (val1: unknown, val2: unknown) => boolean;
-export declare function filterUnknownParamsClient<T extends object>(shape: T, params: string | URLSearchParams | Record<string, string> | object): string;
+export declare function filterUnknownParamsClient<T extends object>(shape: T, params?: string | URLSearchParams | Record<string, string> | object): string;
 export declare function filterUnknownParams<T extends object>(shape: T, searchParams?: object): T;
 export declare function filterUnknown<T extends object>(shape: T, entries: [key: string, value: string][]): string[][];
 export declare function assignValue<T extends object>(shape: T, newVal: Partial<T>): T;

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,7 +1,7 @@
 {
   "name": "state-in-url",
-  "version": "4.3.3",
-  "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 and react-router@6-7.",
+  "version": "5.1.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": {
     "type": "git",
@@ -30,48 +30,64 @@
     "packages/example-nextjs14",
     "packages/example-nextjs15",
     "packages/example-react",
-    "packages/example-react-router6"
+    "packages/example-react-router6",
+    "packages/example-remix2"
   ],
   "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",
+      "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",
@@ -80,11 +96,14 @@
     "test:int": "wireit",
     "test:int:ci": "wireit",
     "test:exports": "npm run build && npx babel-node --extensions .js,.mjs,.ts,.mts --config-file ./babel.config.json -- ./packages/urlstate/exportsTest.ts",
+    "install:all": "npm install",
+    "install:ci": "npm ci",
     "test": "wireit",
     "tsc": "wireit",
     "dev": "wireit",
     "dev:lib": "wireit",
     "dev:nextjs14": "wireit",
+    "dev:remix2": "wireit",
     "bump": "npx standard-version --no-verify",
     "build": "wireit",
     "build:demo": "wireit",
@@ -99,7 +118,7 @@
     "kill-vite": "wireit",
     "kill": "wireit",
     "rmdist": "rm -rf dist",
-    "cleanup": "rm -rf dist .wireit node_modules test-results playwright-report coverage-reports nyc_coverage packages/example-nextjs14/node_modules packages/example-nextjs14/.next packages/example-nextjs15/node_modules packages/example-nextjs15/.next packages/example-react/node_modules packages/example-react-router6/node_modules",
+    "cleanup": "rm -rf dist .wireit node_modules test-results playwright-report coverage-reports nyc_coverage packages/example-nextjs14/node_modules packages/example-nextjs14/.next packages/example-nextjs15/node_modules packages/example-nextjs15/.next packages/example-react/node_modules packages/example-react-router6/node_modules packages/example-remix2/node_modules",
     "reinstall": "npm run cleanup && npm install",
     "setup": "playwright install --with-deps",
     "prepack": "npm run build && cp package.json dist/package.json && npm run build:demo",
@@ -151,6 +170,7 @@
       "dependencies": [
         "dev:lib",
         "dev:react",
+        "dev:remix2",
         "dev:router6",
         "dev:nextjs15"
       ],
@@ -176,6 +196,10 @@
       "command": "cd packages/example-react-router6 && npm run dev",
       "service": true
     },
+    "dev:remix2": {
+      "command": "cd packages/example-remix2 && PORT=3003 npm run dev",
+      "service": true
+    },
     "dev:nextjs14": {
       "command": "cd packages/example-nextjs14 && npm run dev --turbo",
       "service": true
@@ -196,6 +220,12 @@
         "build"
       ]
     },
+    "build:remix2": {
+      "command": "cd packages/example-remix2 && npm run build",
+      "dependencies": [
+        "build"
+      ]
+    },
     "build:demo": {
       "dependencies": [
         "build"
@@ -241,6 +271,17 @@
       "command": "npx vite preview --port 5181 packages/example-react-router6",
       "service": true
     },
+    "start:remix2": {
+      "command": "cd packages/example-remix2 && npm run start",
+      "dependencies": [
+        "build:remix2"
+      ],
+      "service": true
+    },
+    "start:remix2:ci": {
+      "command": "cd packages/example-remix2 && npm run start",
+      "service": true
+    },
     "start:demo15": {
       "dependencies": [
         "build:next15"
@@ -257,7 +298,8 @@
       "dependencies": [
         "start:demo",
         "start:react",
-        "start:router6"
+        "start:router6",
+        "start:remix2"
       ],
       "service": true
     },
@@ -266,7 +308,8 @@
       "dependencies": [
         "start:demo:ci",
         "start:react:ci",
-        "start:router6:ci"
+        "start:router6:ci",
+        "start:remix2:ci"
       ],
       "service": true
     },
@@ -280,7 +323,8 @@
         "build:react",
         "build:demo:tests",
         "build:next15",
-        "build:router6"
+        "build:router6",
+        "build:remix2"
       ]
     },
     "build:react": {
@@ -404,6 +448,8 @@
     "decode",
     "Next.js",
     "react-router",
+    "remix",
+    "remixjs",
     "url",
     "url synchronization",
     "url sync",