create-cloudflare 0.0.0-e6ddf8a7 → 0.0.0-e7ccc859

package/templates/next/templates.ts

@@ -0,0 +1,281 @@
+const handlerCode = `  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 = process.env.MY_KV
+  // await myKv.put('suffix', ' from a KV store!')
+  // const suffix = await myKv.get('suffix')
+  // responseText += suffix
+
+  return new Response(responseText)`;
+
+export const apiPagesDirHelloTs = `// Next.js Edge API Routes: https://nextjs.org/docs/pages/building-your-application/routing/api-routes#edge-api-routes
+
+import type { NextRequest } from 'next/server'
+
+export const config = {
+  runtime: 'edge',
+}
+
+export default async function handler(req: NextRequest) {
+${handlerCode}
+}
+`;
+
+export const apiPagesDirHelloJs = `// Next.js Edge API Routes: https://nextjs.org/docs/pages/building-your-application/routing/api-routes#edge-api-routes
+
+export const config = {
+  runtime: 'edge',
+}
+
+export default async function handler(req) {
+${handlerCode}
+}
+`;
+
+export const apiAppDirHelloTs = `// Next.js Edge API Route Handlers: https://nextjs.org/docs/app/building-your-application/routing/router-handlers#edge-and-nodejs-runtimes
+
+import type { NextRequest } from 'next/server'
+
+export const runtime = 'edge'
+
+export async function GET(request: NextRequest) {
+${handlerCode}
+}
+`;
+
+export const apiAppDirHelloJs = `// Next.js Edge API Route Handlers: https://nextjs.org/docs/app/building-your-application/routing/router-handlers#edge-and-nodejs-runtimes
+
+export const runtime = 'edge'
+
+export async function GET(request) {
+${handlerCode}
+}
+`;
+
+// Simplified and adjusted version of the Next.js built-in not-found component (https://github.com/vercel/next.js/blob/1c65c5575/packages/next/src/client/components/not-found-error.tsx)
+export const appDirNotFoundJs = `export const runtime = "edge";
+
+export default function NotFound() {
+  return (
+    <>
+      <title>404: This page could not be found.</title>
+      <div style={styles.error}>
+        <div>
+          <style
+            dangerouslySetInnerHTML={{
+              __html: \`body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\`,
+            }}
+          />
+          <h1 className="next-error-h1" style={styles.h1}>
+            404
+          </h1>
+          <div style={styles.desc}>
+            <h2 style={styles.h2}>This page could not be found.</h2>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const styles = {
+  error: {
+    fontFamily:
+      'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+    height: "100vh",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  desc: {
+    display: "inline-block",
+  },
+
+  h1: {
+    display: "inline-block",
+    margin: "0 20px 0 0",
+    padding: "0 23px 0 0",
+    fontSize: 24,
+    fontWeight: 500,
+    verticalAlign: "top",
+    lineHeight: "49px",
+  },
+
+  h2: {
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: "49px",
+    margin: 0,
+  },
+};
+`;
+
+// Simplified and adjusted version of the Next.js built-in not-found component (https://github.com/vercel/next.js/blob/1c65c5575/packages/next/src/client/components/not-found-error.tsx)
+export const appDirNotFoundTs = `export const runtime = "edge";
+
+export default function NotFound() {
+  return (
+    <>
+      <title>404: This page could not be found.</title>
+      <div style={styles.error}>
+        <div>
+          <style
+            dangerouslySetInnerHTML={{
+              __html: \`body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\`,
+            }}
+          />
+          <h1 className="next-error-h1" style={styles.h1}>
+            404
+          </h1>
+          <div style={styles.desc}>
+            <h2 style={styles.h2}>This page could not be found.</h2>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const styles = {
+  error: {
+    fontFamily:
+      'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+    height: "100vh",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  desc: {
+    display: "inline-block",
+  },
+
+  h1: {
+    display: "inline-block",
+    margin: "0 20px 0 0",
+    padding: "0 23px 0 0",
+    fontSize: 24,
+    fontWeight: 500,
+    verticalAlign: "top",
+    lineHeight: "49px",
+  },
+
+  h2: {
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: "49px",
+    margin: 0,
+  },
+} as const;
+`;
+
+export const nextConfig = `import { setupDevBindings } from '@cloudflare/next-on-pages/next-dev';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+// 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/8e93067/internal-packages/next-dev/README.md
+if (process.env.NODE_ENV === 'development') {
+  await setupDevBindings({
+    bindings: {
+        // Add here the Cloudflare Bindings you want to have available during local development,
+        // for more details on Bindings see: https://developers.cloudflare.com/pages/functions/bindings/)
+        //
+        // KV Example:
+        // MY_KV: {
+        //   type: 'kv',
+        //   id: 'xxx',
+        // }
+    }
+  });
+}
+
+export default nextConfig;
+`;
+
+export const envDts = `declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      // Add here the Cloudflare Bindings you want to have available in your application
+      // (for more details on Bindings see: https://developers.cloudflare.com/pages/functions/bindings/)
+      //
+      // KV Example:
+      // MY_KV: KVNamespace
+    }
+  }
+}
+
+export {}
+`;
+
+export const readme = `This is a [Next.js](https://nextjs.org/) project bootstrapped with [\`c3\`](https://developers.cloudflare.com/pages/get-started/c3).
+
+## Getting Started
+
+First, run the development server:
+
+\`\`\`bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+\`\`\`
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Cloudflare integration
+
+Besides the \`dev\` script mentioned above \`c3\` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
+  - \`pages:build\` to build the application for Pages using the [\`@cloudflare/next-on-pages\`](https://github.com/cloudflare/next-on-pages) CLI
+  - \`pages:preview\` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
+  - \`pages: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))
+
+### Bindings
+
+Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
+
+You can use bindings during development, when previewing locally your application and of course in the deployed application:
+
+- To use bindings in dev mode you need to define them in the \`next.config.js\` file under \`setupDevBindings\`, this mode uses the \`next-dev\` \`@cloudflare/next-on-pages\` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
+
+- To use bindings in the preview mode you need to add them to the \`pages:preview\` script accordingly to the \`wrangler pages dev\` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
+
+- To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the  [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
+
+#### KV Example
+
+\`c3\` has added for you an example showing how you can use a KV binding, in order to enable the example, search for lines containing the following comment:
+\`\`\`ts
+// KV Example:
+\`\`\`
+
+and uncomment the commented lines below it.
+
+After doing this you can run the \`dev\` script and visit the \`/api/hello\` route to see the example in action.
+
+To then enable such example also in preview mode add a \`kv\` in the \`pages:preview\` script like so:
+\`\`\`diff
+-    "pages:preview": "npm run pages:build && wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat",
++    "pages:preview": "npm run pages:build && wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat --kv MY_KV",
+\`\`\`
+
+Finally, if you also want to see the example work in the deployed application make sure to add a \`MY_KV\` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.
+`;

package/templates/nuxt/c3.ts

@@ -0,0 +1,59 @@
+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";
+
+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",
+	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`,
+		},
+	}),
+};
+export default config;

package/templates/openapi/c3.ts

@@ -0,0 +1,9 @@
+export default {
+	configVersion: 1,
+	id: "openapi",
+	displayName: "API starter (OpenAPI compliant)",
+	platform: "workers",
+	copyFiles: {
+		path: "./ts",
+	},
+};

package/templates/openapi/ts/package.json

@@ -11,7 +11,6 @@
 		"@cloudflare/itty-router-openapi": "^1.0.1"
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20230821.0",
 		"@types/node": "^20.5.7",
 		"@types/service-worker-mock": "^2.0.1",
 		"wrangler": "^3.0.0"

package/templates/openapi/ts/src/endpoints/taskList.ts

@@ -1,9 +1,9 @@
-import { Task } from "../types";
 import {
 	OpenAPIRoute,
 	OpenAPIRouteSchema,
 	Query,
 } from "@cloudflare/itty-router-openapi";
+import { Task } from "../types";
 
 export class TaskList extends OpenAPIRoute {
 	static schema: OpenAPIRouteSchema = {

package/templates/openapi/ts/src/index.ts

@@ -1,8 +1,8 @@
 import { OpenAPIRouter } from "@cloudflare/itty-router-openapi";
-import { TaskList } from "./endpoints/taskList";
 import { TaskCreate } from "./endpoints/taskCreate";
-import { TaskFetch } from "./endpoints/taskFetch";
 import { TaskDelete } from "./endpoints/taskDelete";
+import { TaskFetch } from "./endpoints/taskFetch";
+import { TaskList } from "./endpoints/taskList";
 
 export const router = OpenAPIRouter({
 	docs_url: "/",

package/templates/pre-existing/c3.ts

@@ -0,0 +1,83 @@
+import { cp, mkdtemp } from "fs/promises";
+import { tmpdir } from "os";
+import { join } from "path";
+import { processArgument } from "@cloudflare/cli/args";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { runCommand } from "helpers/command";
+import { detectPackageManager } from "helpers/packages";
+import { chooseAccount } from "../../src/common";
+import type { C3Context } from "types";
+
+export async function copyExistingWorkerFiles(ctx: C3Context) {
+	const { dlx } = detectPackageManager();
+
+	await chooseAccount(ctx);
+
+	if (ctx.args.existingScript === undefined) {
+		ctx.args.existingScript = await processArgument<string>(
+			ctx.args,
+			"existingScript",
+			{
+				type: "text",
+				question:
+					"Please specify the name of the existing worker in this account?",
+				label: "worker",
+				defaultValue: ctx.project.name,
+			}
+		);
+	}
+
+	// `wrangler init --from-dash` bails if you opt-out of creating a package.json
+	// so run it (with -y) in a tempdir and copy the src files after
+	const tempdir = await mkdtemp(join(tmpdir(), "c3-wrangler-init--from-dash-"));
+	await runCommand(
+		[
+			...dlx,
+			"wrangler@3",
+			"init",
+			"--from-dash",
+			ctx.args.existingScript,
+			"-y",
+			"--no-delegate-c3",
+		],
+		{
+			silent: true,
+			cwd: tempdir, // use a tempdir because we don't want all the files
+			env: { CLOUDFLARE_ACCOUNT_ID: ctx.account?.id },
+			startText: "Downloading existing worker files",
+			doneText: `${brandColor("downloaded")} ${dim(
+				`existing "${ctx.args.existingScript}" worker files`
+			)}`,
+		}
+	);
+
+	// copy src/* files from the downloaded worker
+	await cp(
+		join(tempdir, ctx.args.existingScript, "src"),
+		join(ctx.project.path, "src"),
+		{ recursive: true }
+	);
+
+	// copy wrangler.toml from the downloaded worker
+	await cp(
+		join(tempdir, ctx.args.existingScript, "wrangler.toml"),
+		join(ctx.project.path, "wrangler.toml")
+	);
+}
+
+export default {
+	configVersion: 1,
+	id: "pre-existing",
+	displayName: "Pre-existing Worker (from Dashboard)",
+	platform: "workers",
+	hidden: true,
+	copyFiles: {
+		path: "./js",
+	},
+	configure: async (ctx: C3Context) => {
+		await copyExistingWorkerFiles(ctx);
+
+		// Force no-deploy since the worker is already deployed
+		ctx.args.deploy = false;
+	},
+};

package/templates/pre-existing/js/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space

package/templates/pre-existing/js/.prettierrc

@@ -0,0 +1,6 @@
+{
+	"printWidth": 140,
+	"singleQuote": true,
+	"semi": true,
+	"useTabs": true
+}

package/templates/pre-existing/js/__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/pre-existing/js/package.json

@@ -0,0 +1,13 @@
+{
+	"name": "<TBD>",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler deploy",
+		"dev": "wrangler dev",
+		"start": "wrangler dev"
+	},
+	"devDependencies": {
+		"wrangler": "^3.0.0"
+	}
+}

package/templates/pre-existing/js/wrangler.toml

@@ -0,0 +1,3 @@
+name = "<TBD>"
+main = "src/index.js"
+compatibility_date = "<TBD>"