state-in-url 4.0.1 → 4.0.2

package/README.md

@@ -3,7 +3,8 @@ English | [한국어](./README.KO.md) | [简体中文](./README.CN.md)
 <div align="center">
   <img src="/assets/Logo_big.png?raw=true" alt="state-in-url logo"/>
 
-  <div><h2>Easily share complex state objects between unrelated React components, preserve types and structure, with TS validation. Without any hasssle or boilerplate.</h2></div>
+  <div><h2> Store any complex state in query parameters, URL synchronization (aka deep links) made easy. Share state between any unrelated components. With support of static types validation and server side rendering.</h2></div>
+
 
 </div>
 
@@ -50,26 +51,38 @@ Share if it useful for you.
 
   </div>
 
-# Why use state-in-url?
+# Why use `state-in-url`?
+
+Store any user state in query parameters; imagine JSON in a browser URL, while keeping types and structure of data.
+Dead simple, fast, and with static Typescript validation. Deep links, aka URL synchronization, made easy.
+
+Contains `useUrlState` hook for Next.js and react-router, and helpers for anything else on JS.
+Since modern browsers support huge URLs and users don't care about query strings (it is a select all and copy/past workflow).
+
+Time to use query string for state management, as it was originally intended.
+This library does all mundane stuff for you.
 
-`state-in-url` Simple state management with optional URL sync. Good for implementing deep links. Share complex states between unrelated React components, TS-friendly, NextJS compatible. Most of users don't care about URL, so, can use it to store your app state.
+This library is a good alternative for NUQS.
 
 # Use cases
 
-- 🧮 Store unsaved user forms in URL
-- 🙃 Share the state between different components without changing url, good as alternative to signals and other state management tools
-- 🧠 Sync data between unrelated client components
+- 💾 Store unsaved user forms or page filters in URL
+- 🧠 Just sync data between unrelated client components without touching URI
 - 🔗 Shareable URLs with application state (Deep linking, URL state synchronization)
 - 🔄 Easy state persistence across page reloads
 
 # Features
 
-- 🧩 **Simple**: No providers, reducers, boilerplate or new concepts, API similar to React.useState
-- 📘 **Typescript support and type Safety**: Preserves data types and structure, good developer experience with IDE suggestions, strong typing and JSDoc comments
-- ⚛️ **Framework Flexibility**: Separate hooks for Next.js and React.js applications, and functions for pure JS
-- ⚙ **Well tested**: Unit tests and Playwright tests, high quality and support
-- ⚡ **Fast**: Minimal rerenders, less than [1ms](https://github.com/asmyshlyaev177/state-in-url/blob/87c8c7c995c5cd7d9e7aa039c30bfe64b24abe4b/packages/urlstate/encoder/encoder.test.ts#L185) to encode and decode an object
-- 🪶 **Lightweight**: Zero dependencies for a smaller footprint
+- 🧩 **Simple**: No providers, reducers, boilerplate or new concepts, API similar to `React.useState`
+- 📘 **Typescript validation**: State is just an object, automatic static validation in IDE/tests according to Typescript definition
+- ✨ **Complex data**: Nested objects, dates and arrays, works same as JSON, but in URL
+- 🔵 **Server Side Rendering**: Can use it in Server Components, Next.js 14 and 15 are supported
+- ⚙ **Well tested**: Unit tests and Playwright tests for Chrome/Firefox/Safari
+- ⚡ **Fast**: Minimal rerenders, less than [1ms](https://github.com/asmyshlyaev177/state-in-url/blob/87c8c7c995c5cd7d9e7aa039c30bfe64b24abe4b/packages/urlstate/encoder/encoder.test.ts#L185) to encode and decode big object
+- 🪶 **Lightweight**: Zero dependencies, library less than 2KB
+- 👍 **DX**: Good developer experience, documentation, JSDoc comments, and examples
+- ⚛️ **Framework Flexibility**: Hooks for `Next.js` and `react-router`, helpers to use it with other frameworks or pure JS
+- 📃 **Permissive license**: MIT
 
 ## Table of content
 
@@ -113,7 +126,8 @@ Possibly need to set `"module": "ES2022"`, or `"module": "ESNext"`
 
 ## useUrlState
 
-`useUrlState` is a custom React hook for Next.js/React-Router 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.
+Main hook that takes initial state as parameter and returns state object, callback to update url, and callback to update only state.
+All components that use the same `state` object are automatically synchronized.
 
 ## useUrlState hook for Next.js
 
@@ -125,11 +139,11 @@ Possibly need to set `"module": "ES2022"`, or `"module": "ESNext"`
 
 #### Basic
 
-1. Define state shape
+1. Define state shape with default values
 
    ```typescript
    // userState.ts
-   // State shape should be stored in a constant, don't pass an object directly
+   // Only parameters with value different from default will go to the url.
    export const userState: UserState = { name: '', age: 0 }
 
    type UserState = { name: string, age: number }
@@ -154,13 +168,13 @@ function MyComponent() {
   return (
     <div>
       <input value={urlState.name}
-        onChange={(ev) => { setUrl({ name: ev.target.value }) }}
+        // same api as React.useState, e.g. setUrl(currVal => currVal + 1)
+        onChange={(ev) => setUrl({ name: ev.target.value }) }
       />
       <input value={urlState.age}
-        onChange={(ev) => { setUrl({ age: +ev.target.value }) }}
+        onChange={(ev) => setUrl({ age: +ev.target.value }) }
       />
 
-      // same api as React.useState
       <input value={urlState.name}
         onChange={(ev) => { setState(curr => ({ ...curr, name: ev.target.value })) }}
         // Can update state immediately but sync change to url as needed
@@ -510,6 +524,27 @@ function SettingsComponent() {
 - Avoid storing sensitive information in URL parameters (SSN, API keys etc)
 - Use this [extension](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) for readable TS errors
 
+Can create state hooks for slices of state, and reuse them across application. For example:
+```Typescript
+type UserState = {
+  name: string;
+  age: number;
+  other: { id: string, value: number }[]
+};
+const userState = {
+  name: '',
+  age: 0,
+  other: [],
+};
+
+export const useUserState = () => {
+  const { urlState, setUrl } = useUrlState({ defaultState: userState });
+
+  return { userState: urlState, setUserState: setUrl };;
+}
+
+```
+
 ## Gothas
 
 1. Can pass only serializable values, `Function`, `BigInt` or `Symbol` won't work, probably things like `ArrayBuffer` neither. Everything that can be serialized to JSON will work.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Easily share complex state objects between unrelated React components, preserve types and structure, with TS validation. Deep links and url state synchronization wthout any hasssle or boilerplate.",
   "homepage": "https://state-in-url.dev",
   "keywords": [
@@ -13,7 +13,6 @@
     "useUrlState",
     "state in url",
     "client components communication",
-    "signals alternative",
     "query string",
     "search params",
     "query params",
@@ -25,7 +24,8 @@
     "reactjs",
     "react",
     "NextJS",
-    "Next.js"
+    "Next.js",
+    "nuqs alternative"
   ],
   "repository": {
     "type": "git",
@@ -122,8 +122,9 @@
     "kill-next": "wireit",
     "kill-vite": "wireit",
     "kill": "wireit",
-    "cleanup": "rm -rf dist",
-    "reinstall": "rm -rf dist .wireit node_modules packages/example-nextjs14/node_modules packages/example-nextjs14/.next packages/example-react/node_modules && npm install",
+    "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",
+    "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",
     "prepare": "npx husky"
@@ -191,7 +192,7 @@
         }
       },
       "dependencies": [
-        "cleanup"
+        "rmdist"
       ]
     },
     "dev:router6": {
@@ -305,7 +306,7 @@
     "build": {
       "command": "rollup -c rollup.config.js --bundleConfigAsCjs",
       "dependencies": [
-        "cleanup"
+        "rmdist"
       ]
     }
   },