@real-router/solid 0.7.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -90,7 +90,9 @@ declare const useNavigator: () => Navigator;
90
90
 
91
91
  declare const useRouteUtils: () => RouteUtils;
92
92
 
93
- declare const useRoute: <P extends Params = Params>() => Accessor<RouteState<P>>;
93
+ declare const useRoute: <P extends Params = Params>() => Accessor<Omit<RouteState<P>, "route"> & {
94
+ route: State<P>;
95
+ }>;
94
96
 
95
97
  declare function useRouteNode(nodeName: string): Accessor<RouteState>;
96
98
 
@@ -100,6 +102,170 @@ declare function useRouteNodeStore(nodeName: string): RouteState;
100
102
 
101
103
  declare function useRouterTransition(): Accessor<RouterTransitionSnapshot>;
102
104
 
105
+ interface RouteExitContext {
106
+ /** The route being left. */
107
+ route: State;
108
+ /** The route being navigated to. */
109
+ nextRoute: State;
110
+ /**
111
+ * AbortSignal that fires when this navigation is superseded by a later
112
+ * one (rapid clicks). Already filtered: when the handler runs,
113
+ * `signal.aborted` is guaranteed to be `false`. Use
114
+ * `signal.addEventListener("abort", cleanup, { once: true })` for
115
+ * cleanup that must run on cancellation.
116
+ */
117
+ signal: AbortSignal;
118
+ }
119
+ interface UseRouteExitOptions {
120
+ /**
121
+ * Skip the handler when `route.name === nextRoute.name`
122
+ * (sort/filter/query-only navigations on the same route). Default:
123
+ * `true`.
124
+ */
125
+ skipSameRoute?: boolean;
126
+ }
127
+ type RouteExitHandler = (context: RouteExitContext) => void | Promise<void>;
128
+ /**
129
+ * Subscribe to the router's leave-window with the universal guards baked
130
+ * in. Wraps `router.subscribeLeave` so consumers don't repeat the same
131
+ * boilerplate every time:
132
+ *
133
+ * - **Reentrant abort pre-check**: if `signal.aborted` is already `true`
134
+ * when the handler would run (rapid navigation superseded a slower
135
+ * one), the handler is skipped entirely. `signal.addEventListener(
136
+ * "abort", ...)` does not fire retroactively, so without this guard
137
+ * downstream cleanup would never trigger.
138
+ * - **Same-route skip**: by default, `route.name === nextRoute.name`
139
+ * short-circuits the handler — query-only navigations (sort, filter,
140
+ * pagination) skip the work. Opt out with `skipSameRoute: false`.
141
+ *
142
+ * Returns nothing — the subscription's lifecycle is bound to the
143
+ * component via `onCleanup`.
144
+ *
145
+ * If the handler returns a Promise, the router blocks on it. If the
146
+ * Promise resolves, navigation proceeds. If it rejects, the router emits
147
+ * `TRANSITION_CANCELLED`.
148
+ *
149
+ * **Handler reactivity (Solid)**: Solid components run **once** at mount;
150
+ * `handler` is captured in closure at the call site. If you need
151
+ * different behavior across renders, derive it from a signal inside the
152
+ * handler body — do not rely on swapping the handler reference.
153
+ *
154
+ * @example Animation
155
+ * ```tsx
156
+ * let ref: HTMLDivElement | undefined;
157
+ *
158
+ * useRouteExit(async ({ signal }) => {
159
+ * const el = ref;
160
+ * if (!el) return;
161
+ * el.classList.add("fade-out");
162
+ * const cleanup = () => el.classList.remove("fade-out");
163
+ * signal.addEventListener("abort", cleanup, { once: true });
164
+ * try {
165
+ * el.getBoundingClientRect(); // style flush
166
+ * await Promise.allSettled(el.getAnimations().map((a) => a.finished));
167
+ * } finally {
168
+ * cleanup();
169
+ * }
170
+ * });
171
+ * ```
172
+ *
173
+ * @example Auto-save form draft
174
+ * ```tsx
175
+ * useRouteExit(async ({ signal }) => {
176
+ * if (formState.dirty) await api.saveDraft(formState, { signal });
177
+ * });
178
+ * ```
179
+ *
180
+ * @example Reading rich transition metadata via `nextRoute.transition`
181
+ * ```tsx
182
+ * useRouteExit(({ route, nextRoute }) => {
183
+ * if (nextRoute.transition.segments.deactivated.includes("products")) {
184
+ * productCache.clear();
185
+ * }
186
+ * if (nextRoute.transition.redirected) {
187
+ * return;
188
+ * }
189
+ * });
190
+ * ```
191
+ */
192
+ declare function useRouteExit(handler: RouteExitHandler, options?: UseRouteExitOptions): void;
193
+
194
+ interface RouteEnterContext {
195
+ /** The route that was just activated. */
196
+ route: State;
197
+ /** The route that was active immediately before this navigation. */
198
+ previousRoute: State;
199
+ }
200
+ type RouteEnterHandler = (context: RouteEnterContext) => void;
201
+ interface UseRouteEnterOptions {
202
+ /**
203
+ * Skip the handler when `route.name === previousRoute.name`
204
+ * (sort/filter/query-only navigations on the same route). Default:
205
+ * `true`. Symmetric with `useRouteExit`'s same-name option.
206
+ */
207
+ skipSameRoute?: boolean;
208
+ }
209
+ /**
210
+ * Fire `handler` once when the component mounts as a result of a
211
+ * navigation. Mirror of `useRouteExit` for the entry side.
212
+ *
213
+ * What this hook covers that an ad-hoc `createEffect` + `useRoute()`
214
+ * doesn't:
215
+ *
216
+ * - **Skip-initial**: handler is skipped when there is no
217
+ * `transition.from` (i.e. first-load mount). Most consumers want to
218
+ * fire side effects only on real navigations, not on hydration.
219
+ * - **Same-route skip** (default): handler is skipped when
220
+ * `route.transition.from === route.name`. Sort/filter/query-only
221
+ * navigations re-trigger the effect (because the `route` reference
222
+ * changes), but they are not "entries" in the animation / analytics
223
+ * sense — the component instance has stayed mounted throughout.
224
+ * Opt out with `skipSameRoute: false`.
225
+ * - **Mount-time `route` / `previousRoute` snapshot**: the handler
226
+ * receives the values that were live at the moment of effect
227
+ * activation, not the latest ones (which may have moved on if the
228
+ * user navigated again before the effect drained).
229
+ *
230
+ * **Handler reactivity (Solid)**: Solid components run **once** at mount;
231
+ * `handler` is captured in closure when the hook is called. If you need
232
+ * different behavior across renders, derive it from a signal inside the
233
+ * handler body — do not rely on swapping the handler reference.
234
+ *
235
+ * @example Direction-aware entry animation
236
+ * ```tsx
237
+ * useRouteEnter(({ route }) => {
238
+ * const direction = route.context.browser?.direction;
239
+ * ref?.classList.add(
240
+ * direction === "back" ? "slide-from-left" : "slide-from-right",
241
+ * );
242
+ * });
243
+ * ```
244
+ *
245
+ * @example Analytics page-enter event (skip-initial built-in)
246
+ * ```tsx
247
+ * useRouteEnter(({ route, previousRoute }) => {
248
+ * analytics.track("page_enter", {
249
+ * route: route.name,
250
+ * from: previousRoute.name,
251
+ * });
252
+ * });
253
+ * ```
254
+ *
255
+ * @example Reading rich transition metadata via `route.transition`
256
+ * ```tsx
257
+ * useRouteEnter(({ route }) => {
258
+ * if (route.transition.redirected) {
259
+ * showToast(`Redirected from ${route.transition.from}`);
260
+ * }
261
+ * if (route.transition.segments.activated.includes("products")) {
262
+ * // products subtree just became active
263
+ * }
264
+ * });
265
+ * ```
266
+ */
267
+ declare function useRouteEnter(handler: RouteEnterHandler, options?: UseRouteEnterOptions): void;
268
+
103
269
  type ScrollRestorationMode = "restore" | "top" | "manual";
104
270
  interface ScrollRestorationOptions {
105
271
  mode?: ScrollRestorationMode | undefined;
@@ -111,6 +277,7 @@ interface RouteProviderProps {
111
277
  router: Router;
112
278
  announceNavigation?: boolean;
113
279
  scrollRestoration?: ScrollRestorationOptions;
280
+ viewTransitions?: boolean;
114
281
  }
115
282
  declare function RouterProvider(props: ParentProps<RouteProviderProps>): JSX.Element;
116
283
 
@@ -126,5 +293,5 @@ declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>
126
293
 
127
294
  declare function createStoreFromSource<T extends object>(source: RouterSource<T>): T;
128
295
 
129
- export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
130
- export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps, SelfProps as RouteViewSelfProps, RouterErrorBoundaryProps };
296
+ export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteEnter, useRouteExit, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
297
+ export type { LinkDirectiveOptions, LinkProps, RouteEnterContext, RouteEnterHandler, RouteExitContext, RouteExitHandler, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps, SelfProps as RouteViewSelfProps, RouterErrorBoundaryProps, UseRouteEnterOptions, UseRouteExitOptions };
@@ -317,7 +317,7 @@ function removeAnnouncer() {
317
317
  document.querySelector(`[${ANNOUNCER_ATTR}]`)?.remove();
318
318
  }
319
319
  function resolveText(route, prefix, getCustomText, h1) {
320
- const h1Text = h1?.textContent.trim() ?? "";
320
+ const h1Text = (h1?.textContent ?? "").trim();
321
321
  const routeName = route.name.startsWith(INTERNAL_ROUTE_PREFIX) ? "" : route.name;
322
322
  const rawText = h1Text || document.title || routeName || globalThis.location.pathname;
323
323
  return `${prefix}${rawText}`;
@@ -335,14 +335,14 @@ function manageFocus(h1) {
335
335
  }
336
336
 
337
337
  const STORAGE_KEY = "real-router:scroll";
338
- const NOOP_INSTANCE = Object.freeze({
338
+ const NOOP_INSTANCE$1 = Object.freeze({
339
339
  destroy: () => {
340
340
  /* no-op */
341
341
  }
342
342
  });
343
343
  function createScrollRestoration(router, options) {
344
344
  if (typeof globalThis.window === "undefined") {
345
- return NOOP_INSTANCE;
345
+ return NOOP_INSTANCE$1;
346
346
  }
347
347
  const mode = options?.mode ?? "restore";
348
348
 
@@ -350,7 +350,7 @@ function createScrollRestoration(router, options) {
350
350
  // don't subscribe, don't register pagehide — leave the browser's native
351
351
  // auto-restore intact for the app to override if it wants to.
352
352
  if (mode === "manual") {
353
- return NOOP_INSTANCE;
353
+ return NOOP_INSTANCE$1;
354
354
  }
355
355
  const anchorEnabled = options?.anchorScrolling ?? true;
356
356
  const getContainer = options?.scrollContainer;
@@ -491,6 +491,128 @@ function canonicalReplacer(_key, val) {
491
491
  return val;
492
492
  }
493
493
 
494
+ const NOOP_INSTANCE = Object.freeze({
495
+ destroy: () => {
496
+ /* no-op */
497
+ }
498
+ });
499
+ function createViewTransitions(router) {
500
+ if (typeof document === "undefined" || typeof document.startViewTransition !== "function") {
501
+ return NOOP_INSTANCE;
502
+ }
503
+ let closeVT = null;
504
+ let currentVT = null;
505
+ // Tracks whether TRANSITION_SUCCESS fired for the current leave. Used to
506
+ // distinguish "benign cleanup abort" (router's async path aborts its own
507
+ // controller in a finally block after successful navigation) from "real
508
+ // cancellation" (concurrent navigate, guard rejection, dispose).
509
+ let successFired = false;
510
+ const resolveAndClear = () => {
511
+ closeVT?.();
512
+ closeVT = null;
513
+ };
514
+ const offLeave = router.subscribeLeave(({
515
+ signal
516
+ }) => {
517
+ // Reentrant abort: signal already aborted when we're called. Open no VT
518
+ // — router will fall through to TRANSITION_CANCELLED via isCurrentNav()
519
+ // after leave resolves. addEventListener("abort", ...) does not re-fire
520
+ // for past events, so skipping startViewTransition is the safe path.
521
+ if (signal.aborted) {
522
+ return;
523
+ }
524
+ successFired = false;
525
+ resolveAndClear();
526
+
527
+ // Return a Promise so the router awaits until the browser invokes
528
+ // updateCallback. This ensures old DOM snapshot is captured BEFORE the
529
+ // router commits the new state — giving correct exit→state→entry
530
+ // ordering (vs fire-and-forget, where URL changes before VT captures).
531
+ return new Promise(resolveLeave => {
532
+ // Capture the resolver synchronously BEFORE startViewTransition() is
533
+ // called. The browser invokes updateCallback in a later task, but
534
+ // router.subscribe (TRANSITION_SUCCESS) can fire before that. If we
535
+ // captured `resolve` inside the callback, subscribe would see closeVT
536
+ // still null and skip resolving — the deferred would hang for 4s
537
+ // until the VT API aborts with TimeoutError.
538
+ const deferred = new Promise(resolve => {
539
+ closeVT = resolve;
540
+ });
541
+ signal.addEventListener("abort", () => {
542
+ if (successFired) {
543
+ // Router's async path (#finishAsyncNavigation) aborts its own
544
+ // controller in a finally block AFTER completeTransition (and
545
+ // thus AFTER subscribe fired). This is cleanup, not
546
+ // cancellation — VT is progressing normally, do nothing.
547
+ return;
548
+ }
549
+
550
+ // Real cancellation (concurrent navigate, dispose). Resolve the
551
+ // deferred so updateCallback can complete, skip the VT so no
552
+ // stale animation leaks, and unblock the router if the abort
553
+ // fires before updateCallback was invoked.
554
+ resolveAndClear();
555
+ currentVT?.skipTransition?.();
556
+ resolveLeave();
557
+ }, {
558
+ once: true
559
+ });
560
+ try {
561
+ currentVT = document.startViewTransition(() => {
562
+ // Resolving here unblocks the router at the moment the browser
563
+ // enters updateCallback — by spec, old DOM snapshot is captured
564
+ // before this callback runs. Router now proceeds through
565
+ // activation guards and setState; the VT animation waits on
566
+ // `deferred`, which is resolved from router.subscribe after a
567
+ // task-queue tick (see NOTE on setTimeout below).
568
+ resolveLeave();
569
+ return deferred;
570
+ });
571
+ } catch {
572
+ // Defensive: spec says startViewTransition doesn't throw under
573
+ // normal conditions, but Chromium has had edge cases (detached
574
+ // document, extension interference). Clean up and unblock router.
575
+ resolveAndClear();
576
+ resolveLeave();
577
+ }
578
+ });
579
+ });
580
+ const offSuccess = router.subscribe(() => {
581
+ const resolver = closeVT;
582
+ successFired = true;
583
+ closeVT = null;
584
+ if (resolver === null) {
585
+ currentVT = null;
586
+ } else {
587
+ // CRITICAL: CANNOT use requestAnimationFrame here. When the router
588
+ // takes the async path (leave returned a Promise), subscribe fires
589
+ // AFTER the browser has already transitioned VT into the
590
+ // "update-callback-called" phase. In that phase Chromium sets
591
+ // rendering suppression to true, which ALSO blocks rAF callbacks.
592
+ // rAF would never fire → deferred never resolves → browser aborts
593
+ // vt.ready with TimeoutError after 4s (observed in Chromium).
594
+ //
595
+ // setTimeout runs on the task queue independent of the rendering
596
+ // pipeline, so it fires regardless of suppression. React's scheduler
597
+ // uses MessageChannel tasks, which are queued before our setTimeout,
598
+ // so the new DOM is committed by the time our callback runs.
599
+ setTimeout(() => {
600
+ resolver();
601
+ currentVT = null;
602
+ }, 0);
603
+ }
604
+ });
605
+ return {
606
+ destroy: () => {
607
+ offLeave();
608
+ offSuccess();
609
+ currentVT?.skipTransition?.();
610
+ currentVT = null;
611
+ resolveAndClear();
612
+ }
613
+ };
614
+ }
615
+
494
616
  function shouldNavigate(evt) {
495
617
  return evt.button === 0 && !evt.metaKey && !evt.altKey && !evt.ctrlKey && !evt.shiftKey;
496
618
  }
@@ -678,6 +800,9 @@ const useRoute = () => {
678
800
  if (!routeSignal) {
679
801
  throw new Error("useRoute must be used within a RouterProvider");
680
802
  }
803
+ if (!routeSignal().route) {
804
+ throw new Error("useRoute called with no active route. Did you forget to await router.start() before rendering, or is the router stopped/disposed?");
805
+ }
681
806
  return routeSignal;
682
807
  };
683
808
 
@@ -708,6 +833,198 @@ function useRouterTransition() {
708
833
  return createSignalFromSource(source);
709
834
  }
710
835
 
836
+ /**
837
+ * Subscribe to the router's leave-window with the universal guards baked
838
+ * in. Wraps `router.subscribeLeave` so consumers don't repeat the same
839
+ * boilerplate every time:
840
+ *
841
+ * - **Reentrant abort pre-check**: if `signal.aborted` is already `true`
842
+ * when the handler would run (rapid navigation superseded a slower
843
+ * one), the handler is skipped entirely. `signal.addEventListener(
844
+ * "abort", ...)` does not fire retroactively, so without this guard
845
+ * downstream cleanup would never trigger.
846
+ * - **Same-route skip**: by default, `route.name === nextRoute.name`
847
+ * short-circuits the handler — query-only navigations (sort, filter,
848
+ * pagination) skip the work. Opt out with `skipSameRoute: false`.
849
+ *
850
+ * Returns nothing — the subscription's lifecycle is bound to the
851
+ * component via `onCleanup`.
852
+ *
853
+ * If the handler returns a Promise, the router blocks on it. If the
854
+ * Promise resolves, navigation proceeds. If it rejects, the router emits
855
+ * `TRANSITION_CANCELLED`.
856
+ *
857
+ * **Handler reactivity (Solid)**: Solid components run **once** at mount;
858
+ * `handler` is captured in closure at the call site. If you need
859
+ * different behavior across renders, derive it from a signal inside the
860
+ * handler body — do not rely on swapping the handler reference.
861
+ *
862
+ * @example Animation
863
+ * ```tsx
864
+ * let ref: HTMLDivElement | undefined;
865
+ *
866
+ * useRouteExit(async ({ signal }) => {
867
+ * const el = ref;
868
+ * if (!el) return;
869
+ * el.classList.add("fade-out");
870
+ * const cleanup = () => el.classList.remove("fade-out");
871
+ * signal.addEventListener("abort", cleanup, { once: true });
872
+ * try {
873
+ * el.getBoundingClientRect(); // style flush
874
+ * await Promise.allSettled(el.getAnimations().map((a) => a.finished));
875
+ * } finally {
876
+ * cleanup();
877
+ * }
878
+ * });
879
+ * ```
880
+ *
881
+ * @example Auto-save form draft
882
+ * ```tsx
883
+ * useRouteExit(async ({ signal }) => {
884
+ * if (formState.dirty) await api.saveDraft(formState, { signal });
885
+ * });
886
+ * ```
887
+ *
888
+ * @example Reading rich transition metadata via `nextRoute.transition`
889
+ * ```tsx
890
+ * useRouteExit(({ route, nextRoute }) => {
891
+ * if (nextRoute.transition.segments.deactivated.includes("products")) {
892
+ * productCache.clear();
893
+ * }
894
+ * if (nextRoute.transition.redirected) {
895
+ * return;
896
+ * }
897
+ * });
898
+ * ```
899
+ */
900
+ function useRouteExit(handler, options) {
901
+ const router = useRouter();
902
+ const skipSameRoute = options?.skipSameRoute ?? true;
903
+ const off = router.subscribeLeave(({
904
+ route,
905
+ nextRoute,
906
+ signal
907
+ }) => {
908
+ if (skipSameRoute && route.name === nextRoute.name) {
909
+ return;
910
+ }
911
+
912
+ // Reentrant abort: signal is already aborted when listener fires
913
+ // (e.g. a newer navigate superseded this one before subscribeLeave
914
+ // even ran). addEventListener("abort", ...) does not fire
915
+ // retroactively, so we skip the handler entirely.
916
+ if (signal.aborted) {
917
+ return;
918
+ }
919
+ return handler({
920
+ route,
921
+ nextRoute,
922
+ signal
923
+ });
924
+ });
925
+ onCleanup(off);
926
+ }
927
+
928
+ /**
929
+ * Fire `handler` once when the component mounts as a result of a
930
+ * navigation. Mirror of `useRouteExit` for the entry side.
931
+ *
932
+ * What this hook covers that an ad-hoc `createEffect` + `useRoute()`
933
+ * doesn't:
934
+ *
935
+ * - **Skip-initial**: handler is skipped when there is no
936
+ * `transition.from` (i.e. first-load mount). Most consumers want to
937
+ * fire side effects only on real navigations, not on hydration.
938
+ * - **Same-route skip** (default): handler is skipped when
939
+ * `route.transition.from === route.name`. Sort/filter/query-only
940
+ * navigations re-trigger the effect (because the `route` reference
941
+ * changes), but they are not "entries" in the animation / analytics
942
+ * sense — the component instance has stayed mounted throughout.
943
+ * Opt out with `skipSameRoute: false`.
944
+ * - **Mount-time `route` / `previousRoute` snapshot**: the handler
945
+ * receives the values that were live at the moment of effect
946
+ * activation, not the latest ones (which may have moved on if the
947
+ * user navigated again before the effect drained).
948
+ *
949
+ * **Handler reactivity (Solid)**: Solid components run **once** at mount;
950
+ * `handler` is captured in closure when the hook is called. If you need
951
+ * different behavior across renders, derive it from a signal inside the
952
+ * handler body — do not rely on swapping the handler reference.
953
+ *
954
+ * @example Direction-aware entry animation
955
+ * ```tsx
956
+ * useRouteEnter(({ route }) => {
957
+ * const direction = route.context.browser?.direction;
958
+ * ref?.classList.add(
959
+ * direction === "back" ? "slide-from-left" : "slide-from-right",
960
+ * );
961
+ * });
962
+ * ```
963
+ *
964
+ * @example Analytics page-enter event (skip-initial built-in)
965
+ * ```tsx
966
+ * useRouteEnter(({ route, previousRoute }) => {
967
+ * analytics.track("page_enter", {
968
+ * route: route.name,
969
+ * from: previousRoute.name,
970
+ * });
971
+ * });
972
+ * ```
973
+ *
974
+ * @example Reading rich transition metadata via `route.transition`
975
+ * ```tsx
976
+ * useRouteEnter(({ route }) => {
977
+ * if (route.transition.redirected) {
978
+ * showToast(`Redirected from ${route.transition.from}`);
979
+ * }
980
+ * if (route.transition.segments.activated.includes("products")) {
981
+ * // products subtree just became active
982
+ * }
983
+ * });
984
+ * ```
985
+ */
986
+ function useRouteEnter(handler, options) {
987
+ const routeState = useRoute();
988
+ const skipSameRoute = options?.skipSameRoute ?? true;
989
+ let lastHandledRoute = null;
990
+ createEffect(() => {
991
+ const {
992
+ route,
993
+ previousRoute
994
+ } = routeState();
995
+
996
+ // Early-exit guards, top-down:
997
+ //
998
+ // - **Skip-initial**: `state.transition.from` is undefined only
999
+ // for the very first state committed by `router.start()`.
1000
+ // - **Skip-same-route**: query-only navigations have
1001
+ // `transition.from === route.name`. Opt-out via
1002
+ // `skipSameRoute: false`.
1003
+ // - **Defensive dedupe + missing `previousRoute`**: same `route`
1004
+ // ref between effect activations is unexpected on Solid (effects
1005
+ // run once per dependency change); `!previousRoute` is unreachable
1006
+ // once `transition.from` is set (the two are populated together by
1007
+ // core). Both kept for parity with React; v8-ignored.
1008
+ if (!route.transition.from) {
1009
+ return;
1010
+ }
1011
+ if (skipSameRoute && route.transition.from === route.name) {
1012
+ return;
1013
+ }
1014
+ /* v8 ignore start */
1015
+ if (lastHandledRoute === route || !previousRoute) {
1016
+ return;
1017
+ }
1018
+ /* v8 ignore stop */
1019
+
1020
+ lastHandledRoute = route;
1021
+ handler({
1022
+ route,
1023
+ previousRoute
1024
+ });
1025
+ });
1026
+ }
1027
+
711
1028
  function isRouteActive(linkRouteName, currentRouteName) {
712
1029
  return currentRouteName === linkRouteName || currentRouteName.startsWith(`${linkRouteName}.`);
713
1030
  }
@@ -730,6 +1047,15 @@ function RouterProvider(props) {
730
1047
  sr.destroy();
731
1048
  });
732
1049
  });
1050
+ onMount(() => {
1051
+ if (!props.viewTransitions) {
1052
+ return;
1053
+ }
1054
+ const vt = createViewTransitions(props.router);
1055
+ onCleanup(() => {
1056
+ vt.destroy();
1057
+ });
1058
+ });
733
1059
  const navigator = getNavigator(props.router);
734
1060
  const routeSource = createRouteSource(props.router);
735
1061
  const routeSignal = createSignalFromSource(routeSource);
@@ -753,4 +1079,4 @@ function RouterProvider(props) {
753
1079
  });
754
1080
  }
755
1081
 
756
- export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
1082
+ export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteEnter, useRouteExit, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
@@ -5,6 +5,7 @@ export interface RouteProviderProps {
5
5
  router: Router;
6
6
  announceNavigation?: boolean;
7
7
  scrollRestoration?: ScrollRestorationOptions;
8
+ viewTransitions?: boolean;
8
9
  }
9
10
  export declare function isRouteActive(linkRouteName: string, currentRouteName: string): boolean;
10
11
  export declare function RouterProvider(props: ParentProps<RouteProviderProps>): JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"RouterProvider.d.ts","sourceRoot":"","sources":["../../src/RouterProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;CAC9C;AAED,wBAAgB,aAAa,CAC3B,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAAE,MAAM,GACvB,OAAO,CAKT;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,GACrC,GAAG,CAAC,OAAO,CA2Cb"}
1
+ {"version":3,"file":"RouterProvider.d.ts","sourceRoot":"","sources":["../../src/RouterProvider.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAC3B,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAAE,MAAM,GACvB,OAAO,CAKT;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,GACrC,GAAG,CAAC,OAAO,CAuDb"}
@@ -0,0 +1,27 @@
1
+ import type { Router } from "@real-router/core";
2
+ export interface DirectionTracker {
3
+ destroy: () => void;
4
+ }
5
+ /**
6
+ * Track navigation direction (forward / back) and write it to
7
+ * `<html data-nav-direction>` on every leave. CSS / JS readers consume
8
+ * the attribute via `html[data-nav-direction="back"]` selectors or
9
+ * `document.documentElement.dataset.navDirection`.
10
+ *
11
+ * Mechanism-agnostic — works identically whether downstream UI uses CSS
12
+ * `@keyframes`, View Transitions pseudo-elements, or library state
13
+ * (motion's `motion.div initial={{ x: ... }}`).
14
+ *
15
+ * Implementation:
16
+ * - On install, set `data-nav-direction="forward"` baseline.
17
+ * - Attach a `popstate` listener that flips an internal flag to
18
+ * `true`. Browser back/forward navigation triggers popstate; user
19
+ * clicks on `<Link>` / programmatic `router.navigate(...)` do not.
20
+ * - On every `subscribeLeave`, write
21
+ * `popstateFlag ? "back" : "forward"` and reset the flag.
22
+ *
23
+ * Returns `{ destroy }` to clean up the listener and clear the dataset
24
+ * attribute.
25
+ */
26
+ export declare function createDirectionTracker(router: Router): DirectionTracker;
27
+ //# sourceMappingURL=direction-tracker.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"direction-tracker.d.ts","sourceRoot":"","sources":["../../../src/dom-utils/direction-tracker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAQD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,gBAAgB,CAoCvE"}
@@ -1,6 +1,10 @@
1
+ export { createDirectionTracker } from "./direction-tracker.js";
1
2
  export { createRouteAnnouncer } from "./route-announcer.js";
2
3
  export { createScrollRestoration } from "./scroll-restore.js";
4
+ export { createViewTransitions } from "./view-transitions.js";
3
5
  export { shouldNavigate, buildHref, buildActiveClassName, shallowEqual, applyLinkA11y, } from "./link-utils.js";
4
6
  export type { RouteAnnouncerOptions } from "./route-announcer.js";
5
7
  export type { ScrollRestorationOptions, ScrollRestorationMode, } from "./scroll-restore.js";
8
+ export type { DirectionTracker } from "./direction-tracker.js";
9
+ export type { ViewTransitions } from "./view-transitions.js";
6
10
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dom-utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EACL,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,YAAY,EACZ,aAAa,GACd,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,YAAY,EACV,wBAAwB,EACxB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dom-utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EACL,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,YAAY,EACZ,aAAa,GACd,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,YAAY,EACV,wBAAwB,EACxB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC"}
@@ -0,0 +1,6 @@
1
+ import type { Router } from "@real-router/core";
2
+ export interface ViewTransitions {
3
+ destroy: () => void;
4
+ }
5
+ export declare function createViewTransitions(router: Router): ViewTransitions;
6
+ //# sourceMappingURL=view-transitions.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"view-transitions.d.ts","sourceRoot":"","sources":["../../../src/dom-utils/view-transitions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAQD,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,eAAe,CAiIrE"}
@@ -1,5 +1,7 @@
1
1
  import type { RouteState } from "../types";
2
- import type { Params } from "@real-router/core";
2
+ import type { Params, State } from "@real-router/core";
3
3
  import type { Accessor } from "solid-js";
4
- export declare const useRoute: <P extends Params = Params>() => Accessor<RouteState<P>>;
4
+ export declare const useRoute: <P extends Params = Params>() => Accessor<Omit<RouteState<P>, "route"> & {
5
+ route: State<P>;
6
+ }>;
5
7
  //# sourceMappingURL=useRoute.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useRoute.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRoute.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,OAAK,QAAQ,CAC7D,UAAU,CAAC,CAAC,CAAC,CASd,CAAC"}
1
+ {"version":3,"file":"useRoute.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRoute.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,OAAK,QAAQ,CAC7D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;CAAE,CAiBnD,CAAC"}