@real-router/preact 0.7.0 → 0.9.0

package/src/hooks/useRouteExit.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
+
+import { useRouter } from "./useRouter";
+
+import type { State } from "@real-router/core";
+
+export interface RouteExitContext {
+  /** The route being left. */
+  route: State;
+  /** The route being navigated to. */
+  nextRoute: State;
+  /**
+   * AbortSignal that fires when this navigation is superseded by a later
+   * one (rapid clicks). Already filtered: when the handler runs,
+   * `signal.aborted` is guaranteed to be `false`. Use
+   * `signal.addEventListener("abort", cleanup, { once: true })` for
+   * cleanup that must run on cancellation.
+   */
+  signal: AbortSignal;
+}
+
+export interface UseRouteExitOptions {
+  /**
+   * Skip the handler when `route.name === nextRoute.name`
+   * (sort/filter/query-only navigations on the same route). Default:
+   * `true`.
+   */
+  skipSameRoute?: boolean;
+}
+
+export type RouteExitHandler = (
+  context: RouteExitContext,
+) => void | Promise<void>;
+
+/**
+ * Subscribe to the router's leave-window with the universal guards baked
+ * in. Wraps `router.subscribeLeave` so consumers don't repeat the same
+ * boilerplate every time:
+ *
+ *   - **Reentrant abort pre-check**: if `signal.aborted` is already `true`
+ *     when the handler would run (rapid navigation superseded a slower
+ *     one), the handler is skipped entirely. `signal.addEventListener(
+ *     "abort", ...)` does not fire retroactively, so without this guard
+ *     downstream cleanup would never trigger.
+ *   - **Same-route skip**: by default, `route.name === nextRoute.name`
+ *     short-circuits the handler — query-only navigations (sort, filter,
+ *     pagination) skip the work. Opt out with `skipSameRoute: false`.
+ *   - **Stable handler reference**: the handler can change identity on
+ *     every render without causing resubscription — internal ref keeps
+ *     the latest handler accessible to the long-lived subscription.
+ *
+ * Returns nothing — the subscription's lifecycle is bound to the
+ * component's mount.
+ *
+ * If the handler returns a Promise, the router blocks on it. If the
+ * Promise resolves, navigation proceeds. If it rejects, the router emits
+ * `TRANSITION_CANCELLED` (existing core behavior, no change here).
+ *
+ * @example Animation
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ *
+ * useRouteExit(async ({ signal }) => {
+ *   const el = ref.current;
+ *   if (!el) return;
+ *   el.classList.add("fade-out");
+ *   const cleanup = () => el.classList.remove("fade-out");
+ *   signal.addEventListener("abort", cleanup, { once: true });
+ *   try {
+ *     el.getBoundingClientRect();   // style flush
+ *     await Promise.allSettled(el.getAnimations().map((a) => a.finished));
+ *   } finally {
+ *     cleanup();
+ *   }
+ * });
+ * ```
+ *
+ * @example Auto-save form draft
+ * ```tsx
+ * useRouteExit(async ({ signal }) => {
+ *   if (formState.dirty) await api.saveDraft(formState, { signal });
+ * });
+ * ```
+ *
+ * @example Cancel inflight requests
+ * ```tsx
+ * useRouteExit(() => {
+ *   inflightController.abort();
+ * });
+ * ```
+ *
+ * @example Library-coordinated exit (motion / framer-motion)
+ * ```tsx
+ * const exitResolverRef = useRef<(() => void) | null>(null);
+ *
+ * useRouteExit(({ signal }) => {
+ *   return new Promise<void>((resolve) => {
+ *     exitResolverRef.current = resolve;
+ *     signal.addEventListener("abort", () => resolve(), { once: true });
+ *   });
+ * });
+ *
+ * const onExitComplete = () => exitResolverRef.current?.();
+ * // pass onExitComplete to <AnimatePresence>
+ * ```
+ *
+ * @example Reading rich transition metadata via `nextRoute.transition`
+ * ```tsx
+ * useRouteExit(({ route, nextRoute }) => {
+ *   // nextRoute.transition: TransitionMeta — preview of the upcoming nav
+ *   if (nextRoute.transition.segments.deactivated.includes("products")) {
+ *     // leaving the products subtree entirely — flush product-related caches
+ *     productCache.clear();
+ *   }
+ *   if (nextRoute.transition.redirected) {
+ *     // skip animation when navigation arrived via redirect
+ *     return;
+ *   }
+ * });
+ * ```
+ */
+export function useRouteExit(
+  handler: RouteExitHandler,
+  options?: UseRouteExitOptions,
+): void {
+  const router = useRouter();
+  const handlerRef = useRef(handler);
+  const skipSameRoute = options?.skipSameRoute ?? true;
+
+  // Keep the latest handler accessible to the subscription without
+  // resubscribing on every render — the subscription registers the
+  // wrapper once and dispatches to whatever ref points to.
+  // useLayoutEffect (synchronous, post-render, pre-paint) updates the
+  // ref before the browser can dispatch any router events that could
+  // observe a stale closure.
+  useLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+
+  useEffect(() => {
+    return router.subscribeLeave(({ route, nextRoute, signal }) => {
+      if (skipSameRoute && route.name === nextRoute.name) {
+        return;
+      }
+
+      // Reentrant abort: signal is already aborted when listener fires
+      // (e.g. a newer navigate superseded this one before subscribeLeave
+      // even ran). addEventListener("abort", ...) does not fire
+      // retroactively, so we skip the handler entirely — any cleanup the
+      // handler would have wired via abort listener must not run because
+      // the corresponding `add` work never happened.
+      if (signal.aborted) {
+        return;
+      }
+
+      return handlerRef.current({ route, nextRoute, signal });
+    });
+  }, [router, skipSameRoute]);
+}

package/src/index.ts

@@ -18,6 +18,10 @@ export { useRouteNode } from "./hooks/useRouteNode";
 
 export { useRouterTransition } from "./hooks/useRouterTransition";
 
+export { useRouteExit } from "./hooks/useRouteExit";
+
+export { useRouteEnter } from "./hooks/useRouteEnter";
+
 // Context
 export { RouterProvider } from "./RouterProvider";
 
@@ -35,6 +39,18 @@ export type {
   RouteViewNotFoundProps,
 } from "./components/RouteView";
 
+export type {
+  RouteExitContext,
+  RouteExitHandler,
+  UseRouteExitOptions,
+} from "./hooks/useRouteExit";
+
+export type {
+  RouteEnterContext,
+  RouteEnterHandler,
+  UseRouteEnterOptions,
+} from "./hooks/useRouteEnter";
+
 export type { Navigator } from "@real-router/core";
 
 export type { RouterTransitionSnapshot } from "@real-router/sources";