Skip to content

Add integration test for vite-plugin-cloudflare #13099

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

Merged
merged 1 commit into from
Feb 24, 2025
Merged

Add integration test for vite-plugin-cloudflare #13099

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 ...lpers/vite-cloudflare-template/.gitignore → .../cloudflare-dev-proxy-template/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ node_modules

/build
.env
.react-router
0 ...-cloudflare-template/app/entry.server.tsx → ...e-dev-proxy-template/app/entry.server.tsx
View file
Open in desktop
File renamed without changes.
0 ...ers/vite-cloudflare-template/app/root.tsx → ...loudflare-dev-proxy-template/app/root.tsx
View file
Open in desktop
File renamed without changes.
0 ...rs/vite-cloudflare-template/app/routes.ts → ...oudflare-dev-proxy-template/app/routes.ts
View file
Open in desktop
File renamed without changes.
0 ...cloudflare-template/app/routes/_index.tsx → ...-dev-proxy-template/app/routes/_index.tsx
View file
Open in desktop
File renamed without changes.
10 changes: 5 additions & 5 deletions ...ers/vite-cloudflare-template/package.json → ...loudflare-dev-proxy-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "integration-vite-cloudflare-template",
"name": "integration-cloudflare-dev-proxy-template",
"version": "0.0.0",
"private": true,
"sideEffects": false,
Expand All @@ -13,21 +13,21 @@
"dependencies": {
"@react-router/cloudflare": "workspace:*",
"isbot": "^4.1.0",
"miniflare": "^3.20231030.4",
"miniflare": "^3.20250214.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "workspace:*"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20230518.0",
"@cloudflare/workers-types": "^4.20250214.0",
"@react-router/dev": "workspace:*",
"@react-router/fs-routes": "workspace:*",
"@react-router/remix-routes-option-adapter": "workspace:*",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"typescript": "^5.1.6",
"vite": "^6.0.0",
"wrangler": "^3.28.2"
"vite": "^6.1.0",
"wrangler": "^3.109.2"
},
"engines": {
"node": ">=20.0.0"
Expand Down
0 ...te-cloudflare-template/public/favicon.ico → ...are-dev-proxy-template/public/favicon.ico
View file
Open in desktop
File renamed without changes.
0 ...rs/vite-cloudflare-template/tsconfig.json → ...oudflare-dev-proxy-template/tsconfig.json
View file
Open in desktop
File renamed without changes.
0 ...s/vite-cloudflare-template/vite.config.ts → ...udflare-dev-proxy-template/vite.config.ts
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion integration/helpers/vite-6-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"@types/react-dom": "^18.2.7",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^6.0.0",
"vite": "^6.1.0",
"vite-env-only": "^3.0.1",
"vite-tsconfig-paths": "^4.2.1"
},
Expand Down
6 changes: 6 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules

/.cache
/build
.env
.react-router
43 changes: 43 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/app/entry.server.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import type { AppLoadContext, EntryContext } from "react-router";
import { ServerRouter } from "react-router";
import { isbot } from "isbot";
import { renderToReadableStream } from "react-dom/server";

export default async function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
routerContext: EntryContext,
_loadContext: AppLoadContext
) {
let shellRendered = false;
const userAgent = request.headers.get("user-agent");

const body = await renderToReadableStream(
<ServerRouter context={routerContext} url={request.url} />,
{
onError(error: unknown) {
responseStatusCode = 500;
// Log streaming rendering errors from inside the shell. Don't log
// errors encountered during initial shell rendering since they'll
// reject and get logged in handleDocumentRequest.
if (shellRendered) {
console.error(error);
}
},
}
);
shellRendered = true;

// Ensure requests from bots and SPA Mode renders wait for all content to load before responding
// https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
await body.allReady;
}

responseHeaders.set("Content-Type", "text/html");
return new Response(body, {
headers: responseHeaders,
status: responseStatusCode,
});
}
19 changes: 19 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";

export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
4 changes: 4 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/app/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";

export default flatRoutes() satisfies RouteConfig;
16 changes: 16 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/app/routes/_index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { MetaFunction } from "react-router";

export const meta: MetaFunction = () => {
return [
{ title: "New React Router App" },
{ name: "description", content: "Welcome to React Router!" },
];
};

export default function Index() {
return (
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
<h1>Welcome to React Router</h1>
</div>
);
}
2 changes: 2 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// <reference types="@react-router/node" />
/// <reference types="vite/client" />
37 changes: 37 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"name": "integration-vite-plugin-cloudflare-template",
"version": "0.0.0",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"dev": "react-router dev",
"build": "react-router build",
"typecheck": "react-router typegen && tsc"
},
"dependencies": {
"express": "^4.19.2",
"isbot": "^5.1.11",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "workspace:*",
"serialize-javascript": "^6.0.1"
},
"devDependencies": {
"@cloudflare/vite-plugin": "^0.1.1",
"@cloudflare/workers-types": "^4.20250214.0",
"@react-router/dev": "workspace:*",
"@react-router/fs-routes": "workspace:*",
"@types/node": "^20.0.0",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^6.1.0",
"vite-tsconfig-paths": "^4.2.1",
"wrangler": "^3.109.2"
},
"engines": {
"node": ">=20.0.0"
}
}
Binary file added integration/helpers/vite-plugin-cloudflare-template/public/favicon.ico
View file
Open in desktop
Binary file not shown.
7 changes: 7 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/react-router.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { Config } from "@react-router/dev/config";

export default {
future: {
unstable_viteEnvironmentApi: true,
},
} satisfies Config;
28 changes: 28 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/tsconfig.cloudflare.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"extends": "./tsconfig.json",
"include": [
".react-router/types/**/*",
"app/**/*",
"app/**/.server/**/*",
"app/**/.client/**/*",
"workers/**/*",
"worker-configuration.d.ts"
],
"compilerOptions": {
"composite": true,
"strict": true,
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["@cloudflare/workers-types", "vite/client"],
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"baseUrl": ".",
"rootDirs": [".", "./.react-router/types"],
"paths": {
"~/*": ["./app/*"]
},
"esModuleInterop": true,
"resolveJsonModule": true
}
}
14 changes: 14 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.node.json" },
{ "path": "./tsconfig.cloudflare.json" }
],
"compilerOptions": {
"checkJs": true,
"verbatimModuleSyntax": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true
}
}
13 changes: 13 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/tsconfig.node.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": "./tsconfig.json",
"include": ["react-router.config.ts", "vite.config.ts"],
"compilerOptions": {
"composite": true,
"strict": true,
"types": ["node"],
"lib": ["ES2022"],
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "bundler"
}
}
12 changes: 12 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
plugins: [
cloudflare({ viteEnvironment: { name: "ssr" } }),
reactRouter(),
tsconfigPaths(),
],
});
5 changes: 5 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/worker-configuration.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Generated by Wrangler by running `wrangler types`

interface Env {
VALUE_FROM_CLOUDFLARE: "Hello from Cloudflare";
}
28 changes: 28 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/workers/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { createRequestHandler } from "react-router";

declare global {
interface CloudflareEnvironment extends Env {}
}

declare module "react-router" {
export interface AppLoadContext {
cloudflare: {
env: CloudflareEnvironment;
ctx: ExecutionContext;
};
}
}

const requestHandler = createRequestHandler(
// @ts-expect-error - virtual module provided by React Router at build time
() => import("virtual:react-router/server-build"),
import.meta.env.MODE
);

export default {
async fetch(request, env, ctx) {
return requestHandler(request, {
cloudflare: { env, ctx },
});
},
} satisfies ExportedHandler<CloudflareEnvironment>;
8 changes: 8 additions & 0 deletions integration/helpers/vite-plugin-cloudflare-template/wrangler.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
name = "react-router-app"
compatibility_date = "2024-11-18"
main = "./workers/app.ts"

assets = {}

[vars]
VALUE_FROM_CLOUDFLARE = "Hello from Cloudflare"
5 changes: 3 additions & 2 deletions integration/helpers/vite.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,8 @@ export const EXPRESS_SERVER = (args: {
export type TemplateName =
| "vite-5-template"
| "vite-6-template"
| "vite-cloudflare-template";
| "cloudflare-dev-proxy-template"
| "vite-plugin-cloudflare-template";

export const viteMajorTemplates = [
{ templateName: "vite-5-template", templateDisplayName: "Vite 5" },
Expand Down Expand Up @@ -366,7 +367,7 @@ export const test = base.extend<Fixtures>({
let port = await getPort();
let cwd = await createProject(
await files({ port }),
"vite-cloudflare-template"
"cloudflare-dev-proxy-template"
);
let { status } = build({ cwd });
expect(status).toBe(0);
Expand Down
2 changes: 1 addition & 1 deletion integration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"tailwindcss": "^3.3.0",
"type-fest": "^4.0.0",
"typescript": "^5.1.0",
"vite": "^6.0.0",
"vite": "^6.1.0",
"vite-env-only": "^3.0.1",
"vite-tsconfig-paths": "^4.2.2",
"wait-on": "^7.0.1"
Expand Down
4 changes: 2 additions & 2 deletions integration/vite-cloudflare-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,13 @@ function getFiles({
});
}

test.describe("Cloudflare", () => {
test.describe("Cloudflare Dev Proxy", () => {
[false, true].forEach((viteEnvironmentApi) => {
test.describe(`viteEnvironmentApi enabled: ${viteEnvironmentApi}`, () => {
const files = getFiles({ viteEnvironmentApi });

test("vite dev", async ({ page, dev }) => {
let { port } = await dev(files, "vite-cloudflare-template");
let { port } = await dev(files, "cloudflare-dev-proxy-template");
await workflow({ page, port });
});

Expand Down
Loading
Loading