state-in-url 1.2.0 → 1.3.0-beta.2

package/README.CN.md

@@ -1,11 +1,9 @@
-[English](./README.md) | [한국어](./README.KO.md) | 简体中文
-
 <h1 align="center">state-in-url</h1>
 
 <div align="center">
   <img src="/assets/logo.svg?raw=true" alt="库标志"/>
 
-  <div>轻松在不相关的 React 组件之间共享状态，具有 IDE 自动完成和 TS 验证功能。无需任何麻烦或样板代码。</div>
+  <div>轻松在不相关的React组件之间共享状态，具有IDE自动完成和TS验证功能。无需任何麻烦或样板代码。</div>
 </div>
 
 <div align="center">
@@ -20,50 +18,51 @@
 
 <div align="center">
 
-<h4 align="center">如果发现bug，请不要犹豫，立即提出问题</h4>
+<h4 align="center">如果发现bug，请随时提出issue</h4>
 
 ![演示-gif](https://github.com/asmyshlyaev177/state-in-url/assets/19854148/c9802601-4d42-4362-b3e4-37ff87c3b97f)
 
-<a href="https://state-in-url-asmyshlyaev177.vercel.app/" target="_blank">DEMO</a> |
+<a href="https://state-in-url-asmyshlyaev177.vercel.app/" target="_blank">演示</a> |
 <a href ="https://codesandbox.io/p/github/asmyshlyaev177/state-in-url/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyk5bd9y00062v6jspcfrkx7%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyk5bd9x00022v6jyg71cr9e%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyk5bd9x00042v6jsos2y043%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyk5bd9x00052v6j5r632b12%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyk5bd9x00022v6jyg71cr9e%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyk5bd9w00012v6j83rq3bvo%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clyk5bd9x00022v6jyg71cr9e%2522%252C%2522activeTabId%2522%253A%2522clyk5bd9w00012v6j83rq3bvo%2522%257D%252C%2522clyk5bd9x00052v6j5r632b12%2522%253A%257B%2522id%2522%253A%2522clyk5bd9x00052v6j5r632b12%2522%252C%2522activeTabId%2522%253A%2522clyk5bdjx000b2v6jfc8ae464%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522SETUP_TASKS%2522%252C%2522id%2522%253A%2522clyk5bdjx000b2v6jfc8ae464%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A2222%252C%2522id%2522%253A%2522clyk5cjbo004d2v6j3u55k74g%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522ENV_SETUP%2522%252C%2522id%2522%253A%2522clyk5h8dp000r2v6j0r7kc7qq%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clyk5bd9x00042v6jsos2y043%2522%253A%257B%2522id%2522%253A%2522clyk5bd9x00042v6jsos2y043%2522%252C%2522activeTabId%2522%253A%2522clyk5cbuv001q2v6joegrxxv6%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyk5bd9x00032v6jtfhj316o%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522NEW_TERMINAL%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clyk5cbuv001q2v6joegrxxv6%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522cleanupDist%2522%252C%2522id%2522%253A%2522clyk5dgvo005i2v6jj950sxft%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D" target="_blank">Demo on Codesandbox</a>
 
 <hr />
 
-给项目加个 ⭐️ 以示支持！
+添加⭐️来支持项目！
 
 <hr />
 
 </div>
 
-## 为什么使用 state-in-url?
+## 为什么使用state-in-url？
 
-`state-in-url` 是一个简单的状态管理工具，具有 URL 同步功能。
+`state-in-url`是一个简单的状态管理工具，可以与URL同步。在不相关的React组件之间共享复杂状态，将状态同步到URL，对TS友好，兼容NextJS。
 
 # 使用场景
 
-- 🙃 在不改变 URL 的情况下在不同组件间共享状态，是信号和其他状态管理工具的良好替代品
-- 🔗 包含完整应用程序状态的可共享 URL
-- 🔄 在页面重新加载时轻松保持状态
-- 🧠 在不相关的客户端组件间同步数据
-- 🧮 在 URL 中存储未保存的用户表单
+- 🙃 在不改变URL的情况下，在不同组件之间共享状态，是信号和其他状态管理工具的良好替代方案
+- 🔗 包含完整应用程序状态的可共享URL
+- 🔄 在页面重新加载之间轻松持久化状态
+- 🧠 在不相关的客户端组件之间同步数据
+- 🧮 在URL中存储未保存的用户表单
 
 # 特性
 
-- 🧩 **简单**: 无需提供者、减速器、样板代码或新概念
-- 📘 **TypeScript 支持和类型安全**: 保留数据类型和结构，通过 IDE 建议、强类型和 JSDoc 注释增强开发体验
-- ⚛️ **框架灵活性**: 为 Next.js 和 React.js 应用程序提供单独的钩子，以及纯 JS 函数
-- ⚙ **测试充分**: 单元测试和 Playwright 测试
-- ⚡ **快速**: 最小化重新渲染
-- 🪶 **轻量级**: 零依赖，占用空间小
+- 🧩 **简单**：无需提供者、reducers、样板代码或新概念
+- 📘 **TypeScript支持和类型安全**：保留数据类型和结构，通过IDE建议、强类型和JSDoc注释增强开发体验
+- ⚛️ **框架灵活性**：为Next.js和React.js应用程序提供单独的钩子，以及用于纯JS的函数
+- ⚙ **经过充分测试**：单元测试和Playwright测试
+- ⚡ **快速**：最少的重新渲染
+- 🪶 **轻量级**：零依赖，占用空间小
 
 ## 目录
 
 - [安装](#安装)
-- [Next.js 的 `useUrlState`](#nextjs-的-useurlstate-钩子)
-- [React.js 的 `useUrlEncode`](#reactjs-的-useurlencode-钩子)
-- [纯 JS 使用的 `encodeState` 和 `decodeState`](#纯-js-使用的-encodestate-和-decodestate-辅助函数)
-- [自动同步状态到 URL](#自动同步状态)
-- [低级 `encode` 和 `decode` 函数](#encode-和-decode-辅助函数)
+- [Next.js的`useUrlState`](#nextjs的useurlstate钩子)
+- [React.js的`useSharedState`](#reactjs的usesharedstate钩子)
+- [React.js的`useUrlEncode`](#reactjs的useurlencode钩子)
+- [纯JS使用的`encodeState`和`decodeState`](#纯js使用的encodestate和decodestate辅助函数)
+- [自动同步状态到URL](#自动同步状态)
+- [低级`encode`和`decode`函数](#encode和decode辅助函数)
 - [最佳实践](#最佳实践)
 - [注意事项](#注意事项)
 - [联系与支持](#联系与支持)
@@ -84,15 +83,15 @@ yarn add state-in-url
 pnpm add state-in-url
 ```
 
-### 2. 编辑 tsconfig.json
+### 2. 编辑tsconfig.json
 
-在 `tsconfig.json` 中设置 `"moduleResolution": "Node16"` 或 `"moduleResolution": "NodeNext"`
+在`tsconfig.json`的`compilerOptions`中设置`"moduleResolution": "Node16"`或`"moduleResolution": "NodeNext"`
 
-## Next.js 的 useUrlState 钩子
+## Next.js的useUrlState钩子
 
-[文档](packages/urlstate/useUrlState/README.md)
+[文档](ackages/urlstate/next/useUrlState#api)
 
-`useUrlState` 是一个为 Next.js 应用程序设计的自定义 React 钩子，使客户端组件之间的通信变得简单。它允许你共享任何复杂的状态并将其与 URL 搜索参数同步，提供了一种在页面重新加载时保持状态和通过 URL 共享应用程序状态的方法。
+`useUrlState`是一个为Next.js应用程序设计的自定义React钩子，使客户端组件之间的通信变得简单。它允许你共享任何复杂的状态并将其与URL搜索参数同步，提供了一种在页面重新加载之间持久化状态并通过URL共享应用程序状态的方法。
 
 ### 使用示例
 
@@ -112,33 +111,33 @@ pnpm add state-in-url
 
 ```typescript
 'use client'
-import { useUrlState } from 'state-in-url';
+import { useUrlState } from 'state-in-url/next';
 
 import { countState } from './countState';
 
 function MyComponent() {
-  // 用于从服务器组件使用 searchParams
+  // 用于从服务器组件使用searchParams
   // 例如 export default async function Home({ searchParams }: { searchParams: object }) {
   // const { state, updateState, updateUrl } = useUrlState(countState, searchParams);
   const { state, updateState, updateUrl } = useUrlState(countState);
 
-  // 不会让你意外地直接修改状态，需要 TS
+  // 不允许你意外地直接修改状态，需要TS
   // state.count = 2 // <- 错误
 
   return (
     <div>
-      <p>计数: {state.count}</p>
+      <p>计数：{state.count}</p>
 
       <button onClick={() => updateUrl({ count: state.count + 1 }), { replace: true }}>
-        增加 (更新 URL)
+        增加（更新URL）
       </button>
 
-      // 与 React.useState 相同的 API
+      // 与React.useState相同的API
       <button onClick={() => updateState(currState => ({...currState, count: currState.count + 1 }) )}>
-        增加 (仅本地)
+        增加（仅本地）
       </button>
       <button onClick={() => updateUrl()}>
-        同步更改到 URL
+        同步更改到URL
         // 或者不同步，只共享状态
       </button>
 
@@ -168,12 +167,12 @@ export const userSettings: UserSettings {
 
 ```typescript
 'use client'
-import { useUrlState } from 'state-in-url';
+import { useUrlState } from 'state-in-url/next';
 
 import { userSettings } from './userSettings';
 
 function SettingsComponent() {
-  // `state` 将从 UserSettings 类型推断!
+  // `state` 将从UserSettings类型推断！
   const { state, updateUrl } = useUrlState(userSettings);
 
   const toggleTheme = () => {
@@ -183,12 +182,12 @@ function SettingsComponent() {
     }));
   };
 
-  // 空闲时同步状态到 url
+  // 空闲时同步状态到URL
   const timer = React.useRef(0 as unknown as NodeJS.Timeout);
   React.useEffect(() => {
     clearTimeout(timer.current);
     timer.current = setTimeout(() => {
-      // 将按内容而不是引用比较状态，并仅对新值触发更新
+      // 将通过内容而不是引用比较状态，只为新值触发更新
       updateUrl(state);
     }, 500);
 
@@ -200,10 +199,10 @@ function SettingsComponent() {
   return (
     <div>
       <h2>用户设置</h2>
-      <p>主题: {state.theme}</p>
-      <p>字体大小: {state.fontSize}px</p>
+      <p>主题：{state.theme}</p>
+      <p>字体大小：{state.fontSize}px</p>
       <button onClick={toggleTheme}>切换主题</button>
-      {/* 其他用于更新其他设置的 UI 元素 */}
+      {/* 其他UI元素用于更新其他设置 */}
     </div>
   );
 }
@@ -215,7 +214,7 @@ function Component() {
 
   return (
     <div>
-      <p>通知功能 {state.notifications ? '开启' : '关闭'}</p>
+      <p>通知 {state.notifications ? '开启' : '关闭'}</p>
     </div>
   )
 }
@@ -228,7 +227,7 @@ function Component() {
   React.useEffect(() => {
     clearTimeout(timer.current);
     timer.current = setTimeout(() => {
-      // 将按内容而不是引用比较状态，并仅对新值触发更新
+      // 将通过内容而不是引用比较状态，只为新值触发更新
       updateUrl(state);
     }, 500);
 
@@ -238,11 +237,76 @@ function Component() {
   }, [state, updateUrl]);
 ```
 
-#### 任意状态形状 (不推荐)
+#### 服务器端渲染示例
 
 ```typescript
+export default async function Home({ searchParams }: { searchParams: object }) {
+  return (
+    <Form sp={searchParams} />
+  )
+}
+
+// Form.tsx
 'use client'
-import { useUrlState } from 'state-in-url';
+import React from 'react';
+import { useUrlState } from 'state-in-url/next';
+import { form } from './form';
+
+const Form = ({ sp }: { sp: object }) => {
+  const { state, updateState, updateUrl } = useUrlState(form, sp);
+}
+```
+
+#### 在`layout`组件中使用钩子
+
+这是一个棘手的部分，因为使用app router的nextjs不允许从服务器端访问searchParams。有一个使用中间件的解决方法，但它并不漂亮，而且可能在nextjs更新后停止工作。
+
+```typescript
+// 添加到适当的`layout.tsc`
+export const runtime = 'edge';
+
+// middleware.ts
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const url = request.url?.includes('_next') ? null : request.url;
+  const sp = url?.split?.('?')?.[1] || '';
+
+  const response = NextResponse.next();
+
+  if (url !== null) {
+    response.headers.set('searchParams', sp);
+  }
+
+  return response;
+}
+
+// 目标layout组件
+import { headers } from 'next/headers';
+import { decodeState } from 'state-in-url/encodeState';
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const sp = headers().get('searchParams') || '';
+
+  return (
+    <div>
+      <Comp1 searchParams={decodeState(sp, stateShape)} />
+      {children}
+    </div>
+  );
+}
+```
+
+#### 任意状态形状示例（不推荐）
+
+```typescript
+'use client'
+import { useUrlState } from 'state-in-url/next';
 
 const someObj = {};
 
@@ -251,55 +315,73 @@ function SettingsComponent() {
 }
 ```
 
-## React.js 的 `useUrlEncode` 钩子
+## React.js的`useSharedState`钩子
+用于在任何React组件之间共享状态的钩子，已在Next.js和Vite中测试。
+
+```typescript
+'use client'
+import { useSharedState } from 'state-in-url';
+
+export const someState = { name: '' };
+
+function SettingsComponent() {
+  const { state, setState } = useSharedState(someState);
+}
+```
+
+[文档](packages/urlstate/useSharedState/README.md)
+
+## React.js的`useUrlEncode`钩子
 
 [文档](packages/urlstate/useUrlEncode/README.md)
 
-## 纯 JS 使用的 `encodeState` 和 `decodeState` 辅助函数
+## 纯JS使用的`encodeState`和`decodeState`辅助函数
 
 [文档](packages/urlstate/encodeState/README.md)
 
-## `encode` 和 `decode` 辅助函数
+## `encode`和`decode`辅助函数
 
 [文档](packages/urlstate/encoder/README.md)
 
 ## 最佳实践
 
-- 将状态形状定义为常量以确保一致性
-- 使用 TypeScript 以增强类型安全性和自动完成功能
-- 避免在 URL 参数中存储敏感信息
-- 对频繁更新使用 `updateState`，使用 `updateUrl` 同步更改到 url
-- 使用此[扩展](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)以获得可读的 TS 错误
+- 将您的状态形状定义为常量，以确保一致性
+- 使用TypeScript以增强类型安全性和自动完成功能
+- 避免在URL参数中存储敏感信息
+- 使用`updateState`进行频繁更新，使用`updateUrl`同步更改到URL
+- 在Next.js中使用`Suspence`包装客户端组件
+- 使用这个[扩展](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)以获得可读的TS错误
 
 ## 注意事项
 
-1. 只能传递可序列化的值，`Function`、`BigInt` 或 `Symbol` 不起作用，`ArrayBuffer` 之类的东西也可能不行。
-2. Vercel 服务器将头部大小（查询字符串和其他内容）限制为 **14KB**，因此请将 URL 状态保持在约 5000 字以内。 https://vercel.com/docs/errors/URL_TOO_LONG
+1. 只能传递可序列化的值，`Function`、`BigInt`或`Symbol`不会工作，可能类似`ArrayBuffer`的东西也不行。
+2. Vercel服务器限制头部（查询字符串和其他内容）的大小为**14KB**，所以保持您的URL状态在~5000个单词以下。https://vercel.com/docs/errors/URL_TOO_LONG
+3. 已在使用app router的`next.js` 14中测试，不计划支持pages。
 
 ## 本地运行
 
-克隆此仓库，运行 `npm install` 然后
+克隆此仓库，运行`npm install`然后
 
 ```sh
 npm run dev
 ```
 
-转到 [localhost:3000](http://localhost:3000)
+转到[localhost:3000](http://localhost:3000)
 
 ## 联系与支持
 
-- 创建 [GitHub issue](https://github.com/asmyshlyaev177/state-in-url/issues) 以报告错误、请求功能或提出问题
+- 创建[GitHub issue](https://github.com/asmyshlyaev177/state-in-url/issues)报告bug、提出功能请求或提问
 
 ## [更新日志](https://github.com/asmyshlyaev177/state-in-url/blob/main/CHANGELOG.md)
 
 ## 许可证
 
-本项目采用 [MIT 许可证](https://github.com/asmyshlyaev177/state-in-url/blob/main/LICENSE)。
+本项目采用[MIT许可证](https://github.com/asmyshlyaev177/state-in-url/blob/main/LICENSE)。
 
 ## 灵感来源
 
-[在 Vue 中使用 URL 存储状态](https://dev.to/jacobandrewsky/using-url-to-store-state-in-vue-275c)
+[在Vue中使用URL存储状态](https://dev.to/jacobandrewsky/using-url-to-store-state-in-vue-275c)
 
-[在 URL 中存储状态](https://antonz.org/storing-state/)
+[在URL中存储状态](https://antonz.org/storing-state/)
 
 [NextJS useSearchParams](https://nextjs.org/docs/app/api-reference/functions/use-search-params)

package/README.md

@@ -98,7 +98,7 @@ In `tsconfig.json` in `compilerOptions` set `"moduleResolution": "Node16"` or `"
 
 ## useUrlState hook for Next.js
 
-[Docs](packages/urlstate/useUrlState/README.md)
+[Docs](ackages/urlstate/next/useUrlState#api)
 
 `useUrlState` is a custom React hook for Next.js applications that make communication between client components easy. It allows you to share any complex state and sync it with the URL search parameters, providing a way to persist state across page reloads and share application state via URLs.
 
@@ -120,7 +120,7 @@ In `tsconfig.json` in `compilerOptions` set `"moduleResolution": "Node16"` or `"
 
 ```typescript
 'use client'
-import { useUrlState } from 'state-in-url';
+import { useUrlState } from 'state-in-url/next';
 
 import { countState } from './countState';
 
@@ -176,7 +176,7 @@ export const userSettings: UserSettings {
 
 ```typescript
 'use client'
-import { useUrlState } from 'state-in-url';
+import { useUrlState } from 'state-in-url/next';
 
 import { userSettings } from './userSettings';
 
@@ -246,11 +246,78 @@ function Component() {
   }, [state, updateUrl]);
 ```
 
+#### With server side rendering
+
+```typescript
+export default async function Home({ searchParams }: { searchParams: object }) {
+  return (
+    <Form sp={searchParams} />
+  )
+}
+
+// Form.tsx
+'use client'
+import React from 'react';
+import { useUrlState } from 'state-in-url/next';
+import { form } from './form';
+
+const Form = ({ sp }: { sp: object }) => {
+  const { state, updateState, updateUrl } = useUrlState(form, sp);
+}
+```
+
+#### Using hook in `layout` component
+
+That a tricky part, since nextjs with app router doesn't allow to access searchParams from server side. There is workaround with using middleware, but it isn't pretty and can stop working after nextjs update.
+
+```typescript
+// add to appropriate `layout.tsc`
+export const runtime = 'edge';
+
+// middleware.ts
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const url = request.url?.includes('_next') ? null : request.url;
+  const sp = url?.split?.('?')?.[1] || '';
+
+  const response = NextResponse.next();
+
+  if (url !== null) {
+    response.headers.set('searchParams', sp);
+  }
+
+  return response;
+}
+
+// Target layout component
+import { headers } from 'next/headers';
+import { decodeState } from 'state-in-url/encodeState';
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const sp = headers().get('searchParams') || '';
+
+  return (
+    <div>
+      <Comp1 searchParams={decodeState(sp, stateShape)} />
+      {children}
+    </div>
+  );
+}
+
+
+```
+
 #### With arbitrary state shape (not recommended)
 
 ```typescript
 'use client'
-import { useUrlState } from 'state-in-url';
+import { useUrlState } from 'state-in-url/next';
 
 const someObj = {};
 
@@ -293,12 +360,14 @@ function SettingsComponent() {
 - Use TypeScript for enhanced type safety and autocomplete
 - Avoid storing sensitive information in URL parameters
 - Use `updateState` for frequent updates and `updateUrl` to sync changes to url
+- Use `Suspence` to wrap client components in Next.js
 - Use this [extension](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) for readable TS errors
 
 ## Gothas
 
 1. Can pass only serializable values, `Function`, `BigInt` or `Symbol` won't work, probably things like `ArrayBuffer` neither.
 2. Vercel servers limit size of headers (query string and other stuff) to **14KB**, so keep your URL state under ~5000 words. https://vercel.com/docs/errors/URL_TOO_LONG
+3. Tested with `next.js` 14 with app router, no plans to support pages.
 
 ## Run locally
 

package/dist/constants/constants.mjs

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

package/dist/encodeState/encodeState.mjs

@@ -0,0 +1 @@
+import{encode as t,decode as r}from"../encoder/encoder.mjs";import{getParams as n}from"../utils.mjs";function e(r,e,o){const i=n(o);return Object.entries(r||{}).forEach((([r,n])=>{const o=e?.[r];JSON.stringify(n)!==JSON.stringify(o)&&i.set(r,t(n))})),i.toString()}function o(t,e){return{...e||{},...Object.fromEntries([...n(t).entries()].map((([t,n])=>{const o=e?.[t];return[t,r(n,o)??o]})))}}export{o as decodeState,e as encodeState};

package/dist/{urlstate/encoder → encoder}/encoder.d.ts

@@ -33,4 +33,11 @@ export declare const reviver: (key: string, value: unknown) => unknown;
  *  * Github {@link https://github.com/asmyshlyaev177/state-in-url}
  */
 export declare function parseJSON<T extends JSONCompatible>(jsonString: string, fallbackValue?: T): T | Primitive | undefined;
+/**
+ * Parses the Next.js server-side `searchParams` into an object.
+ *
+ * @param {object | undefined} sp - The server-side query string to parse.
+ * @param {T} defaults - The default values to use if parsing fails.
+ * @return {T} - The parsed object or the default values.
+ */
 export declare function parseSsrQs<T extends JSONCompatible>(sp: object | undefined, defaults: T): T;

package/dist/encoder/encoder.mjs

@@ -0,0 +1 @@
+import{SYMBOLS as t}from"../constants/constants.mjs";import{typeOf as r}from"../utils.mjs";function n(n){switch(r(n)){case"function":case"symbol":return"";case"date":return t.date+n.toISOString();case"string":return`${t.string}${encodeURIComponent(n)}`;case"number":return t.number+String(n);case"boolean":return t.boolean+String(n);case"object":case"array":return JSON.stringify(n,s).replaceAll('"',"'");case"null":return t.null;case"undefined":return t.undefined;default:return String(n)}}function e(t,r){return a(t.replaceAll("'",'"'),r)}const s=(t,e)=>{const s=r(e);return t&&"object"!==s&&"array"!==s?n(e):e},o=r=>r===t.null?null:r!==t.undefined?r?.startsWith?.(t.number)?Number.parseFloat(r.replace(t.number,"")):r?.startsWith?.(t.boolean)?!!r.includes("true"):r?.startsWith?.(t.date)?new Date(r.slice(1)):r?.startsWith?.(t.string)?decodeURIComponent(r).replace(/^◖/,""):c:void 0,c=Symbol("isError"),u=(t,r)=>{const n="string"==typeof r,e=n&&o(r);return e===c?r:t&&n?e:r};function a(t,r){try{return JSON.parse(t,u)}catch{const n=o(t);return n!==c?n:r}}function i(t,r){return{...r,...f(JSON.stringify(t),r)}}const l=(t,r)=>{const n="string"==typeof r,s=n&&e(r?.replaceAll?.("'",'"'));return t&&n?s:r};function f(t,r){try{return JSON.parse(t,l)}catch{const n=o(t);return n!==c?n:r}}export{e as decode,o as decodePrimitive,n as encode,c as errorSym,a as parseJSON,i as parseSsrQs,s as replacer,u as reviver};

package/dist/index.d.ts

@@ -1 +1,9 @@
-export { encodeState, decodeState, encode, decode, type Type, useUrlEncode, useUrlState, } from './urlstate';
+import { decode, encode, parseSsrQs } from './encoder';
+import { decodeState, encodeState } from './encodeState';
+import { useUrlState } from './next/useUrlState';
+import { useSharedState } from './useSharedState';
+import { useUrlEncode } from './useUrlEncode';
+import { useUrlStateBase } from './useUrlStateBase';
+import { isSSR, type JSONCompatible, type Type, typeOf } from './utils';
+export { decode, decodeState, encode, encodeState, isSSR, parseSsrQs, typeOf, useSharedState, useUrlEncode, useUrlState, useUrlStateBase, };
+export type { JSONCompatible, Type };

package/dist/index.mjs

@@ -1 +1 @@
-import t from"react";import{useRouter as e}from"next/navigation";const n={string:"◖",boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"},r=t=>{const e=null===t,n=Array.isArray(t),r=t instanceof Date;return(e?"null":r&&"date")||n&&"array"||!e&&!r&&!n&&"object"==typeof t&&"object"||typeof t},c=()=>"undefined"==typeof window,o=t=>new URLSearchParams("string"==typeof t?s(t):t?.toString?.()||""),s=t=>t.split("?")?.[1]||t||"",a=(t,e)=>JSON.stringify(t)===JSON.stringify(e);function u(t){switch(r(t)){case"function":case"symbol":return"";case"date":return n.date+t.toISOString();case"string":return`${n.string}${encodeURIComponent(t)}`;case"number":return n.number+String(t);case"boolean":return n.boolean+String(t);case"object":case"array":return JSON.stringify(t,l).replaceAll('"',"'");case"null":return n.null;case"undefined":return n.undefined;default:return String(t)}}function i(t,e){return function(t,e){try{return JSON.parse(t,g)}catch{const n=f(t);return n!==d?n:e}}(t.replaceAll("'",'"'),e)}const l=(t,e)=>{const n=r(e);return t&&"object"!==n&&"array"!==n?u(e):e},f=t=>t===n.null?null:t!==n.undefined?t?.startsWith?.(n.number)?Number.parseFloat(t.replace(n.number,"")):t?.startsWith?.(n.boolean)?!!t.includes("true"):t?.startsWith?.(n.date)?new Date(t.slice(1)):t?.startsWith?.(n.string)?decodeURIComponent(t).replace(/^◖/,""):d:void 0,d=Symbol("isError"),g=(t,e)=>{const n="string"==typeof e,r=n&&f(e);return r===d?e:t&&n?r:e};const p=(t,e)=>{const n="string"==typeof e,r=n&&i(e?.replaceAll?.("'",'"'));return t&&n?r:e};function y(t,e){try{return JSON.parse(t,p)}catch{const n=f(t);return n!==d?n:e}}function b(t,e,n){const r=o(n);return Object.entries(t||{}).forEach((([t,n])=>{const c=e?.[t];JSON.stringify(n)!==JSON.stringify(c)&&r.set(t,u(n))})),r.toString()}function h(t,e){return{...e||{},...Object.fromEntries([...o(t).entries()].map((([t,n])=>{const r=e?.[t];return[t,i(n,r)??r]})))}}const S=new WeakMap,m=new WeakMap,w={get:t=>m.get(t)||[],add(t,e){const n=this.get(t);return m.set(t,n.concat(e)),()=>this.remove(t,e)},remove(t,e){const n=this.get(t).filter((t=>t!==e));n.length?m.set(t,n):m.delete(t)}},O={get:function(t){return S.get(t)},set:function(t,e){S.set(t,e)}},E=t.useInsertionEffect||t.useEffect;function N(e){const n=t.useCallback((function(t,n){return"object"===r(t)?b(t,e,n):""}),[e]);return{parse:t.useCallback((function(t){return h(t,e)}),[e]),stringify:n}}function v(n,r){const{parse:o,stringify:s}=N(n),{state:u,getState:i,setState:l}=function(e,n){const r=t.useRef(e),[o,s]=t.useState((()=>{if(c())return n?n?.():r.current;const t=n?.()||O.get(r.current)||r.current,e=O.get(r.current);return a(e,t)||O.set(r.current,t),t})),u=t.useCallback((t=>{const e=O.get(r.current);if("function"==typeof t){const n=t(e);if(a(e,n))return;O.set(r.current,n),w.get(r.current).forEach((t=>{t()}))}else{if(a(e,t))return;O.set(r.current,t),w.get(r.current).forEach((t=>{t()}))}}),[]);return E((()=>{const t=w.add(r.current,(()=>{s(O.get(r.current)||r.current)}));return()=>{t()}}),[]),{state:o,getState:t.useCallback((()=>O.get(r.current)||r.current),[]),setState:u}}(n,(()=>{return c()?(t=r,e=n,{...e,...y(JSON.stringify(t),e)}):o(window.location.search);var t,e})),f=e();t.useInsertionEffect((()=>{const t=()=>{const t=o(window.location.search);l(t)},e="popstate";return window.addEventListener(e,t),()=>{window.removeEventListener(e,t)}}),[l]);const d=t.useCallback(((t,e)=>{const n=window.location.search,r=`${window.location.pathname}${n.length&&!n.includes("?")?"?":""}${n}`;let c,o;"function"==typeof t?(c=t(i()),o=s(c)):(c=t??i(),o=s(c)),l(c);const a=`${window.location.pathname}${o.length?"?":""}${o}`;if(r!==a){const{replace:t,...n}=e||{};f[t?"replace":"push"](a,{scroll:!1,...n})}}),[f,s,i]);return{updateState:l,updateUrl:d,state:u}}export{i as decode,h as decodeState,u as encode,b as encodeState,N as useUrlEncode,v as useUrlState};
+export{decode,encode,parseSsrQs}from"./encoder/encoder.mjs";export{decodeState,encodeState}from"./encodeState/encodeState.mjs";export{useUrlState}from"./next/useUrlState/useUrlState.mjs";export{useSharedState}from"./useSharedState/useSharedState.mjs";export{useUrlEncode}from"./useUrlEncode/useUrlEncode.mjs";export{useUrlStateBase}from"./useUrlStateBase/useUrlStateBase.mjs";export{isSSR,typeOf}from"./utils.mjs";

package/dist/{urlstate → next}/useUrlState/useUrlState.d.ts

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/navigation';
-import { type DeepReadonly, type JSONCompatible } from '../utils';
+import { type DeepReadonly, type JSONCompatible } from '../../utils';
 /**
  * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions
  *
@@ -10,13 +10,15 @@ import { type DeepReadonly, type JSONCompatible } from '../utils';
  * ```ts
  * export const form = { name: '' };
  * const { state, updateState, updateUrl } = useUrlState(form);
+ * // for nextjs seerver components
+ * // const { state, updateState, updateUrl } = useUrlState(form, searchParams);
  *
  * updateState({ name: 'test' });
  * // by default it's uses router.push with scroll: false
  * updateUrl({ name: 'test' }, { replace: true, scroll: true });
  *  ```
  *
- *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/useUrlState#api}
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/next/useUrlState#api}
  */
 export declare function useUrlState<T extends JSONCompatible>(defaultState: T, searchParams?: object): {
     /**
@@ -27,7 +29,7 @@ export declare function useUrlState<T extends JSONCompatible>(defaultState: T, s
      * updateState(curr => ({ ...curr, name: 'test' }) );
      *  ```
      *
-     *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/useUrlState#updatestate}
+     *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/next/useUrlState#updatestate}
      */
     updateState: (value: T | DeepReadonly<T> | ((currState: T) => T)) => void;
     /**
@@ -38,13 +40,14 @@ export declare function useUrlState<T extends JSONCompatible>(defaultState: T, s
      * updateUrl(curr => ({ ...curr, name: 'test' }), { replace: true, scroll: false  } );
      *  ```
      *
-     *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/useUrlState#updateurl}
+     *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/next/useUrlState#updateurl}
      */
     updateUrl: (value?: T | DeepReadonly<T> | ((currState: T) => T) | undefined, options?: Options) => void;
-    state: DeepReadonly<T>;
+    state: DeepReadonly<DeepReadonly<T>>;
+    getState: () => T;
 };
 type Router = ReturnType<typeof useRouter>;
-type RouterOptions = NonNullable<Parameters<Router['push']>[1]>;
+type RouterOptions = NonNullable<Parameters<Router['push']>[1] | Parameters<Router['replace']>[1]>;
 interface Options extends RouterOptions {
     replace?: boolean;
 }

package/dist/next/useUrlState/useUrlState.mjs

@@ -0,0 +1 @@
+import{useRouter as t,useSearchParams as e}from"next/navigation";import r from"react";import{parseSsrQs as a}from"../../encoder/encoder.mjs";import{useUrlStateBase as o}from"../../useUrlStateBase/useUrlStateBase.mjs";function s(s,m){const n=t(),{state:u,updateState:c,updateUrl:i,getState:p}=o(s,n,m),f=r.useCallback(((t,e)=>{i(t,{scroll:!1,...e})}),[i]),l=e();return r.useEffect((()=>{c(a(Object.fromEntries([...l.entries()]),s))}),[l]),{updateState:c,updateUrl:f,state:u,getState:p}}export{s as useUrlState};

package/dist/subscribers.mjs

@@ -0,0 +1 @@
+const e=new WeakMap,t=new WeakMap,n={get:e=>t.get(e)||[],add(e,n){const s=this.get(e);return t.set(e,s.concat(n)),()=>this.remove(e,n)},remove(e,n){const s=this.get(e).filter((e=>e!==n));s.length?t.set(e,s):t.delete(e)}},s={get:function(t){return e.get(t)},set:function(t,n){e.set(t,n)}};export{s as stateMap,n as subscribers};

package/dist/useInsertionEffect.mjs

@@ -0,0 +1 @@
+import e from"react";const t=e.useInsertionEffect||e.useEffect;export{t as useInsertionEffect};

package/dist/useSharedState/useSharedState.mjs

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

package/dist/useUrlEncode/useUrlEncode.mjs

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

package/dist/useUrlStateBase/index.d.ts

@@ -0,0 +1 @@
+export * from './useUrlStateBase';

package/dist/useUrlStateBase/useUrlStateBase.d.ts

@@ -0,0 +1,31 @@
+import { type DeepReadonly, type JSONCompatible } from '../utils';
+type Router = {
+    push: (href: string, opts: object) => void;
+    replace: (href: string, opts: object) => void;
+};
+/**
+ * Base hook to integrate it with different routers
+ *
+ * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
+ * @param {Router} [router] Router object with `push` and `replace` methods
+ * @param {?SearchParams<T>} [searchParams] searchParams from Next server component
+ *
+ * * Example:
+ * ```ts
+ * export const form = { name: '' };
+ * const router = { push: () => {}, replace: () => {} };
+ * const { state, updateState, updateUrl } = useUrlStateBase(form, router, sp);
+ *  ```
+ *
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/integrations/packages/urlstate/useUrlStateBase#api}
+ */
+export declare function useUrlStateBase<T extends JSONCompatible>(defaultState: T, router: Router, searchParams?: object): {
+    updateState: (value: T | DeepReadonly<T> | ((currState: T) => T)) => void;
+    updateUrl: (value?: T | DeepReadonly<T> | ((currState: T) => T) | undefined, options?: Options) => void;
+    state: DeepReadonly<T>;
+    getState: () => T;
+};
+interface Options extends Object {
+    replace?: boolean;
+}
+export {};

package/dist/useUrlStateBase/useUrlStateBase.mjs

@@ -0,0 +1 @@
+import t from"react";import{parseSsrQs as e}from"../encoder/encoder.mjs";import{useInsertionEffect as o}from"../useInsertionEffect.mjs";import{useSharedState as n}from"../useSharedState/useSharedState.mjs";import{useUrlEncode as r}from"../useUrlEncode/useUrlEncode.mjs";import{isSSR as s}from"../utils.mjs";function a(a,i,m){const{parse:d,stringify:p}=r(a),{state:l,getState:u,setState:w}=n(a,(()=>s()?e(m,a):d(window.location.search)));o((()=>{const t=()=>{const t=d(window.location.search);w(t)};return window.addEventListener(c,t),()=>{window.removeEventListener(c,t)}}),[w]);const f=t.useCallback(((t,e)=>{const o=window.location.search,n=`${window.location.pathname}${o.length&&!o.includes("?")?"?":""}${o}`;let r,s;"function"==typeof t?(r=t(u()),s=p(r)):(r=t??u(),s=p(r)),w(r);const a=`${window.location.pathname}${s.length?"?":""}${s}`;if(n!==a){const{replace:t,...o}=e||{};i[t?"replace":"push"](a,{...o})}}),[i,p,u]);return{updateState:w,updateUrl:f,state:l,getState:u}}const c="popstate";export{a as useUrlStateBase};

package/dist/utils.mjs

@@ -0,0 +1 @@
+const t=t=>{const e=null===t,n=Array.isArray(t),r=t instanceof Date;return(e?"null":r&&"date")||n&&"array"||!e&&!r&&!n&&"object"==typeof t&&"object"||typeof t},e=()=>"undefined"==typeof window,n=t=>new URLSearchParams("string"==typeof t?r(t):t?.toString?.()||""),r=t=>t.split("?")?.[1]||t||"",o=(t,e)=>JSON.stringify(t)===JSON.stringify(e);export{n as getParams,o as isEqual,e as isSSR,t as typeOf};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "1.2.0",
+  "version": "1.3.0-beta.2",
   "description": "Library to store state in browser URL, includes hook for NextJS, hook for pure React, and low level helpers.",
   "homepage": "https://github.com/asmyshlyaev177/state-in-url#readme",
   "keywords": [
@@ -42,27 +42,35 @@
   "files": [
     "dist"
   ],
-  "main": "dist/index.cjs",
+  "main": "dist/index.mjs",
   "exports": {
-    "import": {
+    ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.mjs"
     },
-    "node": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.mjs"
+    "./next": {
+      "types": "./dist/next/useUrlState/index.d.ts",
+      "default": "./dist/next/useUrlState/useUrlState.mjs"
     },
-    "require": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.cjs"
+    "./encodeState": {
+      "types": "./dist/next/encodeState/index.d.ts",
+      "default": "./dist/next/encodeState/encodeState.mjs"
+    },
+    "./encoder": {
+      "types": "./dist/next/encoder/index.d.ts",
+      "default": "./dist/next/encoder/encoder.mjs"
     },
-    "module": {
-      "types": "./dist/index.mjs",
-      "default": "./dist/index.d.ts"
+    "./useSharedState": {
+      "types": "./dist/next/useSharedState/index.d.ts",
+      "default": "./dist/next/useSharedState/useSharedState.mjs"
     },
-    "default": {
-      "types": "./dist/index.mjs",
-      "default": "./dist/index.d.ts"
+    "./useUrlEncode": {
+      "types": "./dist/next/useUrlEncode/index.d.ts",
+      "default": "./dist/next/useUrlEncode/useUrlEncode.mjs"
+    },
+    "./useUrlStateBase": {
+      "types": "./dist/next/useUrlStateBase/index.d.ts",
+      "default": "./dist/next/useUrlStateBase/useUrlStateBase.mjs"
     }
   },
   "types": "./dist/index.d.ts",
@@ -90,8 +98,7 @@
     "test": {
       "dependencies": [
         "tsc",
-        "test:unit",
-        "kill-next"
+        "test:unit"
       ],
       "command": "npm run test:int -- --retries=1"
     },
@@ -115,7 +122,8 @@
     },
     "dev": {
       "dependencies": [
-        "dev:lib"
+        "dev:lib",
+        "kill-next"
       ],
       "service": true,
       "command": "npm run dev:nextjs"

package/dist/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("next/navigation");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);const o={string:"◖",boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"},s=e=>{const t=null===e,n=Array.isArray(e),r=e instanceof Date;return(t?"null":r&&"date")||n&&"array"||!t&&!r&&!n&&"object"==typeof e&&"object"||typeof e},c=()=>"undefined"==typeof window,u=e=>new URLSearchParams("string"==typeof e?a(e):e?.toString?.()||""),a=e=>e.split("?")?.[1]||e||"",i=(e,t)=>JSON.stringify(e)===JSON.stringify(t);function l(e){switch(s(e)){case"function":case"symbol":return"";case"date":return o.date+e.toISOString();case"string":return`${o.string}${encodeURIComponent(e)}`;case"number":return o.number+String(e);case"boolean":return o.boolean+String(e);case"object":case"array":return JSON.stringify(e,d).replaceAll('"',"'");case"null":return o.null;case"undefined":return o.undefined;default:return String(e)}}function f(e,t){return function(e,t){try{return JSON.parse(e,y)}catch{const n=p(e);return n!==g?n:t}}(e.replaceAll("'",'"'),t)}const d=(e,t)=>{const n=s(t);return e&&"object"!==n&&"array"!==n?l(t):t},p=e=>e===o.null?null:e!==o.undefined?e?.startsWith?.(o.number)?Number.parseFloat(e.replace(o.number,"")):e?.startsWith?.(o.boolean)?!!e.includes("true"):e?.startsWith?.(o.date)?new Date(e.slice(1)):e?.startsWith?.(o.string)?decodeURIComponent(e).replace(/^◖/,""):g:void 0,g=Symbol("isError"),y=(e,t)=>{const n="string"==typeof t,r=n&&p(t);return r===g?t:e&&n?r:t};const b=(e,t)=>{const n="string"==typeof t,r=n&&f(t?.replaceAll?.("'",'"'));return e&&n?r:t};function S(e,t){try{return JSON.parse(e,b)}catch{const n=p(e);return n!==g?n:t}}function h(e,t,n){const r=u(n);return Object.entries(e||{}).forEach((([e,n])=>{const o=t?.[e];JSON.stringify(n)!==JSON.stringify(o)&&r.set(e,l(n))})),r.toString()}function w(e,t){return{...t||{},...Object.fromEntries([...u(e).entries()].map((([e,n])=>{const r=t?.[e];return[e,f(n,r)??r]})))}}const m=new WeakMap,O=new WeakMap,v={get:e=>O.get(e)||[],add(e,t){const n=this.get(e);return O.set(e,n.concat(t)),()=>this.remove(e,t)},remove(e,t){const n=this.get(e).filter((e=>e!==t));n.length?O.set(e,n):O.delete(e)}},E={get:function(e){return m.get(e)},set:function(e,t){m.set(e,t)}},j=r.default.useInsertionEffect||r.default.useEffect;function N(e){const t=r.default.useCallback((function(t,n){return"object"===s(t)?h(t,e,n):""}),[e]);return{parse:r.default.useCallback((function(t){return w(t,e)}),[e]),stringify:t}}exports.decode=f,exports.decodeState=w,exports.encode=l,exports.encodeState=h,exports.useUrlEncode=N,exports.useUrlState=function(e,n){const{parse:o,stringify:s}=N(e),{state:u,getState:a,setState:l}=function(e,t){const n=r.default.useRef(e),[o,s]=r.default.useState((()=>{if(c())return t?t?.():n.current;const e=t?.()||E.get(n.current)||n.current,r=E.get(n.current);return i(r,e)||E.set(n.current,e),e})),u=r.default.useCallback((e=>{const t=E.get(n.current);if("function"==typeof e){const r=e(t);if(i(t,r))return;E.set(n.current,r),v.get(n.current).forEach((e=>{e()}))}else{if(i(t,e))return;E.set(n.current,e),v.get(n.current).forEach((e=>{e()}))}}),[]);return j((()=>{const e=v.add(n.current,(()=>{s(E.get(n.current)||n.current)}));return()=>{e()}}),[]),{state:o,getState:r.default.useCallback((()=>E.get(n.current)||n.current),[]),setState:u}}(e,(()=>{return c()?(t=n,r=e,{...r,...S(JSON.stringify(t),r)}):o(window.location.search);var t,r})),f=t.useRouter();r.default.useInsertionEffect((()=>{const e=()=>{const e=o(window.location.search);l(e)},t="popstate";return window.addEventListener(t,e),()=>{window.removeEventListener(t,e)}}),[l]);const d=r.default.useCallback(((e,t)=>{const n=window.location.search,r=`${window.location.pathname}${n.length&&!n.includes("?")?"?":""}${n}`;let o,c;"function"==typeof e?(o=e(a()),c=s(o)):(o=e??a(),c=s(o)),l(o);const u=`${window.location.pathname}${c.length?"?":""}${c}`;if(r!==u){const{replace:e,...n}=t||{};f[e?"replace":"push"](u,{scroll:!1,...n})}}),[f,s,a]);return{updateState:l,updateUrl:d,state:u}};

package/dist/urlstate/index.d.ts

@@ -1,8 +0,0 @@
-import { decode, encode, parseSsrQs } from './encoder';
-import { decodeState, encodeState } from './encodeState';
-import { useSharedState } from './useSharedState';
-import { useUrlEncode } from './useUrlEncode';
-import { useUrlState } from './useUrlState';
-import { isSSR, type JSONCompatible, type Type, typeOf } from './utils';
-export { decode, decodeState, encode, encodeState, isSSR, parseSsrQs, typeOf, useSharedState, useUrlEncode, useUrlState, };
-export type { JSONCompatible, Type };