@tschk/moonshine-tanstack 0.4.0 → 0.4.4

package/README.md

@@ -65,9 +65,9 @@ own loader/RPC runtime, and are **not** provided:
 - **Transitions/blocking**: `useBlocker`, `Block`, `isTransitioning`
   (always `false`), `useRouterState().status` (always `"idle"`),
   `matches` (always empty).
-- **History state**: `location.state` is always `{}`; there is no
-  `useHistoryState`.
-- `useSearch` reads `window.location.search`; on the server it is empty because
-  moonshine's router signal carries the pathname only.
+- **History state hook**: navigation state is available in `location.state`;
+  there is no separate `useHistoryState` hook.
+- `useSearch` 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-tanstack",
-  "version": "0.4.0",
+  "version": "0.4.4",
   "description": "TanStack Router / Start client API reimplemented on moonshine — drop @tanstack/react-router, keep the imports",
   "license": "ISC",
   "type": "module",
@@ -16,8 +16,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",
@@ -38,5 +38,13 @@
     "lint": "bunx oxlint .",
     "typecheck": "bunx tsc --noEmit",
     "test": "bun test"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }

package/src/link.ts

@@ -16,8 +16,12 @@ import {
   type AnchorHTMLAttributes,
   type MouseEvent,
   type ReactNode,
+  type RefObject,
 } from "react";
-import { isExternal, navigate } from "@tschk/moonshine/router";
+import {
+  isExternal,
+  useNavigate as useMoonshineNavigate,
+} from "@tschk/moonshine/router";
 import { buildHref, type ToOptions } from "./location";
 import { useParsedLocation } from "./location";
 
@@ -55,34 +59,12 @@ function pathnameOf(href: string): string {
   return cut === -1 ? href : href.slice(0, cut);
 }
 
-export function Link({
-  to,
-  from: _from,
-  params,
-  search,
-  hash,
-  replace,
-  resetScroll,
-  activeOptions,
-  preload = "intent",
-  disabled,
-  activeProps,
-  inactiveProps,
-  className,
-  style,
-  children,
-  onClick,
-  onMouseEnter,
-  ...rest
-}: LinkProps): ReactNode {
-  const location = useParsedLocation();
-  const href = buildHref({ to, params, search, hash }, location.search);
-  const external = isExternal(href, rest.target);
-  const ref = useRef<HTMLAnchorElement>(null);
-  // Navigation runs in a transition so a slow subtree cannot block the click.
-  const [, startTransition] = useTransition();
-  const inert = external || disabled === true || preload === false;
-
+function useLinkPreload(
+  ref: RefObject<HTMLAnchorElement | null>,
+  href: string,
+  preload: LinkProps["preload"],
+  inert: boolean,
+) {
   const warm = useCallback(() => {
     if (!inert) preloadOnce(href);
   }, [inert, href]);
@@ -113,20 +95,85 @@ export function Link({
     return () => observer.disconnect();
   }, [warm, preload, inert]);
 
+  return warm;
+}
+
+function isLinkActive(
+  locationPath: string,
+  target: string,
+  exact?: boolean,
+): boolean {
+  if (exact) return locationPath === target;
+  return (
+    locationPath === target ||
+    locationPath.startsWith(target.endsWith("/") ? target : `${target}/`)
+  );
+}
+
+function shouldNavigate(
+  event: MouseEvent<HTMLAnchorElement>,
+  external: boolean,
+  disabled?: boolean,
+): boolean {
+  return (
+    !event.defaultPrevented &&
+    event.button === 0 &&
+    !event.metaKey &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.shiftKey &&
+    !external &&
+    disabled !== true
+  );
+}
+
+export function Link({
+  to,
+  from: _from,
+  params,
+  search,
+  hash,
+  replace,
+  state: historyState,
+  resetScroll,
+  activeOptions,
+  preload = "intent",
+  disabled,
+  activeProps,
+  inactiveProps,
+  className,
+  style,
+  children,
+  onClick,
+  onMouseEnter,
+  ...rest
+}: LinkProps): ReactNode {
+  const navigate = useMoonshineNavigate();
+  const location = useParsedLocation();
+  const href = buildHref({ to, params, search, hash }, location.search);
+  const ref = useRef<HTMLAnchorElement>(null);
+  // Navigation runs in a transition so a slow subtree cannot block the click.
+  const [, startTransition] = useTransition();
   const target = pathnameOf(href);
-  const isActive = activeOptions?.exact
-    ? location.pathname === target
-    : location.pathname === target ||
-      location.pathname.startsWith(
-        target.endsWith("/") ? target : `${target}/`,
-      );
+  const isActive = isLinkActive(
+    location.pathname,
+    target,
+    activeOptions?.exact,
+  );
+  const anchorProps = { ...rest, ...(isActive ? activeProps : inactiveProps) };
+  const external = isExternal(
+    href,
+    anchorProps.target as string | undefined,
+    anchorProps.download,
+  );
+  const inert = external || disabled === true || preload === false;
+  const warm = useLinkPreload(ref, href, preload, inert);
   const state: LinkRenderState = { isActive, isTransitioning: false };
 
   return createElement(
     "a",
     {
-      ...rest,
-      ...(isActive ? activeProps : inactiveProps),
+      ...anchorProps,
       ref,
       href,
       style,
@@ -139,21 +186,10 @@ export function Link({
       },
       onClick: (event: MouseEvent<HTMLAnchorElement>) => {
         onClick?.(event);
-        if (
-          event.defaultPrevented ||
-          event.button !== 0 ||
-          event.metaKey ||
-          event.altKey ||
-          event.ctrlKey ||
-          event.shiftKey ||
-          external ||
-          disabled === true
-        ) {
-          return;
-        }
+        if (!shouldNavigate(event, external, disabled)) return;
         event.preventDefault();
         startTransition(() => {
-          navigate(href, { replace });
+          navigate(href, { replace, state: historyState });
           if (resetScroll !== false) globalThis.scrollTo?.(0, 0);
         });
       },
@@ -166,10 +202,11 @@ export type NavigateProps = ToOptions;
 
 /** Redirects on mount. */
 export function Navigate(props: NavigateProps): null {
+  const navigate = useMoonshineNavigate();
   const location = useParsedLocation();
   const href = buildHref(props, location.search);
   useEffect(() => {
-    navigate(href, { replace: props.replace });
-  }, [href, props.replace]);
+    navigate(href, { replace: props.replace, state: props.state });
+  }, [navigate, href, props.replace, props.state]);
   return null;
 }

package/src/location.ts

@@ -3,11 +3,13 @@
 /**
  * TanStack Router's location shape, derived from the moonshine router signal.
  *
- * Moonshine's 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 SearchRecord = Record<string, unknown>;
 
@@ -27,6 +29,7 @@ export type ToOptions = {
   search?: SearchRecord | ((current: SearchRecord) => SearchRecord);
   hash?: string;
   replace?: boolean;
+  state?: Record<string, unknown>;
   resetScroll?: boolean;
 };
 
@@ -87,7 +90,7 @@ export function buildHref(
   return `${pathname}${stringifySearch(search)}${hash}`;
 }
 
-function browserPart(part: "search" | "hash"): string {
+function browserPart(part: "hash"): string {
   if (typeof window === "undefined") return "";
   return window.location[part];
 }
@@ -99,8 +102,12 @@ export function useRerender(): () => void {
 }
 
 export function useParsedLocation(): ParsedLocation {
-  const pathname = useMoonshineLocation();
-  const searchStr = browserPart("search");
+  const source = useMoonshineLocation();
+  const pathname = source.split("?", 1)[0]!;
+  const history = useMoonshineHistory();
+  const searchStr = source.includes("?")
+    ? source.slice(source.indexOf("?"))
+    : "";
   const hash = browserPart("hash");
   return useMemo(
     () => ({
@@ -109,9 +116,8 @@ export function useParsedLocation(): ParsedLocation {
       search: parseSearch(searchStr),
       searchStr,
       hash,
-      // History state is not tracked by the moonshine router.
-      state: {},
+      state: (history.state ?? {}) as Record<string, unknown>,
     }),
-    [pathname, searchStr, hash],
+    [pathname, searchStr, hash, history],
   );
 }

package/src/navigation.ts

@@ -9,7 +9,7 @@
  */
 import { useCallback, useMemo } from "react";
 import {
-  navigate,
+  useNavigate as useMoonshineNavigate,
   useParams as useMoonshineParams,
 } from "@tschk/moonshine/router";
 import {
@@ -36,6 +36,7 @@ export type RouterInstance = {
 };
 
 export function useNavigate(): NavigateFn {
+  const navigate = useMoonshineNavigate();
   const location = useParsedLocation();
   const rerender = useRerender();
   return useCallback(
@@ -44,12 +45,11 @@ export function useNavigate(): NavigateFn {
         { ...options, to: options.to ?? location.pathname },
         location.search,
       );
-      navigate(href, { replace: options.replace });
+      navigate(href, { replace: options.replace, state: options.state });
       if (options.resetScroll !== false) globalThis.scrollTo?.(0, 0);
-      // A query-only navigation leaves the pathname signal unchanged.
       rerender();
     },
-    [location.pathname, location.search, rerender],
+    [navigate, location.pathname, location.search, rerender],
   );
 }