C3: Set proper compatibility date for web applications (#4190)

cloudflare · Oct 17, 2023 · c2457cb · c2457cb
1 parent 116a45e
commit c2457cb
Show file tree

Hide file tree

Showing 18 changed files with 53 additions and 43 deletions.
diff --git a/.changeset/dry-days-judge.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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[];