templates: have loadContext available in handleRequest

remix-run · May 1, 2023 · 4ab3f8a · 4ab3f8a
1 parent bc08834
commit 4ab3f8a
Show file tree

Hide file tree

Showing 24 changed files with 164 additions and 92 deletions.
diff --git a/docs/guides/migrating-react-router-app.md b/docs/guides/migrating-react-router-app.md
@@ -48,7 +48,7 @@ Let's start by creating two new files:
 ```tsx filename=app/entry.server.tsx
 import { PassThrough } from "stream";
 
-import type { EntryContext } from "@remix-run/node";
+import type { AppLoadContext, EntryContext } from "@remix-run/node";
 import { Response } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
@@ -60,28 +60,32 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   return isbot(request.headers.get("user-agent"))
     ? handleBotRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        remixContext,
+        loadContext
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        remixContext,
+        loadContext
       );
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   return new Promise((resolve, reject) => {
     const { pipe, abort } = renderToPipeableStream(
@@ -123,7 +127,8 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   return new Promise((resolve, reject) => {
     const { pipe, abort } = renderToPipeableStream(

diff --git a/docs/guides/streaming.md b/docs/guides/streaming.md
@@ -80,11 +80,12 @@ Let's take a dive into how to accomplish this.
 
 First, to enable streaming with React 18, you'll update your `entry.server.tsx` file to use `renderToPipeableStream`. Here's a simple (and incomplete) version of that:
 
-```tsx filename=app/entry.server.tsx lines=[1,9,18,25,30,35]
+```tsx filename=app/entry.server.tsx lines=[1,10,20,27,32,37]
 import { PassThrough } from "stream";
 
 import { Response } from "@remix-run/node"; // or cloudflare/deno
 import type {
+  AppLoadContext,
   EntryContext,
   Headers,
 } from "@remix-run/node"; // or cloudflare/deno
@@ -95,7 +96,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   return new Promise((resolve) => {
     const { pipe } = renderToPipeableStream(
@@ -126,7 +128,7 @@ export default function handleRequest(
 <details>
   <summary>For a more complete example, expand this</summary>
 
-This handles errors and properly disables streaming for bots which you typically want to force waiting so you can display all the content for SEO purposes.
+This handles errors and properly disables streaming for bots which you typically want to force waiting, so you can display all the content for SEO purposes.
 
 ```tsx filename=app/entry.server.tsx
 import { PassThrough } from "stream";
@@ -146,7 +148,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   // If the request is from a bot, we want to wait for the full
   // response to render before sending it to the client. This
@@ -156,23 +159,26 @@ export default function handleRequest(
       request,
       responseStatusCode,
       responseHeaders,
-      remixContext
+      remixContext,
+      loadContext
     );
   }
 
   return serveBrowsers(
     request,
     responseStatusCode,
     responseHeaders,
-    remixContext
+    remixContext,
+    loadContext
   );
 }
 
 function serveTheBots(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   return new Promise((resolve, reject) => {
     const { pipe, abort } = renderToPipeableStream(
@@ -207,7 +213,8 @@ function serveBrowsers(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   return new Promise((resolve, reject) => {
     let didError = false;

diff --git a/docs/guides/styling.md b/docs/guides/styling.md
@@ -633,8 +633,11 @@ Here's some sample code to show how you might use Styled Components with Remix (
 
 2. Your `entry.server.tsx` will look something like this:
 
-   ```tsx filename=entry.server.tsx lines=[4,12,15-20,22-23]
-   import type { EntryContext } from "@remix-run/node"; // or cloudflare/deno
+   ```tsx filename=entry.server.tsx lines=[7,16,19-24,26-27]
+   import type {
+     AppLoadContext,
+     EntryContext,
+   } from "@remix-run/node"; // or cloudflare/deno
    import { RemixServer } from "@remix-run/react";
    import { renderToString } from "react-dom/server";
    import { ServerStyleSheet } from "styled-components";
@@ -643,7 +646,8 @@ Here's some sample code to show how you might use Styled Components with Remix (
      request: Request,
      responseStatusCode: number,
      responseHeaders: Headers,
-     remixContext: EntryContext
+     remixContext: EntryContext,
+     _loadContext: AppLoadContext
    ) {
      const sheet = new ServerStyleSheet();
 

diff --git a/docs/route/headers.md b/docs/route/headers.md
@@ -91,16 +91,20 @@ All that said, you can avoid this entire problem by _not defining headers in par
 
 Note that you can also add headers in your `entry.server` file for things that should be global, for example:
 
-```tsx lines=[16]
-import type { EntryContext } from "@remix-run/node"; // or cloudflare/deno
+```tsx lines=[20]
+import type {
+  AppLoadContext,
+  EntryContext,
+} from "@remix-run/node"; // or cloudflare/deno
 import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   const markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />

diff --git a/integration/defer-test.ts b/integration/defer-test.ts
@@ -949,7 +949,7 @@ test.describe("aborted", () => {
       files: {
         "app/entry.server.tsx": js`
           import { PassThrough } from "stream";
-          import type { EntryContext } from "@remix-run/node";
+          import type { AppLoadContext, EntryContext } from "@remix-run/node";
           import { Response } from "@remix-run/node";
           import { RemixServer } from "@remix-run/react";
           import isbot from "isbot";
@@ -961,28 +961,32 @@ test.describe("aborted", () => {
             request: Request,
             responseStatusCode: number,
             responseHeaders: Headers,
-            remixContext: EntryContext
+            remixContext: EntryContext,
+            loadContext: AppLoadContext
           ) {
             return isbot(request.headers.get("user-agent"))
               ? handleBotRequest(
                   request,
                   responseStatusCode,
                   responseHeaders,
-                  remixContext
+                  remixContext,
+                  loadContext
                 )
               : handleBrowserRequest(
                   request,
                   responseStatusCode,
                   responseHeaders,
-                  remixContext
+                  remixContext,
+                  loadContext
                 );
           }
 
           function handleBotRequest(
             request: Request,
             responseStatusCode: number,
             responseHeaders: Headers,
-            remixContext: EntryContext
+            remixContext: EntryContext,
+            _loadContext: AppLoadContext
           ) {
             return new Promise((resolve, reject) => {
               let didError = false;
@@ -1027,7 +1031,8 @@ test.describe("aborted", () => {
             request: Request,
             responseStatusCode: number,
             responseHeaders: Headers,
-            remixContext: EntryContext
+            remixContext: EntryContext,
+            _loadContext: AppLoadContext
           ) {
             return new Promise((resolve, reject) => {
               let didError = false;

diff --git a/packages/remix-dev/__tests__/fixtures/indie-stack/app/entry.server.tsx b/packages/remix-dev/__tests__/fixtures/indie-stack/app/entry.server.tsx
@@ -1,5 +1,5 @@
 import { PassThrough } from "stream";
-import type { EntryContext } from "@remix-run/node";
+import type { AppLoadContext, EntryContext } from "@remix-run/node";
 import { Response } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { renderToPipeableStream } from "react-dom/server";
@@ -10,7 +10,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   return new Promise((resolve, reject) => {
     let { pipe, abort } = renderToPipeableStream(

diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-magic-imports/app/entry.server.tsx b/packages/remix-dev/__tests__/fixtures/replace-remix-magic-imports/app/entry.server.tsx
@@ -1,5 +1,5 @@
 import { PassThrough } from "stream";
-import type { EntryContext } from "@remix-run/node";
+import type { AppLoadContext, EntryContext } from "@remix-run/node";
 import { Response } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { renderToPipeableStream } from "react-dom/server";
@@ -10,7 +10,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   return new Promise((resolve, reject) => {
     let { pipe, abort } = renderToPipeableStream(

diff --git a/packages/remix-dev/__tests__/fixtures/stack/app/entry.server.tsx b/packages/remix-dev/__tests__/fixtures/stack/app/entry.server.tsx
@@ -1,12 +1,13 @@
-import type { EntryContext } from "@remix-run/node";
+import type { AppLoadContext, EntryContext } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   // eslint-disable-next-line testing-library/render-result-naming-convention
   let markup = renderToString(

diff --git a/packages/remix-dev/config/defaults/cloudflare/entry.server.react-stream.tsx b/packages/remix-dev/config/defaults/cloudflare/entry.server.react-stream.tsx
@@ -1,4 +1,4 @@
-import type { EntryContext } from "@remix-run/cloudflare";
+import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToReadableStream } from "react-dom/server";
@@ -7,7 +7,8 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,

diff --git a/packages/remix-dev/config/defaults/cloudflare/entry.server.react-string.tsx b/packages/remix-dev/config/defaults/cloudflare/entry.server.react-string.tsx
@@ -1,12 +1,13 @@
-import type { EntryContext } from "@remix-run/cloudflare";
+import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
 import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   let markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />

diff --git a/packages/remix-dev/config/defaults/deno/entry.server.react-stream.tsx b/packages/remix-dev/config/defaults/deno/entry.server.react-stream.tsx
@@ -1,4 +1,4 @@
-import type { EntryContext } from "@remix-run/deno";
+import type { AppLoadContext, EntryContext } from "@remix-run/deno";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToReadableStream } from "react-dom/server";
@@ -7,7 +7,8 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,

diff --git a/packages/remix-dev/config/defaults/deno/entry.server.react-string.tsx b/packages/remix-dev/config/defaults/deno/entry.server.react-string.tsx
@@ -1,12 +1,13 @@
-import type { EntryContext } from "@remix-run/deno";
+import type { AppLoadContext, EntryContext } from "@remix-run/deno";
 import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  _loadContext: AppLoadContext
 ) {
   let markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />