From 451428666e11d2f80780164678292915794f8840 Mon Sep 17 00:00:00 2001
From: Daniel Rios <daniel.riospavia@shopify.com>
Date: Fri, 3 Mar 2023 11:11:24 +0100
Subject: [PATCH] update template client entry to match remix (#604)

* update template client entry to match remix

* update entry.server.tsx based on new remix template
---
 templates/demo-store/app/entry.client.tsx  | 20 +++++++++++++++++-
 templates/demo-store/app/entry.server.tsx  | 15 ++++++++++----
 templates/hello-world/app/entry.client.tsx | 20 +++++++++++++++++-
 templates/hello-world/app/entry.server.tsx | 16 +++++++++++++--
 templates/skeleton/app/entry.client.tsx    | 20 +++++++++++++++++-
 templates/skeleton/app/entry.server.tsx    | 24 ++++++++++++++++------
 6 files changed, 100 insertions(+), 15 deletions(-)

diff --git a/templates/demo-store/app/entry.client.tsx b/templates/demo-store/app/entry.client.tsx
index 72fee3da95..8174ace60c 100644
--- a/templates/demo-store/app/entry.client.tsx
+++ b/templates/demo-store/app/entry.client.tsx
@@ -1,4 +1,22 @@
 import {RemixBrowser} from '@remix-run/react';
+import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
-hydrateRoot(document, <RemixBrowser />);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}
+
+if (typeof requestIdleCallback === 'function') {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}
diff --git a/templates/demo-store/app/entry.server.tsx b/templates/demo-store/app/entry.server.tsx
index 086af061cb..05b0c9a587 100644
--- a/templates/demo-store/app/entry.server.tsx
+++ b/templates/demo-store/app/entry.server.tsx
@@ -1,7 +1,7 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
-import {renderToReadableStream} from 'react-dom/server';
 import isbot from 'isbot';
+import {renderToReadableStream} from 'react-dom/server';
 
 export default async function handleRequest(
   request: Request,
@@ -11,16 +11,23 @@ export default async function handleRequest(
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
   );
 
-  if (isbot(request.headers.get('User-Agent'))) {
+  if (isbot(request.headers.get('user-agent'))) {
     await body.allReady;
   }
 
   responseHeaders.set('Content-Type', 'text/html');
-
   return new Response(body, {
-    status: responseStatusCode,
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }
diff --git a/templates/hello-world/app/entry.client.tsx b/templates/hello-world/app/entry.client.tsx
index 72fee3da95..8174ace60c 100644
--- a/templates/hello-world/app/entry.client.tsx
+++ b/templates/hello-world/app/entry.client.tsx
@@ -1,4 +1,22 @@
 import {RemixBrowser} from '@remix-run/react';
+import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
-hydrateRoot(document, <RemixBrowser />);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}
+
+if (typeof requestIdleCallback === 'function') {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}
diff --git a/templates/hello-world/app/entry.server.tsx b/templates/hello-world/app/entry.server.tsx
index 5b7ffb7b3f..05b0c9a587 100644
--- a/templates/hello-world/app/entry.server.tsx
+++ b/templates/hello-world/app/entry.server.tsx
@@ -1,5 +1,6 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
+import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
 
 export default async function handleRequest(
@@ -10,12 +11,23 @@ export default async function handleRequest(
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
   );
 
-  responseHeaders.set('Content-Type', 'text/html');
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
 
+  responseHeaders.set('Content-Type', 'text/html');
   return new Response(body, {
-    status: responseStatusCode,
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }
diff --git a/templates/skeleton/app/entry.client.tsx b/templates/skeleton/app/entry.client.tsx
index 72fee3da95..8174ace60c 100644
--- a/templates/skeleton/app/entry.client.tsx
+++ b/templates/skeleton/app/entry.client.tsx
@@ -1,4 +1,22 @@
 import {RemixBrowser} from '@remix-run/react';
+import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
-hydrateRoot(document, <RemixBrowser />);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}
+
+if (typeof requestIdleCallback === 'function') {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}
diff --git a/templates/skeleton/app/entry.server.tsx b/templates/skeleton/app/entry.server.tsx
index 3a5e172b3c..05b0c9a587 100644
--- a/templates/skeleton/app/entry.server.tsx
+++ b/templates/skeleton/app/entry.server.tsx
@@ -1,21 +1,33 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
-import {renderToString} from 'react-dom/server';
+import isbot from 'isbot';
+import {renderToReadableStream} from 'react-dom/server';
 
-export default function handleRequest(
+export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  const markup = renderToString(
+  const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
   );
 
-  responseHeaders.set('Content-Type', 'text/html');
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
 
-  return new Response('<!DOCTYPE html>' + markup, {
-    status: responseStatusCode,
+  responseHeaders.set('Content-Type', 'text/html');
+  return new Response(body, {
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }