add Minimal e2e example to demo the head function's set title bug

Open http://localhost:3000/test-head/article/123

1. Initially not logged in. You see page title "title n/a", content "Article Not Accessible."
2. Click "Log in" (see utils/fake-auth), which invalidates the route's loader data, trigger refetch; 1 second later, you should see the article content becoming available, But, the title stays n/a.
3. Now manually reload the page, confirm that both page title and article content are available.
4. Click "Log out", which again invalidates the loader data. 1 second later, you should see the article content becoming Unavailable, But, the title is still available!
5. Reload the page, confirm that both page title and article content are Unavailable.

Author: yanghuidong

e2e/solid-start/basic/src/routeTree.gen.ts

@@ -40,6 +40,7 @@ import { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2'
 import { Route as RedirectTargetIndexRouteImport } from './routes/redirect/$target/index'
 import { Route as TransitionTypingCreateResourceRouteImport } from './routes/transition/typing/create-resource'
 import { Route as TransitionCountCreateResourceRouteImport } from './routes/transition/count/create-resource'
+import { Route as TestHeadArticleIdRouteImport } from './routes/test-head/article.$id'
 import { Route as RedirectTargetViaLoaderRouteImport } from './routes/redirect/$target/via-loader'
 import { Route as RedirectTargetViaBeforeLoadRouteImport } from './routes/redirect/$target/via-beforeLoad'
 import { Route as PostsPostIdDeepRouteImport } from './routes/posts_.$postId.deep'
@@ -210,6 +211,11 @@ const TransitionCountCreateResourceRoute =
     path: '/transition/count/create-resource',
     getParentRoute: () => rootRouteImport,
   } as any)
+const TestHeadArticleIdRoute = TestHeadArticleIdRouteImport.update({
+  id: '/test-head/article/$id',
+  path: '/test-head/article/$id',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const RedirectTargetViaLoaderRoute = RedirectTargetViaLoaderRouteImport.update({
   id: '/via-loader',
   path: '/via-loader',
@@ -299,6 +305,7 @@ export interface FileRoutesByFullPath {
   '/posts/$postId/deep': typeof PostsPostIdDeepRoute
   '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute
   '/redirect/$target/via-loader': typeof RedirectTargetViaLoaderRoute
+  '/test-head/article/$id': typeof TestHeadArticleIdRoute
   '/transition/count/create-resource': typeof TransitionCountCreateResourceRoute
   '/transition/typing/create-resource': typeof TransitionTypingCreateResourceRoute
   '/redirect/$target/': typeof RedirectTargetIndexRoute
@@ -335,6 +342,7 @@ export interface FileRoutesByTo {
   '/posts/$postId/deep': typeof PostsPostIdDeepRoute
   '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute
   '/redirect/$target/via-loader': typeof RedirectTargetViaLoaderRoute
+  '/test-head/article/$id': typeof TestHeadArticleIdRoute
   '/transition/count/create-resource': typeof TransitionCountCreateResourceRoute
   '/transition/typing/create-resource': typeof TransitionTypingCreateResourceRoute
   '/redirect/$target': typeof RedirectTargetIndexRoute
@@ -379,6 +387,7 @@ export interface FileRoutesById {
   '/posts_/$postId/deep': typeof PostsPostIdDeepRoute
   '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute
   '/redirect/$target/via-loader': typeof RedirectTargetViaLoaderRoute
+  '/test-head/article/$id': typeof TestHeadArticleIdRoute
   '/transition/count/create-resource': typeof TransitionCountCreateResourceRoute
   '/transition/typing/create-resource': typeof TransitionTypingCreateResourceRoute
   '/redirect/$target/': typeof RedirectTargetIndexRoute
@@ -422,6 +431,7 @@ export interface FileRouteTypes {
     | '/posts/$postId/deep'
     | '/redirect/$target/via-beforeLoad'
     | '/redirect/$target/via-loader'
+    | '/test-head/article/$id'
     | '/transition/count/create-resource'
     | '/transition/typing/create-resource'
     | '/redirect/$target/'
@@ -458,6 +468,7 @@ export interface FileRouteTypes {
     | '/posts/$postId/deep'
     | '/redirect/$target/via-beforeLoad'
     | '/redirect/$target/via-loader'
+    | '/test-head/article/$id'
     | '/transition/count/create-resource'
     | '/transition/typing/create-resource'
     | '/redirect/$target'
@@ -501,6 +512,7 @@ export interface FileRouteTypes {
     | '/posts_/$postId/deep'
     | '/redirect/$target/via-beforeLoad'
     | '/redirect/$target/via-loader'
+    | '/test-head/article/$id'
     | '/transition/count/create-resource'
     | '/transition/typing/create-resource'
     | '/redirect/$target/'
@@ -529,6 +541,7 @@ export interface RootRouteChildren {
   MultiCookieRedirectIndexRoute: typeof MultiCookieRedirectIndexRoute
   RedirectIndexRoute: typeof RedirectIndexRoute
   PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
+  TestHeadArticleIdRoute: typeof TestHeadArticleIdRoute
   TransitionCountCreateResourceRoute: typeof TransitionCountCreateResourceRoute
   TransitionTypingCreateResourceRoute: typeof TransitionTypingCreateResourceRoute
 }
@@ -752,6 +765,13 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof TransitionCountCreateResourceRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/test-head/article/$id': {
+      id: '/test-head/article/$id'
+      path: '/test-head/article/$id'
+      fullPath: '/test-head/article/$id'
+      preLoaderRoute: typeof TestHeadArticleIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/redirect/$target/via-loader': {
       id: '/redirect/$target/via-loader'
       path: '/via-loader'
@@ -963,6 +983,7 @@ const rootRouteChildren: RootRouteChildren = {
   MultiCookieRedirectIndexRoute: MultiCookieRedirectIndexRoute,
   RedirectIndexRoute: RedirectIndexRoute,
   PostsPostIdDeepRoute: PostsPostIdDeepRoute,
+  TestHeadArticleIdRoute: TestHeadArticleIdRoute,
   TransitionCountCreateResourceRoute: TransitionCountCreateResourceRoute,
   TransitionTypingCreateResourceRoute: TransitionTypingCreateResourceRoute,
 }

e2e/solid-start/basic/src/routes/test-head/article.$id.tsx

@@ -0,0 +1,66 @@
+import { createFileRoute, useRouter } from '@tanstack/solid-router'
+import { Show } from 'solid-js'
+import { fakeLogin, fakeLogout, isAuthed } from '~/utils/fake-auth'
+
+const fetchArticle = async (id: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return isAuthed()
+    ? {
+        title: `Article Title for ${id}`,
+        content: `Article content for ${id}\n`.repeat(10),
+      }
+    : null
+}
+
+export const Route = createFileRoute('/test-head/article/$id')({
+  ssr: false, // isAuthed is ClientOnly
+  loader: async ({ params }) => {
+    const article = await fetchArticle(params.id)
+    return article
+  },
+  head: ({ loaderData }) => ({
+    meta: [{ title: loaderData?.title ?? 'title n/a' }],
+  }),
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const router = useRouter()
+  const data = Route.useLoaderData()
+  return (
+    <Show when={data()} fallback={<NotAccessible />}>
+      {(article) => (
+        <div>
+          <div>{article().content}</div>
+          <button
+            type="button"
+            onClick={() => {
+              fakeLogout()
+              router.invalidate()
+            }}
+          >
+            Log out
+          </button>
+        </div>
+      )}
+    </Show>
+  )
+}
+
+function NotAccessible() {
+  const router = useRouter()
+  return (
+    <div>
+      <div>Article Not Accessible.</div>
+      <button
+        type="button"
+        onClick={() => {
+          fakeLogin()
+          router.invalidate()
+        }}
+      >
+        Log in
+      </button>
+    </div>
+  )
+}

e2e/solid-start/basic/src/utils/fake-auth.ts

@@ -0,0 +1,16 @@
+import { createClientOnlyFn } from '@tanstack/solid-start'
+
+export { fakeLogin, fakeLogout, isAuthed }
+
+const isAuthed = createClientOnlyFn(() => {
+  const tokenValue = localStorage.getItem('auth')
+  return tokenValue === 'good'
+})
+
+const fakeLogin = createClientOnlyFn(() => {
+  localStorage.setItem('auth', 'good')
+})
+
+const fakeLogout = createClientOnlyFn(() => {
+  localStorage.removeItem('auth')
+})

packages/router-core/src/load-matches.ts

@@ -959,14 +959,16 @@ export async function loadMatches(arg: {
     if (asyncLoaderPromises.length > 0) {
       // Schedule re-execution after all async loaders complete (non-blocking)
       // Use allSettled to handle both successful and failed loaders
-      const thisNavigationLocation = inner.location
-      Promise.allSettled(asyncLoaderPromises).then(() => {
-        // Only execute if this navigation is still current (not superseded by new navigation)
-        const latestLocation = inner.router.state.location
-        if (latestLocation === thisNavigationLocation) {
-          executeAllHeadFns(inner)
-        }
-      })
+      //
+      // TODO! temporarily disabled to make sure solid-start/basic example can reproduce the bug
+      // const thisNavigationLocation = inner.location
+      // Promise.allSettled(asyncLoaderPromises).then(() => {
+      //   // Only execute if this navigation is still current (not superseded by new navigation)
+      //   const latestLocation = inner.router.state.location
+      //   if (latestLocation === thisNavigationLocation) {
+      //     executeAllHeadFns(inner)
+      //   }
+      // })
     }
 
     // Throw notFound after head execution