fix: use injectScript for match init, only init once

TanStack · Nov 15, 2024 · 503d21f · 503d21f
1 parent fc606da
commit 503d21f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 43 deletions.
diff --git a/packages/react-router/src/router.ts b/packages/react-router/src/router.ts
@@ -2933,24 +2933,25 @@ export class Router<
   }
 
   injectedHtml: Array<() => string> = []
-  injectHtml: (html: string) => void = (html) => {
+  injectHtml = (html: string) => {
     const cb = () => {
       this.injectedHtml = this.injectedHtml.filter((d) => d !== cb)
       return html
     }
 
     this.injectedHtml.push(cb)
   }
-  injectScript: (script: string) => void = (script) => {
+  injectScript = (script: string, opts?: { logScript?: boolean }) => {
     this.injectHtml(
       `<script class='tsr-once'>${script}${
-        process.env.NODE_ENV === 'development'
+        process.env.NODE_ENV === 'development' && (opts?.logScript ?? true)
           ? `; console.info(\`Injected From Server:
 ${script}\`)`
           : ''
       }; __TSR__.cleanScripts()</script>`,
     )
   }
+
   streamedKeys: Set<string> = new Set()
 
   getStreamedValue = <T>(key: string): T | undefined => {

diff --git a/packages/start/src/client/serialization.tsx b/packages/start/src/client/serialization.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import {
-  ScriptOnce,
   createControlledPromise,
   defer,
   isPlainArray,
@@ -162,46 +161,54 @@ export function AfterEachMatch(props: { match: any; matchIndex: number }) {
       : fullMatch[dataType]
   })
 
-  return (
-    <>
-      {serializedBeforeLoadData !== undefined ||
-      serializedLoaderData !== undefined ||
-      extracted?.length ? (
-        <ScriptOnce
-          children={`__TSR__.matches[${props.matchIndex}] = ${jsesc(
-            {
-              __beforeLoadContext: router.options.transformer.stringify(
-                serializedBeforeLoadData,
-              ),
-              loaderData:
-                router.options.transformer.stringify(serializedLoaderData),
-              extracted: extracted
-                ? Object.fromEntries(
-                    extracted.map((entry) => {
-                      return [entry.id, pick(entry, ['type', 'path'])]
-                    }),
-                  )
-                : {},
-            },
-            {
-              isScriptContext: true,
-              wrap: true,
-              json: true,
-            },
-          )}; __TSR__.initMatch(${props.matchIndex})`}
-        />
-      ) : null}
-      {extracted
-        ? extracted.map((d, i) => {
-            if (d.type === 'stream') {
-              return <DehydrateStream key={d.id} entry={d} />
-            }
+  if (
+    serializedBeforeLoadData !== undefined ||
+    serializedLoaderData !== undefined ||
+    extracted?.length
+  ) {
+    router.injectScript(
+      `if (!__TSR__.matches[${props.matchIndex}]) {
+      __TSR__.matches[${props.matchIndex}] = ${jsesc(
+        {
+          __beforeLoadContext: router.options.transformer.stringify(
+            serializedBeforeLoadData,
+          ),
+          loaderData:
+            router.options.transformer.stringify(serializedLoaderData),
+          extracted: extracted
+            ? Object.fromEntries(
+                extracted.map((entry) => {
+                  return [entry.id, pick(entry, ['type', 'path'])]
+                }),
+              )
+            : {},
+        },
+        {
+          isScriptContext: true,
+          wrap: true,
+          json: true,
+        },
+      )}; __TSR__.initMatch(${props.matchIndex})
+}`,
+      { logScript: false },
+    )
+
+    return (
+      <>
+        {extracted
+          ? extracted.map((d, i) => {
+              if (d.type === 'stream') {
+                return <DehydrateStream key={d.id} entry={d} />
+              }
+
+              return <DehydratePromise key={d.id} entry={d} />
+            })
+          : null}
+      </>
+    )
+  }
 
-            return <DehydratePromise key={d.id} entry={d} />
-          })
-        : null}
-    </>
-  )
+  return null
 }
 
 export function replaceBy<T>(