From c2457cb484f9e09752403116f137ab1bc40ae322 Mon Sep 17 00:00:00 2001
From: Dario Piotrowicz <dario@cloudflare.com>
Date: Tue, 17 Oct 2023 22:40:49 +0100
Subject: [PATCH] C3: Set proper compatibility date for web applications
 (#4190)

---
 .changeset/dry-days-judge.md                              | 5 +++++
 packages/create-cloudflare/e2e-tests/pages.test.ts        | 2 +-
 .../create-cloudflare/src/frameworks/angular/index.ts     | 8 ++++----
 packages/create-cloudflare/src/frameworks/astro/index.ts  | 6 +++---
 .../create-cloudflare/src/frameworks/docusaurus/index.ts  | 6 +++---
 packages/create-cloudflare/src/frameworks/gatsby/index.ts | 6 +++---
 packages/create-cloudflare/src/frameworks/hono/index.ts   | 2 +-
 packages/create-cloudflare/src/frameworks/next/index.ts   | 7 ++++---
 packages/create-cloudflare/src/frameworks/nuxt/index.ts   | 6 +++---
 packages/create-cloudflare/src/frameworks/qwik/index.ts   | 6 +++---
 packages/create-cloudflare/src/frameworks/react/index.ts  | 6 +++---
 packages/create-cloudflare/src/frameworks/remix/index.ts  | 4 ++--
 packages/create-cloudflare/src/frameworks/solid/index.ts  | 6 +++---
 packages/create-cloudflare/src/frameworks/svelte/index.ts | 6 +++---
 packages/create-cloudflare/src/frameworks/vue/index.ts    | 6 +++---
 packages/create-cloudflare/src/helpers/files.ts           | 7 ++++---
 packages/create-cloudflare/src/pages.ts                   | 3 ++-
 packages/create-cloudflare/src/types.ts                   | 4 +++-
 18 files changed, 53 insertions(+), 43 deletions(-)
 create mode 100644 .changeset/dry-days-judge.md

diff --git a/.changeset/dry-days-judge.md b/.changeset/dry-days-judge.md
new file mode 100644
index 000000000000..68dbef4029c3
--- /dev/null
+++ b/.changeset/dry-days-judge.md
@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+Set the proper compatibility date for web applications (instead of using the current date)
diff --git a/packages/create-cloudflare/e2e-tests/pages.test.ts b/packages/create-cloudflare/e2e-tests/pages.test.ts
index ea2a3502fbea..669a2be183bc 100644
--- a/packages/create-cloudflare/e2e-tests/pages.test.ts
+++ b/packages/create-cloudflare/e2e-tests/pages.test.ts
@@ -195,7 +195,7 @@ describe.concurrent(`E2E: Web frameworks`, () => {
 		const frameworkConfig = FrameworkMap[framework];
 
 		const frameworkTargetPackageScripts = {
-			...frameworkConfig.packageScripts,
+			...(await frameworkConfig.getPackageScripts()),
 		} as Record<string, string>;
 
 		if (overrides && overrides.packageScripts) {
diff --git a/packages/create-cloudflare/src/frameworks/angular/index.ts b/packages/create-cloudflare/src/frameworks/angular/index.ts
index 4500236f5a65..491eaed4fb65 100644
--- a/packages/create-cloudflare/src/frameworks/angular/index.ts
+++ b/packages/create-cloudflare/src/frameworks/angular/index.ts
@@ -7,7 +7,7 @@ import {
 	runCommand,
 	runFrameworkGenerator,
 } from "helpers/command";
-import { readFile, readJSON, writeFile } from "helpers/files";
+import { compatDateFlag, readFile, readJSON, writeFile } from "helpers/files";
 import { spinner } from "helpers/interactive";
 import { detectPackageManager } from "helpers/packages";
 import { getFrameworkCli } from "../index";
@@ -41,13 +41,13 @@ const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "Angular",
-	packageScripts: {
+	getPackageScripts: async () => ({
 		process:
 			"node ./tools/copy-worker-files.mjs && node ./tools/copy-client-files.mjs && node ./tools/bundle.mjs",
 		"pages:build": `${npm} run build:ssr && ${npm} run process`,
-		start: `${npm} run pages:build && wrangler pages dev dist/cloudflare --compatibility-date=2021-09-20 --experimental-local`,
+		start: `${npm} run pages:build && wrangler pages dev dist/cloudflare ${await compatDateFlag()} --experimental-local`,
 		deploy: `${npm} run pages:build && wrangler pages deploy dist/cloudflare`,
-	},
+	}),
 	deployCommand: "deploy",
 	devCommand: "start",
 	testFlags: ["--routing", "--style", "sass"],
diff --git a/packages/create-cloudflare/src/frameworks/astro/index.ts b/packages/create-cloudflare/src/frameworks/astro/index.ts
index ad08126cffc9..0b0c0e660c8c 100644
--- a/packages/create-cloudflare/src/frameworks/astro/index.ts
+++ b/packages/create-cloudflare/src/frameworks/astro/index.ts
@@ -39,10 +39,10 @@ const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "Astro",
-	packageScripts: {
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} -- astro dev`,
+	getPackageScripts: async () => ({
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} -- astro dev`,
 		"pages:deploy": `astro build && wrangler pages deploy ./dist`,
-	},
+	}),
 	testFlags: [
 		"--skip-houston",
 		"--no-install",
diff --git a/packages/create-cloudflare/src/frameworks/docusaurus/index.ts b/packages/create-cloudflare/src/frameworks/docusaurus/index.ts
index 8ccc92ded8cf..fc1da9741f32 100644
--- a/packages/create-cloudflare/src/frameworks/docusaurus/index.ts
+++ b/packages/create-cloudflare/src/frameworks/docusaurus/index.ts
@@ -15,10 +15,10 @@ const generate = async (ctx: PagesGeneratorContext) => {
 const config: FrameworkConfig = {
 	generate,
 	displayName: "Docusaurus",
-	packageScripts: {
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} --proxy 3000 -- ${npm} run start`,
+	getPackageScripts: async () => ({
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 3000 -- ${npm} run start`,
 		"pages:deploy": `NODE_VERSION=16 ${npm} run build && wrangler pages deploy ./build`,
-	},
+	}),
 	testFlags: [`--package-manager`, npm],
 };
 export default config;
diff --git a/packages/create-cloudflare/src/frameworks/gatsby/index.ts b/packages/create-cloudflare/src/frameworks/gatsby/index.ts
index 3370ea0f4632..1b43c833191e 100644
--- a/packages/create-cloudflare/src/frameworks/gatsby/index.ts
+++ b/packages/create-cloudflare/src/frameworks/gatsby/index.ts
@@ -37,9 +37,9 @@ const generate = async (ctx: PagesGeneratorContext) => {
 const config: FrameworkConfig = {
 	generate,
 	displayName: "Gatsby",
-	packageScripts: {
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} --proxy 8000 -- ${npm} run develop`,
+	getPackageScripts: async () => ({
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 8000 -- ${npm} run develop`,
 		"pages:deploy": `${npm} run build && wrangler pages deploy ./public`,
-	},
+	}),
 };
 export default config;
diff --git a/packages/create-cloudflare/src/frameworks/hono/index.ts b/packages/create-cloudflare/src/frameworks/hono/index.ts
index 7f3bb0e0efe1..e4707095b186 100644
--- a/packages/create-cloudflare/src/frameworks/hono/index.ts
+++ b/packages/create-cloudflare/src/frameworks/hono/index.ts
@@ -20,7 +20,7 @@ const generate = async (ctx: PagesGeneratorContext) => {
 const config: FrameworkConfig = {
 	generate,
 	displayName: "Hono",
-	packageScripts: {},
+	getPackageScripts: async () => ({}),
 	deployCommand: "deploy",
 	devCommand: "dev",
 	type: "workers",
diff --git a/packages/create-cloudflare/src/frameworks/next/index.ts b/packages/create-cloudflare/src/frameworks/next/index.ts
index 5b91c316be62..ca56f7231fbe 100644
--- a/packages/create-cloudflare/src/frameworks/next/index.ts
+++ b/packages/create-cloudflare/src/frameworks/next/index.ts
@@ -4,6 +4,7 @@ import { updateStatus, warn } from "helpers/cli";
 import { brandColor, dim } from "helpers/colors";
 import { installPackages, runFrameworkGenerator } from "helpers/command";
 import {
+	compatDateFlag,
 	probePaths,
 	readJSON,
 	usesEslint,
@@ -140,12 +141,12 @@ const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "Next",
-	packageScripts: {
+	getPackageScripts: async () => ({
 		"pages:build": `${dlx} @cloudflare/next-on-pages@1`,
 		"pages:deploy": `${npm} run pages:build && wrangler pages deploy .vercel/output/static`,
 		"pages:watch": `${npx} @cloudflare/next-on-pages@1 --watch`,
-		"pages:dev": `${npx} wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat`,
-	},
+		"pages:dev": `${npx} wrangler pages dev .vercel/output/static ${await compatDateFlag()} --compatibility-flag=nodejs_compat`,
+	}),
 	testFlags: [
 		"--typescript",
 		"--no-install",
diff --git a/packages/create-cloudflare/src/frameworks/nuxt/index.ts b/packages/create-cloudflare/src/frameworks/nuxt/index.ts
index 7c5948992d01..396653de6ed4 100644
--- a/packages/create-cloudflare/src/frameworks/nuxt/index.ts
+++ b/packages/create-cloudflare/src/frameworks/nuxt/index.ts
@@ -30,10 +30,10 @@ const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "Nuxt",
-	packageScripts: {
+	getPackageScripts: async () => ({
 		build: (cmd) => `NITRO_PRESET=cloudflare-pages ${cmd}`,
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} --proxy 3000 -- ${npm} run dev`,
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 3000 -- ${npm} run dev`,
 		"pages:deploy": `${npm} run build && wrangler pages deploy ./dist`,
-	},
+	}),
 };
 export default config;
diff --git a/packages/create-cloudflare/src/frameworks/qwik/index.ts b/packages/create-cloudflare/src/frameworks/qwik/index.ts
index c66bc9f7bad7..1eed56af0648 100644
--- a/packages/create-cloudflare/src/frameworks/qwik/index.ts
+++ b/packages/create-cloudflare/src/frameworks/qwik/index.ts
@@ -30,9 +30,9 @@ const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "Qwik",
-	packageScripts: {
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} -- ${npm} run dev`,
+	getPackageScripts: async () => ({
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} -- ${npm} run dev`,
 		"pages:deploy": `${npm} run build && wrangler pages deploy ./dist`,
-	},
+	}),
 };
 export default config;
diff --git a/packages/create-cloudflare/src/frameworks/react/index.ts b/packages/create-cloudflare/src/frameworks/react/index.ts
index dc50848f6cda..231b58d6fc02 100644
--- a/packages/create-cloudflare/src/frameworks/react/index.ts
+++ b/packages/create-cloudflare/src/frameworks/react/index.ts
@@ -23,9 +23,9 @@ const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "React",
-	packageScripts: {
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} --port 3000 -- ${npm} start`,
+	getPackageScripts: async () => ({
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} --port 3000 -- ${npm} start`,
 		"pages:deploy": `${npm} run build && wrangler pages deploy ./build`,
-	},
+	}),
 };
 export default config;
diff --git a/packages/create-cloudflare/src/frameworks/remix/index.ts b/packages/create-cloudflare/src/frameworks/remix/index.ts
index 926edfdd4051..30c6eaab2424 100644
--- a/packages/create-cloudflare/src/frameworks/remix/index.ts
+++ b/packages/create-cloudflare/src/frameworks/remix/index.ts
@@ -20,9 +20,9 @@ const generate = async (ctx: PagesGeneratorContext) => {
 const config: FrameworkConfig = {
 	generate,
 	displayName: "Remix",
-	packageScripts: {
+	getPackageScripts: async () => ({
 		"pages:deploy": `${npm} run build && wrangler pages deploy ./public`,
-	},
+	}),
 	devCommand: "dev",
 	testFlags: ["--typescript", "--no-install", "--no-git-init"],
 };
diff --git a/packages/create-cloudflare/src/frameworks/solid/index.ts b/packages/create-cloudflare/src/frameworks/solid/index.ts
index 9d09885cbbbd..710b41809a0e 100644
--- a/packages/create-cloudflare/src/frameworks/solid/index.ts
+++ b/packages/create-cloudflare/src/frameworks/solid/index.ts
@@ -42,9 +42,9 @@ const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "Solid",
-	packageScripts: {
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} --proxy 3000 -- ${npm} run dev`,
+	getPackageScripts: async () => ({
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 3000 -- ${npm} run dev`,
 		"pages:deploy": `${npm} run build && wrangler pages deploy ./dist/public`,
-	},
+	}),
 };
 export default config;
diff --git a/packages/create-cloudflare/src/frameworks/svelte/index.ts b/packages/create-cloudflare/src/frameworks/svelte/index.ts
index 20fa9df71b3d..0744f158a82d 100644
--- a/packages/create-cloudflare/src/frameworks/svelte/index.ts
+++ b/packages/create-cloudflare/src/frameworks/svelte/index.ts
@@ -71,9 +71,9 @@ const config: FrameworkConfig = {
 	generate,
 	configure,
 	displayName: "Svelte",
-	packageScripts: {
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} --proxy 5173 -- ${npm} run dev`,
+	getPackageScripts: async () => ({
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 5173 -- ${npm} run dev`,
 		"pages:deploy": `${npm} run build && wrangler pages deploy .svelte-kit/cloudflare`,
-	},
+	}),
 };
 export default config;
diff --git a/packages/create-cloudflare/src/frameworks/vue/index.ts b/packages/create-cloudflare/src/frameworks/vue/index.ts
index adbd4b6aeada..8af2edc6f9b0 100644
--- a/packages/create-cloudflare/src/frameworks/vue/index.ts
+++ b/packages/create-cloudflare/src/frameworks/vue/index.ts
@@ -14,10 +14,10 @@ const generate = async (ctx: PagesGeneratorContext) => {
 const config: FrameworkConfig = {
 	generate,
 	displayName: "Vue",
-	packageScripts: {
-		"pages:dev": `wrangler pages dev ${compatDateFlag()} --proxy 5173 -- ${npm} run dev`,
+	getPackageScripts: async () => ({
+		"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 5173 -- ${npm} run dev`,
 		"pages:deploy": `${npm} run build && wrangler pages deploy ./dist`,
-	},
+	}),
 	testFlags: ["--ts"],
 };
 export default config;
diff --git a/packages/create-cloudflare/src/helpers/files.ts b/packages/create-cloudflare/src/helpers/files.ts
index 84f6f4fcc879..d0ccb0ce3775 100644
--- a/packages/create-cloudflare/src/helpers/files.ts
+++ b/packages/create-cloudflare/src/helpers/files.ts
@@ -1,5 +1,6 @@
 import fs, { existsSync } from "fs";
 import { crash } from "./cli";
+import { getWorkerdCompatibilityDate } from "./command";
 import type { PagesGeneratorContext } from "types";
 
 export const writeFile = (path: string, content: string) => {
@@ -102,7 +103,7 @@ export const usesEslint = (ctx: PagesGeneratorContext): EslintUsageInfo => {
 };
 
 // Generate a compatibility date flag
-export const compatDateFlag = () => {
-	const date = new Date();
-	return `--compatibility-date=${date.toISOString().slice(0, 10)}`;
+export const compatDateFlag = async () => {
+	const workerdCompatDate = await getWorkerdCompatibilityDate();
+	return `--compatibility-date=${workerdCompatDate}`;
 };
diff --git a/packages/create-cloudflare/src/pages.ts b/packages/create-cloudflare/src/pages.ts
index 8859def68da2..0f9a7ccb2e72 100644
--- a/packages/create-cloudflare/src/pages.ts
+++ b/packages/create-cloudflare/src/pages.ts
@@ -111,7 +111,8 @@ const updatePackageScripts = async (ctx: PagesGeneratorContext) => {
 	// Install wrangler so that the dev/deploy commands work
 	await installWrangler();
 
-	const { packageScripts } = ctx.framework?.config ?? {};
+	const { getPackageScripts } = ctx.framework?.config ?? {};
+	const packageScripts = getPackageScripts ? await getPackageScripts() : {};
 	if (packageScripts) {
 		const s = spinner();
 
diff --git a/packages/create-cloudflare/src/types.ts b/packages/create-cloudflare/src/types.ts
index c716443e4fe9..73a8fe4159bf 100644
--- a/packages/create-cloudflare/src/types.ts
+++ b/packages/create-cloudflare/src/types.ts
@@ -47,7 +47,9 @@ export type FrameworkConfig = {
 	generate: (ctx: PagesGeneratorContext) => Promise<void>;
 	configure?: (ctx: PagesGeneratorContext) => Promise<void>;
 	displayName: string;
-	packageScripts: Record<string, string | UpdaterPackageScript>;
+	getPackageScripts: () => Promise<
+		Record<string, string | UpdaterPackageScript>
+	>;
 	deployCommand?: string;
 	devCommand?: string;
 	testFlags?: string[];