@octane-xplat/ui 0.7.3 → 0.10.0

package/src/route.macos.ts

@@ -1,3 +1,4 @@
+import { createNavigationRequests, type NavigationRequest } from './navigation-request'
 import { useSyncExternalStore } from 'octane'
 import type { Route, RouteHead, RouteManifest, RouteMeta, ScreenTable } from './props'
 import {
@@ -8,6 +9,8 @@ import {
 	RouteRedirect,
 } from './route-table'
 
+const navigationRequests = createNavigationRequests()
+
 // Effective tables = the file-derived base manifest merged under every
 // addRoutes layer, matching the web/native leaves' registry split.
 let baseManifest: RouteManifest = { screens: {}, routes: [], layouts: {} }
@@ -62,6 +65,12 @@ export function layoutsFor(name: string): any[] {
 	return layoutChain(routeLayouts, name)
 }
 
+/** The route's declared `ErrorBoundary` export, if any — outlets wrap the
+ *  resolved screen in `RouteBoundary` with it. */
+export function errorBoundaryFor(name: string): any {
+	return metaFor(name)?.errorBoundary
+}
+
 function routeAt(stack: string): Route | null {
 	const entries = stacks.get(stack)
 	return entries?.[entries.length - 1] ?? null
@@ -107,25 +116,49 @@ function contextFor(route: Route): Record<string, unknown> {
 	return route.context ?? {}
 }
 
-async function prepareRoute(route: Route, redirects = 0): Promise<void> {
+async function prepareRoute(
+	route: Route,
+	request: NavigationRequest,
+	redirects = 0,
+): Promise<void> {
+	if (!request.isCurrent()) {
+		return
+	}
+
+	if (!request.claim(route.stack)) {
+		return
+	}
+
 	const beforeLoad = metaFor(route.name)?.beforeLoad
 	if (!beforeLoad) {
-		commitRoute(route)
+		commitRoute(route, request)
 		return
 	}
+
 	if (redirects > 16) {
 		console.warn(`[octane-xplat] beforeLoad redirect loop for '${route.name}'`)
 		return
 	}
+
 	try {
 		const returned = await beforeLoad({ params: route.params, context: contextFor(route) })
-		commitRoute({ ...route, context: returned ? { ...contextFor(route), ...returned } : route.context })
+		commitRoute(
+			{ ...route, context: returned ? { ...contextFor(route), ...returned } : route.context },
+			request,
+		)
 	} catch (error) {
+		if (!request.isCurrent()) {
+			return
+		}
+
 		if (error instanceof RouteRedirect) {
-			await prepareRoute(error.route, redirects + 1)
+			await prepareRoute(error.route, request, redirects + 1)
 			return
 		}
-		console.warn(`[octane-xplat] beforeLoad('${route.name}') rejected: ${(error as Error)?.message ?? error}`)
+
+		console.warn(
+			`[octane-xplat] beforeLoad('${route.name}') rejected: ${(error as Error)?.message ?? error}`,
+		)
 	}
 }
 
@@ -134,14 +167,20 @@ export function redirect(route: Route): never {
 }
 
 export function pushRoute(route: Route): void {
+	const request = navigationRequests.begin(route.stack)
 	if (metaFor(route.name)?.beforeLoad) {
-		void prepareRoute(route)
+		void prepareRoute(route, request)
 		return
 	}
-	commitRoute(route)
+
+	commitRoute(route, request)
 }
 
-function commitRoute(route: Route): void {
+function commitRoute(route: Route, request: NavigationRequest): void {
+	if (!request.isCurrent()) {
+		return
+	}
+
 	const entry = { ...route, presentation: route.presentation ?? metaFor(route.name)?.presentation }
 	const loader = routeLoaders[entry.name] ?? metaFor(entry.name)?.loader
 	if (
@@ -149,10 +188,13 @@ function commitRoute(route: Route): void {
 		!Object.prototype.hasOwnProperty.call(entry, 'loaderData') &&
 		!Object.prototype.hasOwnProperty.call(entry, 'loaderError')
 	) {
-		void Promise.resolve().then(() => loader(entry.params)).then(
-			(loaderData) => commitRoute({ ...entry, loaderData }),
-			(loaderError) => commitRoute({ ...entry, loaderError }),
-		)
+		void Promise.resolve()
+			.then(() => loader(entry.params))
+			.then(
+				(loaderData) => commitRoute({ ...entry, loaderData }, request),
+				(loaderError) => commitRoute({ ...entry, loaderError }, request),
+			)
+
 		return
 	}
 
@@ -164,11 +206,14 @@ function commitRoute(route: Route): void {
 		lastStack = entry.stack
 		modalRoute = null
 	}
+
 	emit()
 }
 
 export function popRoute(stack = 'root'): void {
+	navigationRequests.invalidate(stack)
 	if (modalRoute) {
+		navigationRequests.invalidate(modalRoute.stack)
 		modalRoute = null
 	} else {
 		const entries = stacks.get(stack) ?? []
@@ -177,14 +222,18 @@ export function popRoute(stack = 'root'): void {
 		} else if (entries.length) {
 			stacks.set(stack, [])
 		}
+
 		lastStack = stack
 	}
+
 	emit()
 }
 
 export function pushDeepLink(url: string): void {
 	const route = matchUrl(routes, url)
-	if (route) {pushRoute(route)}
+	if (route) {
+		pushRoute(route)
+	}
 }
 
 export function hrefFor(route: Route): string {
@@ -199,3 +248,5 @@ export function addBackInterceptor(_handler: () => boolean): () => void {
 export function useRouteHead(_route: Route | null): RouteHead | undefined {
 	return undefined
 }
+
+export { layoutsFor as layoutsForRoute }

package/src/route.ts

@@ -15,6 +15,7 @@
  *  Every drop path warns loudly — silent no-ops are how apps ship a
  *  default route on native while working fine on web. */
 
+import { createNavigationRequests, type NavigationRequest } from './navigation-request'
 import { Application, Frame, GridLayout, Page } from '@nativescript/core'
 import { createNativeScriptRoot } from '@nativescript-community/octane'
 import type { UniversalComponent } from 'octane/universal/native'
@@ -30,14 +31,16 @@ import {
 	RouteRedirect,
 } from './route-table'
 
-import { RouteHost } from './route-host.mobile'
-import { modalPresenter } from './modal-presenter.mobile'
+import { RouteHost } from './route-host'
+import { modalPresenter } from './modal-presenter'
 import type { Route, RouteManifest, RouteMeta, ScreenTable } from './props'
 
 export type { Route } from './props'
 
 // ---------- screen registry ----------
 
+const navigationRequests = createNavigationRequests()
+
 // Effective tables = the file-derived base manifest merged under every
 // addRoutes layer. Keeping the split means an HMR re-run of routes.gen.*
 // (registerRoutes again) can't wipe routes an app added at runtime.
@@ -94,6 +97,12 @@ export function screenFor(name: string): ScreenTable[string] | undefined {
 	return screens[name]
 }
 
+/** The route's declared `ErrorBoundary` export, if any — outlets wrap the
+ *  resolved screen in `RouteBoundary` with it. */
+export function errorBoundaryFor(name: string): any {
+	return metaFor(name)?.errorBoundary
+}
+
 /** Wrap a screen in its directory `_layout` chain (outermost →
  *  innermost) as a single root component — pushed Pages and modal roots
  *  render this, matching web's outlet wrapping. */
@@ -120,13 +129,17 @@ function warnOnce(key: string, msg: string): void {
 /** Attach the route-store emission hook once per frame. `navigatedTo`
  *  fires on push AND on pop (the revealed page re-fires it), so one
  *  listener keeps every useRoute snapshot honest. */
-function trackFrame(frame: Frame): void {
+function trackFrame(frame: Frame, stack: string): void {
 	if (tracked.has(frame)) {
 		return
 	}
 
 	tracked.add(frame)
-	frame.on('navigatedTo', () => {
+	frame.on('navigatedTo', (event) => {
+		if ((event as typeof event & { isBackNavigation?: boolean })?.isBackNavigation) {
+			navigationRequests.invalidate(stack)
+		}
+
 		// A page re-shown by pop can stay unloaded when the frame's nav
 		// bookkeeping stalls mid-transition (the iOS strand of #11444 — the
 		// same hole the isLoaded/callLoaded workaround in commitRoute covers
@@ -146,7 +159,7 @@ function trackFrame(frame: Frame): void {
 function resolveStack(stack: string): Frame | undefined {
 	const frame = getStack(stack)
 	if (frame) {
-		trackFrame(frame)
+		trackFrame(frame, stack)
 	}
 
 	return frame
@@ -163,8 +176,8 @@ function rearmFrameLoaded(frame: Frame): void {
 	}
 }
 
-onStackRegistered((_name, frame) => {
-	trackFrame(frame)
+onStackRegistered((name, frame) => {
+	trackFrame(frame, name)
 	ensureBackWired()
 	emit()
 })
@@ -273,11 +286,12 @@ function ensureBackWired(): void {
 	}
 
 	app.__octaneXplatBackWired = true
-	Application.android.on(Application.AndroidApplication.activityBackPressedEvent, (e: {
-		cancel: boolean
-	}) => {
-		app.__octaneXplatBackPress?.(e)
-	})
+	Application.android.on(
+		Application.AndroidApplication.activityBackPressedEvent,
+		(e: { cancel: boolean }) => {
+			app.__octaneXplatBackPress?.(e)
+		},
+	)
 }
 
 function presentationFor(name: string): Route['presentation'] {
@@ -299,10 +313,18 @@ function contextFor(r: Route): Record<string, unknown> {
 	return r.context ?? {}
 }
 
-async function prepareRoute(r: Route, redirects = 0): Promise<void> {
+async function prepareRoute(r: Route, request: NavigationRequest, redirects = 0): Promise<void> {
+	if (!request.isCurrent()) {
+		return
+	}
+
+	if (!request.claim(r.stack)) {
+		return
+	}
+
 	const beforeLoad = metaFor(r.name)?.beforeLoad
 	if (!beforeLoad) {
-		commitRoute(r)
+		commitRoute(r, request)
 		return
 	}
 
@@ -314,13 +336,20 @@ async function prepareRoute(r: Route, redirects = 0): Promise<void> {
 	try {
 		const returned = await beforeLoad({ params: r.params, context: contextFor(r) })
 		const context = returned ? { ...contextFor(r), ...returned } : contextFor(r)
-		commitRoute({
-			...r,
-			context,
-		})
+		commitRoute(
+			{
+				...r,
+				context,
+			},
+			request,
+		)
 	} catch (e) {
+		if (!request.isCurrent()) {
+			return
+		}
+
 		if (e instanceof RouteRedirect) {
-			await prepareRoute(e.route, redirects + 1)
+			await prepareRoute(e.route, request, redirects + 1)
 			return
 		}
 
@@ -333,15 +362,20 @@ export function redirect(r: Route): never {
 }
 
 export function pushRoute(r: Route): void {
+	const request = navigationRequests.begin(r.stack)
 	if (metaFor(r.name)?.beforeLoad) {
-		void prepareRoute(r)
+		void prepareRoute(r, request)
 		return
 	}
 
-	commitRoute(r)
+	commitRoute(r, request)
 }
 
-function commitRoute(r: Route): void {
+function commitRoute(r: Route, request: NavigationRequest): void {
+	if (!request.isCurrent()) {
+		return
+	}
+
 	const C = screenFor(r.name)
 	if (!C) {
 		warnOnce(
@@ -362,8 +396,8 @@ function commitRoute(r: Route): void {
 		void Promise.resolve()
 			.then(() => loader(r.params))
 			.then(
-				(loaderData) => commitRoute({ ...r, loaderData }),
-				(loaderError) => commitRoute({ ...r, loaderError }),
+				(loaderData) => commitRoute({ ...r, loaderData }, request),
+				(loaderError) => commitRoute({ ...r, loaderError }, request),
 			)
 
 		return
@@ -458,6 +492,8 @@ function commitRoute(r: Route): void {
 					screen: C,
 					layouts: layoutsForRoute(r.name),
 					params: props,
+					boundary: errorBoundaryFor(r.name),
+					route: r,
 				})
 
 				return page
@@ -484,6 +520,7 @@ function pushModal(frame: Frame, r: Route, C: any): void {
 		}
 
 		modalHosts.splice(i, 1)
+		root.unmount?.()
 		emit()
 	}
 
@@ -520,6 +557,8 @@ function pushModal(frame: Frame, r: Route, C: any): void {
 			screen: C,
 			layouts: layoutsForRoute(r.name),
 			params,
+			boundary: errorBoundaryFor(r.name),
+			route: r,
 		})
 
 		presenter.showModal(host, {
@@ -532,7 +571,6 @@ function pushModal(frame: Frame, r: Route, C: any): void {
 		emit()
 	} catch (e) {
 		entry.dismiss()
-		root.unmount?.()
 		console.warn('[octane-xplat] modal pushRoute(' + r.name + ') threw: ' + (e as Error)?.message)
 	}
 }
@@ -542,8 +580,10 @@ function pushModal(frame: Frame, r: Route, C: any): void {
  *  where back at the app root is a no-op; loud only when the stack
  *  itself doesn't exist. */
 export function popRoute(stack = 'root'): void {
+	navigationRequests.invalidate(stack)
 	const modal = modalHosts[modalHosts.length - 1]
 	if (modal) {
+		navigationRequests.invalidate(modal.route.stack)
 		// Bookkeeping first: iOS drops dismissViewController completions
 		// that race a still-in-flight presentation, so the NS closeCallback
 		// isn't guaranteed to run — the route store can't gate on it.
@@ -639,7 +679,7 @@ export function currentModalRoute(): Route | null {
  *  `onDeepLink(pushDeepLink)` plus one `consumeInitialUrl()` call. */
 export function pushDeepLink(url: string): boolean {
 	const r = matchUrl(routes, linkPath(url))
-	if (!r) {
+	if (!r || !screenFor(r.name)) {
 		warnOnce('link:' + url, `pushDeepLink('${url}') dropped — no route matches.`)
 		return false
 	}