diff --git a/.changeset/brave-cars-approve.md b/.changeset/brave-cars-approve.md
new file mode 100644
index 00000000000..a8c3700ef6d
--- /dev/null
+++ b/.changeset/brave-cars-approve.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/node": minor
+---
+
+Use undici as our fetch polyfill going forward. #9106
diff --git a/.changeset/odd-frogs-attend.md b/.changeset/odd-frogs-attend.md
new file mode 100644
index 00000000000..18907021cc2
--- /dev/null
+++ b/.changeset/odd-frogs-attend.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/server-runtime": patch
+---
+
+handle net new redirects created by handleDataRequest
diff --git a/.changeset/shy-buttons-buy.md b/.changeset/shy-buttons-buy.md
new file mode 100644
index 00000000000..5ef85720043
--- /dev/null
+++ b/.changeset/shy-buttons-buy.md
@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/react": patch
+---
+
+fix: escape single fetch transfer
diff --git a/.changeset/single-fetch-client-loaders.md b/.changeset/single-fetch-client-loaders.md
new file mode 100644
index 00000000000..a4933ed4f5d
--- /dev/null
+++ b/.changeset/single-fetch-client-loaders.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Update single fetch implementation to avoid over-fetching when clientLoader's exist
diff --git a/.changeset/single-fetch-spa-mode.md b/.changeset/single-fetch-spa-mode.md
new file mode 100644
index 00000000000..1cab92c1147
--- /dev/null
+++ b/.changeset/single-fetch-spa-mode.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Fix SPA mode when single fetch is enabled by using streaming entry.server
diff --git a/.changeset/single-fetch.md b/.changeset/single-fetch.md
new file mode 100644
index 00000000000..3e7a38c3069
--- /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/.changeset/spicy-ghosts-watch.md b/.changeset/spicy-ghosts-watch.md
new file mode 100644
index 00000000000..8aca8ce40b0
--- /dev/null
+++ b/.changeset/spicy-ghosts-watch.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Vite: added sourcemap support for transformed routes
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
index a07dcca2e2e..1744b3cf68d 100644
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -49,10 +49,7 @@ jobs:
- name: ๐ต๏ธ Check for changes
id: version
run: |
- # get latest commit sha
- SHA=$(git rev-parse HEAD)
- # get first 7 characters of sha
- SHORT_SHA=${SHA::7}
+ SHORT_SHA=$(git rev-parse --short HEAD)
# get latest nightly tag
LATEST_NIGHTLY_TAG=$(git tag -l v0.0.0-nightly-\* --sort=-creatordate | head -n 1)
diff --git a/.github/workflows/release-experimental.yml b/.github/workflows/release-experimental.yml
index a4e7c9e2253..b165cd722f2 100644
--- a/.github/workflows/release-experimental.yml
+++ b/.github/workflows/release-experimental.yml
@@ -1,32 +1,10 @@
-# Experimental releases are handled a bit differently than standard releases.
-# Experimental releases can be branched from anywhere as they are not intended
-# for general use, and all packages will be versioned and published with the
-# same hash for testing.
-#
-# This workflow will run when a GitHub release is created from experimental
-# version tag. Unlike standard releases created via Changesets, only one tag
-# should be created for all packages.
-#
-# To create a release:
-# - Create a new branch for the release: git checkout -b `release-experimental`
-# - IMPORTANT: You should always create a new branch so that the version
-# changes don't accidentally get merged into `dev` or `main`. The branch
-# name must follow the convention of `release-experimental` or
-# `release-experimental-[feature]`.
-# - Make whatever changes you need and commit them:
-# - `git add . && git commit "experimental changes!"`
-# - Update version numbers and create a release tag:
-# - `pnpm run version:experimental`
-# - Push to GitHub:
-# - `git push origin --follow-tags`
-# - Create a new release for the tag on GitHub to trigger the CI workflow that
-# will publish the release to npm
+name: ๐งช Experimental Release
-name: ๐ Release (experimental)
on:
- push:
- tags:
- - "v0.0.0-experimental*"
+ workflow_dispatch:
+ inputs:
+ branch:
+ required: true
concurrency: ${{ github.workflow }}-${{ github.ref }}
@@ -34,16 +12,17 @@ env:
CI: true
jobs:
- release:
- name: ๐งโ๐ฌ Experimental Release
- if: |
- github.repository == 'remix-run/remix' &&
- contains(github.ref, 'experimental')
+ experimental:
+ name: ๐งช Experimental Release
+ if: github.repository == 'remix-run/remix'
runs-on: ubuntu-latest
steps:
- name: โฌ๏ธ Checkout repo
uses: actions/checkout@v4
with:
+ ref: ${{ github.event.inputs.branch }}
+ # checkout using a custom token so that we can push later on
+ token: ${{ secrets.NIGHTLY_PAT }}
fetch-depth: 0
- name: ๐ฆ Setup pnpm
@@ -58,6 +37,16 @@ jobs:
- name: ๐ฅ Install deps
run: pnpm install --frozen-lockfile
+ - name: โคด๏ธ Update version
+ run: |
+ git config --local user.email "hello@remix.run"
+ git config --local user.name "Remix Run Bot"
+ SHORT_SHA=$(git rev-parse --short HEAD)
+ NEXT_VERSION=0.0.0-experimental-${SHORT_SHA}
+ git checkout -b experimental/${NEXT_VERSION}
+ pnpm run version ${NEXT_VERSION} --skip-prompt
+ git push origin --tags
+
- name: ๐ Build
run: pnpm build
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index cb4e8854109..93116e55178 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -21,12 +21,17 @@ pnpm install
# run the build
pnpm build
-# run the tests
-pnpm test
-# run the tests for a specific package
-pnpm test react
-# run the tests in watch mode
-pnpm test react --watch
+# run the unit tests
+pnpm test:primary
+
+# run the unit tests for a specific package in watch mode
+pnpm test:primary packages/remix-react --watch
+
+# run the playwright integration tests in Chromium
+pnpm test:integration --project chromium
+
+# run specific playwright integration tests in Chromium
+pnpm test:integration integration/client-data --project chromium
```
## Releases
@@ -40,7 +45,6 @@ New releases should be created from release branches originating from the `dev`
- Create a new release branch with the `release-` prefix
- `git checkout -b release-next`
- **IMPORTANT:** The `release-` prefix is important, as this is what triggers our GitHub CI workflow that will ultimately publish the release
- - Branches named `release-experimental` will not trigger our release workflow, as experimental releases handled differently (outlined below)
- Merge `main` into the release branch
Changesets will do most of the heavy lifting for our releases. When changes are made to the codebase, an accompanying changeset file should be included to document the change. Those files will dictate how Changesets will version our packages and what shows up in the changelogs.
@@ -100,14 +104,19 @@ Hotfix releases follow the same process as standard releases above, but the `rel
### Experimental releases
-Experimental releases do not need to be branched off of `dev`. Experimental releases can be branched from anywhere as they are not intended for general use.
+Experimental releases use a [manually-triggered Github Actions workflow](./.github/workflows/release-experimental.yml) and can be built from any existing branch. to build and publish an experimental release:
+
+- Commit your changes to a branch
+- Push the branch to github
+- Go to the Github Actions UI for the [release-experimental.yml workflow](https://github.com/remix-run/remix/actions/workflows/release-experimental-dispatch.yml)
+- Click the `Run workflow` dropdown
+- Leave the `Use workflow from` dropdown as `main`
+- Enter your feature branch in the `branch` input
+- Click the `Run workflow` button
+
+### Nightly releases
-- Create a new branch for the release: `git checkout -b release-experimental`
-- Make whatever changes you need and commit them: `git add . && git commit "experimental changes!"`
-- Update version numbers and create a release tag: `pnpm version:experimental`
-- Push to GitHub: `git push origin --follow-tags`
-- Create a new release for the tag on GitHub to trigger the CI workflow that will publish the release to npm
- - Make sure you check the "prerelease" checkbox so it is not mistaken for a stable release
+Nightly releases happen automatically at midnight PST via a [cron-driven workflow](./.github/workflows/nightly.yml) that is essentially the same as the experimental releases, but also performs some validations after the release.
## Local Development Tips and Tricks
@@ -138,83 +147,3 @@ LOCAL_BUILD_DIRECTORY=../my-remix-app pnpm watch
```
Now - any time you make changes in the Remix repository, they will be written out to the appropriate locations in `../my-remix-app/node_modules` and you can restart the `npm run dev` command to pick them up ๐.
-
-### Transition Manager Flows
-
-The transition manager is a complex and heavily async bit of logic that is foundational to Remix's ability to manage data loading, submission, error handling, and interruptions. Due to the user-driven nature of interruptions we don't quite believe it can be modeled as a finite state machine, however we have modeled some of the happy path flows below for clarity.
-
-#### Transitions
-
-_Note: This does not depict error or interruption flows_
-
-```mermaid
-graph LR
- %% transition
- idle -->|link clicked| loading/normalLoad
- idle -->|form method=get| submitting/loaderSubmission
- idle -->|form method=post| submitting/actionSubmission
- idle -->|fetcher action redirects| loading/fetchActionRedirect
-
- subgraph "<Link> transition"
- loading/normalLoad -->|loader redirected| loading/normalRedirect
- loading/normalRedirect --> loading/normalRedirect
- end
- loading/normalLoad -->|loaders completed| idle
- loading/normalRedirect -->|loaders completed| idle
-
- subgraph "<Form method=get>"
- submitting/loaderSubmission -->|loader redirected| loading/loaderSubmissionRedirect
- loading/loaderSubmissionRedirect --> loading/loaderSubmissionRedirect
- end
- submitting/loaderSubmission -->|loaders completed| idle
- loading/loaderSubmissionRedirect -->|loaders completed| idle
-
- subgraph "<Form method=post>"
- submitting/actionSubmission -->|action returned| loading/actionReload
- submitting/actionSubmission -->|action redirected| loading/actionRedirect
- loading/actionReload -->|loader redirected| loading/actionRedirect
- loading/actionRedirect --> loading/actionRedirect
- end
- loading/actionReload -->|loaders completed| idle
- loading/actionRedirect -->|loaders completed| idle
-
- subgraph "Fetcher action redirect"
- loading/fetchActionRedirect --> loading/fetchActionRedirect
- end
- loading/fetchActionRedirect -->|loaders completed| idle
-```
-
-#### Fetchers
-
-_Note: This does not depict error or interruption flows, nor the ability to re-use fetchers once they've reached `idle/done`._
-
-```mermaid
-graph LR
- idle/init -->|"load"| loading/normalLoad
- idle/init -->|"submit (get)"| submitting/loaderSubmission
- idle/init -->|"submit (post)"| submitting/actionSubmission
-
- subgraph "Normal Fetch"
- loading/normalLoad -.->|loader redirected| T1{{transition}}
- end
- loading/normalLoad -->|loader completed| idle/done
- T1{{transition}} -.-> idle/done
-
- subgraph "Loader Submission"
- submitting/loaderSubmission -.->|"loader redirected"| T2{{transition}}
- end
- submitting/loaderSubmission -->|loader completed| idle/done
- T2{{transition}} -.-> idle/done
-
- subgraph "Action Submission"
- submitting/actionSubmission -->|action completed| loading/actionReload
- submitting/actionSubmission -->|action redirected| loading/actionRedirect
- loading/actionRedirect -.-> T3{{transition}}
- loading/actionReload -.-> |loaders redirected| T3{{transition}}
- end
- T3{{transition}} -.-> idle/done
- loading/actionReload --> |loaders completed| idle/done
-
- classDef transition fill:lightgreen;
- class T1,T2,T3 transition;
-```
diff --git a/contributors.yml b/contributors.yml
index c21140f40ab..8aa3c50cc05 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -248,6 +248,7 @@
- IAmLuisJ
- iamzee
- ianduvall
+- IgnusG
- ikarus-akhil
- illright
- imzshh
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 (
+