From f5ebba63decb72a936c8c75d131373b615d23e5c Mon Sep 17 00:00:00 2001 From: Daniel Rios Pavia Date: Wed, 1 Mar 2023 20:35:28 +0100 Subject: [PATCH 1/2] update template client entry to match remix --- templates/demo-store/app/entry.client.tsx | 20 +++++++++++++++++++- templates/hello-world/app/entry.client.tsx | 20 +++++++++++++++++++- templates/skeleton/app/entry.client.tsx | 20 +++++++++++++++++++- 3 files changed, 57 insertions(+), 3 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, ); +function hydrate() { + startTransition(() => { + hydrateRoot( + document, + + + , + ); + }); +} + +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.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, ); +function hydrate() { + startTransition(() => { + hydrateRoot( + document, + + + , + ); + }); +} + +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.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, ); +function hydrate() { + startTransition(() => { + hydrateRoot( + document, + + + , + ); + }); +} + +if (typeof requestIdleCallback === 'function') { + requestIdleCallback(hydrate); +} else { + // Safari doesn't support requestIdleCallback + // https://caniuse.com/requestidlecallback + setTimeout(hydrate, 1); +} From 4e785085f333bd6e7b3817713d6c066f2c1d3d1e Mon Sep 17 00:00:00 2001 From: Daniel Rios Pavia Date: Thu, 2 Mar 2023 15:30:08 +0100 Subject: [PATCH 2/2] update entry.server.tsx based on new remix template --- templates/demo-store/app/entry.server.tsx | 15 ++++++++++---- templates/hello-world/app/entry.server.tsx | 16 +++++++++++++-- templates/skeleton/app/entry.server.tsx | 24 ++++++++++++++++------ 3 files changed, 43 insertions(+), 12 deletions(-) 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( , + { + 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.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( , + { + 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.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( , + { + 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('' + markup, { - status: responseStatusCode, + responseHeaders.set('Content-Type', 'text/html'); + return new Response(body, { headers: responseHeaders, + status: responseStatusCode, }); }