templates: have loadContext available in handleRequest (#6190)

docs/guides/migrating-react-router-app.md

@@ -48,7 +48,10 @@ 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,7 +63,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   return isbot(request.headers.get("user-agent"))
     ? handleBotRequest(

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

docs/guides/styling.md

@@ -635,8 +635,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";
@@ -645,7 +648,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();
 

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} />

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,7 +961,8 @@ test.describe("aborted", () => {
             request: Request,
             responseStatusCode: number,
             responseHeaders: Headers,
-            remixContext: EntryContext
+            remixContext: EntryContext,
+            loadContext: AppLoadContext
           ) {
             return isbot(request.headers.get("user-agent"))
               ? handleBotRequest(

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(

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(

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(

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} />,

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} />

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} />,

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} />

packages/remix-dev/config/defaults/node/entry.server.react-stream.tsx

@@ -1,6 +1,6 @@
 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";
@@ -12,7 +12,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   return isbot(request.headers.get("user-agent"))
     ? handleBotRequest(

packages/remix-dev/config/defaults/node/entry.server.react-string.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
 ) {
   let markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />

scripts/playground/template/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 isbot from "isbot";
@@ -11,7 +11,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   let callbackName = isbot(request.headers.get("user-agent"))
     ? "onAllReady"

templates/arc/app/entry.server.tsx

@@ -6,7 +6,7 @@
 
 import { PassThrough } from "node: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";
@@ -18,7 +18,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   return isbot(request.headers.get("user-agent"))
     ? handleBotRequest(

templates/cloudflare-pages/app/entry.server.tsx

@@ -4,7 +4,7 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-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";
@@ -13,7 +13,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} />,

templates/cloudflare-workers/app/entry.server.tsx

@@ -4,7 +4,7 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-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";
@@ -13,7 +13,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} />,

templates/deno/app/entry.server.tsx

@@ -4,7 +4,7 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-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";
@@ -14,6 +14,7 @@ export default async function handleRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
@@ -23,7 +24,7 @@ export default async function handleRequest(
         console.error(error);
         responseStatusCode = 500;
       },
-    },
+    }
   );
 
   if (isbot(request.headers.get("user-agent"))) {

templates/express/app/entry.server.tsx

@@ -6,7 +6,7 @@
 
 import { PassThrough } from "node: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";
@@ -18,7 +18,8 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
 ) {
   return isbot(request.headers.get("user-agent"))
     ? handleBotRequest(