create-cloudflare 0.0.0-d2b7482c → 0.0.0-d2ecc763e

package/templates/hello-world-with-assets/ts/wrangler.jsonc

@@ -0,0 +1,15 @@
+{
+  "name": "<TBD>",
+  "main": "src/index.ts",
+  "compatibility_date": "<TBD>",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "assets": {
+    "binding": "ASSETS",
+    "directory": "./public"
+  },
+  "observability": {
+    "enabled": true
+  }
+}

package/templates/hono/c3.ts

@@ -1,78 +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 { loadTemplateSnippets, transformFile } from "helpers/codemod";
-import { detectPackageManager } from "helpers/packageManagers";
-import type { TemplateConfig } from "../../src/templates";
-import type * as recast from "recast";
-import type { C3Context } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const generate = async (ctx: C3Context) => {
-	const { name: pm } = detectPackageManager();
-
-	await runFrameworkGenerator(ctx, [
-		ctx.project.name,
-		"--template",
-		"cloudflare-workers",
-		"--install",
-		"--pm",
-		pm,
-	]);
-
-	logRaw(""); // newline
-};
-
-const configure = async (ctx: C3Context) => {
-	const indexFile = "src/index.ts";
-
-	const s = spinner();
-	s.start(`Updating \`${indexFile}\``);
-
-	const snippets = loadTemplateSnippets(ctx);
-
-	transformFile(indexFile, {
-		// Insert the env declaration after the last import (but before the rest of the body)
-		visitProgram: function (n) {
-			const lastImportIndex = n.node.body.findLastIndex(
-				(t) => t.type === "ImportDeclaration",
-			);
-			const lastImport = n.get("body", lastImportIndex);
-			lastImport.insertAfter(...snippets.bindingsTypeTs);
-
-			return this.traverse(n);
-		},
-		visitVariableDeclarator(n) {
-			if (n.node.id.type === "Identifier" && n.node.id.name === "app") {
-				n.node.init = snippets
-					.appDeclarationTs[0] as recast.types.namedTypes.NewExpression;
-
-				return false;
-			}
-		},
-	});
-
-	s.stop(`${brandColor("updated")} \`${dim(indexFile)}\``);
-};
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "hono",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "Hono",
-	copyFiles: {
-		path: "./templates",
-	},
-	platform: "workers",
-	generate,
-	configure,
-	transformPackageJson: async () => ({
-		scripts: {
-			dev: "wrangler dev",
-			deploy: "wrangler deploy --minify",
-			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
-		},
-	}),
-	devScript: "dev",
-	deployScript: "deploy",
+	platformVariants: { pages, workers },
 };
 export default config;

package/templates/hono/pages/c3.ts

@@ -0,0 +1,44 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const generate = async (ctx: C3Context) => {
+	const { name: pm } = detectPackageManager();
+
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		"cloudflare-pages",
+		"--install",
+		"--pm",
+		pm,
+	]);
+
+	logRaw(""); // newline
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "hono",
+	frameworkCli: "create-hono",
+	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/hono/pages",
+	platform: "pages",
+	hidden: true,
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+			preview: "vite build && wrangler pages dev",
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/hono/pages/templates/src/index.tsx

@@ -0,0 +1,12 @@
+import { Hono } from 'hono'
+import { renderer } from './renderer'
+
+const app = new Hono<{ Bindings: CloudflareBindings }>();
+
+app.use(renderer)
+
+app.get('/', (c) => {
+  return c.render(<h1>Hello!</h1>)
+})
+
+export default app

package/templates/hono/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 CloudflareBindings {
+}

package/templates/hono/pages/templates/wrangler.jsonc

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+	"pages_build_output_dir": "./dist",
+  "observability": {
+    "enabled": true
+  }
+}

package/templates/hono/workers/c3.ts

@@ -0,0 +1,42 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const generate = async (ctx: C3Context) => {
+	const { name: pm } = detectPackageManager();
+
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		"cloudflare-workers",
+		"--install",
+		"--pm",
+		pm,
+	]);
+
+	logRaw(""); // newline
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "hono",
+	frameworkCli: "create-hono",
+	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
+	platform: "workers",
+	path: "templates/hono/workers",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "dev",
+};
+export default config;

package/templates/hono/workers/templates/public/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Hello, World!</title>
+	</head>
+	<body>
+		<h1 id="heading"></h1>
+		<script>
+			fetch('/message')
+				.then((resp) => resp.text())
+				.then((text) => {
+					const h1 = document.getElementById('heading');
+					h1.textContent = text;
+				});
+		</script>
+	</body>
+</html>

package/templates/hono/workers/templates/src/index.ts

@@ -0,0 +1,9 @@
+import { Hono } from "hono";
+
+const app = new Hono<{ Bindings: CloudflareBindings }>();
+
+app.get("/message", (c) => {
+  return c.text("Hello Hono!");
+});
+
+export default app;

package/templates/hono/workers/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 CloudflareBindings {
+}

package/templates/hono/workers/templates/wrangler.jsonc

@@ -0,0 +1,9 @@
+{
+  "name": "<TBD>",
+  "main": "src/index.ts",
+  "compatibility_date": "<TBD>",
+  "assets": {
+    "binding": "ASSETS",
+    "directory": "./public"
+  }
+}

package/templates/next/c3.ts

@@ -1,238 +1,9 @@
-import { join } from "path";
-import { crash, updateStatus, warn } from "@cloudflare/cli";
-import { processArgument } from "@cloudflare/cli/args";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { 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 { C3Args, 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 wranglerToml = readFile(join(getTemplatePath(ctx), "wrangler.toml"));
-
-	// Note: here we add `# KV Example:` to the toml file for the KV example, we don't actually
-	//       include the comment in the template wrangler.toml file just so to keep it identical
-	//       and consistent with that of all the other frameworks
-	//       (instead of making it a special case which needs extra care)
-	const newTomlContent = wranglerToml.replace(
-		/#\s+\[\[kv_namespaces\]\]\n#\s+binding\s+=\s+"MY_KV_NAMESPACE"\n#\s+id\s+=\s+"[a-zA-Z0-9]+?"/,
-		($1) => `# KV Example:\n${$1}`,
-	);
-
-	if (!/# KV Example/.test(newTomlContent)) {
-		// This should never happen to users, it is a check mostly so that
-		// if the toml file is changed in a way that breaks the "KV Example" addition
-		// the C3 Next.js e2e runs will fail with this
-		crash("Failed to properly generate the wrangler.toml file");
-	}
-
-	writeFile(join(ctx.project.path, "wrangler.toml"), newTomlContent);
-
-	updateStatus("Created wrangler.toml file");
-};
-
-const updateNextConfig = () => {
-	const s = spinner();
-
-	const configFile = "next.config.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) {
-		crash("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();
-
-	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 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,
-	});
+const config: MultiPlatformTemplateConfig = {
+	displayName: "Next.js",
+	platformVariants: { pages, workers },
 };
-
-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",
-	platform: "pages",
-	displayName: "Next",
-	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;
+export default config;

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

@@ -46,11 +46,10 @@ In order to enable the example:
   ```ts
   // KV Example:
   ```
-  and uncomment the commented lines below it.
-- Do the same in the `wrangler.toml` file, where
-  the comment is:
+  and uncomment the commented lines below it (also uncomment the relevant imports).
+- In the `wrangler.jsonc` file add the following configuration line:
   ```
-  # KV Example:
+  "kv_namespaces": [{ "binding": "MY_KV_NAMESPACE", "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }],
   ```
 - If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
   ```bash

package/templates/next/{app → pages/app}/js/app/api/hello/route.js

@@ -1,9 +1,9 @@
-import { getRequestContext } from '@cloudflare/next-on-pages'
+// import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const runtime = 'edge'
 
-export async function GET(request) {
-  let responseText = 'Hello World'
+export async function GET() {
+  const responseText = 'Hello World'
 
   // In the edge runtime you can use Bindings that are available in your application
   // (for more details see:
@@ -15,7 +15,7 @@ export async function GET(request) {
   // 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 + suffix)
 
   return new Response(responseText)
 }

package/templates/next/{app → pages/app}/ts/app/api/hello/route.ts

@@ -1,10 +1,9 @@
-import type { NextRequest } from 'next/server'
-import { getRequestContext } from '@cloudflare/next-on-pages'
+// import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const runtime = 'edge'
 
-export async function GET(request: NextRequest) {
-  let responseText = 'Hello World'
+export async function GET() {
+  const responseText = 'Hello World'
 
   // In the edge runtime you can use Bindings that are available in your application
   // (for more details see:
@@ -16,7 +15,7 @@ export async function GET(request: NextRequest) {
   // 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 + suffix)
 
   return new Response(responseText)
 }