C3: offer eslint-plugin-next-on-pages

Add the option to add the eslint-plugin-next-on-pages eslint plugin
to developers creating a new Next.js app with eslint enabled

.changeset/honest-ghosts-switch.md

@@ -0,0 +1,6 @@
+---
+"create-cloudflare": minor
+---
+
+Add the option to add the `eslint-plugin-next-on-pages` eslint plugin
+to developers creating a new Next.js app with eslint enabled

packages/create-cloudflare/src/frameworks/next/index.ts

@@ -1,8 +1,9 @@
-import { mkdirSync } from "fs";
+import { existsSync, mkdirSync, writeFileSync } from "fs";
 import { updateStatus } from "helpers/cli";
 import { brandColor, dim } from "helpers/colors";
 import { installPackages, runFrameworkGenerator } from "helpers/command";
 import { probePaths, usesTypescript, writeFile } from "helpers/files";
+import { processArgument } from "helpers/interactive";
 import { detectPackageManager } from "helpers/packages";
 import { getFrameworkVersion } from "../index";
 import {
@@ -11,7 +12,7 @@ import {
 	apiPagesDirHelloJs,
 	apiPagesDirHelloTs,
 } from "./templates";
-import type { PagesGeneratorContext, FrameworkConfig } from "types";
+import type { PagesGeneratorContext, FrameworkConfig, C3Args } from "types";
 
 const { npm, npx, dlx } = detectPackageManager();
 
@@ -72,16 +73,74 @@ const configure = async (ctx: PagesGeneratorContext) => {
 	writeFile(handlerPath, handlerFile);
 	updateStatus("Created an example API route handler");
 
+	const installEslintPlugin = await shouldInstallNextOnPagesEslintPlugin(ctx);
+
+	if (installEslintPlugin) {
+		await writeEslintrc(ctx);
+		updateStatus("eslint-plugin-next-on-pages added to eslintrc");
+	}
+
 	// Add some dev dependencies
 	process.chdir(projectName);
-	const packages = ["@cloudflare/next-on-pages@1", "vercel"];
+	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(", "))}`,
 	});
 };
 
+// Note: this isn't a generic helper since it's Next specific, this can be
+//       made into a generic helper by checking all possible types of configs
+//       (including a field in the package.json)
+//       (and potentially returning what type of config is used)
+export const usesEslint = (projectRoot = ".") => {
+	// TODO: check other types of config files, etc...
+	return existsSync(`${projectRoot}/.eslintrc.json`);
+};
+
+export const shouldInstallNextOnPagesEslintPlugin = async (
+	ctx: PagesGeneratorContext
+): Promise<boolean> => {
+	if (!usesEslint(ctx.project.name)) return false;
+
+	// TODO: ask james about this
+	// I want to ask the question but I think we should also allow users to
+	// provide this via a flag in case they don't want any interactivity at all
+	return await processArgument(ctx.args, "eslint-plugin" as keyof C3Args, {
+		type: "confirm",
+		question: "Do you want to use the next-on-pages eslint-plugin?",
+		label: "",
+		defaultValue: true,
+	});
+};
+
+export const writeEslintrc = async (
+	ctx: PagesGeneratorContext
+): Promise<void> => {
+	// TODO: ask james, is it ok to completely overriding the file?
+	//       I could parse it and modify it but there the problem that the
+	//       .eslintrc.json can also have comments so if they were to add
+	//       some this would fail (maybe it's fine as we're going to include this
+	//       in future (pages-)e2e tests?)
+	const eslintConfig = {
+		plugins: ["eslint-plugin-next-on-pages"],
+		extends: [
+			"next/core-web-vitals",
+			"plugin:eslint-plugin-next-on-pages/recommended",
+		],
+	};
+
+	writeFileSync(
+		`${ctx.project.name}/.eslintrc.json`,
+		JSON.stringify(eslintConfig, null, "  ") + "\n"
+	);
+};
+
 const config: FrameworkConfig = {
 	generate,
 	configure,