chore(react-router): bump react-store to 1.0.0-alpha.0

.changeset/wide-shoes-invite.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-router': patch
+---
+
+Upgrade `@tanstack/react-store` to `1.0.0-alpha.0` to use React's native `useSyncExternalStore` and remove its external-store shim dependency.

packages/react-router/package.json

@@ -93,7 +93,7 @@
   },
   "dependencies": {
     "@tanstack/history": "workspace:*",
-    "@tanstack/react-store": "^0.11.2",
+    "@tanstack/react-store": "^1.0.0-alpha.0",
     "@tanstack/router-core": "workspace:*",
     "isbot": "catalog:"
   },

packages/react-router/tests/useLocation.test.tsx

@@ -1,6 +1,13 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { afterEach, describe, expect, test, vi } from 'vitest'
-import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
 import {
   Outlet,
   RouterProvider,
@@ -9,6 +16,7 @@ import {
   createRoute,
   createRouter,
   useLocation,
+  useRouterState,
 } from '../src'
 
 afterEach(() => {
@@ -17,6 +25,75 @@ afterEach(() => {
 })
 
 describe('useLocation', () => {
+  test('updates allocating selectors when their captured props change without navigation', async () => {
+    function Selection({ prefix }: { prefix: string }) {
+      const location = useLocation({
+        select: (value) => ({ label: `${prefix}${value.pathname}` }),
+        structuralSharing: false,
+      })
+      const state = useRouterState({
+        select: (value) => ({ label: `${prefix}${value.location.pathname}` }),
+        structuralSharing: false,
+      })
+
+      return (
+        <>
+          <p data-testid="location-selection">{location.label}</p>
+          <p data-testid="state-selection">{state.label}</p>
+        </>
+      )
+    }
+
+    const rootRoute = createRootRoute({
+      component: function RootComponent() {
+        const [prefix, setPrefix] = useState('first:')
+
+        return (
+          <>
+            <button onClick={() => setPrefix('second:')}>
+              Change selector
+            </button>
+            <Selection prefix={prefix} />
+            <Outlet />
+          </>
+        )
+      },
+    })
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      component: () => <h1>Posts</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([postsRoute]),
+      history: createMemoryHistory({ initialEntries: ['/posts'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(
+      await screen.findByRole('heading', { name: 'Posts' }),
+    ).toBeInTheDocument()
+    await waitFor(() => expect(router.state.status).toBe('idle'))
+    expect(screen.getByTestId('location-selection')).toHaveTextContent(
+      'first:/posts',
+    )
+    expect(screen.getByTestId('state-selection')).toHaveTextContent(
+      'first:/posts',
+    )
+    const initialState = router.state
+
+    fireEvent.click(screen.getByRole('button', { name: 'Change selector' }))
+
+    expect(screen.getByTestId('location-selection')).toHaveTextContent(
+      'second:/posts',
+    )
+    expect(screen.getByTestId('state-selection')).toHaveTextContent(
+      'second:/posts',
+    )
+    expect(router.state).toBe(initialState)
+  })
+
   test('keeps a selected pathname reference stable across search and hash updates when structural sharing is enabled', async () => {
     const effectSpy = vi.fn()
     const pathnameSelections: Array<{ pathname: string }> = []

pnpm-workspace.yaml

@@ -1,5 +1,7 @@
 cleanupUnusedCatalogs: true
 minimumReleaseAge: 1440
+minimumReleaseAgeExclude:
+  - '@tanstack/react-store@1.0.0-alpha.0'
 linkWorkspacePackages: true
 preferWorkspacePackages: true
 blockExoticSubdeps: true