pass <Scripts /> props through DeferredHydrationScript

jack-r-warren · May 2, 2023 · 145600f · 145600f
1 parent 2e9c413
commit 145600f
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -960,6 +960,7 @@ export function Scripts(props: ScriptProps) {
                       deferredData={deferredData}
                       routeId={routeId}
                       dataKey={key}
+                      scriptProps={props}
                     />
                   );
 
@@ -1058,7 +1059,7 @@ import(${JSON.stringify(manifest.entry.module)});`;
 
   if (!isStatic && typeof __remixContext === "object" && __remixContext.a) {
     for (let i = 0; i < __remixContext.a; i++) {
-      deferredScripts.push(<DeferredHydrationScript key={i} />);
+      deferredScripts.push(<DeferredHydrationScript key={i} scriptProps={props} />);
     }
   }
 
@@ -1117,10 +1118,12 @@ function DeferredHydrationScript({
   dataKey,
   deferredData,
   routeId,
+  scriptProps,
 }: {
   dataKey?: string;
   deferredData?: DeferredData;
   routeId?: string;
+  scriptProps?: ScriptProps;
 }) {
   if (typeof document === "undefined" && deferredData && dataKey && routeId) {
     invariant(
@@ -1140,6 +1143,7 @@ function DeferredHydrationScript({
         dataKey &&
         routeId ? null : (
           <script
+            {...scriptProps}
             async
             suppressHydrationWarning
             dangerouslySetInnerHTML={{ __html: " " }}
@@ -1151,10 +1155,11 @@ function DeferredHydrationScript({
         <Await
           resolve={deferredData.data[dataKey]}
           errorElement={
-            <ErrorDeferredHydrationScript dataKey={dataKey} routeId={routeId} />
+            <ErrorDeferredHydrationScript dataKey={dataKey} routeId={routeId} scriptProps={scriptProps} />
           }
           children={(data) => (
             <script
+              {...scriptProps}
               async
               suppressHydrationWarning
               dangerouslySetInnerHTML={{
@@ -1169,6 +1174,7 @@ function DeferredHydrationScript({
         />
       ) : (
         <script
+          {...scriptProps}
           async
           suppressHydrationWarning
           dangerouslySetInnerHTML={{ __html: " " }}
@@ -1181,9 +1187,11 @@ function DeferredHydrationScript({
 function ErrorDeferredHydrationScript({
   dataKey,
   routeId,
+  scriptProps,
 }: {
   dataKey: string;
   routeId: string;
+  scriptProps?: ScriptProps;
 }) {
   let error = useAsyncError() as Error;
   let toSerialize: { message: string; stack?: string } =
@@ -1199,6 +1207,7 @@ function ErrorDeferredHydrationScript({
 
   return (
     <script
+      {...scriptProps}
       suppressHydrationWarning
       dangerouslySetInnerHTML={{
         __html: `__remixContext.r(${JSON.stringify(routeId)}, ${JSON.stringify(