state-in-url 1.0.2 → 1.1.0

package/README.md

@@ -42,7 +42,8 @@ Add a ⭐️ to support the project!
 
   ## Why use state-in-url?
 
-`state-in-url` Simple state management with URL synchronization.
+`state-in-url` Simple state management with URL sync. Share complex states between unrelated React components, sync state to URL, TS-friendly, NextJS compatible.
+
 
 # Use cases
 
@@ -66,6 +67,7 @@ Add a ⭐️ to support the project!
 
 - [Installation](#installation)
 - [`useUrlState` for Next.js](#useurlstate-hook-for-nextjs)
+- [`useSharedState` for React.js](#usesharedstate-hook-for-reactjs)
 - [`useUrlEncode` for React.js](#useurlencode-hook-for-reactjs)
 - [`encodeState` and `decodeState` for pure JS usage](#encodestate-and-decodestate-helpers)
 - [auto sync state with url](#auto-sync-state)
@@ -257,6 +259,22 @@ function SettingsComponent() {
 }
 ```
 
+## `useSharedState` hook for React.js
+Hook to share state between any React components, tested with Next.js and Vite.
+
+```typescript
+'use client'
+import { useSharedState } from 'state-in-url';
+
+export const someState = { name: '' };
+
+function SettingsComponent() {
+  const { state, setState } = useSharedState(someState);
+}
+```
+
+[Docs](packages/urlstate/useSharedState/README.md)
+
 ## `useUrlEncode` hook for React.js
 
 [Docs](packages/urlstate/useUrlEncode/README.md)

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("next/navigation");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);const o={string:"◖",boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"},s=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=()=>"undefined"==typeof window,u=e=>new URLSearchParams("string"==typeof e?e:e?.toString?.()||""),a=(e,t)=>JSON.stringify(e)===JSON.stringify(t);function i(e){switch(s(e)){case"function":case"symbol":return"";case"date":return o.date+e.toISOString();case"string":return`${o.string}${encodeURIComponent(e)}`;case"number":return o.number+String(e);case"boolean":return o.boolean+String(e);case"object":case"array":return JSON.stringify(e,f).replaceAll('"',"'");case"null":return o.null;case"undefined":return o.undefined;default:return String(e)}}function l(e,t){return function(e,t){try{return JSON.parse(e,g)}catch{const n=d(e);return n!==p?n:t}}(e.replaceAll("'",'"'),t)}const f=(e,t)=>{const n=s(t);return e&&"object"!==n&&"array"!==n?i(t):t},d=e=>e===o.null?null:e!==o.undefined?e?.startsWith?.(o.number)?Number.parseFloat(e.replace(o.number,"")):e?.startsWith?.(o.boolean)?!!e.includes("true"):e?.startsWith?.(o.date)?new Date(e.slice(1)):e?.startsWith?.(o.string)?decodeURIComponent(e).replace(/^◖/,""):p:void 0,p=Symbol("isError"),g=(e,t)=>{const n="string"==typeof t,r=n&&d(t);return r===p?t:e&&n?r:t};const y=(e,t)=>{const n="string"==typeof t,r=n&&l(t?.replaceAll?.("'",'"'));return e&&n?r:t};function b(e,t){try{return JSON.parse(e,y)}catch{const n=d(e);return n!==p?n:t}}function S(e,t,n){const r=u(n);return Object.entries(e||{}).forEach((([e,n])=>{const o=t?.[e];JSON.stringify(n)!==JSON.stringify(o)&&r.set(e,i(n))})),r.toString()}function h(e,t){return{...t||{},...Object.fromEntries([...u(e).entries()].map((([e,n])=>{const r=t?.[e];return[e,l(n,r)??r]})))}}function w(e){const t=r.default.useCallback((function(t,n){return"object"===s(t)?S(t,e,n):""}),[e]);return{parse:r.default.useCallback((function(t){return h(t,e)}),[e]),stringify:t}}const m=new WeakMap,O=new WeakMap,v={get:e=>O.get(e)||[],add(e,t){const n=this.get(e);return O.set(e,n.concat(t)),()=>this.remove(e,t)},remove(e,t){const n=this.get(e).filter((e=>e!==t));n.length?O.set(e,n):O.delete(e)}},E={get:function(e){return m.get(e)},set:function(e,t){m.set(e,t)}};exports.decode=l,exports.decodeState=h,exports.encode=i,exports.encodeState=S,exports.useUrlEncode=w,exports.useUrlState=function(e,n){const{parse:o,stringify:s}=w(e),{state:u,getState:i,setState:l}=function(e,t){const n=r.default.useRef(e),[o,s]=r.default.useState((()=>{if(c())return t?.()||n.current;const e=E.get(n.current);if(!e){const e=t?.()||n.current;return E.set(n.current,e),e}return e})),u=r.default.useCallback((e=>{const t=E.get(n.current)||n.current;if("function"==typeof e){const r=e(t);if(a(t,r))return;E.set(n.current,r),v.get(n.current).forEach((e=>{e()}))}else{if(a(t,e))return;E.set(n.current,e),v.get(n.current).forEach((e=>{e()}))}}),[]);return r.default.useInsertionEffect((()=>{const e=v.add(n.current,(()=>{s(E.get(n.current)||n.current)}));return()=>{e()}}),[u]),{state:o,getState:r.default.useCallback((()=>E.get(n.current)||n.current),[]),setState:u}}(e,(()=>{return c()?(t=n,r=e,{...r,...b(JSON.stringify(t),r)}):o(window.location.search);var t,r})),f=t.useRouter();r.default.useInsertionEffect((()=>{const e=()=>{const e=o(window.location.search);l(e)},t="popstate";return window.addEventListener(t,e),()=>{window.removeEventListener(t,e)}}),[l]);const d=r.default.useCallback(((e,t)=>{const n=window.location.search,r=`${window.location.pathname}${n.length&&!n.includes("?")?"?":""}${n}`;let o,c;"function"==typeof e?(o=e(i()),c=s(o)):(o=e??i(),c=s(o)),l(o);const u=`${window.location.pathname}${c.length?"?":""}${c}`;if(r!==u){const{replace:e,...n}=t||{};f[e?"replace":"push"](u,{scroll:!1,...n})}}),[f,s,i]);return{updateState:l,updateUrl:d,state:u}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("next/navigation");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);const o={string:"◖",boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"},s=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=()=>"undefined"==typeof window,u=e=>new URLSearchParams("string"==typeof e?e:e?.toString?.()||""),a=(e,t)=>JSON.stringify(e)===JSON.stringify(t);function i(e){switch(s(e)){case"function":case"symbol":return"";case"date":return o.date+e.toISOString();case"string":return`${o.string}${encodeURIComponent(e)}`;case"number":return o.number+String(e);case"boolean":return o.boolean+String(e);case"object":case"array":return JSON.stringify(e,f).replaceAll('"',"'");case"null":return o.null;case"undefined":return o.undefined;default:return String(e)}}function l(e,t){return function(e,t){try{return JSON.parse(e,g)}catch{const n=d(e);return n!==p?n:t}}(e.replaceAll("'",'"'),t)}const f=(e,t)=>{const n=s(t);return e&&"object"!==n&&"array"!==n?i(t):t},d=e=>e===o.null?null:e!==o.undefined?e?.startsWith?.(o.number)?Number.parseFloat(e.replace(o.number,"")):e?.startsWith?.(o.boolean)?!!e.includes("true"):e?.startsWith?.(o.date)?new Date(e.slice(1)):e?.startsWith?.(o.string)?decodeURIComponent(e).replace(/^◖/,""):p:void 0,p=Symbol("isError"),g=(e,t)=>{const n="string"==typeof t,r=n&&d(t);return r===p?t:e&&n?r:t};const y=(e,t)=>{const n="string"==typeof t,r=n&&l(t?.replaceAll?.("'",'"'));return e&&n?r:t};function b(e,t){try{return JSON.parse(e,y)}catch{const n=d(e);return n!==p?n:t}}function S(e,t,n){const r=u(n);return Object.entries(e||{}).forEach((([e,n])=>{const o=t?.[e];JSON.stringify(n)!==JSON.stringify(o)&&r.set(e,i(n))})),r.toString()}function h(e,t){return{...t||{},...Object.fromEntries([...u(e).entries()].map((([e,n])=>{const r=t?.[e];return[e,l(n,r)??r]})))}}const w=new WeakMap,m=new WeakMap,O={get:e=>m.get(e)||[],add(e,t){const n=this.get(e);return m.set(e,n.concat(t)),()=>this.remove(e,t)},remove(e,t){const n=this.get(e).filter((e=>e!==t));n.length?m.set(e,n):m.delete(e)}},v={get:function(e){return w.get(e)},set:function(e,t){w.set(e,t)}},E=r.default.useInsertionEffect||r.default.useEffect;function j(e){const t=r.default.useCallback((function(t,n){return"object"===s(t)?S(t,e,n):""}),[e]);return{parse:r.default.useCallback((function(t){return h(t,e)}),[e]),stringify:t}}exports.decode=l,exports.decodeState=h,exports.encode=i,exports.encodeState=S,exports.useUrlEncode=j,exports.useUrlState=function(e,n){const{parse:o,stringify:s}=j(e),{state:u,getState:i,setState:l}=function(e,t){const n=r.default.useRef(e),[o,s]=r.default.useState((()=>{if(c())return t?.()||n.current;const e=v.get(n.current);if(!e){const e=t?.()||n.current;return v.set(n.current,e),e}return e})),u=r.default.useCallback((e=>{const t=v.get(n.current)||n.current;if("function"==typeof e){const r=e(t);if(a(t,r))return;v.set(n.current,r),O.get(n.current).forEach((e=>{e()}))}else{if(a(t,e))return;v.set(n.current,e),O.get(n.current).forEach((e=>{e()}))}}),[]);return E((()=>{const e=O.add(n.current,(()=>{s(v.get(n.current)||n.current)}));return()=>{e()}}),[]),{state:o,getState:r.default.useCallback((()=>v.get(n.current)||n.current),[]),setState:u}}(e,(()=>{return c()?(t=n,r=e,{...r,...b(JSON.stringify(t),r)}):o(window.location.search);var t,r})),f=t.useRouter();r.default.useInsertionEffect((()=>{const e=()=>{const e=o(window.location.search);l(e)},t="popstate";return window.addEventListener(t,e),()=>{window.removeEventListener(t,e)}}),[l]);const d=r.default.useCallback(((e,t)=>{const n=window.location.search,r=`${window.location.pathname}${n.length&&!n.includes("?")?"?":""}${n}`;let o,c;"function"==typeof e?(o=e(i()),c=s(o)):(o=e??i(),c=s(o)),l(o);const u=`${window.location.pathname}${c.length?"?":""}${c}`;if(r!==u){const{replace:e,...n}=t||{};f[e?"replace":"push"](u,{scroll:!1,...n})}}),[f,s,i]);return{updateState:l,updateUrl:d,state:u}};

package/dist/index.mjs

@@ -1 +1 @@
-import t from"react";import{useRouter as e}from"next/navigation";const n={string:"◖",boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"},r=t=>{const e=null===t,n=Array.isArray(t),r=t instanceof Date;return(e?"null":r&&"date")||n&&"array"||!e&&!r&&!n&&"object"==typeof t&&"object"||typeof t},c=()=>"undefined"==typeof window,o=t=>new URLSearchParams("string"==typeof t?t:t?.toString?.()||""),s=(t,e)=>JSON.stringify(t)===JSON.stringify(e);function a(t){switch(r(t)){case"function":case"symbol":return"";case"date":return n.date+t.toISOString();case"string":return`${n.string}${encodeURIComponent(t)}`;case"number":return n.number+String(t);case"boolean":return n.boolean+String(t);case"object":case"array":return JSON.stringify(t,i).replaceAll('"',"'");case"null":return n.null;case"undefined":return n.undefined;default:return String(t)}}function u(t,e){return function(t,e){try{return JSON.parse(t,d)}catch{const n=l(t);return n!==f?n:e}}(t.replaceAll("'",'"'),e)}const i=(t,e)=>{const n=r(e);return t&&"object"!==n&&"array"!==n?a(e):e},l=t=>t===n.null?null:t!==n.undefined?t?.startsWith?.(n.number)?Number.parseFloat(t.replace(n.number,"")):t?.startsWith?.(n.boolean)?!!t.includes("true"):t?.startsWith?.(n.date)?new Date(t.slice(1)):t?.startsWith?.(n.string)?decodeURIComponent(t).replace(/^◖/,""):f:void 0,f=Symbol("isError"),d=(t,e)=>{const n="string"==typeof e,r=n&&l(e);return r===f?e:t&&n?r:e};const g=(t,e)=>{const n="string"==typeof e,r=n&&u(e?.replaceAll?.("'",'"'));return t&&n?r:e};function p(t,e){try{return JSON.parse(t,g)}catch{const n=l(t);return n!==f?n:e}}function y(t,e,n){const r=o(n);return Object.entries(t||{}).forEach((([t,n])=>{const c=e?.[t];JSON.stringify(n)!==JSON.stringify(c)&&r.set(t,a(n))})),r.toString()}function b(t,e){return{...e||{},...Object.fromEntries([...o(t).entries()].map((([t,n])=>{const r=e?.[t];return[t,u(n,r)??r]})))}}function h(e){const n=t.useCallback((function(t,n){return"object"===r(t)?y(t,e,n):""}),[e]);return{parse:t.useCallback((function(t){return b(t,e)}),[e]),stringify:n}}const S=new WeakMap,m=new WeakMap,w={get:t=>m.get(t)||[],add(t,e){const n=this.get(t);return m.set(t,n.concat(e)),()=>this.remove(t,e)},remove(t,e){const n=this.get(t).filter((t=>t!==e));n.length?m.set(t,n):m.delete(t)}},O={get:function(t){return S.get(t)},set:function(t,e){S.set(t,e)}};function E(n,r){const{parse:o,stringify:a}=h(n),{state:u,getState:i,setState:l}=function(e,n){const r=t.useRef(e),[o,a]=t.useState((()=>{if(c())return n?.()||r.current;const t=O.get(r.current);if(!t){const t=n?.()||r.current;return O.set(r.current,t),t}return t})),u=t.useCallback((t=>{const e=O.get(r.current)||r.current;if("function"==typeof t){const n=t(e);if(s(e,n))return;O.set(r.current,n),w.get(r.current).forEach((t=>{t()}))}else{if(s(e,t))return;O.set(r.current,t),w.get(r.current).forEach((t=>{t()}))}}),[]);return t.useInsertionEffect((()=>{const t=w.add(r.current,(()=>{a(O.get(r.current)||r.current)}));return()=>{t()}}),[u]),{state:o,getState:t.useCallback((()=>O.get(r.current)||r.current),[]),setState:u}}(n,(()=>{return c()?(t=r,e=n,{...e,...p(JSON.stringify(t),e)}):o(window.location.search);var t,e})),f=e();t.useInsertionEffect((()=>{const t=()=>{const t=o(window.location.search);l(t)},e="popstate";return window.addEventListener(e,t),()=>{window.removeEventListener(e,t)}}),[l]);const d=t.useCallback(((t,e)=>{const n=window.location.search,r=`${window.location.pathname}${n.length&&!n.includes("?")?"?":""}${n}`;let c,o;"function"==typeof t?(c=t(i()),o=a(c)):(c=t??i(),o=a(c)),l(c);const s=`${window.location.pathname}${o.length?"?":""}${o}`;if(r!==s){const{replace:t,...n}=e||{};f[t?"replace":"push"](s,{scroll:!1,...n})}}),[f,a,i]);return{updateState:l,updateUrl:d,state:u}}export{u as decode,b as decodeState,a as encode,y as encodeState,h as useUrlEncode,E as useUrlState};
+import t from"react";import{useRouter as e}from"next/navigation";const n={string:"◖",boolean:"🗵",null:"∙null",undefined:"∙undefined",number:"∓",date:"⏲"},r=t=>{const e=null===t,n=Array.isArray(t),r=t instanceof Date;return(e?"null":r&&"date")||n&&"array"||!e&&!r&&!n&&"object"==typeof t&&"object"||typeof t},c=()=>"undefined"==typeof window,o=t=>new URLSearchParams("string"==typeof t?t:t?.toString?.()||""),s=(t,e)=>JSON.stringify(t)===JSON.stringify(e);function u(t){switch(r(t)){case"function":case"symbol":return"";case"date":return n.date+t.toISOString();case"string":return`${n.string}${encodeURIComponent(t)}`;case"number":return n.number+String(t);case"boolean":return n.boolean+String(t);case"object":case"array":return JSON.stringify(t,i).replaceAll('"',"'");case"null":return n.null;case"undefined":return n.undefined;default:return String(t)}}function a(t,e){return function(t,e){try{return JSON.parse(t,d)}catch{const n=l(t);return n!==f?n:e}}(t.replaceAll("'",'"'),e)}const i=(t,e)=>{const n=r(e);return t&&"object"!==n&&"array"!==n?u(e):e},l=t=>t===n.null?null:t!==n.undefined?t?.startsWith?.(n.number)?Number.parseFloat(t.replace(n.number,"")):t?.startsWith?.(n.boolean)?!!t.includes("true"):t?.startsWith?.(n.date)?new Date(t.slice(1)):t?.startsWith?.(n.string)?decodeURIComponent(t).replace(/^◖/,""):f:void 0,f=Symbol("isError"),d=(t,e)=>{const n="string"==typeof e,r=n&&l(e);return r===f?e:t&&n?r:e};const g=(t,e)=>{const n="string"==typeof e,r=n&&a(e?.replaceAll?.("'",'"'));return t&&n?r:e};function p(t,e){try{return JSON.parse(t,g)}catch{const n=l(t);return n!==f?n:e}}function y(t,e,n){const r=o(n);return Object.entries(t||{}).forEach((([t,n])=>{const c=e?.[t];JSON.stringify(n)!==JSON.stringify(c)&&r.set(t,u(n))})),r.toString()}function b(t,e){return{...e||{},...Object.fromEntries([...o(t).entries()].map((([t,n])=>{const r=e?.[t];return[t,a(n,r)??r]})))}}const h=new WeakMap,S=new WeakMap,m={get:t=>S.get(t)||[],add(t,e){const n=this.get(t);return S.set(t,n.concat(e)),()=>this.remove(t,e)},remove(t,e){const n=this.get(t).filter((t=>t!==e));n.length?S.set(t,n):S.delete(t)}},w={get:function(t){return h.get(t)},set:function(t,e){h.set(t,e)}},O=t.useInsertionEffect||t.useEffect;function E(e){const n=t.useCallback((function(t,n){return"object"===r(t)?y(t,e,n):""}),[e]);return{parse:t.useCallback((function(t){return b(t,e)}),[e]),stringify:n}}function N(n,r){const{parse:o,stringify:u}=E(n),{state:a,getState:i,setState:l}=function(e,n){const r=t.useRef(e),[o,u]=t.useState((()=>{if(c())return n?.()||r.current;const t=w.get(r.current);if(!t){const t=n?.()||r.current;return w.set(r.current,t),t}return t})),a=t.useCallback((t=>{const e=w.get(r.current)||r.current;if("function"==typeof t){const n=t(e);if(s(e,n))return;w.set(r.current,n),m.get(r.current).forEach((t=>{t()}))}else{if(s(e,t))return;w.set(r.current,t),m.get(r.current).forEach((t=>{t()}))}}),[]);return O((()=>{const t=m.add(r.current,(()=>{u(w.get(r.current)||r.current)}));return()=>{t()}}),[]),{state:o,getState:t.useCallback((()=>w.get(r.current)||r.current),[]),setState:a}}(n,(()=>{return c()?(t=r,e=n,{...e,...p(JSON.stringify(t),e)}):o(window.location.search);var t,e})),f=e();t.useInsertionEffect((()=>{const t=()=>{const t=o(window.location.search);l(t)},e="popstate";return window.addEventListener(e,t),()=>{window.removeEventListener(e,t)}}),[l]);const d=t.useCallback(((t,e)=>{const n=window.location.search,r=`${window.location.pathname}${n.length&&!n.includes("?")?"?":""}${n}`;let c,o;"function"==typeof t?(c=t(i()),o=u(c)):(c=t??i(),o=u(c)),l(c);const s=`${window.location.pathname}${o.length?"?":""}${o}`;if(r!==s){const{replace:t,...n}=e||{};f[t?"replace":"push"](s,{scroll:!1,...n})}}),[f,u,i]);return{updateState:l,updateUrl:d,state:a}}export{a as decode,b as decodeState,u as encode,y as encodeState,E as useUrlEncode,N as useUrlState};

package/dist/urlstate/index.d.ts

@@ -1,7 +1,8 @@
 import { decode, encode, parseSsrQs } from './encoder';
 import { decodeState, encodeState } from './encodeState';
+import { useSharedState } from './useSharedState';
 import { useUrlEncode } from './useUrlEncode';
 import { useUrlState } from './useUrlState';
 import { isSSR, type JSONCompatible, type Type, typeOf } from './utils';
-export { decode, decodeState, encode, encodeState, isSSR, parseSsrQs, typeOf, useUrlEncode, useUrlState, };
+export { decode, decodeState, encode, encodeState, isSSR, parseSsrQs, typeOf, useSharedState, useUrlEncode, useUrlState, };
 export type { JSONCompatible, Type };

package/dist/urlstate/useInsertionEffect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useInsertionEffect: typeof React.useInsertionEffect;

package/dist/urlstate/useSharedState/index.d.ts

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

package/dist/urlstate/useSharedState/useSharedState.d.ts

@@ -0,0 +1,24 @@
+import { type DeepReadonly, type JSONCompatible } from '../utils';
+/**
+ * Custom React hook for sharing state between unrelated components.
+ *
+ * @param {T} defaultState - The default state object
+ * @param {() => T} [_getInitial] - Optional function to get initial state
+ * @returns {Object} Object containing `state`, `getState`, and `setState` functions
+ *
+ * * Example:
+ * ```ts
+ * export const form = { name: '' };
+ * const { state, setState } = useSharedState(form);
+ *
+ * setState({ name: 'test' });
+ * // OR
+ * setState(curr => ({ ...curr, name: 'test' }))
+ *  ```
+ *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/useSharedState}
+ */
+export declare function useSharedState<T extends JSONCompatible>(defaultState: T, _getInitial?: () => T): {
+    state: T;
+    getState: () => T;
+    setState: (value: T | DeepReadonly<T> | ((currState: T) => T)) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "1.0.2",
+  "version": "1.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": [
@@ -36,7 +36,8 @@
   },
   "workspaces": [
     "packages/urlstate",
-    "packages/example-nextjs"
+    "packages/example-nextjs",
+    "packages/example-react"
   ],
   "files": [
     "dist"
@@ -67,7 +68,7 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "test:unit": "wireit",
-    "test:int": "playwright test",
+    "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": "wireit",
     "tsc": "wireit",
@@ -75,9 +76,8 @@
     "dev:lib": "wireit",
     "dev:nextjs": "wireit",
     "bump": "npx standard-version --no-verify",
-    "bump:ex": "npm i state-in-url@latest --workspace=packages/example-nextjs",
     "build": "wireit",
-    "build:demo": "cd packages/example-nextjs && npm run build",
+    "build:demo": "wireit",
     "start:demo": "npm run build && cd packages/example-nextjs && npm run build && npm run start",
     "cleanup": "rm -rf dist",
     "setup": "playwright install --with-deps",
@@ -89,11 +89,15 @@
     "test": {
       "dependencies": [
         "tsc",
-        "build",
-        "test:unit",
-        "dev:nextjs"
+        "test:unit"
       ],
-      "command": "npx playwright test --project=chromium -j 2"
+      "command": "npm run test:int"
+    },
+    "test:int": {
+      "command": "playwright test",
+      "dependencies": [
+        "example:react"
+      ]
     },
     "tsc": {
       "command": "npx tsc --noEmit"
@@ -124,12 +128,35 @@
     },
     "dev:nextjs": {
       "command": "cd packages/example-nextjs && npm run dev",
+      "dependencies": [
+        "dev:react"
+      ],
       "service": {
         "readyWhen": {
           "lineMatches": "Ready in"
         }
       }
     },
+    "build:demo": {
+      "dependencies": [
+        "example:react"
+      ],
+      "command": "cd packages/example-nextjs && npm run build"
+    },
+    "dev:react": {
+      "command": "cd packages/example-react && npm run dev",
+      "service": {
+        "readyWhen": {
+          "lineMatches": "✓ built in"
+        }
+      }
+    },
+    "example:react": {
+      "command": "cd packages/example-react && npm run build",
+      "dependencies": [
+        "build"
+      ]
+    },
     "build": {
       "command": "rollup -c rollup.config.js",
       "dependencies": [

package/dist/urlstate/useCommonState.d.ts

@@ -1,6 +0,0 @@
-import { type DeepReadonly, type JSONCompatible } from './utils';
-export declare function useCommonState<T extends JSONCompatible>(defaultState: T, _getInitial?: () => T): {
-    state: T;
-    getState: () => T;
-    setState: (value: T | DeepReadonly<T> | ((currState: T) => T)) => void;
-};