create-cloudflare 0.0.0-e7982641 → 0.0.0-e7c7235fd

package/templates/solid/c3.ts

@@ -1,7 +1,10 @@
-import { logRaw } from "@cloudflare/cli";
-import { runFrameworkGenerator } from "helpers/command";
-import { compatDateFlag } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
+import { logRaw, updateStatus } from "@cloudflare/cli";
+import { blue } from "@cloudflare/cli/colors";
+import { runFrameworkGenerator } from "frameworks/index";
+import { mergeObjectProperties, transformFile } from "helpers/codemod";
+import { usesTypescript } from "helpers/files";
+import { detectPackageManager } from "helpers/packageManagers";
+import * as recast from "recast";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
@@ -9,31 +12,76 @@ const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
 	// Run the create-solid command
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
+	// -s flag forces solid-start
+	await runFrameworkGenerator(ctx, ["-p", ctx.project.name, "-s"]);
 
 	logRaw("");
 };
 
+const configure = async (ctx: C3Context) => {
+	usesTypescript(ctx);
+	const filePath = `app.config.${usesTypescript(ctx) ? "ts" : "js"}`;
+
+	updateStatus(`Updating configuration in ${blue(filePath)}`);
+
+	transformFile(filePath, {
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name !== "defineConfig") {
+				return this.traverse(n);
+			}
+
+			const b = recast.types.builders;
+
+			mergeObjectProperties(
+				n.node.arguments[0] as recast.types.namedTypes.ObjectExpression,
+				[
+					b.objectProperty(
+						b.identifier("server"),
+						b.objectExpression([
+							b.objectProperty(
+								b.identifier("preset"),
+								b.stringLiteral("cloudflare-pages"),
+							),
+							b.objectProperty(
+								b.identifier("rollupConfig"),
+								b.objectExpression([
+									b.objectProperty(
+										b.identifier("external"),
+										b.arrayExpression([b.stringLiteral("node:async_hooks")]),
+									),
+								]),
+							),
+						]),
+					),
+				],
+			);
+
+			return false;
+		},
+	});
+};
+
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "solid",
-	displayName: "Solid",
+	frameworkCli: "create-solid",
+	displayName: "SolidStart",
 	platform: "pages",
 	copyFiles: {
-		variants: {
-			js: { path: "./js" },
-			ts: { path: "./ts" },
-		},
+		path: "./templates",
 	},
 	generate,
+	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			"pages:preview": `${npm} run build && npx wrangler pages dev dist ${await compatDateFlag()} --compatibility-flag nodejs_compat`,
-			"pages:deploy": `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && npx wrangler pages dev`,
+			deploy: `${npm} run build && wrangler pages deploy`,
 		},
 	}),
-	devScript: "dev",
-	previewScript: "pages:preview",
 	compatibilityFlags: ["nodejs_compat"],
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
 };
 export default config;

package/templates/solid/templates/wrangler.json

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "pages_build_output_dir": "./dist"
+}

package/templates/svelte/c3.ts

@@ -1,10 +1,12 @@
+import { existsSync } from "node:fs";
 import { platform } from "node:os";
 import { logRaw, updateStatus } from "@cloudflare/cli";
 import { blue, brandColor, dim } from "@cloudflare/cli/colors";
+import { runFrameworkGenerator } from "frameworks/index";
 import { transformFile } from "helpers/codemod";
-import { installPackages, runFrameworkGenerator } from "helpers/command";
 import { usesTypescript } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
 import * as recast from "recast";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context, PackageJson } from "types";
@@ -12,7 +14,7 @@ import type { C3Context, PackageJson } from "types";
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
+	await runFrameworkGenerator(ctx, ["create", ctx.project.name]);
 
 	logRaw("");
 };
@@ -27,6 +29,7 @@ const configure = async (ctx: C3Context) => {
 	});
 
 	updateSvelteConfig();
+	updatePlaywrightConfig(usesTypescript(ctx));
 	updateTypeDefinitions(ctx);
 };
 
@@ -48,6 +51,34 @@ const updateSvelteConfig = () => {
 	});
 };
 
+const updatePlaywrightConfig = (shouldUseTypescript: boolean) => {
+	const filePath = `playwright.config.${shouldUseTypescript ? "ts" : "js"}`;
+	if (!existsSync(filePath)) {
+		return;
+	}
+
+	updateStatus(`Changing webServer port in ${blue(filePath)}`);
+
+	transformFile(filePath, {
+		visitObjectExpression: function (n) {
+			const portProp = n.node.properties.find((prop) => {
+				if (!("key" in prop) || !("name" in prop.key)) {
+					return false;
+				}
+
+				return prop.key.name === "port";
+			});
+
+			if (!portProp || !("value" in portProp) || !("value" in portProp.value)) {
+				return this.traverse(n);
+			}
+
+			portProp.value.value = 8788;
+			return false;
+		},
+	});
+};
+
 const updateTypeDefinitions = (ctx: C3Context) => {
 	if (!usesTypescript(ctx)) {
 		return;
@@ -68,21 +99,21 @@ const updateTypeDefinitions = (ctx: C3Context) => {
 					b.tsInterfaceBody([
 						b.tsPropertySignature(
 							b.identifier("env"),
-							b.tsTypeAnnotation(b.tsTypeReference(b.identifier("Env")))
+							b.tsTypeAnnotation(b.tsTypeReference(b.identifier("Env"))),
 						),
 						b.tsPropertySignature(
 							b.identifier("cf"),
 							b.tsTypeAnnotation(
-								b.tsTypeReference(b.identifier("CfProperties"))
-							)
+								b.tsTypeReference(b.identifier("CfProperties")),
+							),
 						),
 						b.tsPropertySignature(
 							b.identifier("ctx"),
 							b.tsTypeAnnotation(
-								b.tsTypeReference(b.identifier("ExecutionContext"))
-							)
+								b.tsTypeReference(b.identifier("ExecutionContext")),
+							),
 						),
-					])
+					]),
 				);
 
 				moduleBlock.body.unshift(platformInterface);
@@ -96,27 +127,25 @@ const updateTypeDefinitions = (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "svelte",
-	displayName: "Svelte",
+	frameworkCli: "sv",
+	displayName: "SvelteKit",
 	platform: "pages",
 	copyFiles: {
-		variants: {
-			js: { path: "./js" },
-			ts: { path: "./ts" },
-		},
+		path: "./templates",
 	},
 	generate,
 	configure,
 	transformPackageJson: async (original: PackageJson, ctx: C3Context) => {
 		let scripts: Record<string, string> = {
-			preview: `${npm} run build && wrangler pages dev .svelte-kit/cloudflare`,
-			deploy: `${npm} run build && wrangler pages deploy .svelte-kit/cloudflare`,
+			preview: `${npm} run build && wrangler pages dev`,
+			deploy: `${npm} run build && wrangler pages deploy`,
 		};
 
 		if (usesTypescript(ctx)) {
 			const mv = platform() === "win32" ? "move" : "mv";
 			scripts = {
 				...scripts,
-				"build-cf-types": `wrangler types && ${mv} worker-configuration.d.ts src/`,
+				"cf-typegen": `wrangler types && ${mv} worker-configuration.d.ts src/`,
 			};
 		}
 

package/templates/svelte/templates/wrangler.json

@@ -0,0 +1,5 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "pages_build_output_dir": ".svelte-kit/cloudflare"
+}

package/templates/vue/c3.ts

@@ -1,6 +1,5 @@
-import { runFrameworkGenerator } from "helpers/command";
-import { compatDateFlag } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
@@ -13,15 +12,18 @@ const generate = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "vue",
+	frameworkCli: "create-vue",
 	displayName: "Vue",
 	platform: "pages",
 	generate,
 	transformPackageJson: async () => ({
 		scripts: {
-			"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 5173 -- ${npm} run dev`,
-			"pages:deploy": `${npm} run build && wrangler pages deploy ./dist`,
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
 		},
 	}),
-	testFlags: ["--ts"],
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
 };
 export default config;

package/templates-experimental/angular/c3.ts

@@ -0,0 +1,112 @@
+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 "frameworks/index";
+import { readFile, readJSON, writeFile } from "helpers/files";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context } from "types";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--ssr",
+		"--server-routing" /** Dev Preview API */,
+	]);
+	logRaw("");
+};
+
+const configure = async (ctx: C3Context) => {
+	updateAngularJson(ctx);
+	await updateAppCode();
+	await installCFWorker();
+};
+
+async function installCFWorker() {
+	await installPackages(["xhr2"], {
+		dev: true,
+		startText: "Installing additional dependencies",
+		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
+	});
+}
+async function updateAppCode() {
+	const s = spinner();
+	s.start(`Updating application code`);
+
+	// Update an app config file to:
+	// - add the `provideHttpClient(withFetch())` call to enable `fetch` usage in `HttpClient`
+	const appConfigPath = "src/app/app.config.ts";
+	const appConfig = readFile(resolve(appConfigPath));
+	const newAppConfig =
+		"import { provideHttpClient, withFetch } from '@angular/common/http';\n" +
+		appConfig.replace(
+			"providers: [",
+			"providers: [provideHttpClient(withFetch()), ",
+		);
+	writeFile(resolve(appConfigPath), newAppConfig);
+	s.stop(`${brandColor(`updated`)} ${dim(appConfigPath)}`);
+
+	// Update an app server routes file to:
+	const appServerRoutesPath = "src/app/app.routes.server.ts";
+	const appRoutes = readFile(resolve(appServerRoutesPath));
+	const newAppRoutes = appRoutes.replace(
+		"RenderMode.Prerender",
+		"RenderMode.Server",
+	);
+	writeFile(resolve(appServerRoutesPath), newAppRoutes);
+	s.stop(`${brandColor(`updated`)} ${dim(appServerRoutesPath)}`);
+
+	// Remove unwanted dependencies
+	s.start(`Updating package.json`);
+	const packageJsonPath = resolve("package.json");
+	const packageManifest = readJSON(packageJsonPath);
+
+	delete packageManifest["dependencies"]["express"];
+	delete packageManifest["devDependencies"]["@types/express"];
+
+	writeFile(packageJsonPath, JSON.stringify(packageManifest, null, 2));
+	s.stop(`${brandColor(`updated`)} ${dim(`\`package.json\``)}`);
+}
+
+function updateAngularJson(ctx: C3Context) {
+	const s = spinner();
+	s.start(`Updating angular.json config`);
+	const angularJson = readJSON(resolve("angular.json"));
+	// Update builder
+	const architectSection = angularJson.projects[ctx.project.name].architect;
+	architectSection.build.options.outputPath = "dist";
+	architectSection.build.options.outputMode = "server";
+	architectSection.build.options.ssr.experimentalPlatform = "neutral";
+
+	writeFile(resolve("angular.json"), JSON.stringify(angularJson, null, 2));
+	s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);
+}
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "angular",
+	frameworkCli: "@angular/create",
+	displayName: "Angular",
+	platform: "workers",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/angular",
+	devScript: "start",
+	deployScript: "deploy",
+	previewScript: "start",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			start: `${npm} run build && wrangler dev`,
+			build: `ng build`,
+			deploy: `${npm} run build && wrangler deploy`,
+		},
+	}),
+};
+export default config;

package/templates-experimental/angular/templates/src/server.ts

@@ -0,0 +1,15 @@
+import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
+
+const angularApp = new AngularAppEngine();
+
+/**
+ * This is a request handler used by the Angular CLI (dev-server and during build).
+ */
+export const reqHandler = createRequestHandler(async (req) => {
+	const res = await angularApp.handle(req);
+
+	return res ?? new Response('Page not found.', { status: 404 });
+});
+
+
+export default { fetch: reqHandler };

package/templates-experimental/angular/templates/wrangler.json

@@ -0,0 +1,12 @@
+{
+  "name": "<TBD>",
+  "main": "./dist/server/server.mjs",
+  "compatibility_date": "<TBD>",
+  "assets": {
+    "binding": "ASSETS",
+    "directory": "./dist/browser"
+  },
+  "observability": {
+    "enabled": true
+  }
+}

package/templates-experimental/astro/c3.ts

@@ -0,0 +1,98 @@
+import { logRaw, updateStatus } from "@cloudflare/cli";
+import { blue, brandColor, dim } from "@cloudflare/cli/colors";
+import { runFrameworkGenerator } from "frameworks/index";
+import { transformFile } from "helpers/codemod";
+import { runCommand } from "helpers/command";
+import { usesTypescript } from "helpers/files";
+import { detectPackageManager } from "helpers/packageManagers";
+import * as recast from "recast";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context, PackageJson } from "types";
+
+const { npx } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [ctx.project.name, "--no-install"]);
+
+	logRaw(""); // newline
+};
+
+const configure = async () => {
+	await runCommand([npx, "astro", "add", "cloudflare", "-y"], {
+		silent: true,
+		startText: "Installing adapter",
+		doneText: `${brandColor("installed")} ${dim(
+			`via \`${npx} astro add cloudflare\``,
+		)}`,
+	});
+
+	updateAstroConfig();
+};
+
+const updateAstroConfig = () => {
+	const filePath = "astro.config.mjs";
+
+	updateStatus(`Updating configuration in ${blue(filePath)}`);
+
+	transformFile(filePath, {
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name !== "cloudflare") {
+				return this.traverse(n);
+			}
+
+			const b = recast.types.builders;
+			n.node.arguments = [
+				b.objectExpression([
+					b.objectProperty(
+						b.identifier("platformProxy"),
+						b.objectExpression([
+							b.objectProperty(b.identifier("enabled"), b.booleanLiteral(true)),
+						]),
+					),
+				]),
+			];
+
+			return false;
+		},
+	});
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "astro",
+	frameworkCli: "create-astro",
+	platform: "workers",
+	displayName: "Astro",
+	copyFiles: {
+		async selectVariant(ctx) {
+			// Note: this `selectVariant` function should not be needed
+			//       this is just a quick workaround until
+			//       https://github.com/cloudflare/workers-sdk/issues/7495
+			//       is resolved
+			return usesTypescript(ctx) ? "ts" : "js";
+		},
+		variants: {
+			js: {
+				path: "./templates/js",
+			},
+			ts: {
+				path: "./templates/ts",
+			},
+		},
+	},
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+	path: "templates-experimental/astro",
+	generate,
+	configure,
+	transformPackageJson: async (pkgJson: PackageJson, ctx: C3Context) => ({
+		scripts: {
+			deploy: `astro build && wrangler deploy`,
+			preview: `astro build && wrangler dev`,
+			...(usesTypescript(ctx) && { "cf-typegen": `wrangler types` }),
+		},
+	}),
+};
+export default config;

package/templates-experimental/astro/templates/js/public/.assetsignore

@@ -0,0 +1,4 @@
+_worker.js
+_routes.json
+_headers
+_redirects

package/templates-experimental/astro/templates/js/wrangler.json

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

package/templates-experimental/astro/templates/ts/public/.assetsignore

@@ -0,0 +1,4 @@
+_worker.js
+_routes.json
+_headers
+_redirects

package/templates-experimental/astro/templates/ts/src/env.d.ts

@@ -0,0 +1,5 @@
+type Runtime = import("@astrojs/cloudflare").Runtime<Env>;
+
+declare namespace App {
+	interface Locals extends Runtime {}
+}

package/templates-experimental/astro/templates/ts/worker-configuration.d.ts

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

package/templates-experimental/astro/templates/ts/wrangler.json

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

package/templates-experimental/docusaurus/c3.ts

@@ -0,0 +1,32 @@
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context } from "types";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [ctx.project.name, "classic"]);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "docusaurus",
+	frameworkCli: "create-docusaurus",
+	platform: "workers",
+	displayName: "Docusaurus",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/docusaurus",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && wrangler dev`,
+		},
+	}),
+	devScript: "start",
+	deployScript: "deploy",
+};
+export default config;

package/templates-experimental/docusaurus/templates/wrangler.json

@@ -0,0 +1,10 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "assets": {
+    "directory": "./build"
+  },
+  "observability": {
+    "enabled": true
+  }
+}

package/templates-experimental/gatsby/c3.ts

@@ -0,0 +1,53 @@
+import { inputPrompt } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context } from "types";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	const defaultTemplate = "https://github.com/gatsbyjs/gatsby-starter-blog";
+
+	const useTemplate = await inputPrompt({
+		type: "confirm",
+		question: "Would you like to use a template?",
+		label: "template",
+		defaultValue: true,
+	});
+
+	let templateUrl = "";
+	if (useTemplate) {
+		templateUrl = await inputPrompt({
+			type: "text",
+			question: `Please specify the url of the template you'd like to use`,
+			label: "template",
+			defaultValue: defaultTemplate,
+		});
+	}
+
+	await runFrameworkGenerator(ctx, ["new", ctx.project.name, templateUrl]);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "gatsby",
+	frameworkCli: "gatsby",
+	platform: "workers",
+	displayName: "Gatsby",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/gatsby",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && wrangler dev`,
+		},
+	}),
+	devScript: "develop",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;