chore(remix): update entry files (#510)

checkmarble · Jul 29, 2024 · b984dfe · b984dfe
1 parent 217860f
commit b984dfe
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 deletions.
diff --git a/packages/app-builder/src/entry.client.tsx b/packages/app-builder/src/entry.client.tsx
@@ -62,12 +62,4 @@ async function hydrate() {
   });
 }
 
-if (window.requestIdleCallback) {
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  window.requestIdleCallback(hydrate);
-} else {
-  // Safari doesn't support requestIdleCallback
-  // https://caniuse.com/requestidlecallback
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  window.setTimeout(hydrate, 1);
-}
+void hydrate();
diff --git a/packages/app-builder/src/entry.server.tsx b/packages/app-builder/src/entry.server.tsx
@@ -33,30 +33,42 @@ export default async function handleRequest(
     </I18nextProvider>
   );
 
-  const userAgent = request.headers.get('user-agent');
-  return userAgent && isbot(userAgent)
+  const prohibitOutOfOrderStreaming =
+    isBotRequest(request) || remixContext.isSpaMode;
+
+  return prohibitOutOfOrderStreaming
     ? handleBotRequest(responseStatusCode, responseHeaders, App)
     : handleBrowserRequest(responseStatusCode, responseHeaders, App);
 }
 
+function isBotRequest(request: Request) {
+  const userAgent = request.headers.get('user-agent');
+  if (!userAgent) {
+    return false;
+  }
+
+  return isbot(userAgent);
+}
+
 function handleBotRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   App: JSX.Element,
 ) {
   return new Promise((resolve, reject) => {
-    let didError = false;
-
+    let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(App, {
       onAllReady() {
+        shellRendered = true;
         const body = new PassThrough();
+        const stream = createReadableStreamFromReadable(body);
 
         responseHeaders.set('Content-Type', 'text/html');
 
         resolve(
-          new Response(createReadableStreamFromReadable(body), {
+          new Response(stream, {
             headers: responseHeaders,
-            status: didError ? 500 : responseStatusCode,
+            status: responseStatusCode,
           }),
         );
 
@@ -66,9 +78,13 @@ function handleBotRequest(
         reject(error);
       },
       onError(error: unknown) {
-        didError = true;
-
-        console.error(error);
+        responseStatusCode = 500;
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
       },
     });
 
@@ -82,30 +98,35 @@ function handleBrowserRequest(
   App: JSX.Element,
 ) {
   return new Promise((resolve, reject) => {
-    let didError = false;
-
+    let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(App, {
       onShellReady() {
+        shellRendered = true;
         const body = new PassThrough();
+        const stream = createReadableStreamFromReadable(body);
 
         responseHeaders.set('Content-Type', 'text/html');
 
         resolve(
-          new Response(createReadableStreamFromReadable(body), {
+          new Response(stream, {
             headers: responseHeaders,
-            status: didError ? 500 : responseStatusCode,
+            status: responseStatusCode,
           }),
         );
 
         pipe(body);
       },
-      onShellError(err: unknown) {
-        reject(err);
+      onShellError(error: unknown) {
+        reject(error);
       },
       onError(error: unknown) {
-        didError = true;
-
-        console.error(error);
+        responseStatusCode = 500;
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
       },
     });
 

diff --git a/packages/app-builder/src/services/segment/SegmentScript.tsx b/packages/app-builder/src/services/segment/SegmentScript.tsx
@@ -1,6 +1,7 @@
 export function SegmentScript({ script }: { script: string }) {
   return (
     <script
+      async={true}
       suppressHydrationWarning
       dangerouslySetInnerHTML={{
         __html: script,