diff --git a/.changeset/single-fetch.md b/.changeset/single-fetch.md
new file mode 100644
index 00000000000..57ab4f0222c
--- /dev/null
+++ b/.changeset/single-fetch.md
@@ -0,0 +1,15 @@
+---
+"@remix-run/dev": minor
+"@remix-run/react": minor
+"@remix-run/server-runtime": minor
+"@remix-run/testing": minor
+---
+
+New `future.unstable_singleFetch` flag
+
+- Naked objects returned from loaders/actions are no longer automatically converted to JSON responses. They'll be streamed as-is via `turbo-stream` so `Date`'s will become `Date` through `useLoaderData()`
+- You can return naked objects with `Promise`'s without needing to use `defer()` - including nested `Promise`'s
+ - If you need to return a custom status code or custom response headers, you can still use the `defer` utility
+- `` is no longer used. Instead, you should `export const streamTimeout` from `entry.server.tsx` and the remix server runtime will use that as the delay to abort the streamed response
+ - If you export your own streamTimeout, you should decouple that from aborting the react `renderToPipeableStream`. You should always ensure that react is aborted _afer_ the stream is aborted so that abort rejections can be flushed down
+- Actions no longer automatically revalidate on 4xx/5xx responses (via RR `future.unstable_skipActionErrorRevalidation` flag) - you can return a 2xx to opt-into revalidation or use `shouldRevalidate`
diff --git a/integration/action-test.ts b/integration/action-test.ts
index b3861f3a153..b6de9ef020d 100644
--- a/integration/action-test.ts
+++ b/integration/action-test.ts
@@ -211,3 +211,218 @@ test.describe("actions", () => {
expect(await app.getHtml()).toMatch(PAGE_TEXT);
});
});
+
+// Duplicate suite of the tests above running with single fetch enabled
+// TODO(v3): remove the above suite of tests and just keep these
+test.describe("single fetch", () => {
+ test.describe("actions", () => {
+ let fixture: Fixture;
+ let appFixture: AppFixture;
+
+ let FIELD_NAME = "message";
+ let WAITING_VALUE = "Waiting...";
+ let SUBMITTED_VALUE = "Submission";
+ let THROWS_REDIRECT = "redirect-throw";
+ let REDIRECT_TARGET = "page";
+ let PAGE_TEXT = "PAGE_TEXT";
+
+ test.beforeAll(async () => {
+ fixture = await createFixture({
+ config: {
+ future: {
+ unstable_singleFetch: true,
+ },
+ },
+ files: {
+ "app/routes/urlencoded.tsx": js`
+ import { Form, useActionData } from "@remix-run/react";
+
+ export let action = async ({ request }) => {
+ let formData = await request.formData();
+ return formData.get("${FIELD_NAME}");
+ };
+
+ export default function Actions() {
+ let data = useActionData()
+
+ return (
+
+ );
+ }
+ `,
+
+ "app/routes/request-text.tsx": js`
+ import { Form, useActionData } from "@remix-run/react";
+
+ export let action = async ({ request }) => {
+ let text = await request.text();
+ return text;
+ };
+
+ export default function Actions() {
+ let data = useActionData()
+
+ return (
+
+ );
+ }
+ `,
+
+ [`app/routes/${THROWS_REDIRECT}.jsx`]: js`
+ import { redirect } from "@remix-run/node";
+ import { Form } from "@remix-run/react";
+
+ export function action() {
+ throw redirect("/${REDIRECT_TARGET}")
+ }
+
+ export default function () {
+ return (
+
+ )
+ }
+ `,
+
+ [`app/routes/${REDIRECT_TARGET}.jsx`]: js`
+ export default function () {
+ return
${PAGE_TEXT}
+ }
+ `,
+
+ "app/routes/no-action.tsx": js`
+ import { Form } from "@remix-run/react";
+
+ export default function Component() {
+ return (
+
+ );
+ }
+ `,
+ },
+ });
+
+ appFixture = await createAppFixture(fixture);
+ });
+
+ test.afterAll(() => {
+ appFixture.close();
+ });
+
+ let logs: string[] = [];
+
+ test.beforeEach(({ page }) => {
+ page.on("console", (msg) => {
+ logs.push(msg.text());
+ });
+ });
+
+ test.afterEach(() => {
+ expect(logs).toHaveLength(0);
+ });
+
+ test("is not called on document GET requests", async () => {
+ let res = await fixture.requestDocument("/urlencoded");
+ let html = selectHtml(await res.text(), "#text");
+ expect(html).toMatch(WAITING_VALUE);
+ });
+
+ test("is called on document POST requests", async () => {
+ let FIELD_VALUE = "cheeseburger";
+
+ let params = new URLSearchParams();
+ params.append(FIELD_NAME, FIELD_VALUE);
+
+ let res = await fixture.postDocument("/urlencoded", params);
+
+ let html = selectHtml(await res.text(), "#text");
+ expect(html).toMatch(FIELD_VALUE);
+ });
+
+ test("is called on script transition POST requests", async ({ page }) => {
+ let app = new PlaywrightFixture(appFixture, page);
+ await app.goto(`/urlencoded`);
+ await page.waitForSelector(`#text:has-text("${WAITING_VALUE}")`);
+
+ await page.click("button[type=submit]");
+ await page.waitForSelector("#action-text");
+ await page.waitForSelector(`#text:has-text("${SUBMITTED_VALUE}")`);
+ });
+
+ test("throws a 405 when no action exists", async ({ page }) => {
+ let app = new PlaywrightFixture(appFixture, page);
+ await app.goto(`/no-action`);
+ await page.click("button[type=submit]");
+ await page.waitForSelector(`h1:has-text("405 Method Not Allowed")`);
+ expect(logs.length).toBe(2);
+ expect(logs[0]).toMatch(
+ 'Route "routes/no-action" does not have an action'
+ );
+ // logs[1] is the raw ErrorResponse instance from the boundary but playwright
+ // seems to just log the name of the constructor, which in the minified code
+ // is meaningless so we don't bother asserting
+
+ // The rest of the tests in this suite assert no logs, so clear this out to
+ // avoid failures in afterEach
+ logs = [];
+ });
+
+ test("properly encodes form data for request.text() usage", async ({
+ page,
+ }) => {
+ let app = new PlaywrightFixture(appFixture, page);
+ await app.goto(`/request-text`);
+ await page.waitForSelector(`#text:has-text("${WAITING_VALUE}")`);
+
+ await page.click("button[type=submit]");
+ await page.waitForSelector("#action-text");
+ expect(await app.getHtml("#action-text")).toBe(
+ 'a=1&b=2'
+ );
+ });
+
+ test("redirects a thrown response on document requests", async () => {
+ let params = new URLSearchParams();
+ let res = await fixture.postDocument(`/${THROWS_REDIRECT}`, params);
+ expect(res.status).toBe(302);
+ expect(res.headers.get("Location")).toBe(`/${REDIRECT_TARGET}`);
+ });
+
+ test("redirects a thrown response on script transitions", async ({
+ page,
+ }) => {
+ let app = new PlaywrightFixture(appFixture, page);
+ await app.goto(`/${THROWS_REDIRECT}`);
+ let responses = app.collectSingleFetchResponses();
+ await app.clickSubmitButton(`/${THROWS_REDIRECT}`);
+
+ await page.waitForSelector(`#${REDIRECT_TARGET}`);
+
+ expect(responses.length).toBe(1);
+ expect(responses[0].status()).toBe(200);
+
+ expect(new URL(page.url()).pathname).toBe(`/${REDIRECT_TARGET}`);
+ expect(await app.getHtml()).toMatch(PAGE_TEXT);
+ });
+ });
+});
diff --git a/integration/catch-boundary-data-test.ts b/integration/catch-boundary-data-test.ts
index 0d6d3b88b8c..708f1124e2a 100644
--- a/integration/catch-boundary-data-test.ts
+++ b/integration/catch-boundary-data-test.ts
@@ -28,14 +28,14 @@ let HAS_BOUNDARY_NESTED_LOADER = "/yes/loader-self-boundary" as const;
let ROOT_DATA = "root data";
let LAYOUT_DATA = "root data";
-test.beforeEach(async ({ context }) => {
- await context.route(/_data/, async (route) => {
- await new Promise((resolve) => setTimeout(resolve, 50));
- route.continue();
+test.describe("ErrorBoundary (thrown responses)", () => {
+ test.beforeEach(async ({ context }) => {
+ await context.route(/_data/, async (route) => {
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ route.continue();
+ });
});
-});
-test.describe("ErrorBoundary (thrown responses)", () => {
test.beforeAll(async () => {
fixture = await createFixture({
files: {
@@ -242,3 +242,231 @@ test.describe("ErrorBoundary (thrown responses)", () => {
);
});
});
+
+// Duplicate suite of the tests above running with single fetch enabled
+// TODO(v3): remove the above suite of tests and just keep these
+test.describe("single fetch", () => {
+ test.describe("ErrorBoundary (thrown responses)", () => {
+ test.beforeEach(async ({ context }) => {
+ await context.route(/.data/, async (route) => {
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ route.continue();
+ });
+ });
+
+ test.beforeAll(async () => {
+ fixture = await createFixture({
+ config: {
+ future: {
+ unstable_singleFetch: true,
+ },
+ },
+ files: {
+ "app/root.tsx": js`
+ import { json } from "@remix-run/node";
+ import {
+ Links,
+ Meta,
+ Outlet,
+ Scripts,
+ useLoaderData,
+ useMatches,
+ } from "@remix-run/react";
+
+ export const loader = () => json("${ROOT_DATA}");
+
+ export default function Root() {
+ const data = useLoaderData();
+
+ return (
+
+
+
+
+
+
+
{data}
+
+
+
+
+ );
+ }
+
+ export function ErrorBoundary() {
+ let matches = useMatches();
+ let { data } = matches.find(match => match.id === "root");
+
+ return (
+
+
+
+
${ROOT_BOUNDARY_TEXT}
+
{data}
+
+
+
+ );
+ }
+ `,
+
+ "app/routes/_index.tsx": js`
+ import { Link } from "@remix-run/react";
+ export default function Index() {
+ return (
+