create-cloudflare 0.0.0-e5cdd7fa → 0.0.0-e5dbedd78

package/templates/next/c3.ts

@@ -1,31 +1,23 @@
-import { existsSync, mkdirSync } from "fs";
-import { crash, updateStatus, warn } from "@cloudflare/cli";
-import { processArgument } from "@cloudflare/cli/args";
+import { join } from "path";
+import { updateStatus, warn } from "@cloudflare/cli";
 import { brandColor, dim } from "@cloudflare/cli/colors";
-import { installPackages, runFrameworkGenerator } from "helpers/command";
+import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
 import {
-	compatDateFlag,
+	copyFile,
 	probePaths,
+	readFile,
 	readJSON,
 	usesEslint,
 	usesTypescript,
 	writeFile,
 	writeJSON,
 } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
-import {
-	apiAppDirHelloJs,
-	apiAppDirHelloTs,
-	apiPagesDirHelloJs,
-	apiPagesDirHelloTs,
-	appDirNotFoundJs,
-	appDirNotFoundTs,
-	envDts,
-	nextConfig,
-	readme,
-} from "./templates";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
+import { getTemplatePath } from "../../src/templates";
 import type { TemplateConfig } from "../../src/templates";
-import type { C3Args, C3Context } from "types";
+import type { C3Context } from "types";
 
 const { npm, npx } = detectPackageManager();
 
@@ -33,27 +25,35 @@ 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 getApiTemplate = (
-	apiPath: string,
-	isTypescript: boolean
-): [string, string] => {
-	const isAppDir = /\/app\/api$/.test(apiPath);
+const updateNextConfig = (usesTs: boolean) => {
+	const s = spinner();
 
-	if (isAppDir) {
-		// App directory uses route handlers that are defined in a subdirectory (`/api/hello/route.ts`).
-		const routeHandlerPath = `${apiPath}/hello`;
-		mkdirSync(routeHandlerPath, { recursive: true });
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
+	s.start(`Updating \`${configFile}\``);
 
-		return isTypescript
-			? [`${routeHandlerPath}/route.ts`, apiAppDirHelloTs]
-			: [`${routeHandlerPath}/route.js`, apiAppDirHelloJs];
-	}
+	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);
 
-	return isTypescript
-		? [`${apiPath}/hello.ts`, apiPagesDirHelloTs]
-		: [`${apiPath}/hello.js`, apiPagesDirHelloJs];
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
 };
 
 const configure = async (ctx: C3Context) => {
@@ -70,39 +70,16 @@ const configure = async (ctx: C3Context) => {
 	]);
 
 	if (!path) {
-		crash("Could not find the `/api` or `/app` directory");
+		throw new Error("Could not find the `/api` or `/app` directory");
 	}
 
-	// App directory template may not generate an API route handler, so we update the path to add an `api` directory.
-	const apiPath = path.replace(/\/app$/, "/app/api");
-
 	const usesTs = usesTypescript(ctx);
 
-	const appDirPath = probePaths([
-		`${projectPath}/src/app`,
-		`${projectPath}/app`,
-	]);
-
-	if (appDirPath) {
-		// Add a custom app not-found edge route as recommended in next-on-pages
-		// (see: https://github.com/cloudflare/next-on-pages/blob/2b5c8f25/packages/next-on-pages/docs/gotchas.md#not-found)
-		const notFoundPath = `${appDirPath}/not-found.${usesTs ? "tsx" : "js"}`;
-		if (!existsSync(notFoundPath)) {
-			const notFoundContent = usesTs ? appDirNotFoundTs : appDirNotFoundJs;
-			writeFile(notFoundPath, notFoundContent);
-			updateStatus("Created a custom edge not-found route");
-		}
-	}
-
-	const [handlerPath, handlerFile] = getApiTemplate(
-		apiPath,
-		usesTypescript(ctx)
-	);
-	writeFile(handlerPath, handlerFile);
-	updateStatus("Created an example API route handler");
-
 	if (usesTs) {
-		writeFile(`${projectPath}/env.d.ts`, envDts);
+		copyFile(
+			join(getTemplatePath(ctx), "env.d.ts"),
+			join(projectPath, "env.d.ts"),
+		);
 		updateStatus("Created an env.d.ts file");
 	}
 
@@ -112,30 +89,34 @@ const configure = async (ctx: C3Context) => {
 		await writeEslintrc(ctx);
 	}
 
-	writeFile(`${projectPath}/next.config.mjs`, nextConfig);
-	updateStatus("Updated the next.config.js file");
+	updateNextConfig(usesTs);
 
-	writeFile(`${projectPath}/README.md`, readme);
+	copyFile(
+		join(getTemplatePath(ctx), "README.md"),
+		join(projectPath, "README.md"),
+	);
 	updateStatus("Updated the README file");
 
 	await addDevDependencies(installEslintPlugin);
 };
 
 export const shouldInstallNextOnPagesEslintPlugin = async (
-	ctx: C3Context
+	ctx: C3Context,
 ): Promise<boolean> => {
 	const eslintUsage = usesEslint(ctx);
 
-	if (!eslintUsage.used) return false;
+	if (!eslintUsage.used) {
+		return false;
+	}
 
 	if (eslintUsage.configType !== ".eslintrc.json") {
 		warn(
-			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`
+			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`,
 		);
 		return false;
 	}
 
-	return await processArgument(ctx.args, "eslint-plugin" as keyof C3Args, {
+	return await inputPrompt({
 		type: "confirm",
 		question: "Do you want to use the next-on-pages eslint-plugin?",
 		label: "eslint-plugin",
@@ -144,7 +125,10 @@ export const shouldInstallNextOnPagesEslintPlugin = async (
 };
 
 export const writeEslintrc = async (ctx: C3Context): Promise<void> => {
-	const eslintConfig = readJSON(`${ctx.project.path}/.eslintrc.json`);
+	const eslintConfig = readJSON(`${ctx.project.path}/.eslintrc.json`) as {
+		plugins: string[];
+		extends: string | string[];
+	};
 
 	eslintConfig.plugins ??= [];
 	eslintConfig.plugins.push("eslint-plugin-next-on-pages");
@@ -175,13 +159,43 @@ const addDevDependencies = async (installEslintPlugin: boolean) => {
 export default {
 	configVersion: 1,
 	id: "next",
+	frameworkCli: "create-next-app",
 	platform: "pages",
-	displayName: "Next",
-	devScript: "dev",
-	previewScript: "pages:preview",
+	displayName: "Next.js",
 	generate,
 	configure,
-	transformPackageJson: async () => {
+	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;
@@ -194,20 +208,16 @@ export default {
 		return {
 			scripts: {
 				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
-				"pages:preview": `${pagesBuildRunCommand} && wrangler pages dev .vercel/output/static ${await compatDateFlag()} --compatibility-flag=nodejs_compat`,
-				"pages:deploy": `${pagesBuildRunCommand} && wrangler pages deploy .vercel/output/static`,
+				preview: `${pagesBuildRunCommand} && wrangler pages dev`,
+				deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
+				...(usesTypescript(ctx) && {
+					"cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
+				}),
 			},
 		};
 	},
-	testFlags: [
-		"--typescript",
-		"--no-install",
-		"--eslint",
-		"--tailwind",
-		"--src-dir",
-		"--app",
-		"--import-alias",
-		"@/*",
-	],
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
 	compatibilityFlags: ["nodejs_compat"],
 } as TemplateConfig;

package/templates/next/env.d.ts

@@ -0,0 +1,5 @@
+// Generated by Wrangler
+// by running `wrangler types --env-interface CloudflareEnv env.d.ts`
+
+interface CloudflareEnv {
+}

package/templates/next/pages/js/pages/api/hello.js

@@ -0,0 +1,23 @@
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
+export const config = {
+  runtime: 'edge',
+}
+
+export default async function handler(req) {
+  let responseText = 'Hello World'
+
+  // In the edge runtime you can use Bindings that are available in your application
+  // (for more details see:
+  //    - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
+  //    - https://developers.cloudflare.com/pages/functions/bindings/
+  // )
+  //
+  // KV Example:
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
+  // await myKv.put('suffix', ' from a KV store!')
+  // const suffix = await myKv.get('suffix')
+  // responseText += suffix
+
+  return new Response(responseText)
+}

package/templates/next/pages/ts/pages/api/hello.ts

@@ -0,0 +1,24 @@
+import type { NextRequest } from 'next/server'
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
+export const config = {
+  runtime: 'edge',
+}
+
+export default async function handler(req: NextRequest) {
+  let responseText = 'Hello World'
+
+  // In the edge runtime you can use Bindings that are available in your application
+  // (for more details see:
+  //    - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
+  //    - https://developers.cloudflare.com/pages/functions/bindings/
+  // )
+  //
+  // KV Example:
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
+  // await myKv.put('suffix', ' from a KV store!')
+  // const suffix = await myKv.get('suffix')
+  // responseText += suffix
+
+  return new Response(responseText)
+}

package/templates/next/wrangler.jsonc

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "pages_build_output_dir": ".vercel/output/static"
+}

package/templates/nuxt/c3.ts

@@ -1,59 +1,9 @@
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-import { logRaw } from "@cloudflare/cli";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { spinner } from "@cloudflare/cli/interactive";
-import { runFrameworkGenerator } from "helpers/command";
-import { compatDateFlag, writeFile } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
-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 } = 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", "17");
-
-	logRaw(""); // newline
-};
-
-const configure = async () => {
-	const configFileName = "nuxt.config.ts";
-	const configFilePath = resolve(configFileName);
-	const s = spinner();
-	s.start(`Updating \`${configFileName}\``);
-	// Add the cloudflare preset into the configuration file.
-	const originalConfigFile = readFileSync(configFilePath, "utf8");
-	const updatedConfigFile = originalConfigFile.replace(
-		"defineNuxtConfig({",
-		"defineNuxtConfig({\n  nitro: {\n    preset: 'cloudflare-pages'\n  },"
-	);
-	writeFile(configFilePath, updatedConfigFile);
-	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFileName}\``)}`);
-};
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "nuxt",
-	platform: "pages",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "Nuxt",
-	generate,
-	configure,
-	transformPackageJson: async () => ({
-		scripts: {
-			"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 3000 -- ${npm} run dev`,
-			"pages:deploy": `${npm} run build && wrangler pages deploy ./dist`,
-		},
-	}),
+	platformVariants: { pages, workers },
 };
 export default config;

package/templates/nuxt/pages/c3.ts

@@ -0,0 +1,145 @@
+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";
+
+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"),
+			),
+			b.objectProperty(
+				b.identifier("cloudflare"),
+				b.objectExpression([
+					b.objectProperty(
+						b.identifier("deployConfig"),
+						b.booleanLiteral(true),
+					),
+					b.objectProperty(b.identifier("nodeCompat"), b.booleanLiteral(true)),
+				]),
+			),
+		]),
+	);
+
+	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",
+	displayName: "Nuxt",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/nuxt/pages",
+	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",
+};
+export default config;

package/templates/nuxt/pages/templates/env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="WORKERS_TYPES_ENTRYPOINT" />
+
+declare module "h3" {
+  interface H3EventContext {
+    cf: CfProperties;
+    cloudflare: {
+      request: Request;
+      env: Env;
+      context: ExecutionContext;
+    };
+  }
+}
+
+export {};

package/templates/nuxt/pages/templates/worker-configuration.d.ts

@@ -0,0 +1,4 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
+interface Env {
+}

package/templates/nuxt/pages/templates/wrangler.jsonc

@@ -0,0 +1,5 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "pages_build_output_dir": "./dist"
+}