state-in-url 2.0.1 → 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/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"../parseSsrQs.mjs";import{useUrlStateBase as s}from"../../useUrlStateBase/useUrlStateBase.mjs";function o(o,m){const p=t(),{state:u,updateState:i,updateUrl:n,getState:f}=s(o,p,m),l=r.useCallback(((t,e)=>{n(t,{scroll:!1,...e})}),[n]),c=e();return r.useEffect((()=>{i(a(Object.fromEntries([...c.entries()]),o))}),[c]),{updateState:i,updateUrl:l,state:u,getState:f}}export{o 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/useUrlStateBase/useUrlStateBase.mjs

@@ -1 +1 @@
-import t from"react";import{parseSsrQs as e}from"../next/parseSsrQs.mjs";import{useInsertionEffect as o}from"../useInsertionEffect.mjs";import{useSharedState as n}from"../useSharedState/useSharedState.mjs";import{useUrlEncode as a}from"../useUrlEncode/useUrlEncode.mjs";import{isSSR as s}from"../utils.mjs";function r(r,i,m){const{parse:w,stringify:l}=a(r),{state:d,getState:p,setState:h}=n(r,(()=>s()?e(m,r):w(window.location.search)));o((()=>{const t=()=>{const t=w(window.location.search);h(t)};return window.addEventListener(c,t),()=>{window.removeEventListener(c,t)}}),[h]),t.useCallback((()=>{const t=Object.keys(r),e=window.location.search,o=new URLSearchParams(e),n=new URLSearchParams;return o.forEach(((e,o)=>!t.includes(o)&&n.set(o,e))),n}),[]);const u=t.useCallback(((t,e)=>{const o=`${window.location.pathname}${window.location.search}${window.location.hash}`;let n,a;"function"==typeof t?(n=t(p()),a=l(n)):(n=t??p(),a=l(n)),h(n);const s=`${window.location.pathname}${a.length?"?":""}${a}${window.location.hash}`;if(o!==s){const{replace:t,...o}=e||{};i[t?"replace":"push"](s,{...o})}}),[i,l,p]);return{updateState:h,updateUrl:u,state:d,getState:p}}const c="popstate";export{r 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,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "2.0.1",
+  "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": [
@@ -84,6 +84,7 @@
   "scripts": {
     "test:unit": "wireit",
     "test:int": "wireit",
+    "test:int:ci": "wireit",
     "test": "wireit",
     "tsc": "wireit",
     "dev": "wireit",
@@ -106,17 +107,23 @@
         "tsc",
         "test:unit"
       ],
-      "command": "npm run test:int -- --retries=2 --project=chromium"
+      "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"
     },