@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.
- package/README.md +47 -2
- package/dist/cjs/index.d.ts +167 -2
- package/dist/cjs/index.js +337 -4
- package/dist/esm/index.d.mts +167 -2
- package/dist/esm/index.mjs +336 -5
- package/dist/types/RouterProvider.d.ts +1 -0
- package/dist/types/RouterProvider.d.ts.map +1 -1
- package/dist/types/dom-utils/direction-tracker.d.ts +27 -0
- package/dist/types/dom-utils/direction-tracker.d.ts.map +1 -0
- package/dist/types/dom-utils/index.d.ts +4 -0
- package/dist/types/dom-utils/index.d.ts.map +1 -1
- package/dist/types/dom-utils/view-transitions.d.ts +6 -0
- package/dist/types/dom-utils/view-transitions.d.ts.map +1 -0
- package/dist/types/hooks/useRouteEnter.d.ts +76 -0
- package/dist/types/hooks/useRouteEnter.d.ts.map +1 -0
- package/dist/types/hooks/useRouteExit.d.ts +90 -0
- package/dist/types/hooks/useRouteExit.d.ts.map +1 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/RouterProvider.tsx +18 -1
- package/src/hooks/useRouteEnter.tsx +129 -0
- package/src/hooks/useRouteExit.tsx +123 -0
- package/src/index.tsx +16 -0
package/dist/esm/index.d.mts
CHANGED
|
@@ -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 };
|
package/dist/esm/index.mjs
CHANGED
|
@@ -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
|
|
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":"
|
|
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 @@
|
|
|
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"}
|