@tanstack/react-router 1.104.0 → 1.105.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.104.0",
+  "version": "1.105.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,8 +53,8 @@
     "jsesc": "^3.1.0",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/router-core": "^1.102.5",
-    "@tanstack/history": "1.99.13"
+    "@tanstack/history": "1.99.13",
+    "@tanstack/router-core": "^1.104.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Asset.tsx

@@ -0,0 +1,40 @@
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export function Asset({ tag, attrs, children }: RouterManagedTag): any {
+  switch (tag) {
+    case 'title':
+      return (
+        <title {...attrs} suppressHydrationWarning>
+          {children}
+        </title>
+      )
+    case 'meta':
+      return <meta {...attrs} suppressHydrationWarning />
+    case 'link':
+      return <link {...attrs} suppressHydrationWarning />
+    case 'style':
+      return (
+        <style
+          {...attrs}
+          dangerouslySetInnerHTML={{ __html: children as any }}
+        />
+      )
+    case 'script':
+      if ((attrs as any) && (attrs as any).src) {
+        return <script {...attrs} suppressHydrationWarning />
+      }
+      if (typeof children === 'string')
+        return (
+          <script
+            {...attrs}
+            dangerouslySetInnerHTML={{
+              __html: children,
+            }}
+            suppressHydrationWarning
+          />
+        )
+      return null
+    default:
+      return null
+  }
+}

package/src/HeadContent.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react'
+import { Asset } from './Asset'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export const useTags = () => {
+  const router = useRouter()
+
+  const routeMeta = useRouterState({
+    select: (state) => {
+      return state.matches.map((match) => match.meta!).filter(Boolean)
+    },
+  })
+
+  const meta: Array<RouterManagedTag> = React.useMemo(() => {
+    const resultMeta: Array<RouterManagedTag> = []
+    const metaByAttribute: Record<string, true> = {}
+    let title: RouterManagedTag | undefined
+    ;[...routeMeta].reverse().forEach((metas) => {
+      ;[...metas].reverse().forEach((m) => {
+        if (!m) return
+
+        if (m.title) {
+          if (!title) {
+            title = {
+              tag: 'title',
+              children: m.title,
+            }
+          }
+        } else {
+          const attribute = m.name ?? m.property
+          if (attribute) {
+            if (metaByAttribute[attribute]) {
+              return
+            } else {
+              metaByAttribute[attribute] = true
+            }
+          }
+
+          resultMeta.push({
+            tag: 'meta',
+            attrs: {
+              ...m,
+            },
+          })
+        }
+      })
+    })
+
+    if (title) {
+      resultMeta.push(title)
+    }
+
+    resultMeta.reverse()
+
+    return resultMeta
+  }, [routeMeta])
+
+  const links = useRouterState({
+    select: (state) =>
+      state.matches
+        .map((match) => match.links!)
+        .filter(Boolean)
+        .flat(1)
+        .map((link) => ({
+          tag: 'link',
+          attrs: {
+            ...link,
+          },
+        })) as Array<RouterManagedTag>,
+    structuralSharing: true as any,
+  })
+
+  const preloadMeta = useRouterState({
+    select: (state) => {
+      const preloadMeta: Array<RouterManagedTag> = []
+
+      state.matches
+        .map((match) => router.looseRoutesById[match.routeId]!)
+        .forEach((route) =>
+          router.ssr?.manifest?.routes[route.id]?.preloads
+            ?.filter(Boolean)
+            .forEach((preload) => {
+              preloadMeta.push({
+                tag: 'link',
+                attrs: {
+                  rel: 'modulepreload',
+                  href: preload,
+                },
+              })
+            }),
+        )
+
+      return preloadMeta
+    },
+    structuralSharing: true as any,
+  })
+
+  const headScripts = useRouterState({
+    select: (state) =>
+      (
+        state.matches
+          .map((match) => match.headScripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+        },
+        children,
+      })),
+    structuralSharing: true as any,
+  })
+
+  return uniqBy(
+    [
+      ...meta,
+      ...preloadMeta,
+      ...links,
+      ...headScripts,
+    ] as Array<RouterManagedTag>,
+    (d) => {
+      return JSON.stringify(d)
+    },
+  )
+}
+
+/**
+ * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
+ * It should be rendered in the `<head>` of your document.
+ */
+export function HeadContent() {
+  const tags = useTags()
+  return tags.map((tag) => (
+    <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} />
+  ))
+}
+
+function uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {
+  const seen = new Set<string>()
+  return arr.filter((item) => {
+    const key = fn(item)
+    if (seen.has(key)) {
+      return false
+    }
+    seen.add(key)
+    return true
+  })
+}

package/src/Matches.tsx

@@ -88,6 +88,7 @@ export interface RouteMatch<
   meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>
   links?: Array<React.JSX.IntrinsicElements['link'] | undefined>
   scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
+  headScripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
   headers?: Record<string, string>
   globalNotFound?: boolean
   staticData: StaticDataRouteOption

package/src/Scripts.tsx

@@ -0,0 +1,64 @@
+import { Asset } from './Asset'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export const Scripts = () => {
+  const router = useRouter()
+
+  const assetScripts = useRouterState({
+    select: (state) => {
+      const assetScripts: Array<RouterManagedTag> = []
+      const manifest = router.ssr?.manifest
+
+      if (!manifest) {
+        return []
+      }
+
+      state.matches
+        .map((match) => router.looseRoutesById[match.routeId]!)
+        .forEach((route) =>
+          manifest.routes[route.id]?.assets
+            ?.filter((d) => d.tag === 'script')
+            .forEach((asset) => {
+              assetScripts.push({
+                tag: 'script',
+                attrs: asset.attrs,
+                children: asset.children,
+              } as any)
+            }),
+        )
+
+      return assetScripts
+    },
+    structuralSharing: true as any,
+  })
+
+  const { scripts } = useRouterState({
+    select: (state) => ({
+      scripts: (
+        state.matches
+          .map((match) => match.scripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+          suppressHydrationWarning: true,
+        },
+        children,
+      })),
+    }),
+  })
+
+  const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>
+
+  return (
+    <>
+      {allScripts.map((asset, i) => (
+        <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />
+      ))}
+    </>
+  )
+}

package/src/index.tsx

@@ -356,3 +356,7 @@ export type { NotFoundError } from './not-found'
 export * from './typePrimitives'
 
 export { ScriptOnce } from './ScriptOnce'
+
+export { Asset } from './Asset'
+export { HeadContent } from './HeadContent'
+export { Scripts } from './Scripts'

package/src/route.ts

@@ -325,6 +325,51 @@ export interface BeforeLoadContextOptions<
   >
 }
 
+type AssetFnContextOptions<
+  in out TRouteId,
+  in out TFullPath,
+  in out TParentRoute extends AnyRoute,
+  in out TParams,
+  in out TSearchValidator,
+  in out TLoaderFn,
+  in out TRouterContext,
+  in out TRouteContextFn,
+  in out TBeforeLoadFn,
+  in out TLoaderDeps,
+> = {
+  matches: Array<
+    RouteMatch<
+      TRouteId,
+      TFullPath,
+      ResolveAllParamsFromParent<TParentRoute, TParams>,
+      ResolveFullSearchSchema<TParentRoute, TSearchValidator>,
+      ResolveLoaderData<TLoaderFn>,
+      ResolveAllContext<
+        TParentRoute,
+        TRouterContext,
+        TRouteContextFn,
+        TBeforeLoadFn
+      >,
+      TLoaderDeps
+    >
+  >
+  match: RouteMatch<
+    TRouteId,
+    TFullPath,
+    ResolveAllParamsFromParent<TParentRoute, TParams>,
+    ResolveFullSearchSchema<TParentRoute, TSearchValidator>,
+    ResolveLoaderData<TLoaderFn>,
+    ResolveAllContext<
+      TParentRoute,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn
+    >,
+    TLoaderDeps
+  >
+  params: ResolveAllParamsFromParent<TParentRoute, TParams>
+  loaderData: ResolveLoaderData<TLoaderFn>
+}
 export interface UpdatableRouteOptions<
   in out TParentRoute extends AnyRoute,
   in out TRouteId,
@@ -427,44 +472,38 @@ export interface UpdatableRouteOptions<
   headers?: (ctx: {
     loaderData: ResolveLoaderData<TLoaderFn>
   }) => Record<string, string>
-  head?: (ctx: {
-    matches: Array<
-      RouteMatch<
-        TRouteId,
-        TFullPath,
-        ResolveAllParamsFromParent<TParentRoute, TParams>,
-        ResolveFullSearchSchema<TParentRoute, TSearchValidator>,
-        ResolveLoaderData<TLoaderFn>,
-        ResolveAllContext<
-          TParentRoute,
-          TRouterContext,
-          TRouteContextFn,
-          TBeforeLoadFn
-        >,
-        TLoaderDeps
-      >
-    >
-    match: RouteMatch<
+  head?: (
+    ctx: AssetFnContextOptions<
       TRouteId,
       TFullPath,
-      ResolveAllParamsFromParent<TParentRoute, TParams>,
-      ResolveFullSearchSchema<TParentRoute, TSearchValidator>,
-      ResolveLoaderData<TLoaderFn>,
-      ResolveAllContext<
-        TParentRoute,
-        TRouterContext,
-        TRouteContextFn,
-        TBeforeLoadFn
-      >,
+      TParentRoute,
+      TParams,
+      TSearchValidator,
+      TLoaderFn,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
       TLoaderDeps
-    >
-    params: ResolveAllParamsFromParent<TParentRoute, TParams>
-    loaderData: ResolveLoaderData<TLoaderFn> | undefined
-  }) => {
+    >,
+  ) => {
     links?: AnyRouteMatch['links']
-    scripts?: AnyRouteMatch['scripts']
+    scripts?: AnyRouteMatch['headScripts']
     meta?: AnyRouteMatch['meta']
   }
+  scripts?: (
+    ctx: AssetFnContextOptions<
+      TRouteId,
+      TFullPath,
+      TParentRoute,
+      TParams,
+      TSearchValidator,
+      TLoaderFn,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps
+    >,
+  ) => AnyRouteMatch['scripts']
   ssr?: boolean
   codeSplitGroupings?: Array<
     Array<

package/src/router.ts

@@ -1311,6 +1311,7 @@ export class Router<
           preload: false,
           links: undefined,
           scripts: undefined,
+          headScripts: undefined,
           meta: undefined,
           staticData: route.options.staticData || {},
           loadPromise: createControlledPromise(),
@@ -1318,15 +1319,6 @@ export class Router<
         }
       }
 
-      // If it's already a success, update the headers
-      // These may get updated again if the match is refreshed
-      // due to being stale
-      if (match.status === 'success') {
-        match.headers = route.options.headers?.({
-          loaderData: match.loaderData,
-        })
-      }
-
       if (!opts?.preload) {
         // If we have a global not found, mark the right match as global not found
         match.globalNotFound = globalNotFoundRouteId === route.id
@@ -1380,16 +1372,25 @@ export class Router<
         }
       }
 
-      const headFnContent = route.options.head?.({
-        matches,
-        match,
-        params: match.params,
-        loaderData: match.loaderData ?? undefined,
-      })
-
-      match.links = headFnContent?.links
-      match.scripts = headFnContent?.scripts
-      match.meta = headFnContent?.meta
+      // If it's already a success, update headers and head content
+      // These may get updated again if the match is refreshed
+      // due to being stale
+      if (match.status === 'success') {
+        match.headers = route.options.headers?.({
+          loaderData: match.loaderData,
+        })
+        const assetContext = {
+          matches,
+          match,
+          params: match.params,
+          loaderData: match.loaderData,
+        }
+        const headFnContent = route.options.head?.(assetContext)
+        match.links = headFnContent?.links
+        match.headScripts = headFnContent?.scripts
+        match.meta = headFnContent?.meta
+        match.scripts = route.options.scripts?.(assetContext)
+      }
     })
 
     return matches
@@ -2558,16 +2559,19 @@ export class Router<
 
                           await potentialPendingMinPromise()
 
-                          const headFnContent = route.options.head?.({
+                          const assetContext = {
                             matches,
                             match: this.getMatch(matchId)!,
                             params: this.getMatch(matchId)!.params,
                             loaderData,
-                          })
+                          }
+                          const headFnContent =
+                            route.options.head?.(assetContext)
                           const meta = headFnContent?.meta
                           const links = headFnContent?.links
-                          const scripts = headFnContent?.scripts
+                          const headScripts = headFnContent?.scripts
 
+                          const scripts = route.options.scripts?.(assetContext)
                           const headers = route.options.headers?.({
                             loaderData,
                           })
@@ -2581,8 +2585,9 @@ export class Router<
                             loaderData,
                             meta,
                             links,
-                            scripts,
+                            headScripts,
                             headers,
+                            scripts,
                           }))
                         } catch (e) {
                           let error = e