@tanstack/react-router 1.121.21 → 1.121.24

package/dist/llms/rules/guide.js

@@ -1957,6 +1957,8 @@ export const Route = createRootRoute({
 
 ### Single-Page Applications
 
+First, remove the \`<title>\` tag from the the index.html if you have set any.
+
 \`\`\`tsx
 import { HeadContent } from '@tanstack/react-router'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.121.21",
+  "version": "1.121.24",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/Asset.tsx

@@ -1,6 +1,17 @@
+import * as React from 'react'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
-export function Asset({ tag, attrs, children }: RouterManagedTag): any {
+interface ScriptAttrs {
+  [key: string]: string | boolean | undefined
+  src?: string
+  suppressHydrationWarning?: boolean
+}
+
+export function Asset({
+  tag,
+  attrs,
+  children,
+}: RouterManagedTag): React.ReactElement | null {
   switch (tag) {
     case 'title':
       return (
@@ -16,25 +27,93 @@ export function Asset({ tag, attrs, children }: RouterManagedTag): any {
       return (
         <style
           {...attrs}
-          dangerouslySetInnerHTML={{ __html: children as any }}
+          dangerouslySetInnerHTML={{ __html: children as string }}
         />
       )
     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
+      return <Script attrs={attrs}>{children}</Script>
     default:
       return null
   }
 }
+
+function Script({
+  attrs,
+  children,
+}: {
+  attrs?: ScriptAttrs
+  children?: string
+}) {
+  React.useEffect(() => {
+    if (attrs?.src) {
+      const script = document.createElement('script')
+
+      for (const [key, value] of Object.entries(attrs)) {
+        if (
+          key !== 'suppressHydrationWarning' &&
+          value !== undefined &&
+          value !== false
+        ) {
+          script.setAttribute(
+            key,
+            typeof value === 'boolean' ? '' : String(value),
+          )
+        }
+      }
+
+      document.head.appendChild(script)
+
+      return () => {
+        if (script.parentNode) {
+          script.parentNode.removeChild(script)
+        }
+      }
+    }
+
+    if (typeof children === 'string') {
+      const script = document.createElement('script')
+      script.textContent = children
+
+      if (attrs) {
+        for (const [key, value] of Object.entries(attrs)) {
+          if (
+            key !== 'suppressHydrationWarning' &&
+            value !== undefined &&
+            value !== false
+          ) {
+            script.setAttribute(
+              key,
+              typeof value === 'boolean' ? '' : String(value),
+            )
+          }
+        }
+      }
+
+      document.head.appendChild(script)
+
+      return () => {
+        if (script.parentNode) {
+          script.parentNode.removeChild(script)
+        }
+      }
+    }
+
+    return undefined
+  }, [attrs, children])
+
+  if (attrs?.src && typeof attrs.src === 'string') {
+    return <script {...attrs} suppressHydrationWarning />
+  }
+
+  if (typeof children === 'string') {
+    return (
+      <script
+        {...attrs}
+        dangerouslySetInnerHTML={{ __html: children }}
+        suppressHydrationWarning
+      />
+    )
+  }
+
+  return null
+}