alepha 0.19.3 → 0.19.5

package/src/react/router/providers/ReactBrowserProvider.ts

@@ -79,6 +79,17 @@ export class ReactBrowserProvider {
     from?: string;
   };
 
+  /**
+   * Monotonic counter used to detect stale (superseded) transitions.
+   *
+   * Each call to `render()` captures `++this.transitionId` and any
+   * subsequent `render()` invalidates older in-flight transitions.
+   * This prevents a slow page from racing past a newer navigation
+   * (e.g. user clicks /pageA which has a 2s loader, then clicks /pageB
+   * — pageB must remain the committed page).
+   */
+  protected transitionId = 0;
+
   public get state(): ReactRouterState {
     return this.alepha.store.get("alepha.react.router.state")!;
   }
@@ -167,12 +178,21 @@ export class ReactBrowserProvider {
       options,
     });
 
+    const myTransitionId = ++this.transitionId;
+
     await this.render({
       url,
       previous: options.force ? [] : this.state.layers,
       meta: options.meta,
+      transitionId: myTransitionId,
     });
 
+    // A newer navigation has superseded us — bail out without touching
+    // history, otherwise we'd push a duplicate/stale entry.
+    if (myTransitionId !== this.transitionId) {
+      return;
+    }
+
     // when redirecting in browser
     if (this.state.url.pathname + this.state.url.search !== url) {
       this.pushState(this.state.url.pathname + this.state.url.search);
@@ -183,6 +203,7 @@ export class ReactBrowserProvider {
   }
 
   protected async render(options: RouterRenderOptions = {}): Promise<void> {
+    const myTransitionId = options.transitionId ?? ++this.transitionId;
     const previous = options.previous ?? this.state.layers;
     const url = options.url ?? this.url;
     const start = this.dateTimeProvider.now();
@@ -196,12 +217,25 @@ export class ReactBrowserProvider {
       to: url,
     });
 
+    const isStale = () => this.transitionId !== myTransitionId;
+
     const redirect = await this.router.transition(
       new URL(`http://localhost${url}`),
       previous,
       options.meta,
+      isStale,
     );
 
+    // A newer navigation has superseded us between the time we awaited
+    // transition() and now. Drop everything: don't follow redirects, don't
+    // log success, don't clear `transitioning` (the newer render owns it).
+    if (isStale()) {
+      this.log.debug("Transition superseded — discarding stale result", {
+        to: url,
+      });
+      return;
+    }
+
     if (redirect) {
       this.log.info("Redirecting to", {
         redirect,
@@ -307,4 +341,9 @@ export interface RouterRenderOptions {
   url?: string;
   previous?: PreviousLayerData[];
   meta?: Record<string, any>;
+  /**
+   * Transition id used to detect supersession by a newer navigation.
+   * When omitted, render() allocates a fresh id internally.
+   */
+  transitionId?: number;
 }

package/src/react/router/providers/ReactBrowserRouterProvider.ts

@@ -51,6 +51,7 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
     url: URL,
     previous: PreviousLayerData[] = [],
     meta = {},
+    isStale: () => boolean = () => false,
   ): Promise<string | void> {
     const { pathname, search } = url;
 
@@ -101,6 +102,13 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
           state,
           previous,
         );
+        // A newer navigation already won — bail before committing or
+        // emitting any further events. The caller (ReactBrowserProvider)
+        // also re-checks staleness, but stopping here avoids running
+        // success hooks for a transition the user no longer wants.
+        if (isStale()) {
+          return;
+        }
         if (redirect) {
           return redirect;
         }
@@ -120,6 +128,13 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
       });
       await this.alepha.events.emit("react:transition:success", { state });
     } catch (e) {
+      // If we were superseded mid-flight, swallow the error: the user has
+      // already moved on, and an error UI for an abandoned page would
+      // overwrite the newer page they actually want.
+      if (isStale()) {
+        return;
+      }
+
       this.log.error("Transition has failed", e);
 
       let element: ReactNode | undefined;
@@ -151,6 +166,13 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
       });
     }
 
+    // Final supersession check before any side effects (onLeave/onEnter,
+    // store mutation, head rewrite). Stale transitions must be a complete
+    // no-op from this point on.
+    if (isStale()) {
+      return;
+    }
+
     // [feature]: local hook for leaving a page
     if (previous) {
       for (let i = 0; i < previous.length; i++) {