use-navigation-api 0.0.7 → 0.2.0

package/package.json

@@ -21,12 +21,15 @@
       "require": "./dist/use-navigation-api.umd.js"
     }
   },
-  "version": "0.0.7",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "build": "tsc -b && vite build",
     "lint": "eslint ."
   },
+  "dependencies": {
+    "uri-js": "^4.4.1"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./navigationProvider";
-export * from "./location/useLocation.ts";
 export * from "./useNavigate";
-export * from "./location/useQueryParam.ts";
+export * from "./location/useLocation";
+export * from "./location/useQueryParam";
+export * from "./location/useLocationWithParam";

package/src/location/useLocation.ts

@@ -1,37 +1,17 @@
 import { useContext, useMemo } from "react";
-import {
-  NavigationContext,
-  type NavigationContextState,
-} from "src/navigationProvider.ts";
+import { NavigationContext } from "src/navigationProvider.ts";
+import URI from "uri-js";
 
-type Location = { pathname: string; search: string; hash: string; url?: URL };
+const DUMMY_BASE = "fakeprotodonotuse://";
 
-export function parseLocation(
-  location: string,
-  {
-    url = window?.location?.href || "https://example.com/",
-  }: NavigationContextState,
-): Location {
-  try {
-    const parsed = new URL(location, url);
-    return {
-      url: parsed,
-      pathname: parsed.pathname,
-      search: parsed.search,
-      hash: parsed.hash,
-    };
-  } catch {
-    /* fall back to string parsing */
-  }
-  if (!location) return { pathname: "/", search: "", hash: "" };
-  const pathname = location.split("?")[0];
-  const search = location.substring(pathname.length).split("#")[0];
-  const hash = location.substring(pathname.length + search.length);
-  try {
-    return { url: undefined, pathname, search, hash };
-  } catch {
-    return { url: undefined, pathname, search, hash };
-  }
+export type Location = string;
+
+export function resolveLocation(location: string, base: string): string {
+  const parsed = URI.parse(URI.resolve(base, location));
+  parsed.scheme = undefined;
+  parsed.host = undefined;
+  parsed.port = undefined;
+  return URI.serialize(parsed);
 }
 
 /**
@@ -41,31 +21,29 @@ export function useLocation(): Location;
 /**
  * Resolves a URL string relative to the current location and returns its parts.
  */
-export function useLocation(url: string): Location;
-/**
- * Resolves a URL string relative to the current location after applying the supplied function.
- */
-export function useLocation<R>(
-  url: string,
-  parse: (location: string, value: NavigationContextState) => R,
-): R;
+export function useLocation(url: string, base?: string): Location;
 /**
  * Returns a location based on the returned url if present, or the modified input argument.
  * For instance, `useLocation(url => url.searchParams.set("parameter", "value"))` returns the current location with only a single parameter updated.
  */
-export function useLocation(url: (current: URL) => URL | void): Location;
+export function useLocation(
+  url: (current: URL) => URL | void,
+  base?: string,
+): Location;
+
 export function useLocation(
   url?: string | ((current: URL) => URL | void),
-  parse = parseLocation,
+  baseIn?: string,
 ) {
   const location = useContext(NavigationContext);
+  const base = baseIn ?? location.url;
   return useMemo(() => {
-    if (typeof url === "string") return parse(url, location);
+    if (typeof url === "string") return resolveLocation(url, base);
     if (typeof url === "function") {
-      const modified = new URL(location.url);
+      const modified = new URL(base, DUMMY_BASE);
       const returned = url(modified);
-      return parse((returned || modified).href, location);
+      return resolveLocation((returned || modified).href, base);
     }
-    return parse("", location);
-  }, [parse, url, location]);
+    return resolveLocation("", base);
+  }, [url, base]);
 }

package/src/location/useLocationWithParam.ts

@@ -0,0 +1,45 @@
+import { useLocation } from "src/location/useLocation.ts";
+
+/**
+ * returns The current location with the specified parameter set to the provided value or removed if the value === null.
+ * @param param name of the query parameter to set
+ * @param value value to set the parameter to, or `null` to remove any existing value of that parameter
+ * @param base If provided, uses this value instead of the current location.
+ */
+export function useLocationWithParam(
+  param: string,
+  value: string | null,
+  base?: string,
+) {
+  return useLocation(
+    (url) =>
+      value === null
+        ? url.searchParams.delete(param)
+        : url.searchParams.set(param, value),
+    base,
+  );
+}
+
+/**
+ * returns The current location with the specified parameter set to the provided value or removed if the value === null.
+ * @param params map of parameters to update. null or empty entries will be removed.
+ * @param base If provided, uses this value instead of the current location.
+ */
+export function useLocationWithParams(
+  params: Record<string, string | string[] | null>,
+  base?: string,
+) {
+  return useLocation((url) => {
+    for (const [param, value] of Object.entries(params)) {
+      if (value === null) {
+        url.searchParams.delete(param);
+      } else if (Array.isArray(value)) {
+        url.searchParams.delete(param);
+        value.forEach((v) => url.searchParams.append(param, v));
+      } else {
+        url.searchParams.set(param, value);
+      }
+    }
+    return url;
+  }, base);
+}

package/src/location/useQueryParam.ts

@@ -1,5 +1,10 @@
 import { useLocation } from "src/location/useLocation.ts";
 import { useMemo } from "react";
+import URI from "uri-js";
+
+export function parseSearchParams(location?: string) {
+  return new URLSearchParams(URI.parse(location || "").query);
+}
 
 /**
  * Returns the first value for a query parameter, or null if it is missing.
@@ -9,12 +14,12 @@ export function useQueryParam(param: string, all?: false): string | null;
  * Returns all values for a query parameter when it appears multiple times.
  */
 export function useQueryParam(param: string, all: true): string[];
+
 export function useQueryParam(param: string, all: boolean = false) {
   const location = useLocation();
   return useMemo(() => {
     try {
-      const searchParams =
-        location.url?.searchParams || new URLSearchParams(location.search);
+      const searchParams = parseSearchParams(location);
       return all ? searchParams.getAll(param) || [] : searchParams.get(param);
     } catch {
       return null;

package/src/navigationProvider.ts

@@ -9,9 +9,9 @@ import {
   useMemo,
   useState,
 } from "react";
+import URI from "uri-js";
 
 export type NavigationContextState = {
-  navigation: Navigation;
   url: string;
   store: "url" | "hash" | "memory";
 };
@@ -19,8 +19,7 @@ type NavigationContextValue = NavigationContextState & {
   setState?: Dispatch<SetStateAction<NavigationContextState>>;
 };
 const defaultValue: NavigationContextValue = {
-  navigation: window.navigation!,
-  url: window?.location?.href || "/",
+  url: "/",
   store: "url" as "url" | "hash" | "memory",
 };
 export const NavigationContext = createContext(defaultValue);
@@ -41,9 +40,11 @@ export const NavigationProvider: FC<{
   scoped,
   shouldHandle = defaultShouldHandle,
 }) => {
-  const navigation = defaultValue.navigation;
   const [scope, setScope] = useState<HTMLDivElement | null>(null);
-  const [state, setState] = useState(() => ({ ...defaultValue, store }));
+  const [state, setState] = useState(() => ({
+    store,
+    url: window.location.href,
+  }));
   const skip = useMemo(
     () => (event: NavigateEvent) => {
       const target = event.sourceElement;
@@ -70,7 +71,7 @@ export const NavigationProvider: FC<{
           ) {
             const href = event.sourceElement.getAttribute("href");
             if (href && !href.startsWith("/") && !/^[a-z]+:\/\//i.test(href)) {
-              url = new URL(href, prev.url).href;
+              url = URI.resolve(prev.url, href);
             }
           }
           return { ...prev, url, store };
@@ -78,7 +79,7 @@ export const NavigationProvider: FC<{
       } else {
         event.intercept({
           async handler() {
-            setState({ navigation, url, store });
+            setState({ url, store });
           },
         });
       }
@@ -86,7 +87,7 @@ export const NavigationProvider: FC<{
 
     navigation?.addEventListener("navigate", handler);
     return () => navigation?.removeEventListener("navigate", handler);
-  }, [skip, navigation, scoped, store]);
+  }, [skip, scoped, store]);
 
   const value = useMemo(() => ({ ...state, setState }), [state]);
 

package/src/useNavigate.ts

@@ -1,11 +1,12 @@
 import { useContext, useMemo } from "react";
 import { NavigationContext } from "src/navigationProvider";
 import { future } from "src/util/future";
+import URI from "uri-js";
 
 export function useNavigate() {
-  const { navigation, setState } = useContext(NavigationContext);
+  const { setState } = useContext(NavigationContext);
   return useMemo(() => {
-    if (!setState) return navigation;
+    if (!setState || !navigation) return navigation;
     const navigate: Navigation["navigate"] = (destination, options) => {
       const result = {
         committed: future(true),
@@ -20,10 +21,7 @@ export function useNavigate() {
         Promise.resolve().then(() => {
           try {
             handle(
-              navigation.navigate(
-                new URL(destination, state.url).href,
-                options,
-              ),
+              navigation.navigate(URI.resolve(state.url, destination), options),
             );
           } catch {
             handle(navigation.navigate(destination, options));
@@ -40,5 +38,5 @@ export function useNavigate() {
         return typeof value === "function" ? value.bind(target) : value;
       },
     });
-  }, [navigation, setState]);
+  }, [setState]);
 }