More fixes

apps/playground/src/app/array-values/page.tsx

@@ -1,12 +1,16 @@
 "use client";
 
 import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { SetKeyValueArrayInputs } from "@/components/set-key-value-inputs";
 import { Alert } from "@/components/ui/alert";
-import { useObserveAndStore } from "@sp-hooks/next";
+
+import { searchParamsToObject, useObserveAndStore } from "@sp-hooks/next";
 
 export default function Page() {
-  const [state, setState] = useState({});
+  const sp = useSearchParams();
+
+  const [state, setState] = useState(searchParamsToObject(sp));
 
   useObserveAndStore(state);
 
@@ -16,7 +20,11 @@ export default function Page() {
         {"This demonstration shows how to use the library with arrays."}
       </Alert>
 
-      <SetKeyValueArrayInputs setState={setState} />
+      <SetKeyValueArrayInputs
+        setState={(key, values) => {
+          setState((s) => ({ ...s, [key]: values }));
+        }}
+      />
 
       <pre>{JSON.stringify(state, null, 2)}</pre>
     </div>

apps/playground/src/app/basic/page.tsx

@@ -1,11 +1,10 @@
 "use client";
 
+import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { SetKeyValueInputs } from "@/components/set-key-value-inputs";
 
-import { useObserveAndStore,  } from "@sp-hooks/next";
-import { searchParamsToObject } from "@sp-hooks/react"
-import { useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { searchParamsToObject, useObserveAndStore } from "@sp-hooks/next";
 
 export default function Page() {
   const sp = useSearchParams();

apps/playground/src/app/with-default-values/page.tsx

@@ -1,21 +1,31 @@
 "use client";
 
 import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { SetKeyValueInputs } from "@/components/set-key-value-inputs";
 import { Alert } from "@/components/ui/alert";
-import { useObserveAndStore } from "@sp-hooks/next";
+
+import { searchParamsToObject, useObserveAndStore } from "@sp-hooks/next";
+
+const defaultValues = {
+  hello: "world",
+};
 
 export default function Page() {
-  const [state, setState] = useState<Record<string, string | string[]>>({
-    hello: "world",
-  });
+  const sp = useSearchParams();
+
+  const [state, setState] = useState(
+    searchParamsToObject(sp, { defaultValues }),
+  );
 
-  useObserveAndStore(state);
+  useObserveAndStore(state, { defaultValues });
 
   return (
     <div>
       <Alert>
-        {'This page has a default value of "world" for the key "hello".'}
+        {
+          'This page has a default value of "world" for the key "hello". The key/value pair is removed from URL if its set to the default value.'
+        }
       </Alert>
 
       <SetKeyValueInputs setState={setState} />

apps/playground/src/app/with-weak-typesafety/page.tsx

@@ -3,9 +3,10 @@
 import { useState } from "react";
 import { SetKeyValueInputs } from "@/components/set-key-value-inputs";
 import { Alert } from "@/components/ui/alert";
-import { useObserveAndStore } from "@sp-hooks/next";
 
-interface SearchParamsType extends Record<string, string | string[]> {
+import { SPHooksStateType, useObserveAndStore } from "@sp-hooks/next";
+
+interface SearchParamsType extends SPHooksStateType {
   page: string;
   search: string;
   testArray: string[];

packages/next/src/index.ts

@@ -1,36 +1,23 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import {
-  useObserveAndStore as useObserveAndStoreReact,
-  type SupportedValues,
-} from "@sp-hooks/react";
+import { usePathname, useRouter } from "next/navigation";
 
-// export const useSearchParamsState = <
-//   S extends Partial<Record<string, string | string[]>>,
-// >(
-//   opts?: UseSearchParamsStateOptions<S>,
-// ) => {
-//   const searchParams = useSearchParams();
-//   const router = useRouter();
-//   const pathname = usePathname();
+import { useObserveAndStore as useObserveAndStoreReact } from "@sp-hooks/react";
+import type { SPHooksStateType } from "@sp-hooks/react";
 
-//   const setSearchParams = (newSearchParams: URLSearchParams) => {
-//     router.push(pathname + "?" + newSearchParams.toString());
-//   };
+export * from "@sp-hooks/react";
+export type * from "@sp-hooks/react";
 
-//   return useSearchParamsStateReact<S>({
-//     searchParams,
-//     setSearchParams,
-//     ...opts,
-//   });
-// };
-
-export function useObserveAndStore<S extends Record<string, SupportedValues>>(
+export function useObserveAndStore<S extends SPHooksStateType>(
   state: S,
+  options?: { defaultValues?: Partial<S> },
 ) {
   const router = useRouter();
   const pathname = usePathname();
 
-  useObserveAndStoreReact(state, (newSearchParams) => {
-    router.push(pathname + "?" + newSearchParams.toString());
-  });
+  useObserveAndStoreReact(
+    state,
+    (newSearchParams) => {
+      router.push(pathname + "?" + newSearchParams.toString());
+    },
+    options,
+  );
 }