create-cloudflare 0.0.0-ea3e16a89 → 0.0.0-ea71df3d4

package/templates/next/c3.ts

@@ -1,220 +1,9 @@
-import { join } from "path";
-import { updateStatus, warn } from "@cloudflare/cli";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
-import { runFrameworkGenerator } from "frameworks/index";
-import {
-	copyFile,
-	probePaths,
-	readFile,
-	readJSON,
-	usesEslint,
-	usesTypescript,
-	writeFile,
-	writeJSON,
-} from "helpers/files";
-import { detectPackageManager } from "helpers/packageManagers";
-import { installPackages } from "helpers/packages";
-import { getTemplatePath } from "../../src/templates";
-import type { TemplateConfig } from "../../src/templates";
-import type { C3Context } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const { npm, npx } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	const projectName = ctx.project.name;
-
-	await runFrameworkGenerator(ctx, [projectName]);
-
-	const wranglerConfig = readFile(join(getTemplatePath(ctx), "wrangler.json"));
-	writeFile(join(ctx.project.path, "wrangler.json"), wranglerConfig);
-	updateStatus("Created wrangler.json file");
-};
-
-const updateNextConfig = (usesTs: boolean) => {
-	const s = spinner();
-
-	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
-	s.start(`Updating \`${configFile}\``);
-
-	const configContent = readFile(configFile);
-
-	const updatedConfigFile =
-		`import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
-
-		// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
-		// (when running the application with \`next dev\`), for more information see:
-		// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
-		if (process.env.NODE_ENV === 'development') {
-		  await setupDevPlatform();
-		}
-
-		`.replace(/\n\t*/g, "\n") + configContent;
-
-	writeFile(configFile, updatedConfigFile);
-
-	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
-};
-
-const configure = async (ctx: C3Context) => {
-	const projectPath = ctx.project.path;
-
-	// Add a compatible function handler example
-	const path = probePaths([
-		`${projectPath}/pages/api`,
-		`${projectPath}/src/pages/api`,
-		`${projectPath}/src/app/api`,
-		`${projectPath}/app/api`,
-		`${projectPath}/src/app`,
-		`${projectPath}/app`,
-	]);
-
-	if (!path) {
-		throw new Error("Could not find the `/api` or `/app` directory");
-	}
-
-	const usesTs = usesTypescript(ctx);
-
-	if (usesTs) {
-		copyFile(
-			join(getTemplatePath(ctx), "env.d.ts"),
-			join(projectPath, "env.d.ts"),
-		);
-		updateStatus("Created an env.d.ts file");
-	}
-
-	const installEslintPlugin = await shouldInstallNextOnPagesEslintPlugin(ctx);
-
-	if (installEslintPlugin) {
-		await writeEslintrc(ctx);
-	}
-
-	updateNextConfig(usesTs);
-
-	copyFile(
-		join(getTemplatePath(ctx), "README.md"),
-		join(projectPath, "README.md"),
-	);
-	updateStatus("Updated the README file");
-
-	await addDevDependencies(installEslintPlugin);
-};
-
-export const shouldInstallNextOnPagesEslintPlugin = async (
-	ctx: C3Context,
-): Promise<boolean> => {
-	const eslintUsage = usesEslint(ctx);
-
-	if (!eslintUsage.used) {
-		return false;
-	}
-
-	if (eslintUsage.configType !== ".eslintrc.json") {
-		warn(
-			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`,
-		);
-		return false;
-	}
-
-	return await inputPrompt({
-		type: "confirm",
-		question: "Do you want to use the next-on-pages eslint-plugin?",
-		label: "eslint-plugin",
-		defaultValue: true,
-	});
-};
-
-export const writeEslintrc = async (ctx: C3Context): Promise<void> => {
-	const eslintConfig = readJSON(`${ctx.project.path}/.eslintrc.json`);
-
-	eslintConfig.plugins ??= [];
-	eslintConfig.plugins.push("eslint-plugin-next-on-pages");
-
-	if (typeof eslintConfig.extends === "string") {
-		eslintConfig.extends = [eslintConfig.extends];
-	}
-	eslintConfig.extends ??= [];
-	eslintConfig.extends.push("plugin:eslint-plugin-next-on-pages/recommended");
-
-	writeJSON(`${ctx.project.path}/.eslintrc.json`, eslintConfig);
-};
-
-const addDevDependencies = async (installEslintPlugin: boolean) => {
-	const packages = [
-		"@cloudflare/next-on-pages@1",
-		"@cloudflare/workers-types",
-		"vercel",
-		...(installEslintPlugin ? ["eslint-plugin-next-on-pages"] : []),
-	];
-	await installPackages(packages, {
-		dev: true,
-		startText: "Adding the Cloudflare Pages adapter",
-		doneText: `${brandColor(`installed`)} ${dim(packages.join(", "))}`,
-	});
-};
-
-export default {
-	configVersion: 1,
-	id: "next",
-	frameworkCli: "create-next-app",
-	platform: "pages",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "Next.js",
-	generate,
-	configure,
-	copyFiles: {
-		async selectVariant(ctx) {
-			const isApp = probePaths([
-				`${ctx.project.path}/src/app`,
-				`${ctx.project.path}/app`,
-			]);
-
-			const isTypescript = usesTypescript(ctx);
-
-			const dir = isApp ? "app" : "pages";
-			return `${dir}/${isTypescript ? "ts" : "js"}`;
-		},
-		destinationDir(ctx) {
-			const srcPath = probePaths([`${ctx.project.path}/src`]);
-			return srcPath ? "./src" : "./";
-		},
-		variants: {
-			"app/ts": {
-				path: "./app/ts",
-			},
-			"app/js": {
-				path: "./app/js",
-			},
-			"pages/ts": {
-				path: "./pages/ts",
-			},
-			"pages/js": {
-				path: "./pages/js",
-			},
-		},
-	},
-	transformPackageJson: async (_, ctx) => {
-		const isNpm = npm === "npm";
-		const isBun = npm === "bun";
-		const isNpmOrBun = isNpm || isBun;
-		const nextOnPagesScope = isNpmOrBun ? "@cloudflare/" : "";
-		const nextOnPagesCommand = `${nextOnPagesScope}next-on-pages`;
-		const pmCommand = isNpmOrBun ? npx : npm;
-		const pagesBuildRunCommand = `${
-			isNpm ? "npm run" : isBun ? "bun" : pmCommand
-		} pages:build`;
-		return {
-			scripts: {
-				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
-				preview: `${pagesBuildRunCommand} && wrangler pages dev`,
-				deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
-				...(usesTypescript(ctx) && {
-					"cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
-				}),
-			},
-		};
-	},
-	devScript: "dev",
-	previewScript: "preview",
-	deployScript: "deploy",
-	compatibilityFlags: ["nodejs_compat"],
-} as TemplateConfig;
+	platformVariants: { pages, workers },
+};
+export default config;

package/templates/next/{README.md → pages/README.md}

@@ -47,7 +47,7 @@ In order to enable the example:
   // KV Example:
   ```
   and uncomment the commented lines below it (also uncomment the relevant imports).
-- In the `wrangler.json` file add the following configuration line:
+- In the `wrangler.jsonc` file add the following configuration line:
   ```
   "kv_namespaces": [{ "binding": "MY_KV_NAMESPACE", "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }],
   ```

package/templates/next/pages/c3.ts

@@ -0,0 +1,221 @@
+import { join } from "path";
+import { updateStatus, warn } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import {
+	copyFile,
+	probePaths,
+	readFile,
+	readJSON,
+	usesEslint,
+	usesTypescript,
+	writeFile,
+	writeJSON,
+} from "helpers/files";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
+import { getTemplatePath } from "../../../src/templates";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const { npm, npx } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	const projectName = ctx.project.name;
+
+	await runFrameworkGenerator(ctx, [projectName]);
+
+	const wranglerConfig = readFile(join(getTemplatePath(ctx), "wrangler.jsonc"));
+	writeFile(join(ctx.project.path, "wrangler.jsonc"), wranglerConfig);
+	updateStatus("Created wrangler.jsonc file");
+};
+
+const updateNextConfig = (usesTs: boolean) => {
+	const s = spinner();
+
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
+	s.start(`Updating \`${configFile}\``);
+
+	const configContent = readFile(configFile);
+
+	const updatedConfigFile =
+		`import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+
+		// Here we use the @cloudflare/next-on-pages next-dev module to allow us to
+		// use bindings during local development (when running the application with
+		// \`next dev\`). This function is only necessary during development and
+		// has no impact outside of that. For more information see:
+		// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
+		setupDevPlatform().catch(console.error);
+
+		`.replace(/\n\t*/g, "\n") + configContent;
+
+	writeFile(configFile, updatedConfigFile);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
+};
+
+const configure = async (ctx: C3Context) => {
+	const projectPath = ctx.project.path;
+
+	// Add a compatible function handler example
+	const path = probePaths([
+		`${projectPath}/pages/api`,
+		`${projectPath}/src/pages/api`,
+		`${projectPath}/src/app/api`,
+		`${projectPath}/app/api`,
+		`${projectPath}/src/app`,
+		`${projectPath}/app`,
+	]);
+
+	if (!path) {
+		throw new Error("Could not find the `/api` or `/app` directory");
+	}
+
+	const usesTs = usesTypescript(ctx);
+
+	const installEslintPlugin = await shouldInstallNextOnPagesEslintPlugin(ctx);
+
+	if (installEslintPlugin) {
+		await writeEslintrc(ctx);
+	}
+
+	updateNextConfig(usesTs);
+
+	copyFile(
+		join(getTemplatePath(ctx), "README.md"),
+		join(projectPath, "README.md"),
+	);
+	updateStatus("Updated the README file");
+
+	await addDevDependencies(installEslintPlugin);
+};
+
+export const shouldInstallNextOnPagesEslintPlugin = async (
+	ctx: C3Context,
+): Promise<boolean> => {
+	const eslintUsage = usesEslint(ctx);
+
+	if (!eslintUsage.used) {
+		return false;
+	}
+
+	if (eslintUsage.configType !== ".eslintrc.json") {
+		warn(
+			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`,
+		);
+		return false;
+	}
+
+	return await inputPrompt({
+		type: "confirm",
+		question: "Do you want to use the next-on-pages eslint-plugin?",
+		label: "eslint-plugin",
+		defaultValue: true,
+	});
+};
+
+export const writeEslintrc = async (ctx: C3Context): Promise<void> => {
+	const eslintConfig = readJSON(`${ctx.project.path}/.eslintrc.json`) as {
+		plugins: string[];
+		extends: string | string[];
+	};
+
+	eslintConfig.plugins ??= [];
+	eslintConfig.plugins.push("eslint-plugin-next-on-pages");
+
+	if (typeof eslintConfig.extends === "string") {
+		eslintConfig.extends = [eslintConfig.extends];
+	}
+	eslintConfig.extends ??= [];
+	eslintConfig.extends.push("plugin:eslint-plugin-next-on-pages/recommended");
+
+	writeJSON(`${ctx.project.path}/.eslintrc.json`, eslintConfig);
+};
+
+const addDevDependencies = async (installEslintPlugin: boolean) => {
+	const packages = [
+		"@cloudflare/next-on-pages@1",
+		"vercel",
+		...(installEslintPlugin ? ["eslint-plugin-next-on-pages"] : []),
+	];
+	await installPackages(packages, {
+		dev: true,
+		startText: "Adding the Cloudflare Pages adapter",
+		doneText: `${brandColor(`installed`)} ${dim(packages.join(", "))}`,
+	});
+};
+
+const envInterfaceName = "CloudflareEnv";
+const typesPath = "./env.d.ts";
+
+export default {
+	configVersion: 1,
+	id: "next",
+	frameworkCli: "create-next-app",
+	platform: "pages",
+	hidden: true,
+	displayName: "Next.js",
+	path: "templates/next/pages",
+	generate,
+	configure,
+	copyFiles: {
+		async selectVariant(ctx) {
+			const isApp = probePaths([
+				`${ctx.project.path}/src/app`,
+				`${ctx.project.path}/app`,
+			]);
+
+			const isTypescript = usesTypescript(ctx);
+
+			const dir = isApp ? "app" : "pages";
+			return `${dir}/${isTypescript ? "ts" : "js"}`;
+		},
+		destinationDir(ctx) {
+			const srcPath = probePaths([`${ctx.project.path}/src`]);
+			return srcPath ? "./src" : "./";
+		},
+		variants: {
+			"app/ts": {
+				path: "./app/ts",
+			},
+			"app/js": {
+				path: "./app/js",
+			},
+			"pages/ts": {
+				path: "./pages/ts",
+			},
+			"pages/js": {
+				path: "./pages/js",
+			},
+		},
+	},
+	transformPackageJson: async (_, ctx) => {
+		const isNpm = npm === "npm";
+		const isBun = npm === "bun";
+		const isNpmOrBun = isNpm || isBun;
+		const nextOnPagesScope = isNpmOrBun ? "@cloudflare/" : "";
+		const nextOnPagesCommand = `${nextOnPagesScope}next-on-pages`;
+		const pmCommand = isNpmOrBun ? npx : npm;
+		const pagesBuildRunCommand = `${
+			isNpm ? "npm run" : isBun ? "bun" : pmCommand
+		} pages:build`;
+		return {
+			scripts: {
+				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
+				preview: `${pagesBuildRunCommand} && wrangler pages dev`,
+				deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
+				...(usesTypescript(ctx) && {
+					"cf-typegen": `wrangler types --env-interface ${envInterfaceName} ${typesPath}`,
+				}),
+			},
+		};
+	},
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
+	compatibilityFlags: ["nodejs_compat"],
+	typesPath,
+	envInterfaceName,
+} as TemplateConfig;

package/templates/next/workers/c3.ts

@@ -0,0 +1,71 @@
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { readFile, usesTypescript, writeFile } from "helpers/files";
+import { installPackages } from "helpers/packages";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [ctx.project.name]);
+};
+
+const configure = async (ctx: C3Context) => {
+	await installPackages(["@opennextjs/cloudflare@^1.0.2"], {
+		startText: "Adding the Cloudflare adapter",
+		doneText: `${brandColor(`installed`)} @opennextjs/cloudflare)}`,
+	});
+
+	const usesTs = usesTypescript(ctx);
+
+	updateNextConfig(usesTs);
+};
+
+const updateNextConfig = (usesTs: boolean) => {
+	const s = spinner();
+
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
+	s.start(`Updating \`${configFile}\``);
+
+	const configContent = readFile(configFile);
+
+	const updatedConfigFile =
+		configContent +
+		`
+		// added by create cloudflare to enable calling \`getCloudflareContext()\` in \`next dev\`
+		import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
+		initOpenNextCloudflareForDev();
+		`.replace(/\n\t*/g, "\n");
+
+	writeFile(configFile, updatedConfigFile);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
+};
+
+const envInterfaceName = "CloudflareBindings";
+const typesPath = "./cloudflare-env.d.ts";
+export default {
+	configVersion: 1,
+	id: "next",
+	frameworkCli: "create-next-app",
+	platform: "workers",
+	displayName: "Next.js",
+	path: "templates/next/workers",
+	copyFiles: {
+		path: "./templates",
+	},
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `opennextjs-cloudflare build && opennextjs-cloudflare deploy`,
+			preview: `opennextjs-cloudflare build && opennextjs-cloudflare preview`,
+			"cf-typegen": `wrangler types --env-interface ${envInterfaceName} ${typesPath}`,
+		},
+	}),
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
+	typesPath,
+	envInterfaceName,
+} as TemplateConfig;

package/templates/next/workers/templates/open-next.config.ts

@@ -0,0 +1,9 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+
+export default defineCloudflareConfig({
+  // Uncomment to enable R2 cache,
+  // It should be imported as:
+  // `import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";`
+  // See https://opennext.js.org/cloudflare/caching for more details
+  // incrementalCache: r2IncrementalCache,
+});

package/{templates-experimental/next/templates/wrangler.json → templates/next/workers/templates/wrangler.jsonc}

@@ -1,11 +1,11 @@
 {
   "name": "<app-name>",
   "main": ".open-next/worker.js",
-  "compatibility_date": "2024-09-26",
+  "compatibility_date": "2025-03-01",
   "compatibility_flags": [
-    "nodejs_compat"
+    "nodejs_compat",
+    "global_fetch_strictly_public"
   ],
-  "minify": true,
   "assets": {
     "binding": "ASSETS",
     "directory": ".open-next/assets"

package/templates/nuxt/c3.ts

@@ -1,134 +1,9 @@
-import { logRaw } from "@cloudflare/cli";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { spinner } from "@cloudflare/cli/interactive";
-import { runFrameworkGenerator } from "frameworks/index";
-import { mergeObjectProperties, transformFile } from "helpers/codemod";
-import { getLatestTypesEntrypoint } from "helpers/compatDate";
-import { readFile, writeFile } from "helpers/files";
-import { detectPackageManager } from "helpers/packageManagers";
-import { installPackages } from "helpers/packages";
-import * as recast from "recast";
-import type { TemplateConfig } from "../../src/templates";
-import type { C3Context } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const { npm, name: pm } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	const gitFlag = ctx.args.git ? `--gitInit` : `--no-gitInit`;
-
-	await runFrameworkGenerator(ctx, [
-		"init",
-		ctx.project.name,
-		"--packageManager",
-		npm,
-		gitFlag,
-	]);
-
-	writeFile("./.node-version", "18");
-
-	logRaw(""); // newline
-};
-
-const configure = async (ctx: C3Context) => {
-	const packages = ["nitro-cloudflare-dev"];
-
-	// When using pnpm, explicitly add h3 package so the H3Event type declaration can be updated.
-	// Package managers other than pnpm will hoist the dependency, as will pnpm with `--shamefully-hoist`
-	if (pm === "pnpm") {
-		packages.push("h3");
-	}
-
-	await installPackages(packages, {
-		dev: true,
-		startText: "Installing nitro module `nitro-cloudflare-dev`",
-		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
-	});
-	updateNuxtConfig();
-
-	updateEnvTypes(ctx);
-};
-
-const updateEnvTypes = (ctx: C3Context) => {
-	const filepath = "env.d.ts";
-
-	const s = spinner();
-	s.start(`Updating ${filepath}`);
-
-	let file = readFile(filepath);
-
-	let typesEntrypoint = `@cloudflare/workers-types`;
-	const latestEntrypoint = getLatestTypesEntrypoint(ctx);
-	if (latestEntrypoint) {
-		typesEntrypoint += `/${latestEntrypoint}`;
-	}
-
-	// Replace placeholder with actual types entrypoint
-	file = file.replace("WORKERS_TYPES_ENTRYPOINT", typesEntrypoint);
-	writeFile("env.d.ts", file);
-
-	s.stop(`${brandColor(`updated`)} ${dim(`\`${filepath}\``)}`);
-};
-
-const updateNuxtConfig = () => {
-	const s = spinner();
-
-	const configFile = "nuxt.config.ts";
-	s.start(`Updating \`${configFile}\``);
-
-	const b = recast.types.builders;
-
-	const presetDef = b.objectProperty(
-		b.identifier("nitro"),
-		b.objectExpression([
-			b.objectProperty(
-				b.identifier("preset"),
-				b.stringLiteral("cloudflare-pages"),
-			),
-		]),
-	);
-
-	const moduleDef = b.objectProperty(
-		b.identifier("modules"),
-		b.arrayExpression([b.stringLiteral("nitro-cloudflare-dev")]),
-	);
-
-	transformFile(configFile, {
-		visitCallExpression: function (n) {
-			const callee = n.node.callee as recast.types.namedTypes.Identifier;
-			if (callee.name === "defineNuxtConfig") {
-				mergeObjectProperties(
-					n.node.arguments[0] as recast.types.namedTypes.ObjectExpression,
-					[presetDef, moduleDef],
-				);
-			}
-
-			return this.traverse(n);
-		},
-	});
-
-	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
-};
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "nuxt",
-	frameworkCli: "nuxi",
-	platform: "pages",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "Nuxt",
-	copyFiles: {
-		path: "./templates",
-	},
-	generate,
-	configure,
-	transformPackageJson: async () => ({
-		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy`,
-			preview: `${npm} run build && wrangler pages dev`,
-			"cf-typegen": `wrangler types`,
-		},
-	}),
-	devScript: "dev",
-	deployScript: "deploy",
-	previewScript: "preview",
+	platformVariants: { pages, workers },
 };
 export default config;