@real-router/solid 0.7.0 → 0.8.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.
@@ -100,6 +100,170 @@ declare function useRouteNodeStore(nodeName: string): RouteState;
100
100
 
101
101
  declare function useRouterTransition(): Accessor<RouterTransitionSnapshot>;
102
102
 
103
+ interface RouteExitContext {
104
+ /** The route being left. */
105
+ route: State;
106
+ /** The route being navigated to. */
107
+ nextRoute: State;
108
+ /**
109
+ * AbortSignal that fires when this navigation is superseded by a later
110
+ * one (rapid clicks). Already filtered: when the handler runs,
111
+ * `signal.aborted` is guaranteed to be `false`. Use
112
+ * `signal.addEventListener("abort", cleanup, { once: true })` for
113
+ * cleanup that must run on cancellation.
114
+ */
115
+ signal: AbortSignal;
116
+ }
117
+ interface UseRouteExitOptions {
118
+ /**
119
+ * Skip the handler when `route.name === nextRoute.name`
120
+ * (sort/filter/query-only navigations on the same route). Default:
121
+ * `true`.
122
+ */
123
+ skipSameRoute?: boolean;
124
+ }
125
+ type RouteExitHandler = (context: RouteExitContext) => void | Promise<void>;
126
+ /**
127
+ * Subscribe to the router's leave-window with the universal guards baked
128
+ * in. Wraps `router.subscribeLeave` so consumers don't repeat the same
129
+ * boilerplate every time:
130
+ *
131
+ * - **Reentrant abort pre-check**: if `signal.aborted` is already `true`
132
+ * when the handler would run (rapid navigation superseded a slower
133
+ * one), the handler is skipped entirely. `signal.addEventListener(
134
+ * "abort", ...)` does not fire retroactively, so without this guard
135
+ * downstream cleanup would never trigger.
136
+ * - **Same-route skip**: by default, `route.name === nextRoute.name`
137
+ * short-circuits the handler — query-only navigations (sort, filter,
138
+ * pagination) skip the work. Opt out with `skipSameRoute: false`.
139
+ *
140
+ * Returns nothing — the subscription's lifecycle is bound to the
141
+ * component via `onCleanup`.
142
+ *
143
+ * If the handler returns a Promise, the router blocks on it. If the
144
+ * Promise resolves, navigation proceeds. If it rejects, the router emits
145
+ * `TRANSITION_CANCELLED`.
146
+ *
147
+ * **Handler reactivity (Solid)**: Solid components run **once** at mount;
148
+ * `handler` is captured in closure at the call site. If you need
149
+ * different behavior across renders, derive it from a signal inside the
150
+ * handler body — do not rely on swapping the handler reference.
151
+ *
152
+ * @example Animation
153
+ * ```tsx
154
+ * let ref: HTMLDivElement | undefined;
155
+ *
156
+ * useRouteExit(async ({ signal }) => {
157
+ * const el = ref;
158
+ * if (!el) return;
159
+ * el.classList.add("fade-out");
160
+ * const cleanup = () => el.classList.remove("fade-out");
161
+ * signal.addEventListener("abort", cleanup, { once: true });
162
+ * try {
163
+ * el.getBoundingClientRect(); // style flush
164
+ * await Promise.allSettled(el.getAnimations().map((a) => a.finished));
165
+ * } finally {
166
+ * cleanup();
167
+ * }
168
+ * });
169
+ * ```
170
+ *
171
+ * @example Auto-save form draft
172
+ * ```tsx
173
+ * useRouteExit(async ({ signal }) => {
174
+ * if (formState.dirty) await api.saveDraft(formState, { signal });
175
+ * });
176
+ * ```
177
+ *
178
+ * @example Reading rich transition metadata via `nextRoute.transition`
179
+ * ```tsx
180
+ * useRouteExit(({ route, nextRoute }) => {
181
+ * if (nextRoute.transition.segments.deactivated.includes("products")) {
182
+ * productCache.clear();
183
+ * }
184
+ * if (nextRoute.transition.redirected) {
185
+ * return;
186
+ * }
187
+ * });
188
+ * ```
189
+ */
190
+ declare function useRouteExit(handler: RouteExitHandler, options?: UseRouteExitOptions): void;
191
+
192
+ interface RouteEnterContext {
193
+ /** The route that was just activated. */
194
+ route: State;
195
+ /** The route that was active immediately before this navigation. */
196
+ previousRoute: State;
197
+ }
198
+ type RouteEnterHandler = (context: RouteEnterContext) => void;
199
+ interface UseRouteEnterOptions {
200
+ /**
201
+ * Skip the handler when `route.name === previousRoute.name`
202
+ * (sort/filter/query-only navigations on the same route). Default:
203
+ * `true`. Symmetric with `useRouteExit`'s same-name option.
204
+ */
205
+ skipSameRoute?: boolean;
206
+ }
207
+ /**
208
+ * Fire `handler` once when the component mounts as a result of a
209
+ * navigation. Mirror of `useRouteExit` for the entry side.
210
+ *
211
+ * What this hook covers that an ad-hoc `createEffect` + `useRoute()`
212
+ * doesn't:
213
+ *
214
+ * - **Skip-initial**: handler is skipped when there is no
215
+ * `transition.from` (i.e. first-load mount). Most consumers want to
216
+ * fire side effects only on real navigations, not on hydration.
217
+ * - **Same-route skip** (default): handler is skipped when
218
+ * `route.transition.from === route.name`. Sort/filter/query-only
219
+ * navigations re-trigger the effect (because the `route` reference
220
+ * changes), but they are not "entries" in the animation / analytics
221
+ * sense — the component instance has stayed mounted throughout.
222
+ * Opt out with `skipSameRoute: false`.
223
+ * - **Mount-time `route` / `previousRoute` snapshot**: the handler
224
+ * receives the values that were live at the moment of effect
225
+ * activation, not the latest ones (which may have moved on if the
226
+ * user navigated again before the effect drained).
227
+ *
228
+ * **Handler reactivity (Solid)**: Solid components run **once** at mount;
229
+ * `handler` is captured in closure when the hook is called. If you need
230
+ * different behavior across renders, derive it from a signal inside the
231
+ * handler body — do not rely on swapping the handler reference.
232
+ *
233
+ * @example Direction-aware entry animation
234
+ * ```tsx
235
+ * useRouteEnter(({ route }) => {
236
+ * const direction = route.context.browser?.direction;
237
+ * ref?.classList.add(
238
+ * direction === "back" ? "slide-from-left" : "slide-from-right",
239
+ * );
240
+ * });
241
+ * ```
242
+ *
243
+ * @example Analytics page-enter event (skip-initial built-in)
244
+ * ```tsx
245
+ * useRouteEnter(({ route, previousRoute }) => {
246
+ * analytics.track("page_enter", {
247
+ * route: route.name,
248
+ * from: previousRoute.name,
249
+ * });
250
+ * });
251
+ * ```
252
+ *
253
+ * @example Reading rich transition metadata via `route.transition`
254
+ * ```tsx
255
+ * useRouteEnter(({ route }) => {
256
+ * if (route.transition.redirected) {
257
+ * showToast(`Redirected from ${route.transition.from}`);
258
+ * }
259
+ * if (route.transition.segments.activated.includes("products")) {
260
+ * // products subtree just became active
261
+ * }
262
+ * });
263
+ * ```
264
+ */
265
+ declare function useRouteEnter(handler: RouteEnterHandler, options?: UseRouteEnterOptions): void;
266
+
103
267
  type ScrollRestorationMode = "restore" | "top" | "manual";
104
268
  interface ScrollRestorationOptions {
105
269
  mode?: ScrollRestorationMode | undefined;
@@ -111,6 +275,7 @@ interface RouteProviderProps {
111
275
  router: Router;
112
276
  announceNavigation?: boolean;
113
277
  scrollRestoration?: ScrollRestorationOptions;
278
+ viewTransitions?: boolean;
114
279
  }
115
280
  declare function RouterProvider(props: ParentProps<RouteProviderProps>): JSX.Element;
116
281
 
@@ -126,5 +291,5 @@ declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>
126
291
 
127
292
  declare function createStoreFromSource<T extends object>(source: RouterSource<T>): T;
128
293
 
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 };
294
+ export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteEnter, useRouteExit, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
295
+ 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
  }
@@ -708,6 +830,206 @@ function useRouterTransition() {
708
830
  return createSignalFromSource(source);
709
831
  }
710
832
 
833
+ /**
834
+ * Subscribe to the router's leave-window with the universal guards baked
835
+ * in. Wraps `router.subscribeLeave` so consumers don't repeat the same
836
+ * boilerplate every time:
837
+ *
838
+ * - **Reentrant abort pre-check**: if `signal.aborted` is already `true`
839
+ * when the handler would run (rapid navigation superseded a slower
840
+ * one), the handler is skipped entirely. `signal.addEventListener(
841
+ * "abort", ...)` does not fire retroactively, so without this guard
842
+ * downstream cleanup would never trigger.
843
+ * - **Same-route skip**: by default, `route.name === nextRoute.name`
844
+ * short-circuits the handler — query-only navigations (sort, filter,
845
+ * pagination) skip the work. Opt out with `skipSameRoute: false`.
846
+ *
847
+ * Returns nothing — the subscription's lifecycle is bound to the
848
+ * component via `onCleanup`.
849
+ *
850
+ * If the handler returns a Promise, the router blocks on it. If the
851
+ * Promise resolves, navigation proceeds. If it rejects, the router emits
852
+ * `TRANSITION_CANCELLED`.
853
+ *
854
+ * **Handler reactivity (Solid)**: Solid components run **once** at mount;
855
+ * `handler` is captured in closure at the call site. If you need
856
+ * different behavior across renders, derive it from a signal inside the
857
+ * handler body — do not rely on swapping the handler reference.
858
+ *
859
+ * @example Animation
860
+ * ```tsx
861
+ * let ref: HTMLDivElement | undefined;
862
+ *
863
+ * useRouteExit(async ({ signal }) => {
864
+ * const el = ref;
865
+ * if (!el) return;
866
+ * el.classList.add("fade-out");
867
+ * const cleanup = () => el.classList.remove("fade-out");
868
+ * signal.addEventListener("abort", cleanup, { once: true });
869
+ * try {
870
+ * el.getBoundingClientRect(); // style flush
871
+ * await Promise.allSettled(el.getAnimations().map((a) => a.finished));
872
+ * } finally {
873
+ * cleanup();
874
+ * }
875
+ * });
876
+ * ```
877
+ *
878
+ * @example Auto-save form draft
879
+ * ```tsx
880
+ * useRouteExit(async ({ signal }) => {
881
+ * if (formState.dirty) await api.saveDraft(formState, { signal });
882
+ * });
883
+ * ```
884
+ *
885
+ * @example Reading rich transition metadata via `nextRoute.transition`
886
+ * ```tsx
887
+ * useRouteExit(({ route, nextRoute }) => {
888
+ * if (nextRoute.transition.segments.deactivated.includes("products")) {
889
+ * productCache.clear();
890
+ * }
891
+ * if (nextRoute.transition.redirected) {
892
+ * return;
893
+ * }
894
+ * });
895
+ * ```
896
+ */
897
+ function useRouteExit(handler, options) {
898
+ const router = useRouter();
899
+ const skipSameRoute = options?.skipSameRoute ?? true;
900
+ const off = router.subscribeLeave(({
901
+ route,
902
+ nextRoute,
903
+ signal
904
+ }) => {
905
+ if (skipSameRoute && route.name === nextRoute.name) {
906
+ return;
907
+ }
908
+
909
+ // Reentrant abort: signal is already aborted when listener fires
910
+ // (e.g. a newer navigate superseded this one before subscribeLeave
911
+ // even ran). addEventListener("abort", ...) does not fire
912
+ // retroactively, so we skip the handler entirely.
913
+ if (signal.aborted) {
914
+ return;
915
+ }
916
+ return handler({
917
+ route,
918
+ nextRoute,
919
+ signal
920
+ });
921
+ });
922
+ onCleanup(off);
923
+ }
924
+
925
+ /**
926
+ * Fire `handler` once when the component mounts as a result of a
927
+ * navigation. Mirror of `useRouteExit` for the entry side.
928
+ *
929
+ * What this hook covers that an ad-hoc `createEffect` + `useRoute()`
930
+ * doesn't:
931
+ *
932
+ * - **Skip-initial**: handler is skipped when there is no
933
+ * `transition.from` (i.e. first-load mount). Most consumers want to
934
+ * fire side effects only on real navigations, not on hydration.
935
+ * - **Same-route skip** (default): handler is skipped when
936
+ * `route.transition.from === route.name`. Sort/filter/query-only
937
+ * navigations re-trigger the effect (because the `route` reference
938
+ * changes), but they are not "entries" in the animation / analytics
939
+ * sense — the component instance has stayed mounted throughout.
940
+ * Opt out with `skipSameRoute: false`.
941
+ * - **Mount-time `route` / `previousRoute` snapshot**: the handler
942
+ * receives the values that were live at the moment of effect
943
+ * activation, not the latest ones (which may have moved on if the
944
+ * user navigated again before the effect drained).
945
+ *
946
+ * **Handler reactivity (Solid)**: Solid components run **once** at mount;
947
+ * `handler` is captured in closure when the hook is called. If you need
948
+ * different behavior across renders, derive it from a signal inside the
949
+ * handler body — do not rely on swapping the handler reference.
950
+ *
951
+ * @example Direction-aware entry animation
952
+ * ```tsx
953
+ * useRouteEnter(({ route }) => {
954
+ * const direction = route.context.browser?.direction;
955
+ * ref?.classList.add(
956
+ * direction === "back" ? "slide-from-left" : "slide-from-right",
957
+ * );
958
+ * });
959
+ * ```
960
+ *
961
+ * @example Analytics page-enter event (skip-initial built-in)
962
+ * ```tsx
963
+ * useRouteEnter(({ route, previousRoute }) => {
964
+ * analytics.track("page_enter", {
965
+ * route: route.name,
966
+ * from: previousRoute.name,
967
+ * });
968
+ * });
969
+ * ```
970
+ *
971
+ * @example Reading rich transition metadata via `route.transition`
972
+ * ```tsx
973
+ * useRouteEnter(({ route }) => {
974
+ * if (route.transition.redirected) {
975
+ * showToast(`Redirected from ${route.transition.from}`);
976
+ * }
977
+ * if (route.transition.segments.activated.includes("products")) {
978
+ * // products subtree just became active
979
+ * }
980
+ * });
981
+ * ```
982
+ */
983
+ function useRouteEnter(handler, options) {
984
+ const routeState = useRoute();
985
+ const skipSameRoute = options?.skipSameRoute ?? true;
986
+ let lastHandledRoute = null;
987
+ createEffect(() => {
988
+ const {
989
+ route,
990
+ previousRoute
991
+ } = routeState();
992
+
993
+ // Early-exit guards, top-down:
994
+ //
995
+ // - **Defensive**: `route` may be undefined during SSR or
996
+ // pre-start hydration. Not testable from vitest (tests start
997
+ // the router before render), so v8-ignored.
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
+ /* v8 ignore start */
1009
+ if (!route) {
1010
+ return;
1011
+ }
1012
+ /* v8 ignore stop */
1013
+ if (!route.transition.from) {
1014
+ return;
1015
+ }
1016
+ if (skipSameRoute && route.transition.from === route.name) {
1017
+ return;
1018
+ }
1019
+ /* v8 ignore start */
1020
+ if (lastHandledRoute === route || !previousRoute) {
1021
+ return;
1022
+ }
1023
+ /* v8 ignore stop */
1024
+
1025
+ lastHandledRoute = route;
1026
+ handler({
1027
+ route,
1028
+ previousRoute
1029
+ });
1030
+ });
1031
+ }
1032
+
711
1033
  function isRouteActive(linkRouteName, currentRouteName) {
712
1034
  return currentRouteName === linkRouteName || currentRouteName.startsWith(`${linkRouteName}.`);
713
1035
  }
@@ -730,6 +1052,15 @@ function RouterProvider(props) {
730
1052
  sr.destroy();
731
1053
  });
732
1054
  });
1055
+ onMount(() => {
1056
+ if (!props.viewTransitions) {
1057
+ return;
1058
+ }
1059
+ const vt = createViewTransitions(props.router);
1060
+ onCleanup(() => {
1061
+ vt.destroy();
1062
+ });
1063
+ });
733
1064
  const navigator = getNavigator(props.router);
734
1065
  const routeSource = createRouteSource(props.router);
735
1066
  const routeSignal = createSignalFromSource(routeSource);
@@ -753,4 +1084,4 @@ function RouterProvider(props) {
753
1084
  });
754
1085
  }
755
1086
 
756
- export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
1087
+ 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"}