create-cloudflare 0.0.0-e37c1b86 → 0.0.0-e39a45ffa

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,77 @@ 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`,
+			"cf-typegen": `wrangler types`,
 		},
 	}),
-	devScript: "dev",
-	previewScript: "pages:preview",
 	compatibilityFlags: ["nodejs_compat"],
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
 };
 export default config;

package/templates/solid/templates/wrangler.jsonc

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

package/templates/svelte/c3.ts

@@ -1,129 +1,9 @@
-import { platform } from "node:os";
-import { logRaw, updateStatus } from "@cloudflare/cli";
-import { blue, brandColor, dim } from "@cloudflare/cli/colors";
-import { transformFile } from "helpers/codemod";
-import { installPackages, runFrameworkGenerator } from "helpers/command";
-import { usesTypescript } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
-import * as recast from "recast";
-import type { TemplateConfig } from "../../src/templates";
-import type { C3Context, PackageJson } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const { npm } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
-
-	logRaw("");
-};
-
-const configure = async (ctx: C3Context) => {
-	// Install the adapter
-	const pkg = `@sveltejs/adapter-cloudflare`;
-	await installPackages([pkg], {
-		dev: true,
-		startText: "Adding the Cloudflare Pages adapter",
-		doneText: `${brandColor(`installed`)} ${dim(pkg)}`,
-	});
-
-	updateSvelteConfig();
-	updateTypeDefinitions(ctx);
-};
-
-const updateSvelteConfig = () => {
-	// All we need to do is change the import statement in svelte.config.js
-	updateStatus(`Changing adapter in ${blue("svelte.config.js")}`);
-
-	transformFile("svelte.config.js", {
-		visitImportDeclaration: function (n) {
-			// importSource is the `x` in `import y from "x"`
-			const importSource = n.value.source;
-			if (importSource.value === "@sveltejs/adapter-auto") {
-				importSource.value = "@sveltejs/adapter-cloudflare";
-			}
-
-			// stop traversing this node
-			return false;
-		},
-	});
-};
-
-const updateTypeDefinitions = (ctx: C3Context) => {
-	if (!usesTypescript(ctx)) {
-		return;
-	}
-
-	updateStatus(`Updating global type definitions in ${blue("app.d.ts")}`);
-
-	const b = recast.types.builders;
-
-	transformFile("src/app.d.ts", {
-		visitTSModuleDeclaration(n) {
-			if (n.value.id.name === "App" && n.node.body) {
-				const moduleBlock = n.node
-					.body as recast.types.namedTypes.TSModuleBlock;
-
-				const platformInterface = b.tsInterfaceDeclaration(
-					b.identifier("Platform"),
-					b.tsInterfaceBody([
-						b.tsPropertySignature(
-							b.identifier("env"),
-							b.tsTypeAnnotation(b.tsTypeReference(b.identifier("Env")))
-						),
-						b.tsPropertySignature(
-							b.identifier("cf"),
-							b.tsTypeAnnotation(
-								b.tsTypeReference(b.identifier("CfProperties"))
-							)
-						),
-						b.tsPropertySignature(
-							b.identifier("ctx"),
-							b.tsTypeAnnotation(
-								b.tsTypeReference(b.identifier("ExecutionContext"))
-							)
-						),
-					])
-				);
-
-				moduleBlock.body.unshift(platformInterface);
-			}
-
-			this.traverse(n);
-		},
-	});
-};
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "svelte",
-	displayName: "Svelte",
-	platform: "pages",
-	copyFiles: {
-		variants: {
-			js: { path: "./js" },
-			ts: { path: "./ts" },
-		},
-	},
-	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`,
-		};
-
-		if (usesTypescript(ctx)) {
-			const mv = platform() === "win32" ? "move" : "mv";
-			scripts = {
-				...scripts,
-				"build-cf-types": `wrangler types && ${mv} worker-configuration.d.ts src/`,
-			};
-		}
-
-		return { scripts };
-	},
-	devScript: "dev",
-	deployScript: "deploy",
-	previewScript: "preview",
+const config: MultiPlatformTemplateConfig = {
+	displayName: "SvelteKit",
+	platformVariants: { pages, workers },
 };
 export default config;

package/templates/svelte/pages/c3.ts

@@ -0,0 +1,160 @@
+import { existsSync } from "node:fs";
+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 { usesTypescript } from "helpers/files";
+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";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, ["create", ctx.project.name]);
+
+	logRaw("");
+};
+
+const configure = async (ctx: C3Context) => {
+	// Install the adapter
+	const pkg = `@sveltejs/adapter-cloudflare`;
+	await installPackages([pkg], {
+		dev: true,
+		startText: "Adding the Cloudflare Pages adapter",
+		doneText: `${brandColor(`installed`)} ${dim(pkg)}`,
+	});
+
+	updateSvelteConfig();
+	updatePlaywrightConfig(usesTypescript(ctx));
+	updateTypeDefinitions(ctx);
+};
+
+const updateSvelteConfig = () => {
+	// All we need to do is change the import statement in svelte.config.js
+	updateStatus(`Changing adapter in ${blue("svelte.config.js")}`);
+
+	transformFile("svelte.config.js", {
+		visitImportDeclaration: function (n) {
+			// importSource is the `x` in `import y from "x"`
+			const importSource = n.value.source;
+			if (importSource.value === "@sveltejs/adapter-auto") {
+				importSource.value = "@sveltejs/adapter-cloudflare";
+			}
+
+			// stop traversing this node
+			return false;
+		},
+	});
+};
+
+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;
+	}
+
+	updateStatus(`Updating global type definitions in ${blue("app.d.ts")}`);
+
+	const b = recast.types.builders;
+
+	transformFile("src/app.d.ts", {
+		visitTSModuleDeclaration(n) {
+			if (n.value.id.name === "App" && n.node.body) {
+				const moduleBlock = n.node
+					.body as recast.types.namedTypes.TSModuleBlock;
+
+				const platformInterface = b.tsInterfaceDeclaration(
+					b.identifier("Platform"),
+					b.tsInterfaceBody([
+						b.tsPropertySignature(
+							b.identifier("env"),
+							b.tsTypeAnnotation(b.tsTypeReference(b.identifier("Env"))),
+						),
+						b.tsPropertySignature(
+							b.identifier("cf"),
+							b.tsTypeAnnotation(
+								b.tsTypeReference(b.identifier("CfProperties")),
+							),
+						),
+						b.tsPropertySignature(
+							b.identifier("ctx"),
+							b.tsTypeAnnotation(
+								b.tsTypeReference(b.identifier("ExecutionContext")),
+							),
+						),
+					]),
+				);
+
+				moduleBlock.body.unshift(platformInterface);
+			}
+
+			this.traverse(n);
+		},
+	});
+};
+
+const typesPath = "src/worker-configuration.d.ts";
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "svelte",
+	frameworkCli: "sv",
+	displayName: "SvelteKit",
+	platform: "pages",
+	hidden: true,
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/svelte/pages",
+	generate,
+	configure,
+	transformPackageJson: async (original: PackageJson, ctx: C3Context) => {
+		let scripts: Record<string, string> = {
+			preview: `${npm} run build && wrangler pages dev`,
+			deploy: `${npm} run build && wrangler pages deploy`,
+		};
+
+		if (usesTypescript(ctx)) {
+			scripts = {
+				...scripts,
+				"cf-typegen": `wrangler types ${typesPath}`,
+			};
+		}
+
+		return { scripts };
+	},
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+	typesPath,
+};
+export default config;

package/templates/svelte/pages/templates/wrangler.jsonc

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

package/templates/svelte/workers/c3.ts

@@ -0,0 +1,129 @@
+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 { usesTypescript } from "helpers/files";
+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";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, ["create", ctx.project.name]);
+
+	logRaw("");
+};
+
+const configure = async (ctx: C3Context) => {
+	// Install the adapter
+	const pkg = `@sveltejs/adapter-cloudflare`;
+	await installPackages([pkg], {
+		dev: true,
+		startText: "Adding the Cloudflare adapter",
+		doneText: `${brandColor(`installed`)} ${dim(pkg)}`,
+	});
+
+	updateSvelteConfig();
+	updateTypeDefinitions(ctx);
+};
+
+const updateSvelteConfig = () => {
+	// All we need to do is change the import statement in svelte.config.js
+	updateStatus(`Changing adapter in ${blue("svelte.config.js")}`);
+
+	transformFile("svelte.config.js", {
+		visitImportDeclaration: function (n) {
+			// importSource is the `x` in `import y from "x"`
+			const importSource = n.value.source;
+			if (importSource.value === "@sveltejs/adapter-auto") {
+				importSource.value = "@sveltejs/adapter-cloudflare";
+			}
+
+			// stop traversing this node
+			return false;
+		},
+	});
+};
+
+const updateTypeDefinitions = (ctx: C3Context) => {
+	if (!usesTypescript(ctx)) {
+		return;
+	}
+
+	updateStatus(`Updating global type definitions in ${blue("app.d.ts")}`);
+
+	const b = recast.types.builders;
+
+	transformFile("src/app.d.ts", {
+		visitTSModuleDeclaration(n) {
+			if (n.value.id.name === "App" && n.node.body) {
+				const moduleBlock = n.node
+					.body as recast.types.namedTypes.TSModuleBlock;
+
+				const platformInterface = b.tsInterfaceDeclaration(
+					b.identifier("Platform"),
+					b.tsInterfaceBody([
+						b.tsPropertySignature(
+							b.identifier("env"),
+							b.tsTypeAnnotation(b.tsTypeReference(b.identifier("Env"))),
+						),
+						b.tsPropertySignature(
+							b.identifier("cf"),
+							b.tsTypeAnnotation(
+								b.tsTypeReference(b.identifier("CfProperties")),
+							),
+						),
+						b.tsPropertySignature(
+							b.identifier("ctx"),
+							b.tsTypeAnnotation(
+								b.tsTypeReference(b.identifier("ExecutionContext")),
+							),
+						),
+					]),
+				);
+
+				moduleBlock.body.unshift(platformInterface);
+			}
+
+			this.traverse(n);
+		},
+	});
+};
+
+const typesPath = "./src/worker-configuration.d.ts";
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "svelte",
+	frameworkCli: "sv",
+	displayName: "SvelteKit",
+	platform: "workers",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/svelte/workers",
+	generate,
+	configure,
+	transformPackageJson: async (original: PackageJson, ctx: C3Context) => {
+		let scripts: Record<string, string> = {
+			preview: `${npm} run build && wrangler dev`,
+			deploy: `${npm} run build && wrangler deploy`,
+		};
+
+		if (usesTypescript(ctx)) {
+			scripts = {
+				...scripts,
+				"cf-typegen": `wrangler types ${typesPath}`,
+			};
+		}
+
+		return { scripts };
+	},
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+	typesPath,
+};
+export default config;

package/templates/svelte/workers/templates/static/.assetsignore

@@ -0,0 +1,2 @@
+_worker.js
+_routes.json

package/templates/svelte/workers/templates/wrangler.jsonc

@@ -0,0 +1,12 @@
+{
+  "name": "<TBD>",
+  "main": ".svelte-kit/cloudflare/_worker.js",
+  "compatibility_date": "<TBD>",
+  "assets": {
+    "binding": "ASSETS",
+    "directory": ".svelte-kit/cloudflare"
+  },
+  "observability": {
+    "enabled": true
+  }
+}

package/templates/vue/c3.ts

@@ -1,27 +1,9 @@
-import { runFrameworkGenerator } from "helpers/command";
-import { compatDateFlag } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
-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 } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
-};
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "vue",
+const config: MultiPlatformTemplateConfig = {
 	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`,
-		},
-	}),
-	testFlags: ["--ts"],
+	platformVariants: { pages, workers },
 };
 export default config;

package/templates/vue/pages/c3.ts

@@ -0,0 +1,33 @@
+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]);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "vue",
+	frameworkCli: "create-vue",
+	displayName: "Vue",
+	platform: "pages",
+	hidden: true,
+	path: "templates/vue/pages",
+	copyFiles: { path: "./templates" },
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy`,
+			preview: `${npm} run build && wrangler pages dev`,
+			"cf-typegen": `wrangler types`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/vue/pages/templates/wrangler.jsonc

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