perf: compact private bundle boundaries

packages/history/src/index.ts

@@ -329,18 +329,14 @@ export function createBrowserHistory(opts?: {
 
   let next:
     | undefined
-    | {
-        // This is the latest location that we were attempting to push/replace
-        href: string
-        // This is the latest state that we were attempting to push/replace
-        state: any
-        // This is the latest type that we were attempting to push/replace
-        isPush: boolean
-      }
-
-  // We need to track the current scheduled update to prevent
-  // multiple updates from being scheduled at the same time.
-  let scheduled: undefined | boolean
+    | [
+        // The latest location that we were attempting to push/replace
+        href: string,
+        // The latest state that we were attempting to push/replace
+        state: any,
+        // Whether any queued update needs to push rather than replace
+        isPush: boolean,
+      ]
 
   // This function flushes the next update to the browser history
   const flush = () => {
@@ -352,46 +348,41 @@ export function createBrowserHistory(opts?: {
     history._ignoreSubscribers = true
 
     // Update the browser history
-    ;(next.isPush ? win.history.pushState : win.history.replaceState)(
-      next.state,
+    ;(next[2 /* is push */] ? win.history.pushState : win.history.replaceState)(
+      next[1 /* state */],
       '',
-      next.href,
+      next[0 /* href */],
     )
 
     // Stop ignoring subscriber updates
     history._ignoreSubscribers = false
 
-    // Reset the nextIsPush flag and clear the scheduled update
+    // Clear the queued action after it reaches browser history.
     next = undefined
-    scheduled = false
     rollbackLocation = undefined
   }
 
   // This function queues up a call to update the browser history
   const queueHistoryAction = (
-    type: 'push' | 'replace',
+    isPush: boolean,
     destHref: string,
     state: any,
   ) => {
     const href = createHref(destHref)
+    const hasPendingAction = !!next
 
-    if (!scheduled) {
+    if (!hasPendingAction) {
       rollbackLocation = currentLocation
     }
 
     // Update the location in memory
     currentLocation = parseHref(destHref, state)
 
     // Keep track of the next location we need to flush to the URL
-    next = {
-      href,
-      state,
-      isPush: next?.isPush || type === 'push',
-    }
+    next = [href, state, next?.[2 /* is push */] || isPush]
 
-    if (!scheduled) {
+    if (!hasPendingAction) {
       // Schedule an update to the browser history
-      scheduled = true
       queueMicrotask(() => flush())
     }
   }
@@ -489,8 +480,8 @@ export function createBrowserHistory(opts?: {
   const history = createHistory({
     getLocation,
     getLength: () => win.history.length,
-    pushState: (href, state) => queueHistoryAction('push', href, state),
-    replaceState: (href, state) => queueHistoryAction('replace', href, state),
+    pushState: (href, state) => queueHistoryAction(true, href, state),
+    replaceState: (href, state) => queueHistoryAction(false, href, state),
     back: (ignoreBlocker) => {
       if (ignoreBlocker) skipBlockerNextPop = true
       ignoreNextBeforeUnload = true

packages/history/tests/createBrowserHistory.test.ts

@@ -0,0 +1,106 @@
+import { describe, expect, test, vi } from 'vitest'
+import { createBrowserHistory } from '../src'
+
+function createBrowserHistoryHarness() {
+  const location = {
+    pathname: '/',
+    search: '',
+    hash: '',
+  }
+  const pushState = vi.fn()
+  const replaceState = vi.fn()
+  const nativeHistory = {
+    state: { __TSR_index: 0, __TSR_key: 'initial' },
+    length: 1,
+    pushState,
+    replaceState,
+    back: vi.fn(),
+    forward: vi.fn(),
+    go: vi.fn(),
+  }
+  const window = {
+    location,
+    history: nativeHistory,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }
+  const history = createBrowserHistory({ window })
+
+  return {
+    history,
+    pushState,
+    replaceState,
+  }
+}
+
+describe('createBrowserHistory', () => {
+  test('coalesces consecutive replaces into the latest replace', async () => {
+    const { history, pushState, replaceState } = createBrowserHistoryHarness()
+
+    history.replace('/first', { value: 1 })
+    history.replace('/second', { value: 2 })
+    await Promise.resolve()
+
+    expect(pushState).not.toHaveBeenCalled()
+    expect(replaceState).toHaveBeenCalledTimes(1)
+    expect(replaceState).toHaveBeenCalledWith(
+      expect.objectContaining({ value: 2 }),
+      '',
+      '/second',
+    )
+    history.destroy()
+  })
+
+  test('promotes a queued replace to a push', async () => {
+    const { history, pushState, replaceState } = createBrowserHistoryHarness()
+
+    history.replace('/first', { value: 1 })
+    history.push('/second', { value: 2 })
+    await Promise.resolve()
+
+    expect(replaceState).not.toHaveBeenCalled()
+    expect(pushState).toHaveBeenCalledTimes(1)
+    expect(pushState).toHaveBeenCalledWith(
+      expect.objectContaining({ value: 2 }),
+      '',
+      '/second',
+    )
+    history.destroy()
+  })
+
+  test('keeps a queued push when followed by a replace', async () => {
+    const { history, pushState, replaceState } = createBrowserHistoryHarness()
+
+    history.push('/first', { value: 1 })
+    history.replace('/second', { value: 2 })
+    await Promise.resolve()
+
+    expect(replaceState).not.toHaveBeenCalled()
+    expect(pushState).toHaveBeenCalledTimes(1)
+    expect(pushState).toHaveBeenCalledWith(
+      expect.objectContaining({ value: 2 }),
+      '',
+      '/second',
+    )
+    history.destroy()
+  })
+
+  test('flushes a later action after an explicit flush', async () => {
+    const { history, pushState, replaceState } = createBrowserHistoryHarness()
+
+    history.replace('/first', { value: 1 })
+    history.flush()
+    await Promise.resolve()
+    history.replace('/second', { value: 2 })
+    await Promise.resolve()
+
+    expect(pushState).not.toHaveBeenCalled()
+    expect(replaceState).toHaveBeenCalledTimes(2)
+    expect(replaceState).toHaveBeenLastCalledWith(
+      expect.objectContaining({ value: 2 }),
+      '',
+      '/second',
+    )
+    history.destroy()
+  })
+})

packages/router-core/src/router.ts

@@ -963,12 +963,12 @@ export function runRouteLifecycle(
   }
 }
 
-type LightweightRouteMatchResult = {
-  matchedRoutes: ReadonlyArray<AnyRoute>
-  fullPath: string
-  search: Record<string, unknown>
-  params: Record<string, unknown>
-}
+type LightweightRouteMatchResult = [
+  matchedRoutes: ReadonlyArray<AnyRoute>,
+  fullPath: string,
+  search: Record<string, unknown>,
+  params: Record<string, unknown>,
+]
 
 type LightweightRouteMatchCacheEntry = [
   lastMatchId: string | undefined,
@@ -1822,12 +1822,12 @@ export class RouterCore<
       params = strictParams
     }
 
-    const result = {
+    const result: LightweightRouteMatchResult = [
       matchedRoutes,
-      fullPath: lastRoute.fullPath,
-      search: accumulatedSearch,
+      lastRoute.fullPath,
+      accumulatedSearch,
       params,
-    }
+    ]
     this.lightweightCache.set(location, [lastStateMatchId, result])
     return result
   }
@@ -1862,12 +1862,15 @@ export class RouterCore<
       ) {
         const [allFromMatches] = this.getMatchedRoutes(dest.from)
 
-        const matchedFrom = findLast(lightweightResult.matchedRoutes, (d) => {
-          return comparePaths(d.fullPath, dest.from!)
-        })
+        const matchedFrom = findLast(
+          lightweightResult[0 /* matchedRoutes */],
+          (d) => {
+            return comparePaths(d.fullPath, dest.from!)
+          },
+        )
 
         const matchedCurrent = findLast(allFromMatches, (d) => {
-          return comparePaths(d.fullPath, lightweightResult.fullPath)
+          return comparePaths(d.fullPath, lightweightResult[1 /* fullPath */])
         })
 
         // for from to be invalid it shouldn't just be unmatched to currentLocation
@@ -1880,15 +1883,15 @@ export class RouterCore<
       const defaultedFromPath =
         dest.unsafeRelative === 'path'
           ? currentLocation.pathname
-          : (dest.from ?? lightweightResult.fullPath)
+          : (dest.from ?? lightweightResult[1 /* fullPath */])
       const destTo = dest.to ? `${dest.to}` : undefined
 
       // From search should always use the current location
-      const fromSearch = lightweightResult.search
+      const fromSearch = lightweightResult[2 /* search */]
       // Same with params. It can't hurt to provide as many as possible
       const fromParams = Object.assign(
         Object.create(null),
-        lightweightResult.params,
+        lightweightResult[3 /* params */],
       )
 
       const isAbsoluteTo = destTo?.charCodeAt(0) === 47

packages/solid-router/src/Match.tsx

@@ -34,10 +34,7 @@ export const Match = (props: { routeId: string }) => {
     () => router.stores.byRoute.get(props.routeId)!.get()!,
   )
 
-  const nearestMatch = {
-    routeId: () => props.routeId,
-    match: currentMatch,
-  }
+  const nearestMatch = [() => props.routeId, currentMatch] as const
 
   const route: AnyRoute = router.routesById[props.routeId]
 
@@ -162,8 +159,8 @@ export const Match = (props: { routeId: string }) => {
 export const MatchInner = (): any => {
   const router = useRouter()
   const nearestMatch = Solid.useContext(nearestMatchContext)
-  const match = nearestMatch.match
-  const routeId = nearestMatch.routeId
+  const match = nearestMatch[1 /* match */]
+  const routeId = nearestMatch[0 /* route id */]
   const route = router.routesById[routeId()!]!
   const currentMatch = () => match()!
 
@@ -230,8 +227,8 @@ export const MatchInner = (): any => {
 export const Outlet = () => {
   const router = useRouter()
   const nearestParentMatch = Solid.useContext(nearestMatchContext)
-  const parentMatch = nearestParentMatch.match
-  const routeId = nearestParentMatch.routeId
+  const parentMatch = nearestParentMatch[1 /* match */]
+  const routeId = nearestParentMatch[0 /* route id */]
   const route = router.routesById[routeId()!]!
 
   const childRouteId = () => {

packages/solid-router/src/Matches.tsx

@@ -66,10 +66,7 @@ function MatchesInner() {
   const routeId = () => router.stores.ids.get()[0]
   const match = () =>
     routeId() ? router.stores.byRoute.get(routeId()!)?.get() : undefined
-  const nearestMatch = {
-    routeId,
-    match,
-  }
+  const nearestMatch = [routeId, match] as const
 
   const matchComponent = () => {
     return (
@@ -219,7 +216,7 @@ export function useParentMatches<
 >(
   opts?: UseMatchesBaseOptions<TRouter, TSelected>,
 ): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
-  const contextRouteId = Solid.useContext(nearestMatchContext).routeId
+  const contextRouteId = Solid.useContext(nearestMatchContext)[0 /* route id */]
 
   return useMatches({
     select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
@@ -238,7 +235,7 @@ export function useChildMatches<
 >(
   opts?: UseMatchesBaseOptions<TRouter, TSelected>,
 ): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
-  const contextRouteId = Solid.useContext(nearestMatchContext).routeId
+  const contextRouteId = Solid.useContext(nearestMatchContext)[0 /* route id */]
 
   return useMatches({
     select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {

packages/solid-router/src/matchContext.tsx

@@ -1,15 +1,15 @@
 import * as Solid from 'solid-js'
 import type { AnyRouteMatch } from '@tanstack/router-core'
 
-export type NearestMatchContextValue = {
-  routeId: Solid.Accessor<string | undefined>
-  match: Solid.Accessor<AnyRouteMatch | undefined>
-}
+export type NearestMatchContextValue = readonly [
+  routeId: Solid.Accessor<string | undefined>,
+  match: Solid.Accessor<AnyRouteMatch | undefined>,
+]
 
-const defaultNearestMatchContext: NearestMatchContextValue = {
-  routeId: () => undefined,
-  match: () => undefined,
-}
+const defaultNearestMatchContext: NearestMatchContextValue = [
+  () => undefined,
+  () => undefined,
+]
 
 export const nearestMatchContext =
   Solid.createContext<NearestMatchContextValue>(defaultNearestMatchContext)

packages/solid-router/src/useMatch.tsx

@@ -78,7 +78,7 @@ export function useMatch<
       return router.stores.getMatchStore(opts.from).get()
     }
 
-    return nearestMatch?.match()
+    return nearestMatch?.[1 /* match */]()
   }
 
   Solid.createEffect(() => {