[C3] Bump create-vike from 0.0.599 to 0.0.616 in /packages/create-cloudflare/src/frameworks (#13438)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Wrangler automated PR updater <wrangler@cloudflare.com>
Co-authored-by: Pete Bacon Darwin <pbacondarwin@cloudflare.com>

Author: 3 people

.changeset/c3-frameworks-update-13438.md

@@ -0,0 +1,11 @@
+---
+"create-cloudflare": patch
+---
+
+Update dependencies of "create-cloudflare"
+
+The following dependency versions have been updated:
+
+| Dependency  | From    | To      |
+| ----------- | ------- | ------- |
+| create-vike | 0.0.599 | 0.0.616 |

.changeset/fix-vike-variable-export.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+fix: handle Vike config files that use a variable-referenced default export
+
+Newer versions of `create-vike` (0.0.616+) generate `pages/+config.ts` files using `const config: Config = { ... }; export default config;` instead of the previous `export default { ... } satisfies Config;`. The Wrangler autoconfig AST transformation now resolves `Identifier` exports to their variable declarations, supporting both old and new Vike config file formats.

fixtures/workers-with-assets-spa/tests/index.test.ts

@@ -43,7 +43,10 @@ describe("Workers + Assets + SPA", () => {
 		await page.goto("/");
 		if (process.platform === "darwin") {
 			// different platforms render the page differently (fonts?)
-			expect(await page.screenshot()).toMatchImageSnapshot();
+			expect(await page.screenshot()).toMatchImageSnapshot({
+				failureThreshold: 0.02,
+				failureThresholdType: "percent",
+			});
 		}
 
 		const mathResultLocator = page.getByText("1 + 1 = 2");

packages/create-cloudflare/src/frameworks/package.json

@@ -12,7 +12,7 @@
 		"create-react-router": "7.14.0",
 		"create-rwsdk": "3.1.3",
 		"create-solid": "0.7.0",
-		"create-vike": "0.0.599",
+		"create-vike": "0.0.616",
 		"create-vite": "8.3.0",
 		"create-vue": "3.22.2",
 		"create-waku": "0.12.5-1.0.0-alpha.6-0",

packages/wrangler/src/__tests__/autoconfig/frameworks/vike.test.ts

@@ -0,0 +1,322 @@
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import * as cliPackages from "@cloudflare/cli/packages";
+import { beforeEach, describe, it, vi } from "vitest";
+import { Vike } from "../../../autoconfig/frameworks/vike";
+import { NpmPackageManager } from "../../../package-manager";
+import { runInTempDir } from "../../helpers/run-in-tmp";
+
+vi.mock("../../../autoconfig/frameworks/utils/packages", () => ({
+	isPackageInstalled: () => false,
+}));
+
+vi.mock("../../../autoconfig/frameworks/utils/vite-plugin", () => ({
+	installCloudflareVitePlugin: async () => {},
+}));
+
+function getBaseOptions() {
+	return {
+		projectPath: process.cwd(),
+		workerName: "my-vike-app",
+		outputDir: "",
+		dryRun: false,
+		packageManager: NpmPackageManager,
+		isWorkspaceRoot: false,
+	};
+}
+
+describe("Vike framework configure()", () => {
+	runInTempDir();
+
+	beforeEach(() => {
+		vi.spyOn(cliPackages, "installPackages").mockImplementation(async () => {});
+	});
+
+	describe("config file transformation", () => {
+		it("handles the old format: `export default { ... } satisfies Config`", async ({
+			expect,
+		}) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import type { Config } from "vike/types";
+import vikeReact from "vike-react/config";
+
+// Default config (can be overridden by pages)
+// https://vike.dev/config
+
+export default {
+  // https://vike.dev/head-tags
+  title: "My Vike App",
+  description: "Demo showcasing Vike",
+
+  extends: [vikeReact],
+} satisfies Config;
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+			expect(result).toContain('import vikePhoton from "vike-photon/config";');
+			expect(result).toContain("extends: [vikeReact, vikePhoton]");
+		});
+
+		it("handles the new format: `const config: Config = { ... }; export default config;`", async ({
+			expect,
+		}) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import type { Config } from "vike/types";
+import vikeReact from "vike-react/config";
+
+// Default config (can be overridden by pages)
+// https://vike.dev/config
+
+const config: Config = {
+  // https://vike.dev/head-tags
+  title: "My Vike App",
+  description: "Demo showcasing Vike",
+
+  extends: [vikeReact],
+};
+
+export default config;
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+			expect(result).toContain('import vikePhoton from "vike-photon/config";');
+			expect(result).toContain("extends: [vikeReact, vikePhoton]");
+		});
+
+		it("handles plain format: `export default { ... }`", async ({ expect }) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import vikeReact from "vike-react/config";
+
+export default {
+  title: "My Vike App",
+  extends: [vikeReact],
+};
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+			expect(result).toContain('import vikePhoton from "vike-photon/config";');
+			expect(result).toContain("extends: [vikeReact, vikePhoton]");
+		});
+
+		it("handles `export default { ... } as Config` format", async ({
+			expect,
+		}) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import type { Config } from "vike/types";
+import vikeReact from "vike-react/config";
+
+export default {
+  title: "My Vike App",
+  extends: [vikeReact],
+} as Config;
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+			expect(result).toContain('import vikePhoton from "vike-photon/config";');
+			expect(result).toContain("extends: [vikeReact, vikePhoton]");
+		});
+
+		it("creates extends array if not present", async ({ expect }) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import vikeReact from "vike-react/config";
+
+export default {
+  title: "My Vike App",
+};
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+			expect(result).toContain('import vikePhoton from "vike-photon/config";');
+			expect(result).toContain("extends: [vikePhoton]");
+		});
+
+		it("creates extends array on variable-referenced config if not present", async ({
+			expect,
+		}) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import type { Config } from "vike/types";
+
+const config: Config = {
+  title: "My Vike App",
+};
+
+export default config;
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+			expect(result).toContain('import vikePhoton from "vike-photon/config";');
+			expect(result).toContain("extends: [vikePhoton]");
+		});
+
+		it("does not duplicate import or extends entry on repeated calls", async ({
+			expect,
+		}) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import vikeReact from "vike-react/config";
+import vikePhoton from "vike-photon/config";
+
+export default {
+  title: "My Vike App",
+  extends: [vikeReact, vikePhoton],
+};
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+
+			const importCount = (
+				result.match(/import vikePhoton from "vike-photon\/config"/g) || []
+			).length;
+			expect(importCount).toBe(1);
+
+			// Verify the extends array wasn't duplicated either
+			expect(result).toContain("extends: [vikeReact, vikePhoton]");
+		});
+
+		it("does not duplicate extends entry when vike-photon is imported under a different name", async ({
+			expect,
+		}) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import vikeReact from "vike-react/config";
+import photon from "vike-photon/config";
+
+export default {
+  title: "My Vike App",
+  extends: [vikeReact, photon],
+};
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+
+			// Should not add a second import
+			const importCount = (result.match(/from "vike-photon\/config"/g) || [])
+				.length;
+			expect(importCount).toBe(1);
+
+			// Should not duplicate the extends entry under any name
+			expect(result).toContain("extends: [vikeReact, photon]");
+			expect(result).not.toContain("vikePhoton");
+		});
+
+		it("uses .js config file as fallback", async ({ expect }) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.js"),
+				`import vikeReact from "vike-react/config";
+
+export default {
+  title: "My Vike App",
+  extends: [vikeReact],
+};
+`
+			);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure(getBaseOptions());
+
+			const result = await readFile(resolve("pages/+config.js"), "utf8");
+			expect(result).toContain('import vikePhoton from "vike-photon/config";');
+			expect(result).toContain("extends: [vikeReact, vikePhoton]");
+		});
+	});
+
+	describe("configure() return value", () => {
+		beforeEach(async () => {
+			await mkdir(resolve("pages"), { recursive: true });
+			await writeFile(
+				resolve("pages/+config.ts"),
+				`import vikeReact from "vike-react/config";
+
+export default {
+  extends: [vikeReact],
+};
+`
+			);
+		});
+
+		it("returns correct wranglerConfig", async ({ expect }) => {
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			const result = await framework.configure(getBaseOptions());
+
+			expect(result.wranglerConfig).toEqual({
+				main: "virtual:photon:cloudflare:server-entry",
+			});
+		});
+
+		it("returns correct packageJsonScriptsOverrides", async ({ expect }) => {
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			const result = await framework.configure(getBaseOptions());
+
+			expect(result.packageJsonScriptsOverrides).toEqual({
+				preview: "vike build && vike preview",
+				deploy: "vike build && wrangler deploy",
+			});
+		});
+	});
+
+	describe("dryRun mode", () => {
+		it("does not modify config file in dryRun mode", async ({ expect }) => {
+			await mkdir(resolve("pages"), { recursive: true });
+			const originalContent = `import vikeReact from "vike-react/config";
+
+export default {
+  extends: [vikeReact],
+};
+`;
+			await writeFile(resolve("pages/+config.ts"), originalContent);
+
+			const framework = new Vike({ id: "vike", name: "Vike" });
+			await framework.configure({ ...getBaseOptions(), dryRun: true });
+
+			const result = await readFile(resolve("pages/+config.ts"), "utf8");
+			expect(result).toBe(originalContent);
+		});
+	});
+});