fix: order of injected scripts

fixes #3117

packages/react-router/src/ScriptOnce.tsx

@@ -1,31 +1,11 @@
-import jsesc from 'jsesc'
+import { useRouter } from './useRouter';
 
 export function ScriptOnce({
-  className,
   children,
   log,
-  ...rest
-}: { children: string; log?: boolean } & React.HTMLProps<HTMLScriptElement>) {
-  if (typeof document !== 'undefined') {
-    return null
-  }
-
-  return (
-    <script
-      {...rest}
-      className={`tsr-once ${className || ''}`}
-      dangerouslySetInnerHTML={{
-        __html: [
-          children,
-          (log ?? true) && process.env.NODE_ENV === 'development'
-            ? `console.info(\`Injected From Server:
-${jsesc(children.toString(), { quotes: 'backtick' })}\`)`
-            : '',
-          'if (typeof __TSR__ !== "undefined") __TSR__.cleanScripts()',
-        ]
-          .filter(Boolean)
-          .join('\n'),
-      }}
-    />
-  )
+}: { children: string; log?: boolean }) {
+  const router = useRouter()
+
+  router.injectScript(children, {logScript: log})
+  return null
 }

packages/react-router/src/router.ts

@@ -6,6 +6,7 @@ import {
 import { Store, batch } from '@tanstack/react-store'
 import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
+import jsesc from 'jsesc'
 import { rootRouteId } from './root'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
@@ -3100,7 +3101,7 @@ export class Router<
       `<script class='tsr-once'>${script}${
         process.env.NODE_ENV === 'development' && (opts?.logScript ?? true)
           ? `; console.info(\`Injected From Server:
-${script}\`)`
+${jsesc(script, { quotes: 'backtick' })}\`)`
           : ''
       }; if (typeof __TSR__ !== 'undefined') __TSR__.cleanScripts()</script>`,
     )