feat(remix-server-runtime): RRR 1.1 - handleResourceRequest (#4245)

Co-authored-by: Matt Brophy <matt@brophy.org>

.changeset/light-chairs-tickle.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/server-runtime": patch
+---
+
+add handleResourceRequest implementation based on @remix-run/router behind experimental build flag

.github/workflows/reusable-test.yml

@@ -9,10 +9,14 @@ on:
         # but we want to pass an array (node_version: "[14, 16, 18]"),
         # so we'll need to manually stringify it for now
         type: string
+      enable_remix_router:
+        required: false
+        type: string
 
 env:
   CI: true
   CYPRESS_INSTALL_BINARY: 0
+  ENABLE_REMIX_ROUTER: ${{ inputs.enable_remix_router }}
 
 jobs:
   build:

.github/workflows/test.yml

@@ -23,3 +23,10 @@ jobs:
     uses: ./.github/workflows/reusable-test.yml
     with:
       node_version: '["latest"]'
+
+  test-experimental:
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/reusable-test.yml
+    with:
+      node_version: '["latest"]'
+      enable_remix_router: "1"

integration/helpers/create-fixture.ts

@@ -6,6 +6,7 @@ import getPort from "get-port";
 import stripIndent from "strip-indent";
 import { sync as spawnSync } from "cross-spawn";
 import type { JsonObject } from "type-fest";
+import type { ServerMode } from "@remix-run/server-runtime/mode";
 
 import type { ServerBuild } from "../../build/node_modules/@remix-run/server-runtime";
 import { createRequestHandler } from "../../build/node_modules/@remix-run/server-runtime";
@@ -39,7 +40,10 @@ export async function createFixture(init: FixtureInit) {
 
   let requestDocument = async (href: string, init?: RequestInit) => {
     let url = new URL(href, "test://test");
-    let request = new Request(url.toString(), init);
+    let request = new Request(url.toString(), {
+      ...init,
+      signal: new AbortController().signal,
+    });
     return handler(request);
   };
 
@@ -84,7 +88,7 @@ export async function createFixture(init: FixtureInit) {
   };
 }
 
-export async function createAppFixture(fixture: Fixture) {
+export async function createAppFixture(fixture: Fixture, mode?: ServerMode) {
   let startAppServer = async (): Promise<{
     port: number;
     stop: () => Promise<void>;
@@ -93,9 +97,13 @@ export async function createAppFixture(fixture: Fixture) {
       let port = await getPort();
       let app = express();
       app.use(express.static(path.join(fixture.projectDir, "public")));
+
       app.all(
         "*",
-        createExpressHandler({ build: fixture.build, mode: "production" })
+        createExpressHandler({
+          build: fixture.build,
+          mode: mode || "production",
+        })
       );
 
       let server = app.listen(port);

integration/resource-routes-test.ts

@@ -1,4 +1,5 @@
 import { test, expect } from "@playwright/test";
+import { ServerMode } from "@remix-run/server-runtime/mode";
 
 import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
 import type { AppFixture, Fixture } from "./helpers/create-fixture";
@@ -67,9 +68,34 @@ test.describe("loader in an app", async () => {
             );
           }
         `,
+        "app/routes/throw-error.jsx": js`
+          export let loader = () => {
+            throw new Error('Oh noes!')
+          }
+        `,
+        "app/routes/return-response.jsx": js`
+          export let loader = () => {
+            return new Response('Partial', { status: 207 });
+          }
+        `,
+        "app/routes/throw-response.jsx": js`
+          export let loader = () => {
+            throw new Response('Partial', { status: 207 });
+          }
+        `,
+        "app/routes/return-object.jsx": js`
+          export let loader = () => {
+            return { hello: 'world' };
+          }
+        `,
+        "app/routes/throw-object.jsx": js`
+          export let loader = () => {
+            throw { but: 'why' };
+          }
+        `,
       },
     });
-    appFixture = await createAppFixture(fixture);
+    appFixture = await createAppFixture(fixture, ServerMode.Test);
   });
 
   test.afterAll(async () => {
@@ -113,5 +139,54 @@ test.describe("loader in an app", async () => {
       );
       expect(data).toBe(SVG_CONTENTS);
     });
+
+    test("should handle errors thrown from resource routes", async ({
+      page,
+    }) => {
+      let app = new PlaywrightFixture(appFixture, page);
+      let res = await app.goto("/throw-error");
+      expect(res.status()).toBe(500);
+      expect(await res.text()).toEqual(
+        "Unexpected Server Error\n\nError: Oh noes!"
+      );
+    });
   }
+
+  test("should handle responses returned from resource routes", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let res = await app.goto("/return-response");
+    expect(res.status()).toBe(207);
+    expect(await res.text()).toEqual("Partial");
+  });
+
+  test("should handle responses thrown from resource routes", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let res = await app.goto("/throw-response");
+    expect(res.status()).toBe(207);
+    expect(await res.text()).toEqual("Partial");
+  });
+
+  test("should handle objects returned from resource routes", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let res = await app.goto("/return-object");
+    expect(res.status()).toBe(200);
+    expect(await res.json()).toEqual({ hello: "world" });
+  });
+
+  test("should handle objects thrown from resource routes", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let res = await app.goto("/throw-object");
+    expect(res.status()).toBe(500);
+    expect(await res.text()).toEqual(
+      "Unexpected Server Error\n\n[object Object]"
+    );
+  });
 });

integration/tsconfig.json

@@ -2,7 +2,7 @@
   "include": ["**/*.ts"],
   "exclude": ["helpers/*-template"],
   "compilerOptions": {
-    "lib": ["ES2019"],
+    "lib": ["ES2019", "DOM", "DOM.Iterable"],
     "target": "ES2019",
     "module": "CommonJS",
     "skipLibCheck": true,

package.json

@@ -65,6 +65,7 @@
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-replace": "^4.0.0",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^13.3.0",

packages/create-remix/tsconfig.json

@@ -2,7 +2,7 @@
   "include": ["**/*.ts"],
   "exclude": ["dist", "**/node_modules/**"],
   "compilerOptions": {
-    "lib": ["ES2019"],
+    "lib": ["ES2019", "DOM", "DOM.Iterable"],
     "target": "ES2019",
     "module": "CommonJS",
     "skipLibCheck": true,

packages/remix-server-runtime/__tests__/data-test.ts

@@ -169,7 +169,9 @@ describe("loaders", () => {
     try {
       possibleError = await callRouteLoader({
         request,
-        match,
+        loader: match.route.module.loader,
+        routeId: match.route.id,
+        params: match.params,
         loadContext: {},
       });
     } catch (error) {
@@ -206,7 +208,9 @@ describe("actions", () => {
     try {
       possibleError = await callRouteAction({
         request,
-        match,
+        action: match.route.module.action,
+        routeId: match.route.id,
+        params: match.params,
         loadContext: {},
       });
     } catch (error) {

packages/remix-server-runtime/__tests__/handler-test.ts

@@ -22,6 +22,7 @@ describe("createRequestHandler", () => {
         headers: {
           "X-Foo": "bar",
         },
+        signal: new AbortController().signal,
       })
     );