state-in-url 0.1.0

package/README.md

@@ -0,0 +1,226 @@
+
+<h1 align="center">state-in-url</h1>
+
+<p align="center">
+  <img src="/assets/logo.svg?raw=true" alt="Library logo"/>
+</p>
+
+<div align="center">
+Seamlessly sync React state with URL query parameters in Next.js/React.js applications. Simplify state management, enhance shareability, and maintain type safety—all through your browser's URL.
+
+<hr />
+
+
+[![For hire](/assets/hireBadge.svg)](https://www.linkedin.com/in/asmyshlyaev177/)
+
+
+[![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)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://github.com/asmyshlyaev177/state-in-url/)
+![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/state-in-url.svg)
+
+</div>
+
+# Features
+- **Seamless state synchronization with URL query parameters.**
+- **Preserves shape and types of data**
+- **Full TypeScript support for enhanced developer experience.**
+- **Automatic serialization and deserialization of complex objects.**
+- **Separate hooks for Next.js (useUrlState) and React.js (useUrlEncode) usage.**
+- **Efficient updates with minimal re-renders.**
+- **Lightweight, no dependencies.**
+
+## Table of content
+- [Installation](#installation)
+- [Usage with Next.js](#useurlstate-hook-for-nextjs)
+- [Usage with React.js](#useurlencode-hook-for-reactjs)
+- [Low-level encode/decode functions](#encode-and-decode-helpers)
+- [Gothas](#gothas)
+- [Contact & Support](#contact--support)
+- [Changelog](#changelog)
+- [License](#license)
+
+## installation
+```sh
+# npm
+npm install --save state-in-url
+# yarn
+yarn add state-in-url
+# pnpm
+pnpm add state-in-url
+```
+
+## useUrlState hook for Next.js
+
+`useUrlState` is a custom React hook for Next.js applications that manages state in the URL query string. It allows you to store and retrieve state from the URL search parameters, providing a way to persist state across page reloads and share application state via URLs.
+
+
+### Usage examples
+
+#### Basic
+
+```typescript
+'use client'
+import { useUrlState } from 'state-in-url';
+
+// State shape should be stored in a constant, don't pass an object directly
+const countState = { count: 0 };
+
+function MyComponent() {
+  const { state, updateState, updateUrl } = useUrlState(countState);
+
+  // won't let you to accidently mutate state directly, requires TS
+  // state.count = 2 // <- error
+
+  return (
+    <div>
+      <p>Count: {state.count}</p>
+
+      <button onClick={() => updateUrl({ count: state.count + 1 })}>
+        Increment (Update URL)
+      </button>
+
+      <button onClick={() => updateState({ count: state.count + 1 })}>
+        Increment (Local Only)
+      </button>
+      <button onClick={() => updateUrl(state)}>
+        Sync changes to url
+      </button>
+    </div>
+  )
+}
+```
+
+#### With complex state shape
+
+```typescript
+'use client'
+import { useUrlState } from 'state-in-url';
+
+interface UserSettings {
+  theme: 'light' | 'dark';
+  fontSize: number;
+  notifications: boolean;
+}
+
+const defaultSettings: UserSettings {
+  theme: 'light',
+  fontSize: 16,
+  notifications: true,
+}
+
+function SettingsComponent() {
+  // `state` will infer from UserSettings type!
+  const { state, updateUrl } = useUrlState(defaultSettings);
+
+  const toggleTheme = () => {
+    updateUrl(current => ({
+      ...current,
+      theme: current.theme === 'light' ? 'dark' : 'light',
+    }));
+  };
+
+  return (
+    <div>
+      <h2>User Settings</h2>
+      <p>Theme: {state.theme}</p>
+      <p>Font Size: {state.fontSize}px</p>
+      <button onClick={toggleTheme}>Toggle Theme</button>
+      {/* Other UI elements to update other settings */}
+    </div>
+  );
+}
+...
+
+// Other component
+function Component() {
+  const { state } = useUrlState(defaultSettings);
+
+  return (
+    <div>
+      <p>Notifications is {state.notifications ? 'On' : 'Off'}</p>
+    </div>
+  )
+}
+```
+
+#### With arbitrary state shape (not recommended)
+
+```typescript
+'use client'
+import { useUrlState } from 'state-in-url';
+
+const someObj = {};
+
+function SettingsComponent() {
+  const { state, updateUrl, updateState } = useUrlState<object>(someObj);
+}
+```
+
+## useUrlEncode hook for React.js
+
+`useUrlEncode` is a custom React hook that provides utility functions for encoding and decoding state to and from URL search parameters. This hook doesn't depend on Nextjs, and will works with any React application.
+
+Accepts optional `defaultState` argument.
+
+```typescript
+import { useUrlEncode } from 'state-in-url';
+
+const Component = () => {
+  const { parse, stringify } = useUrlEncode();
+
+  const str = stringify({ age: 36 }); // age=∓36
+  const obj = parse(str); // { age: 36 }
+
+  const currentParams = parse(window.location.search);
+  // OR
+  // const obj = parse(new URLSearchParams(window.location.search))
+
+  const updateSearch = () => {
+    const currentParams = new URLSearchParams(window.location.search);
+    const newState = { query: 'react hooks', page: 2 };
+    const updatedParamsString = stringify(newState, currentParams);
+    console.log(updatedParamsString);
+    // Output: existing params + query=react%20hooks&page=2
+  };
+}
+```
+
+## `encode` and `decode` helpers
+
+There low level helpers to stringify and parse query string params. Useful for other frameworks or pure JS.
+
+```javascript
+import { encode, decode } from 'state-in-url';
+
+const state = { obj: [1, 2, 3], obj2: true }
+
+// to params
+const params = new URLSearchParams();
+Object.entries(state).forEach(([key, value]) => {
+  params.set(key, encode(value));
+});
+
+// from params
+const obj = Object.fromEntries(
+  [...params.entries()].map(([key, value]) => [
+    key,
+    decode(value),
+  ]),
+)
+```
+
+## Gothas
+
+1. Can pass only serializable values, `Function`, `BigInt` or `Symbol` won't work, probably things like `ArrayBuffer` neither. But won't throw an error if you do it accidently.
+2. Developed and tested with recent `Next.js` and `Typescript` versions.
+
+## Contact & Support
+
+- Create a [GitHub issue](https://github.com/asmyshlyaev177/state-in-url/issues) for bug reports, feature requests, or questions
+- Add a ⭐️ [star on GitHub](https://github.com/asmyshlyaev177/state-in-url) to support the project!
+
+## [Changelog](https://github.com/asmyshlyaev177/state-in-url/blob/main/CHANGELOG.md)
+
+## License
+This project is licensed under the [MIT license](https://github.com/asmyshlyaev177/state-in-url/blob/main/LICENSE).

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { encode, decode, type Type, useUrlEncode, useUrlState, } from './urlstate';

package/dist/index.js

@@ -0,0 +1 @@
+import e from"react";import{useRouter as t,usePathname as n,useSearchParams as r}from"next/navigation";const a=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={boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"};function o(e){switch(a(e)){case"function":case"symbol":return"";case"date":return c.date+e.toISOString();case"string":return encodeURIComponent(e);case"number":return c.number+String(e);case"boolean":return c.boolean+String(e);case"object":case"array":return s(e);case"null":return c.null;case"undefined":return c.undefined;default:return String(e)}}const s=e=>JSON.stringify(e,u).replaceAll('"',"'"),u=(e,t)=>{const n=a(t);return e&&"object"!==n&&"array"!==n?o(t):t},i=e=>e.match(/^∓/)?Number.parseFloat(e.replaceAll("∓","")):e.match(/^🗵/)?!!e.includes("true"):e.match(/^⏲/)?new Date(e.slice(1)):e===c.null?null:e!==c.undefined?decodeURIComponent(e):void 0,l=(e,t)=>e&&"string"==typeof t?i(t):t,f=e=>{let t;try{t=JSON.parse(e,l)}catch{}return t};function d(e){const t=e.replaceAll("'",'"');return f(t)??i(e)}function p(t){const n=e.useCallback((function(e,n){const r=y(n);return"object"===a(e)&&Object.entries(e).forEach((([e,n])=>{const a=t?.[e];JSON.stringify(n)!==JSON.stringify(a)?r.set(e,o(n)):r.delete(e)})),r.toString()}),[t]);return{parse:e.useCallback((function(e){const n=y(e);return{...t,...Object.fromEntries([...n.entries()].map((([e,n])=>[e,d(n)??t?.[e]])))}}),[t]),stringify:n}}const y=e=>new URLSearchParams("string"==typeof e?e:e?.toString?.()||"");function b(a){const c=t(),o=n(),{parse:s,stringify:u}=p(a),i=r(),[l,f]=e.useState((()=>s(i)));e.useEffect((()=>{f((e=>{const t=s(i);return JSON.stringify(e)===JSON.stringify(t)?e:t}))}),[s,i]);const d=e.useCallback((e=>{f("function"==typeof e?t=>e(t):e)}),[]);return{updateUrl:e.useCallback((e=>{"function"==typeof e?c.push(`${o}?${u(e(l))}`):c.push(`${o}?${u(e)}`)}),[o,c,u,l]),updateState:d,state:l}}export{d as decode,o as encode,p as useUrlEncode,b as useUrlState};

package/dist/urlstate/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SYMBOLS: {
+    boolean: string;
+    null: string;
+    undefined: string;
+    number: string;
+    date: string;
+};

package/dist/urlstate/encoder.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Encode any JSON serializable value to URL friendly string
+ *
+ * @param {unknown} payload any value to serialize
+ * @returns {string} URLSearchParams compatible value string
+ */
+export declare function encode(payload: unknown): string;
+/**
+ * Decode value part of URLSearchParams back to JS value
+ *
+ * @param {string} payload URLSearchParams compatible value string
+ * @returns {unknown} decoded object
+ */
+export declare function decode<T>(payload: string): T;

package/dist/urlstate/index.d.ts

@@ -0,0 +1,6 @@
+import { encode, decode } from './encoder';
+import { type Type, type JSONCompatible, typeOf } from './utils';
+import { useUrlEncode } from './useUrlEncode';
+import { useUrlState } from './useUrlState';
+export { encode, decode, typeOf, useUrlEncode, useUrlState };
+export type { Type, JSONCompatible };

package/dist/urlstate/useUrlEncode.d.ts

@@ -0,0 +1,10 @@
+import { type JSONCompatible, type DeepReadonly } from './utils';
+/**
+ * Returns stringify and parse functions
+ *
+ * @param {?JSONCompatible<T>} [stateShape] Optional fallback values for state
+ */
+export declare function useUrlEncode<T>(stateShape?: JSONCompatible<T>): {
+    parse: (strOrSearchParams?: string | URLSearchParams) => Readonly<JSONCompatible<T> & {} extends infer T ? { readonly [P in keyof T]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>;
+    stringify: (state: DeepReadonly<NonNullable<typeof stateShape>> | NonNullable<typeof stateShape>, strOrSearchParams?: string | URLSearchParams) => string;
+};

package/dist/urlstate/useUrlState.d.ts

@@ -0,0 +1,11 @@
+import { type JSONCompatible } from './utils';
+/**
+ * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions
+ *
+ * @param {?JSONCompatible<T>} [defaultState] Optional fallback values for state
+ */
+export declare function useUrlState<T>(defaultState?: JSONCompatible<T>): {
+    updateUrl: (value: Readonly<JSONCompatible<T> & {} extends infer T ? { readonly [P in keyof T]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never> | ((currState: Readonly<JSONCompatible<T> & {} extends infer T ? { readonly [P in keyof T]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>) => Readonly<JSONCompatible<T> & {} extends infer T ? { readonly [P in keyof T]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_1 ? { readonly [P_1 in keyof T_1]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_2 ? { readonly [P_2 in keyof T_2]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_3 ? { readonly [P_3 in keyof T_3]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_4 ? { readonly [P_4 in keyof T_4]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_5 ? { readonly [P_5 in keyof T_5]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_6 ? { readonly [P_6 in keyof T_6]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_7 ? { readonly [P_7 in keyof T_7]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_8 ? { readonly [P_8 in keyof T_8]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_9 ? { readonly [P_9 in keyof T_9]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_10 ? { readonly [P_10 in keyof T_10]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>)) => void;
+    updateState: (value: Readonly<JSONCompatible<T> & {} extends infer T_11 ? { readonly [P in keyof T_11]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_12 ? { readonly [P_1 in keyof T_12]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_13 ? { readonly [P_2 in keyof T_13]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_14 ? { readonly [P_3 in keyof T_14]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_15 ? { readonly [P_4 in keyof T_15]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_16 ? { readonly [P_5 in keyof T_16]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_17 ? { readonly [P_6 in keyof T_17]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_18 ? { readonly [P_7 in keyof T_18]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_19 ? { readonly [P_8 in keyof T_19]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_20 ? { readonly [P_9 in keyof T_20]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_21 ? { readonly [P_10 in keyof T_21]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never> | ((currState: Readonly<JSONCompatible<T> & {} extends infer T_11 ? { readonly [P in keyof T_11]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_12 ? { readonly [P_1 in keyof T_12]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_13 ? { readonly [P_2 in keyof T_13]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_14 ? { readonly [P_3 in keyof T_14]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_15 ? { readonly [P_4 in keyof T_15]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_16 ? { readonly [P_5 in keyof T_16]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_17 ? { readonly [P_6 in keyof T_17]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_18 ? { readonly [P_7 in keyof T_18]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_19 ? { readonly [P_8 in keyof T_19]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_20 ? { readonly [P_9 in keyof T_20]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_21 ? { readonly [P_10 in keyof T_21]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>) => Readonly<JSONCompatible<T> & {} extends infer T_11 ? { readonly [P in keyof T_11]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_12 ? { readonly [P_1 in keyof T_12]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_13 ? { readonly [P_2 in keyof T_13]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_14 ? { readonly [P_3 in keyof T_14]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_15 ? { readonly [P_4 in keyof T_15]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_16 ? { readonly [P_5 in keyof T_16]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_17 ? { readonly [P_6 in keyof T_17]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_18 ? { readonly [P_7 in keyof T_18]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_19 ? { readonly [P_8 in keyof T_19]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_20 ? { readonly [P_9 in keyof T_20]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_21 ? { readonly [P_10 in keyof T_21]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>)) => void;
+    state: Readonly<JSONCompatible<T> & {} extends infer T_22 ? { readonly [P in keyof T_22]: Readonly<(JSONCompatible<T> & {})[P] extends infer T_23 ? { readonly [P_1 in keyof T_23]: Readonly<(JSONCompatible<T> & {})[P][P_1] extends infer T_24 ? { readonly [P_2 in keyof T_24]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2] extends infer T_25 ? { readonly [P_3 in keyof T_25]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3] extends infer T_26 ? { readonly [P_4 in keyof T_26]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4] extends infer T_27 ? { readonly [P_5 in keyof T_27]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5] extends infer T_28 ? { readonly [P_6 in keyof T_28]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6] extends infer T_29 ? { readonly [P_7 in keyof T_29]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7] extends infer T_30 ? { readonly [P_8 in keyof T_30]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8] extends infer T_31 ? { readonly [P_9 in keyof T_31]: Readonly<(JSONCompatible<T> & {})[P][P_1][P_2][P_3][P_4][P_5][P_6][P_7][P_8][P_9] extends infer T_32 ? { readonly [P_10 in keyof T_32]: Readonly<any>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>; } : never>;
+};

package/dist/urlstate/utils.d.ts

@@ -0,0 +1,22 @@
+export type Type = 'string' | 'date' | 'boolean' | 'number' | 'bigint' | 'undefined' | 'object' | 'null' | 'function' | 'symbol' | 'array';
+/**
+ * A better replacement for `typeof`
+ *
+ * @param {unknown} val value to detect type
+ * @returns {Type} Type of val - `string`, `date`, `boolean`,
+ * `number`, `bigint`, `undefined`, `null`, `object`,
+ * `function`, `symbol`, `array`
+ */
+export declare const typeOf: (val: unknown) => Type;
+type JSONPrimitive = string | number | boolean | Date | null | undefined;
+type JSONValue = JSONPrimitive | JSONValue[] | {
+    [key: string]: JSONValue;
+};
+type NotAssignableToJson = bigint | symbol | Function;
+export type JSONCompatible<T> = unknown extends T ? never : {
+    [P in keyof T]: T[P] extends JSONValue ? T[P] : T[P] extends NotAssignableToJson ? never : JSONCompatible<T[P]>;
+};
+export type DeepReadonly<T> = Readonly<{
+    readonly [P in keyof T]: DeepReadonly<T[P]>;
+}>;
+export {};

package/package.json

@@ -0,0 +1,181 @@
+{
+  "name": "state-in-url",
+  "version": "0.1.0",
+  "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",
+    "Next.js",
+    "client components communication",
+    "query string",
+    "typescript",
+    "react.js",
+    "workflow",
+    "javascript",
+    "hooks",
+    "reactjs",
+    "react",
+    "NextJS"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/asmyshlyaev177/state-in-url.git"
+  },
+  "author": {
+    "name": "asmyshlyaev177",
+    "email": "asmyshlyaev177@gmail.com",
+    "url": "https://www.linkedin.com/in/asmyshlyaev177/"
+  },
+  "license": "ISC",
+  "funding": {
+    "type": "patreon",
+    "url": "https://patreon.com/asmyshlyaev177"
+  },
+  "bugs": {
+    "url": "https://github.com/asmyshlyaev177/state-in-url/issues"
+  },
+  "workspaces": [
+    "packages/urlstate",
+    "packages/example-nextjs"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "type": "module",
+  "exports": {
+    "import": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "module": {
+      "types": "./dist/index.js",
+      "default": "./dist/index.d.ts"
+    },
+    "default": {
+      "types": "./dist/index.js",
+      "default": "./dist/index.d.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/types/"
+      ]
+    }
+  },
+  "scripts": {
+    "test:unit": "jest",
+    "test:int": "playwright test",
+    "dev": "wireit",
+    "dev:lib": "wireit",
+    "dev:nextjs": "wireit",
+    "bump": "standard-version",
+    "build": "wireit",
+    "cleanup": "rm -rf dist",
+    "setup": "playwright install --with-deps",
+    "prepare": "husky"
+  },
+  "wireit": {
+    "dev": {
+      "dependencies": [
+        "dev:lib"
+      ],
+      "service": true,
+      "command": "npm run dev:nextjs"
+    },
+    "dev:lib": {
+      "command": "cross-env IS_DEVELOPMENT=true rollup -c rollup.config.js -w",
+      "service": {
+        "readyWhen": {
+          "lineMatches": "created "
+        }
+      },
+      "dependencies": [
+        "cleanup"
+      ]
+    },
+    "dev:nextjs": {
+      "command": "cd packages/example-nextjs && npm run dev",
+      "service": {
+        "readyWhen": {
+          "lineMatches": "Compiled /"
+        }
+      }
+    },
+    "build": {
+      "command": "rollup -c rollup.config.js",
+      "dependencies": [
+        "cleanup"
+      ]
+    }
+  },
+  "browserslist": [
+    "last 5 Chrome versions",
+    "last 5 ChromeAndroid versions",
+    "last 5 Firefox versions",
+    "last 5 FirefoxAndroid versions",
+    "Firefox ESR",
+    "last 3 Safari major versions",
+    "last 2 iOS major versions"
+  ],
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
+    ],
+    "*.{html,css,less,ejs,json}": [
+      "prettier --write"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.0.3",
+    "@commitlint/config-conventional": "^19.0.3",
+    "@playwright/test": "^1.42.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/dom": "^10.2.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "commitizen": "^4.3.0",
+    "cross-env": "^7.0.3",
+    "cz": "^1.8.2",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-maintainable": "^0.3.1",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.2",
+    "playwright": "^1.42.0",
+    "prettier": "^3.2.5",
+    "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-filesize": "^10.0.0",
+    "rollup-plugin-ignore": "^1.0.10",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "standard-version": "^9.5.0",
+    "ts-jest": "^29.1.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3",
+    "wait-on": "^7.2.0",
+    "wireit": "^0.14.4"
+  }
+}