C3: offer eslint-plugin-next-on-pages (#3604)

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

Author: dario-piotrowicz

.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/e2e-tests/pages.test.ts

@@ -81,12 +81,9 @@ describe("E2E: Web frameworks", () => {
 		});
 	};
 
-	test.each(["astro", "hono", "next", "react", "remix", "vue"])(
-		"%s",
-		async (name) => {
-			await runCli(name, {});
-		}
-	);
+	test.each(["astro", "hono", "react", "remix", "vue"])("%s", async (name) => {
+		await runCli(name, {});
+	});
 
 	test("Nuxt", async () => {
 		await runCli("nuxt", {
@@ -98,6 +95,17 @@ describe("E2E: Web frameworks", () => {
 		});
 	});
 
+	test("next", async () => {
+		await runCli("next", {
+			promptHandlers: [
+				{
+					matcher: /Do you want to use the next-on-pages eslint-plugin\?/,
+					input: ["y"],
+				},
+			],
+		});
+	});
+
 	test("qwik", async () => {
 		await runCli("qwik", {
 			promptHandlers: [

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

@@ -1,8 +1,16 @@
 import { mkdirSync } from "fs";
-import { updateStatus } from "helpers/cli";
+import { updateStatus, warn } from "helpers/cli";
 import { brandColor, dim } from "helpers/colors";
 import { installPackages, runFrameworkGenerator } from "helpers/command";
-import { probePaths, usesTypescript, writeFile } from "helpers/files";
+import {
+	probePaths,
+	readJSON,
+	usesEslint,
+	usesTypescript,
+	writeFile,
+	writeJSON,
+} from "helpers/files";
+import { processArgument } from "helpers/interactive";
 import { detectPackageManager } from "helpers/packages";
 import { getFrameworkVersion } from "../index";
 import {
@@ -11,7 +19,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 +80,65 @@ 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);
+	}
+
 	// 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(", "))}`,
 	});
 };
 
+export const shouldInstallNextOnPagesEslintPlugin = async (
+	ctx: PagesGeneratorContext
+): 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 processArgument(ctx.args, "eslint-plugin" as keyof C3Args, {
+		type: "confirm",
+		question: "Do you want to use the next-on-pages eslint-plugin?",
+		label: "eslint-plugin",
+		defaultValue: true,
+	});
+};
+
+export const writeEslintrc = async (
+	ctx: PagesGeneratorContext
+): Promise<void> => {
+	const eslintConfig = readJSON(`${ctx.project.name}/.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.name}/.eslintrc.json`, eslintConfig, 2);
+};
+
 const config: FrameworkConfig = {
 	generate,
 	configure,

packages/create-cloudflare/src/helpers/files.ts

@@ -1,5 +1,6 @@
 import fs, { existsSync } from "fs";
 import { crash } from "./cli";
+import type { PagesGeneratorContext } from "types";
 
 export const writeFile = (path: string, content: string) => {
 	try {
@@ -22,8 +23,12 @@ export const readJSON = (path: string) => {
 	return contents ? JSON.parse(contents) : contents;
 };
 
-export const writeJSON = (path: string, object: object) => {
-	writeFile(path, JSON.stringify(object));
+export const writeJSON = (
+	path: string,
+	object: object,
+	stringifySpace?: number | string
+) => {
+	writeFile(path, JSON.stringify(object, null, stringifySpace));
 };
 
 // Probes a list of paths and returns the first one that exists
@@ -46,6 +51,56 @@ export const usesTypescript = (projectRoot = ".") => {
 	return existsSync(`${projectRoot}/tsconfig.json`);
 };
 
+const eslintRcExts = ["js", "cjs", "yaml", "yml", "json"] as const;
+
+type EslintRcFileName = `.eslintrc.${typeof eslintRcExts[number]}`;
+
+type EslintUsageInfo =
+	| {
+			used: true;
+			configType: EslintRcFileName | "eslint.config.js" | "package.json";
+	  }
+	| {
+			used: false;
+	  };
+
+/*
+	checks if eslint is used and if so returns the configuration type
+	(for the various configuration types see:
+		- https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file-formats
+		- https://eslint.org/docs/latest/use/configure/configuration-files-new )
+*/
+export const usesEslint = (ctx: PagesGeneratorContext): EslintUsageInfo => {
+	for (const ext of eslintRcExts) {
+		const eslintRcFilename = `.eslintrc.${ext}` as EslintRcFileName;
+		if (existsSync(`${ctx.project.path}/${eslintRcFilename}`)) {
+			return {
+				used: true,
+				configType: eslintRcFilename,
+			};
+		}
+	}
+
+	if (existsSync(`${ctx.project.path}/eslint.config.js`)) {
+		return {
+			used: true,
+			configType: "eslint.config.js",
+		};
+	}
+
+	try {
+		const pkgJson = readJSON(`${ctx.project.path}/package.json`);
+		if (pkgJson.eslintConfig) {
+			return {
+				used: true,
+				configType: "package.json",
+			};
+		}
+	} catch {}
+
+	return { used: false };
+};
+
 // Generate a compatibility date flag
 export const compatDateFlag = () => {
 	const date = new Date();