npm - create-cloudflare - Versions diffs - 0.0.0-dc92af28c → 0.0.0-dcce2ecf2 - Mend

create-cloudflare 0.0.0-dc92af28c → 0.0.0-dcce2ecf2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (305) hide show

package/{templates-experimental/hello-world-with-assets/py → templates/hello-world-with-assets/ts}/public/index.html RENAMED Viewed

@@ -7,8 +7,8 @@
 	</head>
 	<body>
 		<h1 id="heading"></h1>
-		<button id="button">Fetch a random UUID</button>
-		<div id="random"></div>
+		<button id="button" type="button">Fetch a random UUID</button>
+		<output id="random" for="button"></output>
 		<script>
 			fetch('/message')
 				.then((resp) => resp.text())

package/{templates-experimental → templates}/hello-world-with-assets/ts/src/index.ts RENAMED Viewed

@@ -5,7 +5,7 @@
  * - 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.toml`. After adding bindings, a type definition for the
+ * 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/

package/templates/hello-world-with-assets/ts/test/env.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+declare module 'cloudflare:test' {
+	interface ProvidedEnv extends Env {}
+}

package/{templates-experimental → templates}/hello-world-with-assets/ts/test/tsconfig.json RENAMED Viewed

@@ -3,6 +3,6 @@
 	"compilerOptions": {
 		"types": ["@cloudflare/workers-types/experimental", "@cloudflare/vitest-pool-workers"]
 	},
-	"include": ["./**/*.ts", "../src/env.d.ts"],
+	"include": ["./**/*.ts", "../worker-configuration.d.ts"],
 	"exclude": []
 }

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

@@ -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-experimental → templates}/hello-world-with-assets/ts/vitest.config.mts RENAMED Viewed

@@ -4,7 +4,7 @@ export default defineWorkersConfig({
 	test: {
 		poolOptions: {
 			workers: {
-				wrangler: { configPath: './wrangler.toml' },
+				wrangler: { configPath: './wrangler.jsonc' },
 			},
 		},
 	},

package/templates/hello-world-with-assets/ts/worker-configuration.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+// Generated by Wrangler by running `wrangler types --include-runtime=false` (hash: 187132f48ddf0f604882ba8213fe386f)
+declare namespace Cloudflare {
+	interface Env {
+		ASSETS: Fetcher;
+	}
+}
+interface Env extends Cloudflare.Env {}

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

@@ -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 CHANGED Viewed

@@ -1,69 +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, {
-		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",
-	frameworkCli: "create-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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/{templates-experimental/hono → templates/hono/workers}/c3.ts RENAMED Viewed

@@ -1,7 +1,7 @@
 import { logRaw } from "@cloudflare/cli";
 import { runFrameworkGenerator } from "frameworks/index";
 import { detectPackageManager } from "helpers/packageManagers";
-import type { TemplateConfig } from "../../src/templates";
+import type { TemplateConfig } from "../../../src/templates";
 import type { C3Context } from "types";
 const generate = async (ctx: C3Context) => {
@@ -28,16 +28,15 @@ const config: TemplateConfig = {
 		path: "./templates",
 	},
 	platform: "workers",
-	path: "templates-experimental/hono",
+	path: "templates/hono/workers",
 	generate,
 	transformPackageJson: async () => ({
 		scripts: {
-			dev: "wrangler dev",
-			deploy: "wrangler deploy --minify",
 			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
 		},
 	}),
 	devScript: "dev",
 	deployScript: "deploy",
+	previewScript: "dev",
 };
 export default config;

package/templates/hono/workers/templates/worker-configuration.d.ts ADDED Viewed

@@ -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 ADDED Viewed

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

package/templates/next/c3.ts CHANGED Viewed

@@ -1,238 +1,9 @@
-import { join } from "path";
-import { updateStatus, warn } from "@cloudflare/cli";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { inputPrompt, 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 { 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
-		throw new Error("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) {
-		throw new Error("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 inputPrompt({
-		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",
-	frameworkCli: "create-next-app",
-	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} RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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)
 }