state-in-url 2.0.2 → 2.1.0

package/README.md

@@ -42,16 +42,18 @@ Add a ⭐️ to support the project!
 
   ## Why use state-in-url?
 
-`state-in-url` Simple state management with URL sync. Share complex states between unrelated React components, sync state to URL, TS-friendly, NextJS compatible.
+`state-in-url` Simple state management with optional URL sync. Share complex states between unrelated React components, TS-friendly, NextJS compatible.
 
 
 # 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
 - 🔗 Shareable URLs with full application state
 - 🔄 Easy state persistence across page reloads
-- 🧠 Sync data between unrelated client components
-- 🧮 Store unsaved user forms in URL
+
+
 
 # Features
 

package/dist/next/useUrlState/useUrlState.d.ts

@@ -8,7 +8,7 @@ import { type DeepReadonly, type JSONCompatible } from '../../utils';
  *
  * * Example:
  * ```ts
- * export const form = { name: '' };
+ * export const form = { name: '', age: 0 };
  * const { state, updateState, updateUrl } = useUrlState(form);
  * // for nextjs seerver components
  * // const { state, updateState, updateUrl } = useUrlState(form, searchParams);
@@ -16,6 +16,8 @@ import { type DeepReadonly, type JSONCompatible } from '../../utils';
  * updateState({ name: 'test' });
  * // by default it's uses router.push with scroll: false
  * updateUrl({ name: 'test' }, { replace: true, scroll: true });
+ * // similar to React.useState
+ * updateUrl(curr => ({ ...curr, name: 'test' }), { replace: true, scroll: true });
  *  ```
  *
  *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/next/useUrlState#api}
@@ -31,7 +33,7 @@ export declare function useUrlState<T extends JSONCompatible>(defaultState: T, s
      *
      *  * 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;
+    updateState: (value: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T)) => void;
     /**
      * * Example:
      * ```ts
@@ -42,7 +44,7 @@ export declare function useUrlState<T extends JSONCompatible>(defaultState: T, s
      *
      *  * 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;
+    updateUrl: (value?: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T) | undefined, options?: Options) => void;
     state: DeepReadonly<DeepReadonly<T>>;
     getState: () => T;
 };

package/dist/useSharedState/useSharedState.d.ts

@@ -8,7 +8,7 @@ import { type DeepReadonly, type JSONCompatible } from '../utils';
  *
  * * Example:
  * ```ts
- * export const form = { name: '' };
+ * export const form = { name: '', age: 0 };
  * const { state, setState } = useSharedState(form);
  *
  * setState({ name: 'test' });
@@ -20,5 +20,5 @@ import { type DeepReadonly, type JSONCompatible } from '../utils';
 export declare function useSharedState<T extends JSONCompatible>(defaultState: T, _getInitial?: () => T): {
     state: T;
     getState: () => T;
-    setState: (value: T | DeepReadonly<T> | ((currState: T) => T)) => void;
+    setState: (value: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T)) => void;
 };

package/dist/useSharedState/useSharedState.mjs

@@ -1 +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};
+import t from"react";import{stateMap as r,subscribers as e}from"../subscribers.mjs";import{useInsertionEffect as n}from"../useInsertionEffect.mjs";import{isSSR as c,isEqual as u}from"../utils.mjs";function s(s,o){const f=t.useRef(s),[i,a]=t.useState((()=>{if(c())return o?o?.():f.current;const t=o?.()||r.get(f.current)||f.current,e=r.get(f.current);return u(e,t)||r.set(f.current,t),t})),m=t.useCallback((t=>{const n=r.get(f.current);if("function"==typeof t){const c=t(n);if(u(n,c))return;r.set(f.current,c),e.get(f.current).forEach((t=>{t()}))}else{const c={...n,...t};if(u(n,c))return;r.set(f.current,c),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/useUrlStateBase/useUrlStateBase.d.ts

@@ -1,8 +1,4 @@
 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
  *
@@ -20,12 +16,16 @@ type Router = {
  *  * 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;
+    updateState: (value: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T)) => void;
+    updateUrl: (value?: Partial<T> | Partial<DeepReadonly<T>> | ((currState: T) => T) | undefined, options?: Options) => void;
     state: DeepReadonly<T>;
     getState: () => T;
 };
 interface Options extends Object {
     replace?: boolean;
 }
+type Router = {
+    push: (href: string, opts: object) => void;
+    replace: (href: string, opts: object) => void;
+};
 export {};

package/dist/useUrlStateBase/useUrlStateBase.mjs

@@ -1 +1 @@
-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};
+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:u,stringify:w}=r(a),{state:l,getState:f,setState:d}=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):u(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=u(window.location.search);d(t)};return window.addEventListener(c,t),()=>{window.removeEventListener(c,t)}}),[d]);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(f()),c=w(s,r),d(s)):(d((e=>{if(t){const n={...e,...t};return s=n,n}return s=e,e})),c=w(s,r));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,w,f]);return{updateState:d,updateUrl:h,state:l,getState:f}}const c="popstate";export{a as useUrlStateBase};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "2.0.2",
+  "version": "2.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": [
@@ -85,6 +85,7 @@
     "test:unit": "wireit",
     "test:int": "wireit",
     "test:int:ci": "wireit",
+    "test:exports": "npx babel-node --extensions .js,.mjs,.ts,.mts --config-file ./babel.config.json -- ./packages/urlstate/exportsTest.ts",
     "test": "wireit",
     "tsc": "wireit",
     "dev": "wireit",
@@ -184,7 +185,7 @@
       ]
     },
     "build": {
-      "command": "rollup -c rollup.config.js",
+      "command": "rollup -c rollup.config.js && npm run test:exports",
       "dependencies": [
         "cleanup"
       ]
@@ -218,9 +219,13 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/node": "^7.25.0",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-typescript": "^7.24.7",
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
-    "@playwright/test": "^1.45.1",
+    "@playwright/test": "^1.45.3",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -233,6 +238,7 @@
     "@types/node": "^20.11.24",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "cz": "^1.8.2",
@@ -243,7 +249,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "playwright": "^1.45.1",
+    "playwright": "^1.45.3",
     "prettier": "^3.2.5",
     "rollup": "^2.79.1",
     "rollup-plugin-filesize": "^10.0.0",