[pull] main from remix-run:main

contributors.yml

@@ -29,6 +29,7 @@
 - amsal
 - Andarist
 - andreasottosson-polestar
+- andreiborza
 - andreiduca
 - antonmontrezor
 - appden
@@ -55,6 +56,7 @@
 - bilalk711
 - bjohn465
 - black5box
+- BlankParticle
 - bmsuseluda
 - bobziroll
 - bravo-kernel
@@ -105,6 +107,7 @@
 - dgrijuela
 - DigitalNaut
 - DimaAmega
+- dimmageiras
 - dmitrytarassov
 - dogxii
 - dokeet
@@ -338,6 +341,7 @@
 - renyu-io
 - reyronald
 - RFCreate
+- richardkall
 - richardscarrott
 - rifaidev
 - rimian

integration/client-data-test.ts

@@ -149,7 +149,7 @@ test.describe("Client Data", () => {
                   templateName,
                   files: {
                     "react-router.config.ts": reactRouterConfig({
-                      v8_splitRouteModules,
+                      future: { v8_splitRouteModules },
                     }),
                     "app/root.tsx": js`
                       import { Form, Outlet, Scripts } from "react-router"

integration/helpers/vite.ts

@@ -23,42 +23,23 @@ const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 const root = path.resolve(__dirname, "../..");
 const TMP_DIR = path.join(root, ".tmp/integration");
 
-export const reactRouterConfig = ({
-  ssr,
-  basename,
-  prerender,
-  appDirectory,
-  v8_middleware,
-  v8_splitRouteModules,
-  v8_viteEnvironmentApi,
-  routeDiscovery,
-}: {
-  ssr?: boolean;
-  basename?: string;
-  prerender?: boolean | string[];
-  appDirectory?: string;
-  v8_middleware?: boolean;
-  v8_splitRouteModules?: NonNullable<Config["future"]>["v8_splitRouteModules"];
-  v8_viteEnvironmentApi?: boolean;
-  routeDiscovery?: Config["routeDiscovery"];
-}) => {
-  let config: Config = {
-    ssr,
-    basename,
-    prerender,
-    appDirectory,
-    routeDiscovery,
-    future: {
-      v8_middleware,
-      v8_splitRouteModules,
-      v8_viteEnvironmentApi,
-    },
-  };
+export const reactRouterConfig = (
+  // Don't support function configs due to JSON.stringify()
+  config: Omit<Partial<Config>, "buildEnd" | "presets" | "serverBundles">,
+) => {
+  if (
+    typeof config.prerender === "function" ||
+    (typeof config.prerender === "object" &&
+      !Array.isArray(config.prerender) &&
+      typeof config.prerender.paths === "function")
+  ) {
+    throw new Error("reactRouterConfig() does not support prerender functions");
+  }
 
   return dedent`
     import type { Config } from "@react-router/dev/config";
 
-    export default ${JSON.stringify(config)} satisfies Config;
+    export default ${JSON.stringify(config, null, 2)} satisfies Config;
   `;
 };
 

integration/middleware-test.ts

@@ -40,7 +40,7 @@ test.describe("Middleware", () => {
           // ...existing code...
           "react-router.config.ts": reactRouterConfig({
             ssr: false,
-            v8_middleware: true,
+            future: { v8_middleware: true },
           }),
           "vite.config.ts": js`
             import { defineConfig } from "vite";
@@ -368,8 +368,7 @@ test.describe("Middleware", () => {
         files: {
           "react-router.config.ts": reactRouterConfig({
             ssr: false,
-            v8_middleware: true,
-            v8_splitRouteModules: true,
+            future: { v8_middleware: true, v8_splitRouteModules: true },
           }),
           "vite.config.ts": js`
             import { defineConfig } from "vite";
@@ -466,7 +465,7 @@ test.describe("Middleware", () => {
       fixture = await createFixture({
         files: {
           "react-router.config.ts": reactRouterConfig({
-            v8_middleware: true,
+            future: { v8_middleware: true },
           }),
           "vite.config.ts": js`
             import { defineConfig } from "vite";
@@ -773,7 +772,7 @@ test.describe("Middleware", () => {
       let fixture = await createFixture({
         files: {
           "react-router.config.ts": reactRouterConfig({
-            v8_middleware: true,
+            future: { v8_middleware: true },
           }),
           "vite.config.ts": js`
             import { defineConfig } from "vite";
@@ -895,7 +894,7 @@ test.describe("Middleware", () => {
       let fixture = await createFixture({
         files: {
           "react-router.config.ts": reactRouterConfig({
-            v8_middleware: true,
+            future: { v8_middleware: true },
           }),
           "vite.config.ts": js`
             import { defineConfig } from "vite";
@@ -1060,8 +1059,7 @@ test.describe("Middleware", () => {
       fixture = await createFixture({
         files: {
           "react-router.config.ts": reactRouterConfig({
-            v8_middleware: true,
-            v8_splitRouteModules: true,
+            future: { v8_middleware: true, v8_splitRouteModules: true },
           }),
           "vite.config.ts": js`
             import { defineConfig } from "vite";
@@ -1156,7 +1154,9 @@ test.describe("Middleware", () => {
     test.beforeAll(async () => {
       fixture = await createFixture({
         files: {
-          "react-router.config.ts": reactRouterConfig({ v8_middleware: true }),
+          "react-router.config.ts": reactRouterConfig({
+            future: { v8_middleware: true },
+          }),
           "vite.config.ts": js`
             import { defineConfig } from "vite";
             import { reactRouter } from "@react-router/dev/vite";
@@ -1983,7 +1983,7 @@ test.describe("Middleware", () => {
         {
           files: {
             "react-router.config.ts": reactRouterConfig({
-              v8_middleware: true,
+              future: { v8_middleware: true },
             }),
             "vite.config.ts": js`
               import { defineConfig } from "vite";

integration/single-fetch-test.ts

@@ -4476,4 +4476,193 @@ test.describe("single-fetch", () => {
     await page.waitForSelector("h1");
     expect(await app.getHtml("h1")).toMatch("It worked!");
   });
+
+  test("always uses /{path}.data without future.unstable_trailingSlashAwareDataRequests flag", async ({
+    page,
+  }) => {
+    let fixture = await createFixture({
+      files: {
+        ...files,
+        "app/routes/_index.tsx": js`
+          import { Link } from "react-router";
+
+          export default function Index() {
+            return (
+              <div>
+                <h1>Home</h1>
+                <Link to="/about/">Go to About (with trailing slash)</Link>
+                <Link to="/about">Go to About (without trailing slash)</Link>
+              </div>
+            );
+          }
+        `,
+        "app/routes/about.tsx": js`
+          import { Link, useLoaderData } from "react-router";
+
+          export function loader({ request }) {
+            let url = new URL(request.url);
+            return {
+              pathname: url.pathname,
+              hasTrailingSlash: url.pathname.endsWith("/"),
+            };
+          }
+
+          export default function About() {
+            let { pathname, hasTrailingSlash } = useLoaderData();
+            return (
+              <div>
+                <h1>About</h1>
+                <p id="pathname">{pathname}</p>
+                <p id="trailing-slash">{String(hasTrailingSlash)}</p>
+                <Link to="/">Go back home</Link>
+              </div>
+            );
+          }
+        `,
+      },
+    });
+    let appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+
+    let requests: string[] = [];
+    page.on("request", (req) => {
+      let url = new URL(req.url());
+      if (url.pathname.endsWith(".data")) {
+        requests.push(url.pathname + url.search);
+      }
+    });
+
+    // Document load without trailing slash
+    await app.goto("/about");
+    await page.waitForSelector("#pathname");
+    expect(await page.locator("#pathname").innerText()).toEqual("/about");
+    expect(await page.locator("#trailing-slash").innerText()).toEqual("false");
+
+    // Client-side navigation without trailing slash
+    await app.goto("/");
+    await app.clickLink("/about");
+    await page.waitForSelector("#pathname");
+    expect(await page.locator("#pathname").innerText()).toEqual("/about");
+    expect(await page.locator("#trailing-slash").innerText()).toEqual("false");
+    expect(requests).toEqual(["/about.data"]);
+    requests = [];
+
+    // Document load with trailing slash
+    await app.goto("/about/");
+    await page.waitForSelector("#pathname");
+    expect(await page.locator("#pathname").innerText()).toEqual("/about/");
+    expect(await page.locator("#trailing-slash").innerText()).toEqual("true");
+
+    // Client-side navigation with trailing slash
+    await app.goto("/");
+    await app.clickLink("/about/");
+    await page.waitForSelector("#pathname");
+    expect(await page.locator("#pathname").innerText()).toEqual("/about");
+    expect(await page.locator("#trailing-slash").innerText()).toEqual("false");
+    expect(requests).toEqual(["/about.data"]);
+    requests = [];
+
+    // Client-side navigation back to /
+    await app.clickLink("/");
+    await page.waitForSelector("h1:has-text('Home')");
+    expect(requests).toEqual(["/_root.data"]);
+    requests = [];
+  });
+
+  test("uses {path}.data or {path}/_.data depending on trailing slash with future.unstable_trailingSlashAwareDataRequests flag", async ({
+    page,
+  }) => {
+    let fixture = await createFixture({
+      files: {
+        ...files,
+        "react-router.config.ts": reactRouterConfig({
+          future: {
+            unstable_trailingSlashAwareDataRequests: true,
+          },
+        }),
+        "app/routes/_index.tsx": js`
+          import { Link } from "react-router";
+
+          export default function Index() {
+            return (
+              <div>
+                <h1>Home</h1>
+                <Link to="/about/">Go to About (with trailing slash)</Link>
+                <Link to="/about">Go to About (without trailing slash)</Link>
+              </div>
+            );
+          }
+        `,
+        "app/routes/about.tsx": js`
+          import { Link, useLoaderData } from "react-router";
+
+          export function loader({ request }) {
+            let url = new URL(request.url);
+            return {
+              pathname: url.pathname,
+              hasTrailingSlash: url.pathname.endsWith("/"),
+            };
+          }
+
+          export default function About() {
+            let { pathname, hasTrailingSlash } = useLoaderData();
+            return (
+              <div>
+                <h1>About</h1>
+                <p id="pathname">{pathname}</p>
+                <p id="trailing-slash">{String(hasTrailingSlash)}</p>
+                <Link to="/">Go back home</Link>
+              </div>
+            );
+          }
+        `,
+      },
+    });
+    let appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+
+    let requests: string[] = [];
+    page.on("request", (req) => {
+      let url = new URL(req.url());
+      if (url.pathname.endsWith(".data")) {
+        requests.push(url.pathname + url.search);
+      }
+    });
+
+    // Document load without trailing slash
+    await app.goto("/about");
+    await page.waitForSelector("#pathname");
+    expect(await page.locator("#pathname").innerText()).toEqual("/about");
+    expect(await page.locator("#trailing-slash").innerText()).toEqual("false");
+
+    // Client-side navigation without trailing slash
+    await app.goto("/");
+    await app.clickLink("/about");
+    await page.waitForSelector("#pathname");
+    expect(await page.locator("#pathname").innerText()).toEqual("/about");
+    expect(await page.locator("#trailing-slash").innerText()).toEqual("false");
+    expect(requests).toEqual(["/about.data"]);
+    requests = [];
+
+    // Document load with trailing slash
+    await app.goto("/about/");
+    await page.waitForSelector("#pathname");
+    expect(await page.locator("#pathname").innerText()).toEqual("/about/");
+    expect(await page.locator("#trailing-slash").innerText()).toEqual("true");
+
+    // Client-side navigation with trailing slash
+    await app.goto("/");
+    await app.clickLink("/about/");
+    await page.waitForSelector("#pathname");
+    expect(await page.locator("#pathname").innerText()).toEqual("/about/");
+    expect(await page.locator("#trailing-slash").innerText()).toEqual("true");
+    expect(requests).toEqual(["/about/_.data"]);
+    requests = [];
+
+    // Client-side navigation back to /
+    await app.clickLink("/");
+    await page.waitForSelector("h1:has-text('Home')");
+    expect(requests).toEqual(["/_.data"]);
+    requests = [];
+  });
 });