@tanstack/react-router 1.121.20 → 1.121.24

package/package.json

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

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
+}