create-cloudflare 0.0.0-c4d034a0 → 0.0.0-c4fa349da

package/templates/hello-world-with-assets/ts/__dot__gitignore

@@ -0,0 +1,172 @@
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+
+# wrangler project
+
+.dev.vars
+.wrangler/

package/templates/hello-world-with-assets/ts/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "<TBD>",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler deploy",
+		"dev": "wrangler dev",
+		"start": "wrangler dev",
+		"test": "vitest",
+		"cf-typegen": "wrangler types"
+	},
+	"devDependencies": {
+		"@cloudflare/vitest-pool-workers": "^0.7.5",
+		"typescript": "^5.5.2",
+		"vitest": "~3.0.7",
+		"wrangler": "^3.101.0"
+	}
+}

package/templates/hello-world-with-assets/ts/public/index.html

@@ -0,0 +1,31 @@
+<!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>
+		<button id="button">Fetch a random UUID</button>
+		<div id="random"></div>
+		<script>
+			fetch('/message')
+				.then((resp) => resp.text())
+				.then((text) => {
+					const h1 = document.getElementById('heading');
+					h1.textContent = text;
+				});
+
+			const button = document.getElementById("button");
+			button.addEventListener("click", () => {
+				fetch('/random')
+					.then((resp) => resp.text())
+					.then((text) => {
+						const random = document.getElementById('random');
+						random.textContent = text;
+					});
+			});
+		</script>
+	</body>
+</html>

package/templates/hello-world-with-assets/ts/src/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - Run `npm run dev` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your worker in action
+ * - Run `npm run deploy` to publish your worker
+ *
+ * Bind resources to your worker in `wrangler.jsonc`. After adding bindings, a type definition for the
+ * `Env` object can be regenerated with `npm run cf-typegen`.
+ *
+ * Learn more at https://developers.cloudflare.com/workers/
+ */
+
+export default {
+	async fetch(request, env, ctx): Promise<Response> {
+		const url = new URL(request.url);
+		switch (url.pathname) {
+			case '/message':
+				return new Response('Hello, World!');
+			case '/random':
+				return new Response(crypto.randomUUID());
+			default:
+				return new Response('Not Found', { status: 404 });
+		}
+	},
+} satisfies ExportedHandler<Env>;

package/templates/hello-world-with-assets/ts/test/index.spec.ts

@@ -0,0 +1,41 @@
+import { env, createExecutionContext, waitOnExecutionContext, SELF } from 'cloudflare:test';
+import { describe, it, expect } from 'vitest';
+import worker from '../src';
+
+describe('Hello World user worker', () => {
+	describe('request for /message', () => {
+		it('/ responds with "Hello, World!" (unit style)', async () => {
+			const request = new Request<unknown, IncomingRequestCfProperties>('http://example.com/message');
+			// Create an empty context to pass to `worker.fetch()`.
+			const ctx = createExecutionContext();
+			const response = await worker.fetch(request, env, ctx);
+			// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+			await waitOnExecutionContext(ctx);
+			expect(await response.text()).toMatchInlineSnapshot(`"Hello, World!"`);
+		});
+
+		it('responds with "Hello, World!" (integration style)', async () => {
+			const request = new Request('http://example.com/message');
+			const response = await SELF.fetch(request);
+			expect(await response.text()).toMatchInlineSnapshot(`"Hello, World!"`);
+		});
+	});
+
+	describe('request for /random', () => {
+		it('/ responds with a random UUID (unit style)', async () => {
+			const request = new Request<unknown, IncomingRequestCfProperties>('http://example.com/random');
+			// Create an empty context to pass to `worker.fetch()`.
+			const ctx = createExecutionContext();
+			const response = await worker.fetch(request, env, ctx);
+			// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+			await waitOnExecutionContext(ctx);
+			expect(await response.text()).toMatch(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/);
+		});
+
+		it('responds with a random UUID (integration style)', async () => {
+			const request = new Request('http://example.com/random');
+			const response = await SELF.fetch(request);
+			expect(await response.text()).toMatch(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/);
+		});
+	});
+});

package/templates/hello-world-with-assets/ts/test/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"types": ["@cloudflare/workers-types/experimental", "@cloudflare/vitest-pool-workers"]
+	},
+	"include": ["./**/*.ts", "../src/env.d.ts"],
+	"exclude": []
+}

package/templates/hello-world-with-assets/ts/tsconfig.json

@@ -0,0 +1,44 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+		"target": "es2021",
+    /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		"lib": ["es2021"],
+    /* Specify what JSX code is generated. */
+		"jsx": "react-jsx",
+
+    /* Specify what module code is generated. */
+		"module": "es2022",
+    /* Specify how TypeScript looks up a file from a given module specifier. */
+		"moduleResolution": "Bundler",
+    /* Specify type package names to be included without being referenced in a source file. */
+		"types": ["@cloudflare/workers-types"],
+    /* Enable importing .json files */
+		"resolveJsonModule": true,
+
+    /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+		"allowJs": true,
+    /* Enable error reporting in type-checked JavaScript files. */
+		"checkJs": false,
+
+    /* Disable emitting files from a compilation. */
+		"noEmit": true,
+
+    /* Ensure that each file can be safely transpiled without relying on other imports. */
+		"isolatedModules": true,
+    /* Allow 'import x from y' when a module doesn't have a default export. */
+		"allowSyntheticDefaultImports": true,
+    /* Ensure that casing is correct in imports. */
+		"forceConsistentCasingInFileNames": true,
+
+    /* Enable all strict type-checking options. */
+		"strict": true,
+
+    /* Skip type checking all .d.ts files. */
+		"skipLibCheck": true
+	},
+	"exclude": ["test"],
+	"include": ["worker-configuration.d.ts", "src/**/*.ts"]
+}

package/templates/hello-world-with-assets/ts/vitest.config.mts

@@ -0,0 +1,11 @@
+import { defineWorkersConfig } from '@cloudflare/vitest-pool-workers/config';
+
+export default defineWorkersConfig({
+	test: {
+		poolOptions: {
+			workers: {
+				wrangler: { configPath: './wrangler.jsonc' },
+			},
+		},
+	},
+});

package/templates/hello-world-with-assets/ts/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/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

@@ -32,16 +32,6 @@ const configure = async (ctx: C3Context) => {
 	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
@@ -58,6 +48,7 @@ const configure = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "hono",
+	frameworkCli: "create-hono",
 	displayName: "Hono",
 	copyFiles: {
 		path: "./templates",
@@ -74,5 +65,6 @@ const config: TemplateConfig = {
 	}),
 	devScript: "dev",
 	deployScript: "deploy",
+	previewScript: "dev",
 };
 export default config;

package/templates/hono/snippets/appDeclaration.ts

@@ -1 +1 @@
-new Hono<{ Bindings: Bindings }>()
+new Hono<{ Bindings: CloudflareBindings }>()

package/templates/hono/templates/worker-configuration.d.ts

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

package/templates/hono/templates/wrangler.jsonc

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "main": "src/index.ts",
+  "compatibility_date": "<TBD>",
+  "observability": {
+    "enabled": true
+  }
+}

package/templates/next/README.md

@@ -23,7 +23,7 @@ Besides the `dev` script mentioned above `c3` has added a few extra scripts that
   - `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
   - `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
 
-> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md#recommended-workflow))
+> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md#recommended-development-workflow))
 
 ### Bindings
 
@@ -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/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/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)
 }

package/templates/next/c3.ts

@@ -1,8 +1,7 @@
 import { join } from "path";
-import { crash, updateStatus, warn } from "@cloudflare/cli";
-import { processArgument } from "@cloudflare/cli/args";
+import { updateStatus, warn } from "@cloudflare/cli";
 import { brandColor, dim } from "@cloudflare/cli/colors";
-import { spinner } from "@cloudflare/cli/interactive";
+import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
 import {
 	copyFile,
@@ -18,7 +17,7 @@ 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();
 
@@ -27,33 +26,15 @@ const generate = async (ctx: C3Context) => {
 
 	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 wranglerConfig = readFile(join(getTemplatePath(ctx), "wrangler.jsonc"));
+	writeFile(join(ctx.project.path, "wrangler.jsonc"), wranglerConfig);
+	updateStatus("Created wrangler.jsonc file");
 };
 
-const updateNextConfig = () => {
+const updateNextConfig = (usesTs: boolean) => {
 	const s = spinner();
 
-	const configFile = "next.config.mjs";
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
 	s.start(`Updating \`${configFile}\``);
 
 	const configContent = readFile(configFile);
@@ -61,12 +42,12 @@ const updateNextConfig = () => {
 	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/5712c57ea7/internal-packages/next-dev/README.md
-		if (process.env.NODE_ENV === 'development') {
-		  await setupDevPlatform();
-		}
+		// 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;
 
@@ -89,7 +70,7 @@ 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");
 	}
 
 	const usesTs = usesTypescript(ctx);
@@ -97,7 +78,7 @@ const configure = async (ctx: C3Context) => {
 	if (usesTs) {
 		copyFile(
 			join(getTemplatePath(ctx), "env.d.ts"),
-			join(projectPath, "env.d.ts")
+			join(projectPath, "env.d.ts"),
 		);
 		updateStatus("Created an env.d.ts file");
 	}
@@ -108,11 +89,11 @@ const configure = async (ctx: C3Context) => {
 		await writeEslintrc(ctx);
 	}
 
-	updateNextConfig();
+	updateNextConfig(usesTs);
 
 	copyFile(
 		join(getTemplatePath(ctx), "README.md"),
-		join(projectPath, "README.md")
+		join(projectPath, "README.md"),
 	);
 	updateStatus("Updated the README file");
 
@@ -120,20 +101,22 @@ const configure = async (ctx: C3Context) => {
 };
 
 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",
@@ -142,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");
@@ -173,8 +159,9 @@ const addDevDependencies = async (installEslintPlugin: boolean) => {
 export default {
 	configVersion: 1,
 	id: "next",
+	frameworkCli: "create-next-app",
 	platform: "pages",
-	displayName: "Next",
+	displayName: "Next.js",
 	generate,
 	configure,
 	copyFiles: {

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"
+}