import { ReactElement, ReactNode } from "react"; import { State } from "@real-router/core"; //#region src/components/modern/RouteView/types.d.ts interface RouteViewProps { /** Route tree node name to subscribe to. "" for root. */ readonly nodeName: string; /** , , and elements. */ readonly children: ReactNode; } interface MatchProps { /** Route segment to match against. */ readonly segment: string; /** Exact match only (no descendants). Defaults to false. */ readonly exact?: boolean; /** Preserve component state when deactivated (React Activity). Defaults to false. */ readonly keepAlive?: boolean; /** Fallback content to show while children are suspended. */ readonly fallback?: ReactNode; /** Content to render when matched. */ readonly children: ReactNode; } interface SelfProps { /** * Fallback content to show while children are suspended. * * Symmetric with `` — wraps children in * `` when defined. */ readonly fallback?: ReactNode; /** Content to render when the active route name equals the parent RouteView's nodeName. */ readonly children: ReactNode; } interface NotFoundProps { /** Content to render on UNKNOWN_ROUTE. */ readonly children: ReactNode; } //#endregion //#region src/components/modern/RouteView/components.d.ts declare function Match(_props: MatchProps): null; declare namespace Match { var displayName: string; } declare function Self(_props: SelfProps): null; declare namespace Self { var displayName: string; } declare function NotFound(_props: NotFoundProps): null; declare namespace NotFound { var displayName: string; } //#endregion //#region src/components/modern/RouteView/RouteView.d.ts declare function RouteViewRoot({ nodeName, children }: Readonly): ReactElement | null; declare namespace RouteViewRoot { var displayName: string; } declare const RouteView: typeof RouteViewRoot & { Match: typeof Match; Self: typeof Self; NotFound: typeof NotFound; }; //#endregion //#region src/hooks/useRouteExit.d.ts 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; } interface UseRouteExitOptions { /** * Skip the handler when `route.name === nextRoute.name` * (sort/filter/query-only navigations on the same route). Default: * `true`. */ skipSameRoute?: boolean; } type RouteExitHandler = (context: RouteExitContext) => void | Promise; /** * 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 * rejects `navigate()` with the handler's **original error** and emits * `TRANSITION_ERROR` — it is NOT re-coded to `TRANSITION_CANCELLED` * (that arises only when the navigation's `signal` aborts: a superseding * navigation, `stop()`, `dispose()`, or an external `opts.signal`). * * **Reentrancy — no synchronous `navigate()` from the handler.** The handler * runs inside the transition's leave-dispatch window, so calling * `router.navigate(...)` (or `navigateToDefault` / `navigateToState` / * `navigateToNotFound`) **synchronously** in the handler body throws * `REENTRANT_NAVIGATION` — core bans reentrant navigation from a transition * listener (RFC navigation-cancellation-unification §4). To redirect on exit, * defer past the sync dispatch: `await` your exit work first, or * `queueMicrotask(() => router.navigate(...))`. A navigate issued after the * handler's first `await` runs once the transition settles and is allowed. * (Guards — `canDeactivate` — are the intended place to *block* or gate a * departure; `useRouteExit` is for side effects, not redirection.) * * @example Animation * ```tsx * const ref = useRef(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((resolve) => { * exitResolverRef.current = resolve; * signal.addEventListener("abort", () => resolve(), { once: true }); * }); * }); * * const onExitComplete = () => exitResolverRef.current?.(); * // pass onExitComplete to * ``` * * @example Detecting that you are leaving a subtree * ```tsx * const inProducts = (name: string) => * name === "products" || name.startsWith("products."); * * useRouteExit(({ route, nextRoute }) => { * if (inProducts(route.name) && !inProducts(nextRoute.name)) { * // leaving the products subtree entirely — flush product-related caches * productCache.clear(); * } * }); * ``` * * ⚠ Do NOT read `nextRoute.transition` here. `nextRoute` is the PENDING target, * and the pipeline gives it the neutral default — empty `segments`, optional * flags `undefined` — so the example this replaced read `[]` and `undefined` * whatever the navigation was. (It threw outright until real-router#1976 * attached the field.) The real metadata is written at the COMMIT: read it in * `router.subscribe`, `onTransitionSuccess`, or `getState()`. */ declare function useRouteExit(handler: RouteExitHandler, options?: UseRouteExitOptions): void; //#endregion //#region src/hooks/useRouteEnter.d.ts interface RouteEnterContext { /** The route that was just activated. */ route: State; /** The route that was active immediately before this navigation. */ previousRoute: State; } type RouteEnterHandler = (context: RouteEnterContext) => void; interface UseRouteEnterOptions { /** * Skip the handler when `route.name === previousRoute.name` * (sort/filter/query-only navigations on the same route). Default: * `true`. Symmetric with `useRouteExit`'s same-name option. */ skipSameRoute?: boolean; } /** * Fire `handler` once when the component mounts as a result of a * navigation. Mirror of `useRouteExit` for the entry side. * * What this hook covers that ad-hoc `useEffect` + `useRoute()` doesn't: * * - **Skip-initial**: handler is skipped when there is no * `previousRoute` (i.e. first-load mount). Most consumers want to * fire side effects only on real navigations, not on hydration. * - **Same-route skip** (default): handler is skipped when * `route.name === previousRoute.name`. Sort/filter/query-only * navigations re-run the effect (because `route` reference changes * in `useRoute`'s snapshot), but they are not "entries" in the * animation / analytics sense — the component instance has stayed * mounted throughout. Opt out with `skipSameRoute: false` when * the handler legitimately needs to fire on every navigation * (e.g. analytics tracking each query-param flip). * - **StrictMode double-mount immunity**: in dev, React's StrictMode * runs every effect twice to surface bugs. Without a guard, * analytics fire twice, animations restart, focus jumps. The hook * tracks the last-handled `route` reference and short-circuits the * second pass. * - **Latest-handler ref**: the handler can change identity on every * render without re-running the effect — the registered wrapper * dispatches to whatever `handlerRef.current` points to. * - **Mount-time `route` / `previousRoute` snapshot**: the handler * receives the values that were live at the moment of mount, not * the latest ones (which may have moved on if the user navigated * again before the effect drained). * * Race-safety: `useRoute()` is wired through `useSyncExternalStore` from * `@real-router/sources`, so by the time the new component's effect * runs, the snapshot is the post-commit one. This is the reason we can * read mount-time context from `useRoute()` instead of subscribing to * `router.subscribe` directly (which fires before React schedules a * re-render — the well-known race in distributed components). * * @example Direction-aware entry animation * ```tsx * useRouteEnter(({ route }) => { * const direction = route.context.browser?.direction; * ref.current?.classList.add( * direction === "back" ? "slide-from-left" : "slide-from-right", * ); * }); * ``` * * @example Source-aware focus management * ```tsx * useRouteEnter(({ route }) => { * if (route.context.browser?.source === "navigate") { * headingRef.current?.focus(); * } * }); * ``` * * @example Analytics page-enter event (skip-initial built-in) * ```tsx * useRouteEnter(({ route, previousRoute }) => { * analytics.track("page_enter", { * route: route.name, * from: previousRoute.name, * }); * }); * ``` * * @example Reading rich transition metadata via `route.transition` * ```tsx * useRouteEnter(({ route }) => { * // route.transition: TransitionMeta — populated by core for every state * // ⚠ NOT `transition.redirected` — the router never sets it (it only ever * // carries what a caller passed as `{ redirected: true }`), so branching on * // it here is silently dead for a `forwardTo` or a guard redirect. * // `from` needs no check: this hook does not fire without one. * showToast(`Arrived from ${route.transition.from}`); * if (route.transition.segments.activated.includes("products")) { * // products subtree just became active (could be products or * // products.detail). Useful for subtree-scoped side effects. * } * }); * ``` */ declare function useRouteEnter(handler: RouteEnterHandler, options?: UseRouteEnterOptions): void; //#endregion export { RouteExitContext as a, useRouteExit as c, NotFoundProps as d, RouteViewProps as f, useRouteEnter as i, RouteView as l, RouteEnterHandler as n, RouteExitHandler as o, SelfProps as p, UseRouteEnterOptions as r, UseRouteExitOptions as s, RouteEnterContext as t, MatchProps as u }; //# sourceMappingURL=useRouteEnter-BDNrSg2k.d.ts.map