state-in-url 4.3.3 → 5.0.0

package/README.md

@@ -629,7 +629,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/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.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/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.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.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.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.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/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/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/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.0.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,7 +30,8 @@
     "packages/example-nextjs14",
     "packages/example-nextjs15",
     "packages/example-react",
-    "packages/example-react-router6"
+    "packages/example-react-router6",
+    "packages/example-remix2"
   ],
   "files": [
     "dist"
@@ -49,6 +50,10 @@
       "types": "./dist/react-router/index.d.ts",
       "default": "./dist/react-router/index.mjs"
     },
+    "./remix": {
+      "types": "./dist/remix/index.d.ts",
+      "default": "./dist/remix/index.mjs"
+    },
     "./encodeState": {
       "types": "./dist/encodeState/index.d.ts",
       "default": "./dist/encodeState/index.mjs"
@@ -80,11 +85,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 +107,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 +159,7 @@
       "dependencies": [
         "dev:lib",
         "dev:react",
+        "dev:remix2",
         "dev:router6",
         "dev:nextjs15"
       ],
@@ -176,6 +185,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 +209,12 @@
         "build"
       ]
     },
+    "build:remix2": {
+      "command": "cd packages/example-remix2 && npm run build",
+      "dependencies": [
+        "build"
+      ]
+    },
     "build:demo": {
       "dependencies": [
         "build"
@@ -241,6 +260,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 +287,8 @@
       "dependencies": [
         "start:demo",
         "start:react",
-        "start:router6"
+        "start:router6",
+        "start:remix2"
       ],
       "service": true
     },
@@ -266,7 +297,8 @@
       "dependencies": [
         "start:demo:ci",
         "start:react:ci",
-        "start:router6:ci"
+        "start:router6:ci",
+        "start:remix2:ci"
       ],
       "service": true
     },
@@ -280,7 +312,8 @@
         "build:react",
         "build:demo:tests",
         "build:next15",
-        "build:router6"
+        "build:router6",
+        "build:remix2"
       ]
     },
     "build:react": {
@@ -404,6 +437,8 @@
     "decode",
     "Next.js",
     "react-router",
+    "remix",
+    "remixjs",
     "url",
     "url synchronization",
     "url sync",