state-in-url 5.1.0 → 6.0.0

package/README.md

@@ -99,26 +99,46 @@ This library is a good alternative for NUQS.
 
 ## Table of content
 
-- [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)
-- - [`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
 
@@ -175,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>
@@ -194,7 +214,7 @@ function MyComponent() {
         onBlur={() => setUrl()}
       />
 
-      <button onClick={reset}>
+      <button onClick={() => setUrl((_, initial) => initial)}>
         Reset
       </button>
 
@@ -203,164 +223,6 @@ function MyComponent() {
 }
 ```
 
-##### Custom hook to work with slice of state conveniently
-<details>
-  <Summary>Example</Summary>
-
-  ```typescript
-'use client';
-
-import React from 'react';
-import { useUrlState } from 'state-in-url/next';
-
-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 } }[];
-};
-
-export const useFormState = ({ searchParams }: { searchParams?: object }) => {
-    const { urlState, setUrl: setUrlBase, reset } = useUrlState(form, {
-      searchParams,
-    });
-
-    // 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']
-
-    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]);
-
-    return { urlState, setUrl, resetUrl: reset };
-};
-  ```
-</details>
-
-<hr />
-
-##### With complex state shape
-
-<details>
-  <Summary>Example</Summary>
-
-```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
-'use client'
-import { useUrlState } from 'state-in-url/next';
-
-import { form } from './form';
-
-function TagsComponent() {
-  // `urlState` will infer from Form type!
-  const { urlState, setUrl } = 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>
-    </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') },
-  },
-];
-```
-
-[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>
-
 ##### With server side rendering
 
 <details>
@@ -569,6 +431,8 @@ type Form = {
 
 ```typescript
 import { useUrlState } from 'state-in-url/react-router';
+// for react-router v6
+// import { useUrlState } from 'state-in-url/react-router6';
 
 import { form } from './form';
 
@@ -629,6 +493,165 @@ const tags = [
 
 [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';
+
+import React from 'react';
+import { useUrlState } from 'state-in-url/next';
+
+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 } }[];
+};
+
+export const useFormState = ({ searchParams }: { searchParams?: object }) => {
+    const { urlState, setUrl: setUrlBase, reset } = useUrlState(form, {
+      searchParams,
+    });
+
+    // 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']
+
+    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]);
+
+    return { urlState, setUrl, resetUrl: reset };
+};
+  ```
+</details>
+
+<hr />
+
+##### With complex state shape
+
+<details>
+  <Summary>Example</Summary>
+
+```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
+'use client'
+import { useUrlState } from 'state-in-url/next';
+
+import { form } from './form';
+
+function TagsComponent() {
+  // `urlState` will infer from Form type!
+  const { urlState, setUrl } = 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>
+    </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') },
+  },
+];
+```
+
+[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
 
 ### `useUrlStateBase` hook for others routers
@@ -728,6 +751,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/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/react-router/useUrlState/useUrlState.d.ts

@@ -1,4 +1,4 @@
-import { type NavigateOptions } from "react-router-dom";
+import { type NavigateOptions } from "react-router";
 import { type JSONCompatible } from "../../utils";
 /**
  * React-router hook. Returns `urlState`, `setState`, and `setUrl` functions
@@ -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

@@ -1 +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;
+"use strict";var P=require("react");var o=require("react-router");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=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 h={replace:true,preventScrollReset:true};exports.useUrlState=R;

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

@@ -1 +1 @@
-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};
+import s from"react";import{useNavigate as g,useSearchParams as k,useHref as P}from"react-router";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/react-router6/index.d.ts

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

package/dist/react-router6/index.js

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

package/dist/react-router6/index.mjs

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

package/dist/react-router6/useUrlState/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,83 @@
+import { type NavigateOptions } from "react-router-dom";
+import { type JSONCompatible } from "../../utils";
+/**
+ * React-router 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
+ * setUrl((_curr, initialState) => initialState);
+ * // Or
+ * reset();
+ * reset({ replace: true });
+ *  ```
+ *
+ *  * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/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, 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, initial: T) => T)) => void;
+    /**
+     * * Example:
+     * ```ts
+     * setUrl({ name: 'test' });
+     * // or
+     * 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, initial: 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/react-router/useUrlState#reset}
+     */
+    reset: (options?: NavigateOptions & {
+        [key: string]: unknown;
+    }) => void;
+};
+interface Params extends NavigateOptions {
+    useHistory?: boolean;
+    searchParams?: object;
+    replace?: boolean;
+}
+export {};

package/dist/react-router6/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-router6/useUrlState/useUrlState.mjs

@@ -0,0 +1 @@
+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/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/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

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

@@ -1 +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;
+"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "5.1.0",
+  "version": "6.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": {
@@ -31,6 +31,7 @@
     "packages/example-nextjs15",
     "packages/example-react",
     "packages/example-react-router6",
+    "packages/example-react-router7",
     "packages/example-remix2"
   ],
   "files": [
@@ -49,6 +50,11 @@
       "default": "./dist/next/index.mjs",
       "require": "./dist/next/index.js"
     },
+    "./react-router6": {
+      "types": "./dist/react-router6/index.d.ts",
+      "default": "./dist/react-router6/index.mjs",
+      "require": "./dist/react-router6/index.js"
+    },
     "./react-router": {
       "types": "./dist/react-router/index.d.ts",
       "default": "./dist/react-router/index.mjs",
@@ -118,7 +124,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 packages/example-remix2/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-react-router7/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",
@@ -172,6 +178,7 @@
         "dev:react",
         "dev:remix2",
         "dev:router6",
+        "dev:router7",
         "dev:nextjs15"
       ],
       "service": {
@@ -196,6 +203,10 @@
       "command": "cd packages/example-react-router6 && npm run dev",
       "service": true
     },
+    "dev:router7": {
+      "command": "cd packages/example-react-router7 && npm run dev",
+      "service": true
+    },
     "dev:remix2": {
       "command": "cd packages/example-remix2 && PORT=3003 npm run dev",
       "service": true
@@ -220,6 +231,12 @@
         "build"
       ]
     },
+    "build:router7": {
+      "command": "cd packages/example-react-router7 && npm run build",
+      "dependencies": [
+        "build"
+      ]
+    },
     "build:remix2": {
       "command": "cd packages/example-remix2 && npm run build",
       "dependencies": [
@@ -271,6 +288,17 @@
       "command": "npx vite preview --port 5181 packages/example-react-router6",
       "service": true
     },
+    "start:router7": {
+      "command": "npx vite preview --port 5183 packages/example-react-router7",
+      "dependencies": [
+        "build:router7"
+      ],
+      "service": true
+    },
+    "start:router7:ci": {
+      "command": "npx vite preview --port 5183 packages/example-react-router7",
+      "service": true
+    },
     "start:remix2": {
       "command": "cd packages/example-remix2 && npm run start",
       "dependencies": [
@@ -299,6 +327,7 @@
         "start:demo",
         "start:react",
         "start:router6",
+        "start:router7",
         "start:remix2"
       ],
       "service": true
@@ -309,6 +338,7 @@
         "start:demo:ci",
         "start:react:ci",
         "start:router6:ci",
+        "start:router7:ci",
         "start:remix2:ci"
       ],
       "service": true
@@ -324,6 +354,7 @@
         "build:demo:tests",
         "build:next15",
         "build:router6",
+        "build:router7",
         "build:remix2"
       ]
     },
@@ -488,5 +519,8 @@
     "decode url",
     "fast"
   ],
-  "packageManager": "npm@10.8.2"
+  "packageManager": "npm@10.8.2",
+  "dependencies": {
+    "react-router": "^7.7.1"
+  }
 }