Skip to content

Add support for custom entry file paths. #13269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: dev
Choose a base branch
from
Draft

Add support for custom entry file paths. #13269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions contributors.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
- bobziroll
- bravo-kernel
- Brendonovich
- brettburley
- briankb
- BrianT1414
- brockross
Expand Down
192 changes: 192 additions & 0 deletions integration/file-path-config-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
import { expect } from "@playwright/test";
import type { Files } from "./helpers/vite.js";
import { test, viteConfig, build, createProject } from "./helpers/vite.js";

const js = String.raw;

const simpleFiles: Files = async ({ port }) => ({
"vite.config.ts": await viteConfig.basic({ port }),
"react-router.config.ts": js`
export default {
rootRouteFile: "custom/root.tsx",
routesFile: "custom/app-routes.ts",
clientEntryFile: "custom/entry.client.tsx",
serverEntryFile: "custom/entry.server.tsx",
};
`,
"app/custom/root.tsx": js`
import { Links, Meta, Outlet, Scripts } from "react-router";

export default function Root() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<div id="content">
<h1>Custom Root</h1>
<Outlet />
</div>
<Scripts />
</body>
</html>
);
}
`,
"app/custom/app-routes.ts": js`
import { type RouteConfig, index } from "@react-router/dev/routes";

export default [
index("index.tsx"),
] satisfies RouteConfig;
`,
"app/index.tsx": js`
export default function IndexRoute() {
return <div id="hydrated" onClick={() => {}}>Custom IndexRoute</div>
}
`,
"app/custom/entry.client.tsx": js`
import { HydratedRouter } from "react-router/dom";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

window.__customClientEntryExecuted = true;

startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<HydratedRouter discover={"none"} />
</StrictMode>
);
});
`,
"app/custom/entry.server.tsx": js`
import * as React from "react";
import { ServerRouter } from "react-router";
import { renderToString } from "react-dom/server";

export default function handleRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
) {
let markup = renderToString(
<ServerRouter context={remixContext} url={request.url} />
);
responseHeaders.set("Content-Type", "text/html");
responseHeaders.set("X-Custom-Server-Entry", "true");
return new Response('<!DOCTYPE html>' + markup, {
headers: responseHeaders,
status: responseStatusCode,
});
}
`,
});

test.describe("File path configuration", () => {
test("uses custom file paths", async ({ page, dev, request }) => {
let { port } = await dev(simpleFiles);
const response = await page.goto(`http://localhost:${port}/`);

// Verify custom root.tsx and app-routes.ts is being used.
await expect(page.locator("h1")).toHaveText("Custom Root");
await expect(page.locator("#content div")).toHaveText("Custom IndexRoute");

// Verify client entry is being used.
expect(
await page.evaluate(() => (window as any).__customClientEntryExecuted)
).toBe(true);

// Verify server entry is used by checking for the custom header.
expect(response?.headers()["x-custom-server-entry"]).toBe("true");
});

test("fails build when custom rootRouteFile doesn't exist", async () => {
let cwd = await createProject({
"react-router.config.ts": js`
export default {
rootRouteFile: "custom/nonexistent-root.tsx"
};
`,
});
let buildResult = build({ cwd });
expect(buildResult.status).toBe(1);
expect(buildResult.stderr.toString()).toContain(
'Could not find "root" entry file at'
);
expect(buildResult.stderr.toString()).toContain("nonexistent-root.tsx");
});

test("fails build when custom routesFile doesn't exist", async () => {
let cwd = await createProject({
"app/root.tsx": js`
export default function Root() {
return <div>Root</div>;
}
`,
"react-router.config.ts": js`
export default {
routesFile: "custom/nonexistent-routes.ts"
};
`,
});
let buildResult = build({ cwd });
expect(buildResult.status).toBe(1);
expect(buildResult.stderr.toString()).toContain(
'Could not find "routes" entry file at'
);
expect(buildResult.stderr.toString()).toContain("nonexistent-routes.ts");
});

test("fails build when custom clientEntryFile doesn't exist", async () => {
let cwd = await createProject({
"app/root.tsx": js`
export default function Root() {
return <div>Root</div>;
}
`,
"app/routes.ts": js`
export default [];
`,
"react-router.config.ts": js`
export default {
clientEntryFile: "custom/nonexistent-entry.client.tsx"
};
`,
});
let buildResult = build({ cwd });
expect(buildResult.status).toBe(1);
expect(buildResult.stderr.toString()).toContain(
'Could not find "entry.client" entry file at'
);
expect(buildResult.stderr.toString()).toContain("nonexistent-entry.client.tsx");
});

test("fails build when custom serverEntryFile doesn't exist", async () => {
let cwd = await createProject({
"app/root.tsx": js`
export default function Root() {
return <div>Root</div>;
}
`,
"app/routes.ts": js`
export default [];
`,
"react-router.config.ts": js`
export default {
serverEntryFile: "custom/nonexistent-entry.server.tsx"
};
`,
});
let buildResult = build({ cwd });
expect(buildResult.status).toBe(1);
expect(buildResult.stderr.toString()).toContain(
'Could not find "entry.server" entry file at'
);
expect(buildResult.stderr.toString()).toContain("nonexistent-entry.server.tsx");
});
});
Loading