test(fullstack): cloudflare plugin (#1177)

Author: hi-ogawa

package.json

@@ -35,7 +35,7 @@
     "vite": "^7.1.5",
     "vite-plugin-inspect": "^11.3.0",
     "vitest": "^3.2.4",
-    "wrangler": "^4.22.0"
+    "wrangler": "^4.41.0"
   },
   "packageManager": "[email protected]+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
   "volta": {

packages/fullstack/e2e/basic.test.ts

@@ -12,6 +12,16 @@ test.describe("build", () => {
   defineTest(f);
 });
 
+test.describe("cloudflare dev", () => {
+  const f = useFixture({ root: "examples/cloudflare", mode: "dev" });
+  defineTest(f);
+});
+
+test.describe("cloudflare build", () => {
+  const f = useFixture({ root: "examples/cloudflare", mode: "build" });
+  defineTest(f);
+});
+
 function defineTest(f: Fixture) {
   test("basic", async ({ page }) => {
     await page.goto(f.url());

packages/fullstack/examples/basic/package.json

@@ -5,14 +5,15 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "preview": "srvx -s ../client dist/ssr/index.js",
-    "cf-dev": "vite dev -c vite.config.cf.ts",
-    "cf-build": "vite build -c vite.config.cf.ts",
-    "cf-preview": "wrangler dev"
+    "preview": "srvx -s ../client dist/ssr/index.js"
   },
   "devDependencies": {
-    "@cloudflare/vite-plugin": "^1.8.0",
     "@hiogawa/vite-plugin-fullstack": "latest",
-    "srvx": "^0.8.7"
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "srvx": "^0.8.7",
+    "vite": "^7.1.5"
   }
 }

packages/fullstack/examples/cloudflare/.gitignore

@@ -0,0 +1,2 @@
+.nitro
+.output

packages/fullstack/examples/cloudflare/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@hiogawa/vite-plugin-fullstack-examples-cloudflare",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "wrangler dev"
+  },
+  "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.13.9",
+    "@hiogawa/vite-plugin-fullstack": "latest",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vite": "^7.1.5",
+    "wrangler": "^4.41.0"
+  }
+}

packages/fullstack/examples/cloudflare/public/favicon.ico

@@ -0,0 +1,41 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: rgb(136, 136, 136);
+}

packages/fullstack/examples/cloudflare/public/vite.svg

@@ -0,0 +1,38 @@
+import "./App.css";
+import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+
+export function App() {
+  return (
+    <main>
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://reactjs.org" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <Card />
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </main>
+  );
+}
+
+function Card() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="card">
+      <button onClick={() => setCount((count) => count + 1)}>
+        count is {count}
+      </button>
+      <p>
+        Edit <code>src/App.tsx</code> and save to test HMR
+      </p>
+    </div>
+  );
+}