@tanstack/react-router 1.133.8 → 1.133.12

package/dist/llms/rules/api.js

@@ -263,7 +263,7 @@ The \`NavigateOptions\` object accepts the following properties:
 - Optional
 - Defaults to \`false\`.
 - If \`true\`, navigation will be called using \`document.startViewTransition()\`.
-- If [\`ViewTransitionOptions\`](../ViewTransitionOptionsType.md), route navigations will be called using \`document.startViewTransition({update, types})\` where \`types\` will be the strings array passed with \`ViewTransitionOptions["types"]\`. If the browser does not support viewTransition types, the navigation will fall back to normal \`document.startTransition()\`, same as if \`true\` was passed.
+- If [\`ViewTransitionOptions\`](../ViewTransitionOptionsType.md), route navigations will be called using \`document.startViewTransition({update, types})\` where \`types\` will determine the strings array passed with \`ViewTransitionOptions["types"]\`. If the browser does not support viewTransition types, the navigation will fall back to normal \`document.startTransition()\`, same as if \`true\` was passed.
 - If the browser does not support this api, this option will be ignored.
 - See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for more information on how this function works.
 - See [Google](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) for more information on viewTransition types
@@ -2003,7 +2003,15 @@ The \`ViewTransitionOptions\` type is used to define a
 
 \`\`\`tsx
 interface ViewTransitionOptions {
-  types: Array<string>
+  types:
+    | Array<string>
+    | ((locationChangeInfo: {
+        fromLocation?: ParsedLocation
+        toLocation: ParsedLocation
+        pathChanged: boolean
+        hrefChanged: boolean
+        hashChanged: boolean
+      }) => Array<string> | false)
 }
 \`\`\`
 
@@ -2013,9 +2021,19 @@ The \`ViewTransitionOptions\` type accepts an object with a single property:
 
 ### \`types\` property
 
-- Type: \`Array<string>\`
+- Type: \`Array<string> | ((locationChangeInfo: {
+  fromLocation?: ParsedLocation
+  toLocation: ParsedLocation
+  pathChanged: boolean
+  hrefChanged: boolean
+  hashChanged: boolean
+}) => (Array<string> | false))\`
 - Required
-- The types array that will be passed to the \`document.startViewTransition({update, types}) call\`;
+- Either one of:
+  - An array of strings that will be passed to the \`document.startViewTransition({update, types}) call\`
+  - A function that accepts \`locationChangeInfo\` object and returns either:
+    - An array of strings that will be passed to the \`document.startViewTransition({update, types}) call\`
+    - or \`false\` to skip the view transition
 
 # Await component
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.133.8",
+  "version": "1.133.12",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -80,7 +80,7 @@
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.133.3",
-    "@tanstack/router-core": "1.133.8"
+    "@tanstack/router-core": "1.133.12"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Asset.tsx

@@ -34,11 +34,7 @@ export function Asset({
         />
       )
     case 'script':
-      return (
-        <Script attrs={attrs} nonce={nonce}>
-          {children}
-        </Script>
-      )
+      return <Script attrs={attrs}>{children}</Script>
     default:
       return null
   }
@@ -47,11 +43,9 @@ export function Asset({
 function Script({
   attrs,
   children,
-  nonce,
 }: {
   attrs?: ScriptAttrs
   children?: string
-  nonce?: string
 }) {
   const router = useRouter()
 
@@ -154,7 +148,7 @@ function Script({
   }
 
   if (attrs?.src && typeof attrs.src === 'string') {
-    return <script {...attrs} suppressHydrationWarning nonce={nonce} />
+    return <script {...attrs} suppressHydrationWarning />
   }
 
   if (typeof children === 'string') {
@@ -163,7 +157,6 @@ function Script({
         {...attrs}
         dangerouslySetInnerHTML={{ __html: children }}
         suppressHydrationWarning
-        nonce={nonce}
       />
     )
   }

package/src/HeadContent.tsx

@@ -6,7 +6,7 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 
 export const useTags = () => {
   const router = useRouter()
-
+  const nonce = router.options.ssr?.nonce
   const routeMeta = useRouterState({
     select: (state) => {
       return state.matches.map((match) => match.meta!).filter(Boolean)
@@ -44,6 +44,7 @@ export const useTags = () => {
             tag: 'meta',
             attrs: {
               ...m,
+              nonce,
             },
           })
         }
@@ -54,10 +55,19 @@ export const useTags = () => {
       resultMeta.push(title)
     }
 
+    if (nonce) {
+      resultMeta.push({
+        tag: 'meta',
+        attrs: {
+          property: 'csp-nonce',
+          content: nonce,
+        },
+      })
+    }
     resultMeta.reverse()
 
     return resultMeta
-  }, [routeMeta])
+  }, [routeMeta, nonce])
 
   const links = useRouterState({
     select: (state) => {
@@ -69,6 +79,7 @@ export const useTags = () => {
           tag: 'link',
           attrs: {
             ...link,
+            nonce,
           },
         })) satisfies Array<RouterManagedTag>
 
@@ -88,6 +99,7 @@ export const useTags = () => {
               attrs: {
                 ...asset.attrs,
                 suppressHydrationWarning: true,
+                nonce,
               },
             }) satisfies RouterManagedTag,
         )
@@ -112,6 +124,7 @@ export const useTags = () => {
                 attrs: {
                   rel: 'modulepreload',
                   href: preload,
+                  nonce,
                 },
               })
             }),
@@ -133,6 +146,7 @@ export const useTags = () => {
         tag: 'style',
         attrs,
         children,
+        nonce,
       })),
     structuralSharing: true as any,
   })
@@ -148,6 +162,7 @@ export const useTags = () => {
         tag: 'script',
         attrs: {
           ...script,
+          nonce,
         },
         children,
       })),

package/src/Scripts.tsx

@@ -5,7 +5,7 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 
 export const Scripts = () => {
   const router = useRouter()
-
+  const nonce = router.options.ssr?.nonce
   const assetScripts = useRouterState({
     select: (state) => {
       const assetScripts: Array<RouterManagedTag> = []
@@ -23,7 +23,7 @@ export const Scripts = () => {
             .forEach((asset) => {
               assetScripts.push({
                 tag: 'script',
-                attrs: asset.attrs,
+                attrs: { ...asset.attrs, nonce },
                 children: asset.children,
               } as any)
             }),
@@ -46,6 +46,7 @@ export const Scripts = () => {
         attrs: {
           ...script,
           suppressHydrationWarning: true,
+          nonce,
         },
         children,
       })),
@@ -58,11 +59,7 @@ export const Scripts = () => {
   return (
     <>
       {allScripts.map((asset, i) => (
-        <Asset
-          {...asset}
-          key={`tsr-scripts-${asset.tag}-${i}`}
-          nonce={router.options.ssr?.nonce}
-        />
+        <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />
       ))}
     </>
   )