create-cloudflare 0.0.0-ee305dd67 → 0.0.0-ee3ef6414

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "0.0.0-ee305dd67",
+  "version": "0.0.0-ee3ef6414",
   "description": "A CLI for creating and deploying new applications to Cloudflare.",
   "keywords": [
     "cloudflare",
@@ -30,7 +30,7 @@
     "@babel/parser": "^7.21.3",
     "@babel/types": "^7.21.4",
     "@clack/prompts": "^0.6.3",
-    "@cloudflare/workers-types": "^4.20241106.0",
+    "@cloudflare/workers-types": "^4.20241205.0",
     "@iarna/toml": "^3.0.0",
     "@types/command-exists": "^1.2.0",
     "@types/cross-spawn": "^6.0.2",
@@ -66,16 +66,17 @@
     "wrap-ansi": "^9.0.0",
     "xdg-app-paths": "^8.3.0",
     "yargs": "^17.7.2",
+    "@cloudflare/cli": "1.1.1",
     "@cloudflare/eslint-config-worker": "1.1.0",
     "@cloudflare/workers-tsconfig": "0.0.0",
-    "@cloudflare/cli": "1.1.1",
-    "wrangler": "0.0.0-ee305dd67"
+    "wrangler": "0.0.0-ee3ef6414"
   },
   "engines": {
     "node": ">=18.14.1"
   },
   "workers-sdk": {
-    "prerelease": true
+    "prerelease": true,
+    "type": "cli"
   },
   "volta": {
     "extends": "../../package.json"

package/templates/angular/c3.ts

@@ -13,7 +13,11 @@ import type { C3Context } from "types";
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name, "--ssr"]);
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--ssr",
+		"--server-routing" /** Dev Preview API */,
+	]);
 	logRaw("");
 };
 
@@ -24,14 +28,11 @@ const configure = async (ctx: C3Context) => {
 };
 
 async function installCFWorker() {
-	await installPackages(
-		["@cloudflare/workers-types", "@miniflare/tre@next", "wrangler@beta"],
-		{
-			dev: true,
-			startText: "Installing adapter dependencies",
-			doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
-		},
-	);
+	await installPackages(["xhr2"], {
+		dev: true,
+		startText: "Installing additional dependencies",
+		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
+	});
 }
 async function updateAppCode() {
 	const s = spinner();
@@ -50,12 +51,21 @@ async function updateAppCode() {
 	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"]["@angular/ssr"];
 	delete packageManifest["dependencies"]["express"];
 	delete packageManifest["devDependencies"]["@types/express"];
 
@@ -70,6 +80,8 @@ function updateAngularJson(ctx: C3Context) {
 	// 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";
 	architectSection.build.options.assets.push("src/_routes.json");
 
 	writeFile(resolve("angular.json"), JSON.stringify(angularJson, null, 2));
@@ -87,14 +99,14 @@ const config: TemplateConfig = {
 	},
 	devScript: "start",
 	deployScript: "deploy",
+	previewScript: "start",
 	generate,
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			start: `${npm} run build && wrangler pages dev dist/cloudflare ${await compatDateFlag()} --experimental-local`,
+			start: `${npm} run build && wrangler pages dev dist/cloudflare ${await compatDateFlag()}`,
 			build: `ng build && ${npm} run process`,
-			process:
-				"node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
+			process: "node ./tools/copy-files.mjs",
 			deploy: `${npm} run build && wrangler pages deploy dist/cloudflare`,
 		},
 	}),

package/templates/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/angular/templates/tools/copy-files.mjs

@@ -1,7 +1,13 @@
 // Copy the files over so that they can be uploaded by the pages publish command.
 import fs from "node:fs";
-import { join } from "node:path";
-import { client, cloudflare, ssr, worker } from "./paths.mjs";
+import { join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = resolve(fileURLToPath(import.meta.url), "../../");
+const client = resolve(root, "dist/browser");
+const ssr = resolve(root, "dist/server");
+const cloudflare = resolve(root, "dist/cloudflare");
+const worker = resolve(cloudflare, "_worker.js");
 
 fs.cpSync(client, cloudflare, { recursive: true });
 fs.cpSync(ssr, worker, { recursive: true });

package/templates/hello-world/js/package.json

@@ -11,6 +11,6 @@
 	"devDependencies": {
 		"@cloudflare/vitest-pool-workers": "^0.5.2",
 		"wrangler": "^3.60.3",
-		"vitest": "2.0.5"
+		"vitest": "2.1.8"
 	}
 }

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

@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@cloudflare/vitest-pool-workers": "^0.5.2",
 		"typescript": "^5.5.2",
-		"vitest": "2.0.5",
+		"vitest": "2.1.8",
 		"wrangler": "^3.60.3"
 	}
 }

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

@@ -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/next/README.md

@@ -46,7 +46,7 @@ In order to enable the example:
   ```ts
   // KV Example:
   ```
-  and uncomment the commented lines below it.
+  and uncomment the commented lines below it (also uncomment the relevant imports).
 - Do the same in the `wrangler.toml` file, where
   the comment is:
   ```

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

@@ -49,10 +49,10 @@ const generate = async (ctx: C3Context) => {
 	updateStatus("Created wrangler.toml 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);
@@ -107,7 +107,7 @@ const configure = async (ctx: C3Context) => {
 		await writeEslintrc(ctx);
 	}
 
-	updateNextConfig();
+	updateNextConfig(usesTs);
 
 	copyFile(
 		join(getTemplatePath(ctx), "README.md"),

package/templates/svelte/c3.ts

@@ -1,3 +1,4 @@
+import { existsSync } from "node:fs";
 import { platform } from "node:os";
 import { logRaw, updateStatus } from "@cloudflare/cli";
 import { blue, brandColor, dim } from "@cloudflare/cli/colors";
@@ -28,6 +29,7 @@ const configure = async (ctx: C3Context) => {
 	});
 
 	updateSvelteConfig();
+	updatePlaywrightConfig(usesTypescript(ctx));
 	updateTypeDefinitions(ctx);
 };
 
@@ -49,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;
@@ -101,10 +131,7 @@ const config: TemplateConfig = {
 	displayName: "SvelteKit",
 	platform: "pages",
 	copyFiles: {
-		variants: {
-			js: { path: "./js" },
-			ts: { path: "./ts" },
-		},
+		path: "./templates",
 	},
 	generate,
 	configure,

package/templates-experimental/angular/c3.ts

@@ -12,7 +12,11 @@ import type { C3Context } from "types";
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name, "--ssr"]);
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--ssr",
+		"--server-routing" /** Dev Preview API */,
+	]);
 	logRaw("");
 };
 
@@ -23,9 +27,9 @@ const configure = async (ctx: C3Context) => {
 };
 
 async function installCFWorker() {
-	await installPackages(["@cloudflare/workers-types", "wrangler"], {
+	await installPackages(["xhr2"], {
 		dev: true,
-		startText: "Installing adapter dependencies",
+		startText: "Installing additional dependencies",
 		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
 	});
 }
@@ -46,12 +50,21 @@ async function updateAppCode() {
 	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"]["@angular/ssr"];
 	delete packageManifest["dependencies"]["express"];
 	delete packageManifest["devDependencies"]["@types/express"];
 
@@ -66,7 +79,8 @@ function updateAngularJson(ctx: C3Context) {
 	// Update builder
 	const architectSection = angularJson.projects[ctx.project.name].architect;
 	architectSection.build.options.outputPath = "dist";
-	architectSection.build.options.assets.push("src/_routes.json");
+	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\``)}`);
@@ -84,13 +98,13 @@ const config: TemplateConfig = {
 	path: "templates-experimental/angular",
 	devScript: "start",
 	deployScript: "deploy",
+	previewScript: "start",
 	generate,
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
 			start: `${npm} run build && wrangler dev`,
-			build: `ng build && ${npm} run process`,
-			process: "node ./tools/alter-polyfills.mjs",
+			build: `ng build`,
 			deploy: `${npm} run build && wrangler deploy`,
 		},
 	}),

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/hello-world-with-assets/js/package.json

@@ -11,6 +11,6 @@
 	"devDependencies": {
 		"@cloudflare/vitest-pool-workers": "^0.5.2",
 		"wrangler": "^3.60.3",
-		"vitest": "2.0.5"
+		"vitest": "2.1.8"
 	}
 }

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

@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@cloudflare/vitest-pool-workers": "^0.5.2",
 		"typescript": "^5.5.2",
-		"vitest": "2.0.5",
+		"vitest": "2.1.8",
 		"wrangler": "^3.60.3"
 	}
 }

package/templates-experimental/next/c3.ts

@@ -30,6 +30,10 @@ export default {
 	configVersion: 1,
 	id: "next",
 	frameworkCli: "create-next-app",
+	// TODO: here we need to specify a version of create-next-app which is different from the
+	//       standard one used in the stable Next.js template, that's because our open-next adapter
+	//       is not yet fully ready for Next.js 15, once it is we should remove the following
+	frameworkCliPinnedVersion: "14.2.5",
 	platform: "workers",
 	displayName: "Next (using Node.js compat + Workers Assets)",
 	path: "templates-experimental/next",

package/templates-experimental/nuxt/c3.ts

@@ -82,7 +82,7 @@ const updateNuxtConfig = () => {
 		b.objectExpression([
 			b.objectProperty(
 				b.identifier("preset"),
-				b.stringLiteral("./cloudflare-preset"),
+				b.stringLiteral("cloudflare_module"),
 			),
 		]),
 	);

package/templates-experimental/nuxt/templates/wrangler.toml

@@ -1,8 +1,8 @@
 #:schema node_modules/wrangler/config-schema.json
 name = "<TBD>"
 compatibility_date = "<TBD>"
-main = "./dist/worker/index.js"
-assets = { directory = "./dist/public", binding = "ASSETS" }
+main = "./.output/server/index.mjs"
+assets = { directory = "./.output/public/", binding = "ASSETS" }
 
 # Workers Logs
 # Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/

package/templates-experimental/solid/c3.ts

@@ -2,6 +2,7 @@ import { logRaw, updateStatus } from "@cloudflare/cli";
 import { blue, brandColor, dim } from "@cloudflare/cli/colors";
 import { runFrameworkGenerator } from "frameworks/index";
 import { mergeObjectProperties, transformFile } from "helpers/codemod";
+import { getWorkerdCompatibilityDate } from "helpers/compatDate";
 import { usesTypescript } from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
 import { installPackages } from "helpers/packages";
@@ -30,6 +31,8 @@ const configure = async (ctx: C3Context) => {
 	usesTypescript(ctx);
 	const filePath = `app.config.${usesTypescript(ctx) ? "ts" : "js"}`;
 
+	const compatDate = await getWorkerdCompatibilityDate();
+
 	updateStatus(`Updating configuration in ${blue(filePath)}`);
 
 	transformFile(filePath, {
@@ -46,60 +49,14 @@ const configure = async (ctx: C3Context) => {
 					b.objectProperty(
 						b.identifier("server"),
 						b.objectExpression([
-							// preset: "cloudflare-pages"
+							// preset: "cloudflare_module"
 							b.objectProperty(
 								b.identifier("preset"),
-								b.stringLiteral("cloudflare-pages"),
-							),
-							// output: {
-							// 	dir: "{{ rootDir }}/dist",
-							// 	publicDir: "{{ output.dir }}/public",
-							// 	serverDir: "{{ output.dir }}/worker",
-							// },
-							b.objectProperty(
-								b.identifier("output"),
-								b.objectExpression([
-									b.objectProperty(
-										b.identifier("dir"),
-										b.stringLiteral("{{ rootDir }}/dist"),
-									),
-									b.objectProperty(
-										b.identifier("publicDir"),
-										b.stringLiteral("{{ output.dir }}/public"),
-									),
-									b.objectProperty(
-										b.identifier("serverDir"),
-										b.stringLiteral("{{ output.dir }}/worker"),
-									),
-								]),
-							),
-							// rollupConfig: {
-							// 	external: ["node:async_hooks"],
-							// },
-							b.objectProperty(
-								b.identifier("rollupConfig"),
-								b.objectExpression([
-									b.objectProperty(
-										b.identifier("external"),
-										b.arrayExpression([b.stringLiteral("node:async_hooks")]),
-									),
-								]),
+								b.stringLiteral("cloudflare_module"),
 							),
-							// hooks: {
-							// 	// Prevent the Pages preset from writing the _routes.json etc.
-							// 	compiled() {},
-							// },
 							b.objectProperty(
-								b.identifier("hooks"),
-								b.objectExpression([
-									b.objectMethod(
-										"method",
-										b.identifier("compiled"),
-										[],
-										b.blockStatement([]),
-										false,
-									),
-								]),
+								b.identifier("compatibilityDate"),
+								b.stringLiteral(compatDate),
 							),
 						]),
 					),

package/templates-experimental/solid/templates/wrangler.toml

@@ -2,8 +2,8 @@
 name = "<TBD>"
 compatibility_date = "<TBD>"
 compatibility_flags = ["nodejs_compat"]
-main = "./dist/worker/index.js"
-assets = { directory = "./dist/public", binding = "ASSETS" }
+main = "./.output/server/index.mjs"
+assets = { directory = "./.output/public", binding = "ASSETS" }
 
 # Workers Logs
 # Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/

package/templates-experimental/svelte/c3.ts

@@ -101,10 +101,7 @@ const config: TemplateConfig = {
 	displayName: "SvelteKit",
 	platform: "workers",
 	copyFiles: {
-		variants: {
-			js: { path: "./js" },
-			ts: { path: "./ts" },
-		},
+		path: "./templates",
 	},
 	path: "templates-experimental/svelte",
 	generate,

package/templates-experimental/vue/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",
+	platform: "workers",
+	displayName: "Vue",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/vue",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && wrangler dev`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates-experimental/{svelte/ts → vue/templates}/wrangler.toml

@@ -1,8 +1,7 @@
 #:schema node_modules/wrangler/config-schema.json
 name = "<TBD>"
 compatibility_date = "<TBD>"
-main = ".svelte-kit/cloudflare/_worker.js"
-assets = { directory = ".svelte-kit/cloudflare", binding = "ASSETS" }
+assets = { directory = "./dist" }
 
 # Workers Logs
 # Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/

package/templates/angular/templates/server.ts

@@ -1,34 +0,0 @@
-import { renderApplication } from "@angular/platform-server";
-import bootstrap from "./src/main.server";
-
-interface Env {
-	ASSETS: { fetch: typeof fetch };
-}
-
-// We attach the Cloudflare `fetch()` handler to the global scope
-// so that we can export it when we process the Angular output.
-// See tools/bundle.mjs
-async function workerFetchHandler(request: Request, env: Env) {
-	const url = new URL(request.url);
-	console.log("render SSR", url.href);
-
-	// Get the root `index.html` content.
-	const indexUrl = new URL("/", url);
-	const indexResponse = await env.ASSETS.fetch(new Request(indexUrl));
-	const document = await indexResponse.text();
-
-	const content = await renderApplication(bootstrap, {
-		document,
-		url: url.pathname,
-	});
-
-	// console.log("rendered SSR", content);
-	return new Response(content, indexResponse);
-}
-
-export default {
-	fetch: (request: Request, env: Env) =>
-		(globalThis as any)["__zone_symbol__Promise"].resolve(
-			workerFetchHandler(request, env)
-		),
-};