@tschk/moonshine-react-router 0.4.0 → 0.4.4

package/README.md

@@ -65,12 +65,11 @@ provided — do not expect them to work by aliasing:
   `<OutletProvider>` rather than derived from nested config.
 - **Progressive enhancement**: `<Form>`, `<Scripts>`, `<Meta>`, `<Links>`,
   `<ScrollRestoration>`, `<Await>`, `useFormAction`.
-- **History state**: `location.state`, `location.key` stability and
-  `useNavigationType` distinguishing PUSH/POP/REPLACE. `state` is always `null`
-  and `useNavigationType()` always returns `"POP"`.
+- **History keys**: `location.state` and PUSH/POP/REPLACE navigation types are
+  supported, but `location.key` is URL-derived rather than unique per entry.
 - **Error boundaries**: `useRouteError`, `errorElement`. `ErrorResponse` and
   `isRouteErrorResponse` exist as value types only.
-- `useSearchParams` reads `window.location.search`; on the server it is empty
-  because moonshine's router signal carries the pathname only.
+- `useSearchParams` reads the owning router's pathname-plus-query signal,
+  including its scoped server snapshot.
 
 See [Moonshine README](../../README.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tschk/moonshine-react-router",
-  "version": "0.4.0",
+  "version": "0.4.4",
   "description": "react-router / Remix client API reimplemented on moonshine — drop react-router, keep the imports",
   "license": "ISC",
   "type": "module",
@@ -17,8 +17,8 @@
     "./aliases": "./src/aliases.ts"
   },
   "dependencies": {
-    "@tschk/moonshine": "^0.3.6",
-    "@tschk/moonshine-router": "^0.3.6"
+    "@tschk/moonshine": "^0.4.4",
+    "@tschk/moonshine-router": "^0.4.4"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -39,5 +39,13 @@
     "lint": "bunx oxlint .",
     "typecheck": "bunx tsc --noEmit",
     "test": "bun test"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }

package/src/link.ts

@@ -17,7 +17,10 @@ import {
   type MouseEvent,
   type ReactNode,
 } from "react";
-import { isExternal, navigate } from "@tschk/moonshine/router";
+import {
+  isExternal,
+  useNavigate as useMoonshineNavigate,
+} from "@tschk/moonshine/router";
 import { toHref, type To } from "./location";
 import { useLocation } from "./navigation";
 
@@ -28,7 +31,6 @@ export type LinkProps = Omit<
   to: To;
   replace?: boolean;
   preventScrollReset?: boolean;
-  /** Accepted for source compatibility; history state is not tracked. */
   state?: unknown;
   reloadDocument?: boolean;
   /** `"intent"` warms the URL on hover, `"render"` on mount. */
@@ -51,7 +53,7 @@ export function Link({
   to,
   replace,
   preventScrollReset,
-  state: _state,
+  state,
   reloadDocument,
   prefetch = "intent",
   children,
@@ -59,8 +61,9 @@ export function Link({
   onMouseEnter,
   ...rest
 }: LinkProps): ReactNode {
+  const navigate = useMoonshineNavigate();
   const href = toHref(to);
-  const external = isExternal(href, rest.target);
+  const external = isExternal(href, rest.target, rest.download);
   const ref = useRef<HTMLAnchorElement>(null);
   // Navigation runs in a transition so a slow subtree cannot block the click.
   const [, startTransition] = useTransition();
@@ -122,7 +125,7 @@ export function Link({
         }
         event.preventDefault();
         startTransition(() => {
-          navigate(href, { replace });
+          navigate(href, { replace, state });
           if (preventScrollReset !== true) globalThis.scrollTo?.(0, 0);
         });
       },
@@ -190,11 +193,12 @@ export type NavigateProps = {
 };
 
 /** Redirects on mount, the declarative form of `useNavigate()`. */
-export function Navigate({ to, replace }: NavigateProps): null {
+export function Navigate({ to, replace, state }: NavigateProps): null {
+  const navigate = useMoonshineNavigate();
   const href = toHref(to);
   useEffect(() => {
-    navigate(href, { replace });
-  }, [href, replace]);
+    navigate(href, { replace, state });
+  }, [navigate, href, replace, state]);
   return null;
 }
 

package/src/location.ts

@@ -3,11 +3,13 @@
 /**
  * Location shape shared by the react-router hooks.
  *
- * Moonshine's router signal carries the pathname only, so `search` and `hash`
- * are read back from `window.location` on each render.
+ * History state is subscribed independently so same-path navigations update.
  */
 import { useMemo, useReducer } from "react";
-import { useLocation as useMoonshineLocation } from "@tschk/moonshine/router";
+import {
+  useLocation as useMoonshineLocation,
+  useHistory as useMoonshineHistory,
+} from "@tschk/moonshine/router";
 
 export type Location<S = unknown> = {
   pathname: string;
@@ -35,7 +37,7 @@ export function toHref(to: To): string {
   return `${to.pathname ?? ""}${search}${hash}`;
 }
 
-function browserPart(part: "search" | "hash"): string {
+function browserPart(part: "hash"): string {
   if (typeof window === "undefined") return "";
   return window.location[part];
 }
@@ -47,18 +49,19 @@ export function useRerender(): () => void {
 }
 
 export function useLocationObject(): Location {
-  const pathname = useMoonshineLocation();
-  const search = browserPart("search");
+  const source = useMoonshineLocation();
+  const pathname = source.split("?", 1)[0]!;
+  const history = useMoonshineHistory();
+  const search = source.includes("?") ? source.slice(source.indexOf("?")) : "";
   const hash = browserPart("hash");
   return useMemo(
     () => ({
       pathname,
       search,
       hash,
-      // History state is not tracked by the moonshine router.
-      state: null,
+      state: history.state,
       key: `${pathname}${search}${hash}`,
     }),
-    [pathname, search, hash],
+    [pathname, search, hash, history],
   );
 }

package/src/navigation.ts

@@ -9,7 +9,8 @@
  */
 import { useCallback, useMemo } from "react";
 import {
-  navigate,
+  useNavigate as useMoonshineNavigate,
+  useHistory as useMoonshineHistory,
   useParams as useMoonshineParams,
 } from "@tschk/moonshine/router";
 import {
@@ -22,7 +23,6 @@ import {
 
 export type NavigateOptions = {
   replace?: boolean;
-  /** Accepted for source compatibility; history state is not tracked. */
   state?: unknown;
   preventScrollReset?: boolean;
 };
@@ -37,6 +37,7 @@ export function useLocation(): Location {
 }
 
 export function useNavigate(): NavigateFunction {
+  const navigate = useMoonshineNavigate();
   const rerender = useRerender();
   return useCallback(
     (to: To | number, options?: NavigateOptions) => {
@@ -44,11 +45,14 @@ export function useNavigate(): NavigateFunction {
         globalThis.history?.go(to);
         return;
       }
-      navigate(toHref(to), { replace: options?.replace });
+      navigate(toHref(to), {
+        replace: options?.replace,
+        state: options?.state,
+      });
       if (options?.preventScrollReset !== true) globalThis.scrollTo?.(0, 0);
       rerender();
     },
-    [rerender],
+    [navigate, rerender],
   ) as NavigateFunction;
 }
 
@@ -67,6 +71,7 @@ export type SetURLSearchParams = (
 ) => void;
 
 export function useSearchParams(): [URLSearchParams, SetURLSearchParams] {
+  const navigate = useMoonshineNavigate();
   const location = useLocationObject();
   const rerender = useRerender();
   const params = useMemo(
@@ -85,11 +90,11 @@ export function useSearchParams(): [URLSearchParams, SetURLSearchParams] {
       const query = resolved.toString();
       navigate(`${location.pathname}${query ? `?${query}` : ""}`, {
         replace: options?.replace,
+        state: options?.state,
       });
-      // A query-only navigation leaves the pathname signal unchanged.
       rerender();
     },
-    [location.pathname, location.search, rerender],
+    [navigate, location.pathname, location.search, rerender],
   );
 
   return [params, setSearchParams];
@@ -129,10 +134,7 @@ export function useHref(to: To): string {
 
 export type NavigationType = "POP" | "PUSH" | "REPLACE";
 
-/**
- * Moonshine does not record how the current entry was reached, so this always
- * reports `POP`.
- */
+/** How the current history entry was reached. */
 export function useNavigationType(): NavigationType {
-  return "POP";
+  return useMoonshineHistory().action;
 }