state-in-url 2.0.0 → 2.0.2

package/README.CN.md

@@ -1,3 +1,5 @@
+[English](./README.md) | [한국어](./README.KO.md) | 简体中文
+
 <h1 align="center">state-in-url</h1>
 
 <div align="center">

package/README.KO.md

@@ -1,16 +1,19 @@
-[English](./README.md) | 한국어 | [简体中文](./README.CN.md)
+[English] | 한국어 | [简体中文](./README.CN.md)
 
 <h1 align="center">state-in-url</h1>
 
+
 <div align="center">
   <img src="/assets/logo.svg?raw=true" alt="라이브러리 로고"/>
 
-  <div>IDE 자동 완성 및 TS 검증 기능을 갖춘 관련 없는 React 컴포넌트 간 상태 공유를 쉽게 할 수 있습니다. 번거로움이나 보일러플레이트 없이 말이죠.</div>
+  <div>IDE 자동 완성 및 TS 검증과 함께 관련 없는 React 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다. 번거로움이나 보일러플레이트 없이 사용 가능합니다.</div>
 </div>
 
+
 <div align="center">
 <hr />
 
+
 [![npm](https://img.shields.io/npm/v/state-in-url.svg)](https://www.npmjs.com/package/state-in-url)
 ![Tests](https://github.com/asmyshlyaev177/state-in-url/actions/workflows/tests.yml/badge.svg?branch=main)
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/73be54068b7f41b0b74a252579ac09ec)](https://app.codacy.com/gh/asmyshlyaev177/state-in-url/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
@@ -24,46 +27,51 @@
 
 ![데모-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 />
+  <hr />
 
-</div>
+  </div>
 
-## state-in-url을 사용하는 이유?
+  ## state-in-url을 사용해야 하는 이유는?
+
+`state-in-url`은 URL 동기화와 함께 간단한 상태 관리를 제공합니다. 관련 없는 React 컴포넌트 간에 복잡한 상태를 공유하고, 상태를 URL과 동기화하며, TS 친화적이고 NextJS와 호환됩니다.
 
-`state-in-url`은 URL 동기화 기능을 갖춘 간단한 상태 관리 도구입니다.
 
 # 사용 사례
 
-- 🙃 URL을 변경하지 않고 다른 컴포넌트 간 상태 공유, 시그널 및 기타 상태 관리 도구의 좋은 대안
-- 🔗 전체 애플리케이션 상태를 포함한 공유 가능한 URL
-- 🔄 페이지 새로고침 시 쉬운 상태 유지
+- 🙃 URL을 변경하지 않고 다른 컴포넌트 간에 상태를 공유합니다. 시그널 및 기타 상태 관리 도구의 대안으로 좋습니다.
+- 🔗 전체 애플리케이션 상태가 포함된 공유 가능한 URL
+- 🔄 페이지 새로고침 시 상태를 쉽게 유지
 - 🧠 관련 없는 클라이언트 컴포넌트 간 데이터 동기화
-- 🧮 URL에 저장되지 않은 사용자 양식 저장
+- 🧮 저장되지 않은 사용자 양식을 URL에 저장
 
 # 특징
 
-- 🧩 **간단함**: 프로바이더, 리듀서, 보일러플레이트 또는 새로운 개념 없음
-- 📘 **TypeScript 지원 및 타입 안전성**: 데이터 타입과 구조 보존, IDE 제안, 강력한 타이핑 및 JSDoc 주석을 통한 개발자 경험 향상
-- ⚛️ **프레임워크 유연성**: Next.js 및 React.js 애플리케이션을 위한 별도의 훅, 그리고 순수 JS를 위한 함수
-- ⚙ **잘 테스트됨**: 단위 테스트 및 Playwright 테스트
+- 🧩 **간단함**: 프로바이더, 리듀서, 보일러플레이트 또는 새로운 개념이 필요 없습니다.
+- 📘 **TypeScript 지원 및 타입 안전성**: 데이터 타입과 구조를 보존하고, IDE 제안, 강력한 타입 지정 및 JSDoc 주석으로 개발자 경험을 향상시킵니다.
+- ⚛️ **프레임워크 유연성**: Next.js와 React.js 애플리케이션을 위한 별도의 훅과 순수 JS를 위한 함수 제공
+- ⚙ **철저한 테스트**: 단위 테스트 및 Playwright 테스트
 - ⚡ **빠름**: 최소한의 리렌더링
-- 🪶 **경량**: 더 작은 공간을 위한 제로 의존성
+- 🪶 **경량**: 작은 크기를 위해 의존성이 없습니다.
+
 
 ## 목차
 
 - [설치](#설치)
 - [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-헬퍼)
+- [URL과 상태 자동 동기화](#url과-상태-자동-동기화)
+- [저수준 `encode` 및 `decode` 함수](#저수준-encode-및-decode-함수)
 - [모범 사례](#모범-사례)
 - [주의사항](#주의사항)
 - [연락 및 지원](#연락-및-지원)
@@ -84,15 +92,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 훅
 
-[문서](packages/urlstate/useUrlState/README.md)
+[문서](ackages/urlstate/next/useUrlState#api)
 
-`useUrlState`는 Next.js 애플리케이션을 위한 커스텀 React 훅으로, 클라이언트 컴포넌트 간 통신을 쉽게 만듭니다. 복잡한 상태를 공유하고 URL 검색 매개변수와 동기화할 수 있게 해주며, 페이지 새로고침 시 상태를 유지하고 URL을 통해 애플리케이션 상태를 공유하는 방법을 제공합니다.
+`useUrlState`는 Next.js 애플리케이션을 위한 사용자 정의 React 훅으로, 클라이언트 컴포넌트 간의 통신을 쉽게 만듭니다. 복잡한 상태를 공유하고 URL 검색 매개변수와 동기화할 수 있게 해주어, 페이지 새로고침 시 상태를 유지하고 URL을 통해 애플리케이션 상태를 공유할 수 있습니다.
 
 ### 사용 예시
 
@@ -102,7 +110,7 @@ pnpm add state-in-url
 
    ```typescript
    // countState.ts
-   // 상태 형태는 상수에 저장되어야 하며, 객체를 직접 전달하지 마세요
+   // 상태 형태는 상수에 저장해야 하며, 객체를 직접 전달하지 마세요
    export const countState: CountState = { count: 0 }
 
    type CountState = { count: number }
@@ -112,17 +120,17 @@ 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 (
@@ -133,24 +141,24 @@ function MyComponent() {
         증가 (URL 업데이트)
       </button>
 
-      // React.useState와 동일한 API
+        // React.useState와 동일한 API
       <button onClick={() => updateState(currState => ({...currState, count: currState.count + 1 }) )}>
         증가 (로컬만)
       </button>
       <button onClick={() => updateUrl()}>
-        변경사항을 URL에 동기화
+        변경 사항을 URL에 동기화
         // 또는 동기화하지 않고 상태만 공유
       </button>
 
       <button onClick={() => updateUrl(state)}>
-        리셋
+        초기화
       </button>
     </div>
   )
 }
 ```
 
-#### 복잡한 상태 형태 예시
+#### 복잡한 상태 형태 사용
 
 ```typescript
 interface UserSettings {
@@ -168,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';
 
@@ -203,7 +211,7 @@ function SettingsComponent() {
       <p>테마: {state.theme}</p>
       <p>글꼴 크기: {state.fontSize}px</p>
       <button onClick={toggleTheme}>테마 전환</button>
-      {/* 다른 설정을 업데이트하기 위한 UI 요소들 */}
+      {/* 다른 설정을 업데이트하기 위한 UI 요소 */}
     </div>
   );
 }
@@ -238,11 +246,76 @@ function Component() {
   }, [state, updateUrl]);
 ```
 
-#### 임의의 상태 형태 (권장하지 않음)
+#### 서버 사이드 렌더링 사용
+
+```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);
+}
+```
+
+#### `layout` 컴포넌트에서 훅 사용
+
+이는 까다로운 부분입니다. Next.js의 app 라우터는 서버 사이드에서 searchParams에 접근할 수 없게 합니다. 미들웨어를 사용하는 해결책이 있지만, 이는 아름답지 않고 Next.js 업데이트 후 작동이 중단될 수 있습니다.
+
+```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;
+}
+
+// 대상 레이아웃 컴포넌트
+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';
+import { useUrlState } from 'state-in-url/next';
 
 const someObj = {};
 
@@ -251,11 +324,27 @@ function SettingsComponent() {
 }
 ```
 
+## 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` 헬퍼
+## `encodeState` 및 `decodeState` 헬퍼
 
 [문서](packages/urlstate/encodeState/README.md)
 
@@ -265,20 +354,22 @@ function SettingsComponent() {
 
 ## 모범 사례
 
-- 일관성을 보장하기 위해 상태 형태를 상수로 정의하세요
+- 일관성을 위해 상태 형태를 상수로 정의하세요
 - 향상된 타입 안전성과 자동 완성을 위해 TypeScript를 사용하세요
 - URL 매개변수에 민감한 정보를 저장하지 마세요
-- 빈번한 업데이트에는 `updateState`를 사용하고, 변경 사항을 URL에 동기화하려면 `updateUrl`을 사용하세요
+- 빈번한 업데이트에는 `updateState`를, URL에 변경 사항을 동기화하려면 `updateUrl`을 사용하세요
+- Next.js에서 클라이언트 컴포넌트를 감싸려면 `Suspense`를 사용하세요
 - 읽기 쉬운 TS 오류를 위해 이 [확장 프로그램](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)을 사용하세요
 
 ## 주의사항
 
 1. 직렬화 가능한 값만 전달할 수 있습니다. `Function`, `BigInt` 또는 `Symbol`은 작동하지 않으며, `ArrayBuffer`와 같은 것들도 마찬가지일 것입니다.
-2. Vercel 서버는 헤더 크기(쿼리 문자열 및 기타 내용)를 **14KB**로 제한하므로 URL 상태를 약 5000단어 이하로 유지하세요. https://vercel.com/docs/errors/URL_TOO_LONG
+2. Vercel 서버는 헤더(쿼리 문자열 및 기타 항목)의 크기를 **14KB**로 제한하므로 URL 상태를 ~5000 단어 이하로 유지하세요. https://vercel.com/docs/errors/URL_TOO_LONG
+3. app 라우터가 있는 `next.js` 14에서 테스트되었으며, pages를 지원할 계획은 없습니다.
 
 ## 로컬에서 실행
 
-이 저장소를 복제하고, `npm install`을 실행한 다음
+이 저장소를 복제하고 `npm install`을 실행한 다음
 
 ```sh
 npm run dev
@@ -286,9 +377,10 @@ npm run dev
 
 [localhost:3000](http://localhost:3000)으로 이동하세요
 
+
 ## 연락 및 지원
 
-- 버그 보고, 기능 요청 또는 질문을 위해 [GitHub 이슈](https://github.com/asmyshlyaev177/state-in-url/issues)를 생성하세요
+- 버그 리포트, 기능 요청 또는 질문을 위해 [GitHub 이슈](https://github.com/asmyshlyaev177/state-in-url/issues)를 생성하세요
 
 ## [변경 로그](https://github.com/asmyshlyaev177/state-in-url/blob/main/CHANGELOG.md)
 

package/dist/constants/index.mjs

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

package/dist/encodeState/index.d.ts

@@ -1 +1 @@
-export * from './encodeState';
+export { decodeState, encodeState } from './encodeState';

package/dist/encodeState/index.mjs

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

package/dist/encoder/encoder.d.ts

@@ -33,11 +33,3 @@ 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

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

package/dist/encoder/index.d.ts

@@ -1 +1 @@
-export * from './encoder';
+export { decode, encode } from './encoder';

package/dist/encoder/index.mjs

@@ -0,0 +1 @@
+export{decode,encode}from"./encoder.mjs";

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { decode, encode, parseSsrQs } from './encoder';
+import { decode, encode } from './encoder';
 import { decodeState, encodeState } from './encodeState';
-import { useUrlState } from './next/useUrlState';
+import { parseSsrQs, useUrlState } from './next';
 import { useSharedState } from './useSharedState';
 import { useUrlEncode } from './useUrlEncode';
 import { useUrlStateBase } from './useUrlStateBase';

package/dist/index.mjs

@@ -1 +1 @@
-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";
+export{decode,encode}from"./encoder/encoder.mjs";export{decodeState,encodeState}from"./encodeState/encodeState.mjs";export{parseSsrQs}from"./next/parseSsrQs.mjs";export{useUrlState}from"./next/useUrlState/useUrlState.mjs";export{useSharedState}from"./useSharedState/useSharedState.mjs";export{useUrlEncode}from"./useUrlEncode/useUrlEncode.mjs";export{useUrlStateBase}from"./useUrlStateBase/useUrlStateBase.mjs";export{isSSR,typeOf}from"./utils.mjs";

package/dist/next/index.d.ts

@@ -0,0 +1,2 @@
+export { parseSsrQs } from './parseSsrQs';
+export { useUrlState } from './useUrlState';

package/dist/next/index.mjs

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

package/dist/next/parseSsrQs.d.ts

@@ -0,0 +1,9 @@
+import { type JSONCompatible } from '../utils';
+/**
+ * Parses the Next.js server-side `searchParams` into an object.
+ *
+ * @param {object | undefined} sp - The server-side searchParams object 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/next/parseSsrQs.mjs

@@ -0,0 +1 @@
+import{decodePrimitive as r,errorSym as t,decode as n}from"../encoder/encoder.mjs";function e(r,t){return{...t,...o(JSON.stringify(r),t)}}function o(n,e){try{return JSON.parse(n,c)}catch{const o=r(n);return o!==t?o:e}}const c=(r,t)=>{const e="string"==typeof t,o=e&&n(t?.replaceAll?.("'",'"'));return r&&e?o:t};export{e as parseSsrQs};

package/dist/next/useUrlState/index.mjs

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

package/dist/next/useUrlState/useUrlState.mjs

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

package/dist/useSharedState/index.mjs

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

package/dist/useUrlEncode/index.d.ts

@@ -1 +1 @@
-export * from './useUrlEncode';
+export { useUrlEncode } from './useUrlEncode';

package/dist/useUrlEncode/index.mjs

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

package/dist/useUrlStateBase/index.d.ts

@@ -1 +1 @@
-export * from './useUrlStateBase';
+export { useUrlStateBase } from './useUrlStateBase';

package/dist/useUrlStateBase/index.mjs

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

package/dist/useUrlStateBase/useUrlStateBase.mjs

@@ -1 +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};
+import t from"react";import{parseSsrQs as e}from"../next/parseSsrQs.mjs";import{useInsertionEffect as n}from"../useInsertionEffect.mjs";import{useSharedState as o}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:w,stringify:l}=r(a),{state:u,getState:d,setState:f}=o(a,(()=>s()?e(function(t,e){const n=Object.keys(t),o=Object.fromEntries(Object.entries(e||{}).filter((([t])=>n.includes(t))));return o}(a,m),a):w(function(t){const e=new URLSearchParams(window.location.search),n=Object.keys(t),o=new URLSearchParams;return[...e.entries()].filter((([t])=>n.includes(t))).forEach((([t,e])=>o.set(t,e))),o.toString()}(a))));n((()=>{const t=()=>{const t=w(window.location.search);f(t)};return window.addEventListener(c,t),()=>{window.removeEventListener(c,t)}}),[f]);const h=t.useCallback(((t,e)=>{const n=`${window.location.pathname}${window.location.search}${window.location.hash}`,o="function"==typeof t,r=function(t){const e=Object.keys(t),n=window.location.search,o=new URLSearchParams(n),r=new URLSearchParams;return o.forEach(((t,n)=>!e.includes(n)&&r.set(n,t))),r}(a);let s,c;o?(s=t(d()),c=l(s,r)):(s=t??d(),c=l(s,r)),f(s);const m=`${window.location.pathname}${c.length?"?":""}${c}${window.location.hash}`;if(n!==m){const{replace:t,...n}=e||{};i[t?"replace":"push"](m,{...n})}}),[i,l,d]);return{updateState:f,updateUrl:h,state:u,getState:d}}const c="popstate";export{a as useUrlStateBase};

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "state-in-url",
-  "version": "2.0.0",
+  "version": "2.0.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": [
     "state-management",
+    "state management",
     "Next.js",
     "client components communication",
+    "signals alternative",
     "query string",
+    "search params",
     "typescript",
     "react.js",
     "workflow",
@@ -49,35 +52,39 @@
       "default": "./dist/index.mjs"
     },
     "./next": {
-      "types": "./dist/next/useUrlState/index.d.ts",
-      "default": "./dist/next/useUrlState/useUrlState.mjs"
+      "types": "./dist/next/index.d.ts",
+      "default": "./dist/next/index.mjs"
     },
     "./encodeState": {
-      "types": "./dist/next/encodeState/index.d.ts",
-      "default": "./dist/next/encodeState/encodeState.mjs"
+      "types": "./dist/encodeState/index.d.ts",
+      "default": "./dist/encodeState/index.mjs"
     },
     "./encoder": {
-      "types": "./dist/next/encoder/index.d.ts",
-      "default": "./dist/next/encoder/encoder.mjs"
+      "types": "./dist/encoder/index.d.ts",
+      "default": "./dist/encoder/index.mjs"
     },
     "./useSharedState": {
-      "types": "./dist/next/useSharedState/index.d.ts",
-      "default": "./dist/next/useSharedState/useSharedState.mjs"
+      "types": "./dist/useSharedState/index.d.ts",
+      "default": "./dist/useSharedState/index.mjs"
     },
     "./useUrlEncode": {
-      "types": "./dist/next/useUrlEncode/index.d.ts",
-      "default": "./dist/next/useUrlEncode/useUrlEncode.mjs"
+      "types": "./dist/useUrlEncode/index.d.ts",
+      "default": "./dist/useUrlEncode/index.mjs"
     },
     "./useUrlStateBase": {
-      "types": "./dist/next/useUrlStateBase/index.d.ts",
-      "default": "./dist/next/useUrlStateBase/useUrlStateBase.mjs"
+      "types": "./dist/useUrlStateBase/index.d.ts",
+      "default": "./dist/useUrlStateBase/index.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "default": "./dist/utils.mjs"
     }
   },
   "types": "./dist/index.d.ts",
   "scripts": {
     "test:unit": "wireit",
     "test:int": "wireit",
-    "test:int:watch": "npx chokidar-cli 'packages/**/*.ts' 'packages/**/*.tsx' -i '.next' -t 500 -c 'npx playwright test -j 2 --project=chromium'",
+    "test:int:ci": "wireit",
     "test": "wireit",
     "tsc": "wireit",
     "dev": "wireit",
@@ -100,17 +107,23 @@
         "tsc",
         "test:unit"
       ],
-      "command": "npm run test:int -- --retries=1"
+      "command": "npm run test:int"
     },
     "kill-next": {
       "command": "ps aux | grep .next | grep -v grep | awk '{print $2}' | xargs kill -9 2>&1; exit 0"
     },
-    "test:int": {
+    "test:int:ci": {
       "command": "playwright test",
       "dependencies": [
         "example:react"
       ]
     },
+    "test:int": {
+      "command": "playwright test -j 3 --project=chromium --retries=2",
+      "dependencies": [
+        "example:react"
+      ]
+    },
     "tsc": {
       "command": "npx tsc --noEmit"
     },
@@ -215,11 +228,11 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
+    "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.24",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "chokidar-cli": "^3.0.0",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "cz": "^1.8.2",