ensure fallback bootstrap scripts get used in fallback cases

gnoff · gnoff · commit 34c6c03b7717 · 2023-01-10T13:25:35.000-08:00
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -2579,14 +2579,16 @@ export function prepareForFallback(responseState: ResponseState): void {
   if (__DEV__) {
     (responseState: any).inFallbackDEV = true;
   }
-  // This function would ideally check somethign to see whether embedding
-  // was required however at the moment the only time we use a Request Fallback
-  // is when we use renderIntoDocument which is the only variant where which
-  // utilizes fallback children. We assume we're in that mode if this function
-  // is called and update the requirement accordingly
+  // Reset rendered states
   responseState.htmlChunks = [];
   responseState.headChunks = [];
   responseState.rendered = NONE;
+
+  // Move fallback bootstrap to bootstrap if configured
+  const fallbackBootstrapChunks = responseState.fallbackBootstrapChunks;
+  if (fallbackBootstrapChunks && fallbackBootstrapChunks.length) {
+    responseState.bootstrapChunks = fallbackBootstrapChunks;
+  }
 }
 
 export function writeCompletedRoot(
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -6367,5 +6367,99 @@ describe('ReactDOMFizzServer', () => {
         </html>,
       );
     });
+
+    it('emits fallback bootstrap scripts if configured when rendering the fallback shell', async () => {
+      function Throw() {
+        throw new Error('uh oh');
+      }
+
+      let didBootstrap = false;
+      function bootstrap() {
+        didBootstrap = true;
+      }
+      window.__INIT__ = bootstrap;
+
+      let didFallback = false;
+      function fallback() {
+        didFallback = true;
+      }
+      window.__FALLBACK_INIT__ = fallback;
+
+      const errors = [];
+      await act(() => {
+        const {pipe} = renderIntoDocumentAsPipeableStream(
+          <html id="html">
+            <body id="body">
+              hello world
+              <Throw />
+            </body>
+          </html>,
+          <div>fallback</div>,
+          {
+            onError(err) {
+              errors.push(err.message);
+            },
+            bootstrapScriptContent: '__INIT__();',
+            fallbackBootstrapScriptContent: '__FALLBACK_INIT__();',
+          },
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <div>fallback</div>
+          </body>
+        </html>,
+      );
+
+      expect(didBootstrap).toBe(false);
+      expect(didFallback).toBe(true);
+    });
+
+    it('emits bootstrap scripts if no fallback bootstrap scripts are configured when rendering the fallback shell', async () => {
+      function Throw() {
+        throw new Error('uh oh');
+      }
+
+      let didBootstrap = false;
+      function bootstrap() {
+        didBootstrap = true;
+      }
+      window.__INIT__ = bootstrap;
+
+      const errors = [];
+      await act(() => {
+        const {pipe} = renderIntoDocumentAsPipeableStream(
+          <html id="html">
+            <body id="body">
+              <Throw />
+              hello world
+            </body>
+          </html>,
+          <div>fallback</div>,
+          {
+            onError(err) {
+              errors.push(err.message);
+            },
+            bootstrapScriptContent: '__INIT__();',
+          },
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <div>fallback</div>
+          </body>
+        </html>,
+      );
+
+      expect(didBootstrap).toBe(true);
+    });
   });
 });
