diff --git a/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx b/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx index e352535..466a0de 100644 --- a/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx +++ b/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx @@ -18,7 +18,6 @@ export const Comp1 = ({ searchParams }: { searchParams?: object }) => { onChange={(ev) => setUrl((curr) => ({ ...curr, perPage: +ev.target.value })) } - className="" data-testid="select" > diff --git a/packages/example-nextjs14/src/app/Status-for-test.tsx b/packages/example-nextjs14/src/app/Status-for-test.tsx index ca121ff..66ac84b 100644 --- a/packages/example-nextjs14/src/app/Status-for-test.tsx +++ b/packages/example-nextjs14/src/app/Status-for-test.tsx @@ -11,7 +11,7 @@ const Status = ({ className, sp }: { className?: string; sp?: object }) => {
Other client component
-

Types and structure of data are presered

+

Types and structure of data are presered

         Other client component
       
-

Types and structure of data are presered

+

Types and structure of data are presered

 {
       
Other client component
-

Types and structure of data are presered

+

Types and structure of data are presered

 {
         onChange={(ev) =>
           setUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
         }
-        className=""
         data-testid="select"
       >
         
diff --git a/packages/example-react-router6/src/Status-for-test.tsx b/packages/example-react-router6/src/Status-for-test.tsx
index 9c6f7f4..931f979 100644
--- a/packages/example-react-router6/src/Status-for-test.tsx
+++ b/packages/example-react-router6/src/Status-for-test.tsx
@@ -8,7 +8,7 @@ const Status = ({ className }: { className?: string }) => {
   return (
     
Other client component
-

Types and structure of data are presered

+

Types and structure of data are presered

(payload: string, fallback?: T) {
   return parseJSON(
-    payload.replaceAll("'", '"').replaceAll("%27", "'"),
+    payload.replace(/'/g, '"').replace(/%27/g, "'"),
     fallback as JSONCompatible,
   );
 }
diff --git a/packages/urlstate/parseSPObj.ts b/packages/urlstate/parseSPObj.ts
index c6ed489..27f77dc 100644
--- a/packages/urlstate/parseSPObj.ts
+++ b/packages/urlstate/parseSPObj.ts
@@ -41,6 +41,6 @@ function parseJSONSsr(
 
 const reviverSPSsr = (key: string, value: unknown) => {
   const isStr = typeof value === "string";
-  const decoded = isStr && decode(value?.replaceAll?.("'", '"'));
+  const decoded = isStr && decode(value?.replace?.(/'/g, '"'));
   return key && isStr ? decoded : value;
 };
diff --git a/packages/urlstate/useUrlStateBase/useUrlStateBase.test.ts b/packages/urlstate/useUrlStateBase/useUrlStateBase.test.ts
index 5276757..5ff834d 100644
--- a/packages/urlstate/useUrlStateBase/useUrlStateBase.test.ts
+++ b/packages/urlstate/useUrlStateBase/useUrlStateBase.test.ts
@@ -229,7 +229,7 @@ describe('useUrlStateBase', () => {
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
         expect(router.push).toHaveBeenCalledTimes(1);
-        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', {});
+        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', undefined);
       });
 
       it('partial shape', async () => {
@@ -244,7 +244,7 @@ describe('useUrlStateBase', () => {
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
         expect(router.push).toHaveBeenCalledTimes(1);
-        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', {});
+        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', undefined);
       });
 
       it('no arg, should reset', async () => {
@@ -262,7 +262,7 @@ describe('useUrlStateBase', () => {
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
         expect(router.push).toHaveBeenCalledTimes(1);
-        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', {});
+        expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', undefined);
       });
     });
 
@@ -278,7 +278,7 @@ describe('useUrlStateBase', () => {
 
       expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
       expect(router.push).toHaveBeenCalledTimes(1);
-      expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', {});
+      expect(router.push).toHaveBeenNthCalledWith(1, '/?num=50', undefined);
     });
 
     it('do not update if url same', () => {
@@ -312,7 +312,7 @@ describe('useUrlStateBase', () => {
       await new Promise(process.nextTick);
 
       expect(router.push).toHaveBeenCalledTimes(1);
-      expect(router.push).toHaveBeenNthCalledWith(1, `/?num=55${hash}`, {});
+      expect(router.push).toHaveBeenNthCalledWith(1, `/?num=55${hash}`, undefined);
     });
 
     it('replace and options', async () => {
diff --git a/packages/urlstate/useUrlStateBase/useUrlStateBase.ts b/packages/urlstate/useUrlStateBase/useUrlStateBase.ts
index 99b95dc..f338afb 100644
--- a/packages/urlstate/useUrlStateBase/useUrlStateBase.ts
+++ b/packages/urlstate/useUrlStateBase/useUrlStateBase.ts
@@ -83,9 +83,9 @@ export function useUrlStateBase(
       let upd: (typeof queue.current)[0] | undefined;
       setState(newVal);
 
-      const { replace, ...rOptions } = options || {};
-
-      queue.current.push([replace ? "replace" : "push", newUrl, rOptions]);
+      const replace = options?.replace;
+      delete options?.replace;
+      queue.current.push([replace ? "replace" : "push", newUrl, options]);
 
       if (queue.current.length === 1)
         queueMicrotask(() => {
@@ -129,7 +129,7 @@ function getOtherParams(shape: T) {
 type UpdateQueueItem = [
   method: "push" | "replace",
   url: string,
-  opts: Partial,
+  opts?: Partial,
 ];
 
 const popstateEv = "popstate";
diff --git a/packages/urlstate/utils.ts b/packages/urlstate/utils.ts
index e564620..3de8914 100644
--- a/packages/urlstate/utils.ts
+++ b/packages/urlstate/utils.ts
@@ -92,7 +92,7 @@ function filterUnknown(
 
   return entries
     .filter(([key]) => shapeKeys.includes(key))
-    .map(([key, val]) => [key.replaceAll("+", " "), val]);
+    .map(([key, val]) => [key.replace(/\+/g, " "), val]);
 }
 
 export function assignValue(shape: T, newVal: Partial) {