fix: query string types

Author: OrionFable

docs/src/pages/playground/loader.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useLoadingState, useQueryStringState } from "../../../../src/brouther/brouther";
+import { useLoadingState, useQueryStringState } from "../../../../src";
 import { Form, jsonResponse, LoaderProps, useDataLoader } from "../../exports";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -16,7 +16,7 @@ const debounce = (fn: Function, ms: number = 0) => {
     let timeoutId: NodeJS.Timeout;
     return function (...args: any[]) {
         clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => fn.apply(this, args), ms);
+        timeoutId = setTimeout(() => fn(...args), ms);
     };
 };
 

src/brouther/brouther-response.ts

@@ -1,4 +1,4 @@
-import { Primitive } from "ts-toolbelt/out/Misc/Primitive";
+import { type Primitive } from "ts-toolbelt/out/Misc/Primitive";
 
 export type ParseSerializable<T> = {
     [K in keyof T]: T[K] extends Primitive ? T[K] : T[K] extends Date | undefined ? string : ParseSerializable<T[K]>;

src/brouther/brouther.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, Fragment, SetStateAction, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsonToURLSearchParams, urlSearchParamsToJson } from "../form/form-data-api";
 import { RouterNavigator } from "../router/router-navigator";
 import type { BroutherFlags, ConfiguredRoute, Location, PathFormat } from "../types";
@@ -360,22 +360,23 @@ export const useFormActions = <R extends object>(): ActionState<R> => useBrouthe
  */
 export const useQueryStringState = <T extends {} | string>(
     _?: T
-): [qs: T extends string ? QueryString.Parse<T> : T, set: (newQuery: T | ((prev: T) => T)) => void] => {
+): T extends string ? [qs: QueryString.Parse<T>, set: (q: SetStateAction<QueryString.Parse<T>>) => void] : [qs: T, set: SetStateAction<T>] => {
+    type Hold = T extends string ? QueryString.Parse<T> : T;
     const { href, page, navigation } = useBrouther();
     const urlSearchParams = useUrlSearchParams();
-    const qs = useMemo(
+    const qs: Hold = useMemo(
         () => (page === null ? ({} as any) : transformData(urlSearchParams, mapUrlToQueryStringRecord(page.originalPath, fromStringToValue))),
         [href, page, urlSearchParams]
     );
     const callback = useCallback(
-        (query: T | ((prev: T) => T)) => {
+        (query: SetStateAction<Hold>) => {
             const location = new URL(window.location.href);
-            const current = urlSearchParamsToJson<T>(new URLSearchParams(window.location.search));
-            const result = typeof query === "function" ? query(current) : { ...(current as any), ...(query as any) };
+            const current = urlSearchParamsToJson<Hold>(new URLSearchParams(window.location.search));
+            const result = typeof query === "function" ? (query as Function)(current) : { ...(current as any), ...(query as any) };
             location.search = jsonToURLSearchParams(result).toString();
             navigation.push(location.href);
         },
         [navigation]
     );
-    return [qs, callback];
+    return [qs as Hold, callback as (q: Hold | ((h: Hold) => Hold)) => void] as any;
 };

src/router/link.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from "react";
 import { useBasename, useFlags, useHref, useNavigation } from "../brouther/brouther";
-import { AnyJson } from "../types";
-import { Paths } from "../types/paths";
+import { type AnyJson } from "../types";
+import { type Paths } from "../types/paths";
 import type { QueryString } from "../types/query-string";
-import { QueryStringMapper } from "../utils/mappers";
-import { TextFragment } from "../utils/text-fragment";
+import { type QueryStringMapper } from "../utils/mappers";
+import { type TextFragment } from "../utils/text-fragment";
 import { fetchTarget, join, mergeUrlEntities } from "../utils/utils";
 
 const isLeftClick = (e: React.MouseEvent) => e.button === 0;

src/router/router.ts

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 import type { Function } from "ts-toolbelt";
 import { useBrouther, useUrlSearchParams } from "../brouther/brouther";
 import type { Actions, AsRouter, CreateMappedRoute, FetchPaths, Loader, Options, PathFormat, Route, RouteData, Router } from "../types";
-import { BrowserHistory } from "../types/history";
+import type { BrowserHistory } from "../types/history";
 import type { Paths } from "../types/paths";
 import type { QueryString } from "../types/query-string";
 import { fromStringToValue, parsePath } from "../utils/mappers";

src/types/index.ts

@@ -1,9 +1,9 @@
 import type React from "react";
 import type { Function, Number, Object, Union } from "ts-toolbelt";
-import { CustomResponse } from "../brouther/brouther-response";
+import { type CustomResponse } from "../brouther/brouther-response";
 import type { RouterNavigator } from "../router/router-navigator";
-import { TextFragment } from "../utils/text-fragment";
-import { BrowserHistory } from "./history";
+import { type TextFragment } from "../utils/text-fragment";
+import { type BrowserHistory } from "./history";
 import type { Paths } from "./paths";
 import type { QueryString } from "./query-string";
 import { X } from "./x";

src/utils/utils.ts

@@ -1,8 +1,8 @@
 import type { CreateHref, Parser, ParsersMap, PathFormat, Route } from "../types";
-import { fromValueToString, QueryStringMapper } from "./mappers";
 import type { Paths } from "../types/paths";
 import type { QueryString } from "../types/query-string";
 import { X } from "../types/x";
+import { fromValueToString, QueryStringMapper } from "./mappers";
 import { stringifyTextFragment, TEXT_FRAGMENT_ID, TextFragment } from "./text-fragment";
 
 export const has = <T extends {}, K extends X.AnyString<keyof T>>(o: T, k: K): k is K => Object.prototype.hasOwnProperty.call(o, k as any);