Merge branch 'main' into kosciolek/4599

Author: kosciolek

docs/start/framework/react/spa-mode.md

@@ -142,18 +142,18 @@ Customizing the HTML output of the SPA shell can be useful if you want to:
 - Provide a custom pending fallback component
 - Change literally anything about the shell's HTML, CSS, and JS
 
-To make this process simple, an `isShell` boolean can be found on the `router` instance:
+To make this process simple, an `isShell()` function can be found on the `router` instance:
 
 ```tsx
 // src/routes/root.tsx
 export default function Root() {
-  const isShell = useRouter().isShell
+  const isShell = useRouter().isShell()
 
   if (isShell) console.log('Rendering the shell!')
 }
 ```
 
-You can use this boolean to conditionally render different UI based on whether the current route is a shell or not, but keep in mind that after hydrating the shell, the router will immediately navigate to the first route and the `isShell` boolean will be `false`. **This could produce flashes of unstyled content if not handled properly.**
+You can use this boolean to conditionally render different UI based on whether the current route is a shell or not, but keep in mind that after hydrating the shell, the router will immediately navigate to the first route and `isShell()` will return `false`. **This could produce flashes of unstyled content if not handled properly.**
 
 ## Dynamic Data in your Shell
 

e2e/react-start/custom-basepath/src/routeTree.gen.ts

@@ -13,6 +13,7 @@ import { createServerRootRoute } from '@tanstack/react-start/server'
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as UsersRouteImport } from './routes/users'
 import { Route as PostsRouteImport } from './routes/posts'
+import { Route as LogoutRouteImport } from './routes/logout'
 import { Route as DeferredRouteImport } from './routes/deferred'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as UsersIndexRouteImport } from './routes/users.index'
@@ -35,6 +36,11 @@ const PostsRoute = PostsRouteImport.update({
   path: '/posts',
   getParentRoute: () => rootRouteImport,
 } as any)
+const LogoutRoute = LogoutRouteImport.update({
+  id: '/logout',
+  path: '/logout',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DeferredRoute = DeferredRouteImport.update({
   id: '/deferred',
   path: '/deferred',
@@ -84,6 +90,7 @@ const ApiUsersIdServerRoute = ApiUsersIdServerRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/deferred': typeof DeferredRoute
+  '/logout': typeof LogoutRoute
   '/posts': typeof PostsRouteWithChildren
   '/users': typeof UsersRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
@@ -95,6 +102,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/deferred': typeof DeferredRoute
+  '/logout': typeof LogoutRoute
   '/posts/$postId': typeof PostsPostIdRoute
   '/users/$userId': typeof UsersUserIdRoute
   '/posts': typeof PostsIndexRoute
@@ -105,6 +113,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/deferred': typeof DeferredRoute
+  '/logout': typeof LogoutRoute
   '/posts': typeof PostsRouteWithChildren
   '/users': typeof UsersRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
@@ -118,6 +127,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/deferred'
+    | '/logout'
     | '/posts'
     | '/users'
     | '/posts/$postId'
@@ -129,6 +139,7 @@ export interface FileRouteTypes {
   to:
     | '/'
     | '/deferred'
+    | '/logout'
     | '/posts/$postId'
     | '/users/$userId'
     | '/posts'
@@ -138,6 +149,7 @@ export interface FileRouteTypes {
     | '__root__'
     | '/'
     | '/deferred'
+    | '/logout'
     | '/posts'
     | '/users'
     | '/posts/$postId'
@@ -150,6 +162,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   DeferredRoute: typeof DeferredRoute
+  LogoutRoute: typeof LogoutRoute
   PostsRoute: typeof PostsRouteWithChildren
   UsersRoute: typeof UsersRouteWithChildren
   PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
@@ -195,6 +208,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PostsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/logout': {
+      id: '/logout'
+      path: '/logout'
+      fullPath: '/logout'
+      preLoaderRoute: typeof LogoutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/deferred': {
       id: '/deferred'
       path: '/deferred'
@@ -304,6 +324,7 @@ const ApiUsersServerRouteWithChildren = ApiUsersServerRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   DeferredRoute: DeferredRoute,
+  LogoutRoute: LogoutRoute,
   PostsRoute: PostsRouteWithChildren,
   UsersRoute: UsersRouteWithChildren,
   PostsPostIdDeepRoute: PostsPostIdDeepRoute,

e2e/react-start/custom-basepath/src/routes/logout.tsx

@@ -0,0 +1,32 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+
+const logoutFn = createServerFn({
+  method: 'POST',
+}).handler(async () => {
+  // do logout stuff here
+  throw redirect({
+    to: '/',
+  })
+})
+
+export const Route = createFileRoute('/logout')({
+  component: Home,
+})
+
+function Home() {
+  return (
+    <div className="p-2">
+      <h3>Logout Page</h3>
+      <p>
+        This form tests that server function URLs correctly include the app's
+        basepath. The form action should be '/custom/basepath/_serverFn/...' not
+        just '/_serverFn/...'
+      </p>
+      <form action={logoutFn.url} method="POST">
+        <input type="hidden" name="csrfToken" value="123abc" />
+        <button type="submit">Logout</button>
+      </form>
+    </div>
+  )
+}

e2e/react-start/custom-basepath/tests/navigation.spec.ts

@@ -32,3 +32,16 @@ test('Should change title on client side navigation', async ({ page }) => {
 
   await expect(page).toHaveTitle('Posts page')
 })
+
+test('Server function URLs correctly include app basepath', async ({
+  page,
+}) => {
+  await page.goto('/logout')
+
+  const form = page.locator('form')
+  const actionUrl = await form.getAttribute('action')
+
+  expect(actionUrl).toBe(
+    '/custom/basepath/_serverFn/src_routes_logout_tsx--logoutFn_createServerFn_handler',
+  )
+})

e2e/react-start/selective-ssr/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/react-start": "workspace:^",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

e2e/react-start/selective-ssr/src/routes/__root.tsx

@@ -1,15 +1,18 @@
 /// <reference types="vite/client" />
 import * as React from 'react'
 import {
+  ClientOnly,
   HeadContent,
   Link,
   Outlet,
   Scripts,
   createRootRoute,
+  useRouterState,
 } from '@tanstack/react-router'
 import { z } from 'zod'
 import { ssrSchema } from '~/search'
 import appCss from '~/styles/app.css?url'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 export const Route = createRootRoute({
   head: () => ({
@@ -113,9 +116,14 @@ export const Route = createRootRoute({
       </div>
     )
   },
+  pendingComponent: () => <div>__root Loading...</div>,
 })
 
 function RootDocument({ children }: { children: React.ReactNode }) {
+  const { isLoading, status } = useRouterState({
+    select: (state) => ({ isLoading: state.isLoading, status: state.status }),
+    structuralSharing: true,
+  })
   return (
     <html>
       <head>
@@ -134,8 +142,19 @@ function RootDocument({ children }: { children: React.ReactNode }) {
           </Link>
         </div>
         <hr />
+        <ClientOnly>
+          <div>
+            router isLoading:{' '}
+            <b data-testid="router-isLoading">{isLoading ? 'true' : 'false'}</b>
+          </div>
+          <div>
+            router status: <b data-testid="router-status">{status}</b>
+          </div>
+        </ClientOnly>
+        <hr />
         {children}
         <Scripts />
+        <TanStackRouterDevtools position="bottom-right" />
       </body>
     </html>
   )

e2e/react-start/selective-ssr/src/routes/index.tsx

@@ -91,6 +91,26 @@ const testCases = [
       },
     }),
   },
+  {
+    link: linkOptions({
+      ...baseTestCase,
+      search: {
+        root: {
+          ssr: true,
+          expected: { data: 'server', render: 'server-and-client' },
+        },
+        posts: {
+          ssr: 'data-only',
+          expected: { data: 'server', render: 'client-only' },
+        },
+        postId: {
+          ssr: undefined,
+
+          expected: { data: 'server', render: 'client-only' },
+        },
+      },
+    }),
+  },
   {
     link: linkOptions({
       ...baseTestCase,

e2e/react-start/selective-ssr/src/routes/posts.$postId.tsx

@@ -87,4 +87,5 @@ export const Route = createFileRoute('/posts/$postId')({
       </div>
     )
   },
+  pendingComponent: () => <div>$postId Loading...</div>,
 })

e2e/react-start/selective-ssr/src/routes/posts.tsx

@@ -89,4 +89,5 @@ export const Route = createFileRoute('/posts')({
       </div>
     )
   },
+  pendingComponent: () => <div>posts Loading...</div>,
 })

e2e/react-start/selective-ssr/tests/app.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 import { test } from './fixture'
 
-const testCount = 6
+const testCount = 7
 
 test.describe('selective ssr', () => {
   test('testcount matches', async ({ page }) => {
@@ -34,6 +34,8 @@ test.describe('selective ssr', () => {
           )
         }),
       )
+      await expect(page.getByTestId('router-isLoading')).toContainText('false')
+      await expect(page.getByTestId('router-status')).toContainText('idle')
     })
   }
 })