fix(router): reject superseded Solid and Vue render acknowledgements

packages/solid-router/src/Transitioner.tsx

@@ -2,6 +2,7 @@ import * as Solid from 'solid-js'
 import { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
+import type { AnyRouteMatch } from '@tanstack/router-core'
 
 function getResolvedLocation(router: ReturnType<typeof useRouter>) {
   const resolvedLocation = router.stores.resolvedLocation.get()
@@ -21,9 +22,11 @@ export function Transitioner() {
     return null
   }
 
-  router.startTransition = async (fn) => {
+  let transitionOwner: Array<AnyRouteMatch> | undefined
+  router.startTransition = async (fn, expected) => {
+    transitionOwner = expected
     await Solid.startTransition(fn)
-    return true
+    return transitionOwner === expected
   }
 
   // Subscribe to location changes

packages/solid-router/tests/transitioner-render-ack.test.tsx

@@ -1,3 +1,4 @@
+import * as Solid from 'solid-js'
 import { cleanup, render, screen, waitFor } from '@solidjs/testing-library'
 import { afterEach, expect, onTestFinished, test } from 'vitest'
 import {
@@ -205,6 +206,73 @@ test('onRendered describes each committed navigation from the previously rendere
   )
 })
 
+test('a superseded suspended generation does not emit onRendered', async () => {
+  const firstRenderStarted = createControlledPromise<void>()
+  const firstRenderGate = createControlledPromise<void>()
+  const rootRoute = createRootRoute({
+    validateSearch: (search: Record<string, unknown>) => ({
+      revision: Number(search.revision ?? 0),
+    }),
+    component: () => {
+      const search = rootRoute.useSearch()
+      const [revision] = Solid.createResource(
+        () => search().revision,
+        async (nextRevision) => {
+          if (nextRevision === 1) {
+            firstRenderStarted.resolve()
+            await firstRenderGate
+          }
+          return nextRevision
+        },
+      )
+      return <div>Root revision {revision()}</div>
+    },
+  })
+  const router = createRouter({
+    routeTree: rootRoute,
+    history: createMemoryHistory({ initialEntries: ['/?revision=0'] }),
+  })
+
+  render(() => <RouterProvider router={router} />)
+  expect(await screen.findByText('Root revision 0')).toBeInTheDocument()
+  await waitFor(() => expect(router.state.status).toBe('idle'))
+
+  const renderedRevisions: Array<number> = []
+  const unsubscribe = router.subscribe('onRendered', (event) => {
+    renderedRevisions.push(
+      Number((event.toLocation.search as Record<string, unknown>).revision),
+    )
+  })
+  const navigations: Array<Promise<void>> = []
+  onTestFinished(async () => {
+    unsubscribe()
+    firstRenderGate.resolve()
+    await Promise.allSettled(navigations)
+  })
+
+  const firstNavigation = router.navigate({
+    to: '/',
+    search: { revision: 1 },
+  })
+  navigations.push(firstNavigation)
+  await firstRenderStarted
+
+  expect(screen.getByText('Root revision 0')).toBeInTheDocument()
+  expect(screen.queryByText('Root revision 1')).not.toBeInTheDocument()
+  expect(renderedRevisions).toEqual([])
+
+  const secondNavigation = router.navigate({
+    to: '/',
+    search: { revision: 2 },
+  })
+  navigations.push(secondNavigation)
+  await Promise.all([firstNavigation, secondNavigation])
+
+  expect(await screen.findByText('Root revision 2')).toBeInTheDocument()
+  expect(screen.queryByText('Root revision 1')).not.toBeInTheDocument()
+  expect(renderedRevisions).toEqual([2])
+})
+
 test('an older rendered destination cannot resolve a superseding navigation', async () => {
   const nextLoader = createControlledPromise<void>()
   const rootRoute = createRootRoute({ component: () => <Outlet /> })

packages/vue-router/src/Transitioner.tsx

@@ -2,19 +2,21 @@ import * as Vue from 'vue'
 import { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
+import type { AnyRouteMatch } from '@tanstack/router-core'
 
 export function useTransitionerSetup() {
   const router = useRouter()
   if (isServer ?? router.isServer) {
     return
   }
 
-  const transition = async (fn: () => void) => {
+  let transitionOwner: Array<AnyRouteMatch> | undefined
+  router.startTransition = async (fn, expected) => {
+    transitionOwner = expected
     fn()
     await Vue.nextTick()
-    return true
+    return transitionOwner === expected
   }
-  router.startTransition = transition
 
   Vue.onMounted(() => {
     Vue.onUnmounted(router.history.subscribe(router.load))

packages/vue-router/tests/transitioner-render-ack.test.tsx

@@ -0,0 +1,231 @@
+import * as Vue from 'vue'
+import { cleanup, render, screen, waitFor } from '@testing-library/vue'
+import { afterEach, expect, test } from 'vitest'
+import {
+  Outlet,
+  RouterProvider,
+  createControlledPromise,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  useRouterState,
+} from '../src'
+import type { AnyRouter } from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+test('a generation replaced before the Vue render tick does not emit onRendered', async () => {
+  const secondGate = createControlledPromise<void>()
+  const lifecycle: Array<string> = []
+  let replacementEnabled = false
+  let secondNavigation: Promise<void> | undefined
+
+  const First = Vue.defineComponent({
+    setup() {
+      Vue.onMounted(() => lifecycle.push('mounted:/first'))
+      return () => <div>First</div>
+    },
+  })
+  const SecondPending = Vue.defineComponent({
+    setup() {
+      Vue.onMounted(() => lifecycle.push('mounted:pending:/second'))
+      return () => <div>Second pending</div>
+    },
+  })
+  const Second = Vue.defineComponent({
+    setup() {
+      Vue.onMounted(() => lifecycle.push('mounted:/second'))
+      return () => <div>Second</div>
+    },
+  })
+  const rootRoute = createRootRoute({ component: () => <Outlet /> })
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => <div>Home</div>,
+  })
+  const firstRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/first',
+    component: First,
+  })
+  const secondRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/second',
+    pendingMs: 0,
+    pendingMinMs: 0,
+    pendingComponent: SecondPending,
+    beforeLoad: () => secondGate,
+    component: Second,
+  })
+  const Wrap = Vue.defineComponent({
+    setup(_, { slots }) {
+      const leafRouteId = useRouterState<AnyRouter, string | undefined>({
+        select: (state) => state.matches.at(-1)?.routeId,
+      })
+      Vue.watch(
+        leafRouteId,
+        (routeId) => {
+          if (
+            replacementEnabled &&
+            routeId === firstRoute.id &&
+            !secondNavigation
+          ) {
+            lifecycle.push('offered:/first')
+            secondNavigation = router.navigate({ to: '/second' })
+            lifecycle.push('navigate:/second')
+          }
+        },
+        { flush: 'sync' },
+      )
+      return () => slots.default?.()
+    },
+  })
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([indexRoute, firstRoute, secondRoute]),
+    history: createMemoryHistory({ initialEntries: ['/'] }),
+    Wrap: Wrap as any,
+  })
+
+  render(<RouterProvider router={router} />)
+  expect(await screen.findByText('Home')).toBeInTheDocument()
+  await waitFor(() => expect(router.state.status).toBe('idle'))
+
+  const unsubscribers = [
+    router.subscribe('onResolved', (event) => {
+      lifecycle.push(`onResolved:${event.toLocation.pathname}`)
+    }),
+    router.subscribe('onRendered', (event) => {
+      lifecycle.push(`onRendered:${event.toLocation.pathname}`)
+    }),
+  ]
+  replacementEnabled = true
+  let firstNavigation: Promise<void> | undefined
+  try {
+    firstNavigation = router.navigate({ to: '/first' })
+
+    expect(await screen.findByText('Second pending')).toBeInTheDocument()
+    expect(secondNavigation).toBeDefined()
+    expect(screen.queryByText('First')).not.toBeInTheDocument()
+    expect(lifecycle).not.toContain('mounted:/first')
+    expect(lifecycle).not.toContain('onResolved:/first')
+    expect(lifecycle).not.toContain('onRendered:/first')
+
+    secondGate.resolve()
+    await Promise.all([firstNavigation, secondNavigation!])
+    expect(await screen.findByText('Second')).toBeInTheDocument()
+    await waitFor(() => expect(lifecycle).toContain('onRendered:/second'))
+
+    expect(lifecycle).toContain('mounted:pending:/second')
+    expect(lifecycle).toContain('mounted:/second')
+    expect(lifecycle).toContain('onResolved:/second')
+    expect(lifecycle).not.toContain('mounted:/first')
+    expect(lifecycle).not.toContain('onResolved:/first')
+    expect(lifecycle).not.toContain('onRendered:/first')
+  } finally {
+    replacementEnabled = false
+    secondGate.resolve()
+    for (const unsubscribe of unsubscribers) {
+      unsubscribe()
+    }
+    await Promise.allSettled(
+      [firstNavigation, secondNavigation].filter(
+        (navigation): navigation is Promise<void> => !!navigation,
+      ),
+    )
+  }
+})
+
+test('a rendered generation superseded before core continuation does not emit onRendered', async () => {
+  const secondGate = createControlledPromise<void>()
+  const lifecycle: Array<string> = []
+  let secondNavigation: Promise<void> | undefined
+
+  const First = Vue.defineComponent({
+    setup() {
+      Vue.onMounted(() => {
+        lifecycle.push('mounted:/first')
+        secondNavigation = router.navigate({ to: '/second' })
+        lifecycle.push('navigate:/second')
+      })
+      return () => <div>First</div>
+    },
+  })
+  const Second = Vue.defineComponent({
+    setup() {
+      Vue.onMounted(() => lifecycle.push('mounted:/second'))
+      return () => <div>Second</div>
+    },
+  })
+  const rootRoute = createRootRoute({ component: () => <Outlet /> })
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => <div>Home</div>,
+  })
+  const firstRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/first',
+    component: First,
+  })
+  const secondRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/second',
+    loader: () => secondGate,
+    component: Second,
+  })
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([indexRoute, firstRoute, secondRoute]),
+    history: createMemoryHistory({ initialEntries: ['/'] }),
+  })
+
+  render(<RouterProvider router={router} />)
+  expect(await screen.findByText('Home')).toBeInTheDocument()
+  await waitFor(() => expect(router.state.status).toBe('idle'))
+
+  const unsubscribers = [
+    router.subscribe('onResolved', (event) => {
+      lifecycle.push(`onResolved:${event.toLocation.pathname}`)
+    }),
+    router.subscribe('onRendered', (event) => {
+      lifecycle.push(`onRendered:${event.toLocation.pathname}`)
+    }),
+  ]
+  let firstNavigation: Promise<void> | undefined
+  try {
+    firstNavigation = router.navigate({ to: '/first' })
+
+    expect(await screen.findByText('First')).toBeInTheDocument()
+    await waitFor(() =>
+      expect(lifecycle).toEqual(['mounted:/first', 'navigate:/second']),
+    )
+    expect(secondNavigation).toBeDefined()
+    expect(lifecycle).not.toContain('onResolved:/first')
+
+    secondGate.resolve()
+    await Promise.all([firstNavigation, secondNavigation!])
+    expect(await screen.findByText('Second')).toBeInTheDocument()
+    await waitFor(() =>
+      expect(lifecycle).toEqual([
+        'mounted:/first',
+        'navigate:/second',
+        'mounted:/second',
+        'onResolved:/second',
+        'onRendered:/second',
+      ]),
+    )
+  } finally {
+    secondGate.resolve()
+    for (const unsubscribe of unsubscribers) {
+      unsubscribe()
+    }
+    await Promise.allSettled(
+      [firstNavigation, secondNavigation].filter(
+        (navigation): navigation is Promise<void> => !!navigation,
+      ),
+    )
+  }
+})