C3: add TanStack Start framework template

Author: dario-piotrowicz

.changeset/busy-horses-kick.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+add TanStack Start framework template

packages/create-cloudflare/e2e/helpers/framework-helpers.ts

@@ -180,15 +180,18 @@ export async function verifyPreviewScript(
 	);
 
 	try {
+		// TODO: check if this is necessary of if we can always just use localhost
+		const host = verifyPreview.useLocalHost ? "localhost" : "127.0.0.1";
+
 		// Some frameworks take quite a long time to build the application (e.g. Docusaurus)
 		// so wait up to 5 mins for the dev-server to be ready.
 		await retry(
 			{ times: 300, sleepMs: 5000 },
-			async () => await fetch(`http://127.0.0.1:${port}${verifyPreview.route}`),
+			async () => await fetch(`http://${host}:${port}${verifyPreview.route}`),
 		);
 
 		// Make a request to the specified test route
-		const res = await fetch(`http://127.0.0.1:${port}${verifyPreview.route}`);
+		const res = await fetch(`http://${host}:${port}${verifyPreview.route}`);
 		expect(await res.text()).toContain(verifyPreview.expectedText);
 	} finally {
 		// Kill the process gracefully so ports can be cleaned up

packages/create-cloudflare/e2e/helpers/run-c3.ts

@@ -41,6 +41,7 @@ export type RunnerConfig = {
 		previewArgs?: string[];
 		route: string;
 		expectedText: string;
+		useLocalHost?: boolean;
 	};
 	/**
 	 * Specifies whether to run the test script for the project and verify the exit code.

packages/create-cloudflare/e2e/tests/cli/cli.test.ts

@@ -584,7 +584,7 @@ describe("Create Cloudflare CLI", () => {
 					    npm create cloudflare -- --framework next -- --ts
 					    pnpm create cloudflare --framework next -- --ts
 					    Allowed Values:
-					      analog, angular, astro, docusaurus, gatsby, hono, next, nuxt, qwik, react, react-router, solid, svelte, vue, waku
+					      analog, angular, astro, docusaurus, gatsby, hono, next, nuxt, qwik, react, react-router, solid, svelte, vue, waku, tanstack
 					  --platform=<value>
 					    Whether the application should be deployed to Pages or Workers. This is only applicable for Frameworks templates that support both Pages and Workers.
 					    Allowed Values:

packages/create-cloudflare/e2e/tests/frameworks/test-config.ts

@@ -582,6 +582,21 @@ function getFrameworkTestConfig(pm: string): NamedFrameworkTestConfig[] {
 			},
 			nodeCompat: false,
 		},
+		{
+			name: "tanstack",
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Learn TanStack",
+			},
+			verifyPreview: {
+				route: "/",
+				expectedText: "Learn TanStack",
+				useLocalHost: true,
+			},
+			nodeCompat: true,
+		},
 	];
 }
 

packages/create-cloudflare/src/frameworks/package.json

@@ -17,6 +17,7 @@
 		"create-solid": "0.6.7",
 		"create-vue": "3.18.0",
 		"create-waku": "0.12.5-0.26.1-0",
+		"@tanstack/create-start": "0.24.1",
 		"gatsby": "5.15.0",
 		"sv": "0.9.6",
 		"nuxi": "3.28.0"

packages/create-cloudflare/src/templates.ts

@@ -42,6 +42,7 @@ import reactTemplate from "templates/react/c3";
 import scheduledTemplate from "templates/scheduled/c3";
 import solidTemplate from "templates/solid/c3";
 import svelteTemplate from "templates/svelte/c3";
+import tanstackTemplate from "templates/tanstack/c3";
 import vueTemplate from "templates/vue/c3";
 import wakuTemplate from "templates/waku/c3";
 import { isInsideGitRepo } from "./git";
@@ -206,6 +207,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			svelte: svelteTemplate,
 			vue: vueTemplate,
 			waku: wakuTemplate,
+			tanstack: tanstackTemplate,
 		};
 	}
 }

packages/create-cloudflare/templates/tanstack/c3.ts

@@ -0,0 +1,125 @@
+import assert from "node:assert";
+import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { runFrameworkGenerator } from "frameworks/index";
+import { transformFile } from "helpers/codemod";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
+import * as recast from "recast";
+import type { TemplateConfig } from "../../src/templates";
+import type { types } from "recast";
+import type { C3Context } from "types";
+
+const b = recast.types.builders;
+const t = recast.types.namedTypes;
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--framework",
+		"react",
+		// to prevent asking about git twice, just let c3 do it
+		"--no-git",
+	]);
+
+	logRaw(""); // newline
+};
+
+const configure = async () => {
+	await installPackages(["@cloudflare/vite-plugin"], {
+		dev: true,
+		startText: "Installing the Cloudflare Vite plugin",
+		doneText: `${brandColor(`installed`)} ${dim("@cloudflare/vite-plugin")}`,
+	});
+
+	updateViteConfig();
+};
+
+const updateViteConfig = () => {
+	const filePath = "vite.config.ts";
+
+	transformFile(filePath, {
+		visitProgram(n) {
+			// Add an import of the @cloudflare/vite-plugin
+			// ```
+			// import {cloudflare} from "@cloudflare/vite-plugin";
+			// ```
+			const lastImportIndex = n.node.body.findLastIndex(
+				(statement) => statement.type === "ImportDeclaration",
+			);
+			const lastImport = n.get("body", lastImportIndex);
+			const importAst = b.importDeclaration(
+				[b.importSpecifier(b.identifier("cloudflare"))],
+				b.stringLiteral("@cloudflare/vite-plugin"),
+			);
+			lastImport.insertAfter(importAst);
+
+			return this.traverse(n);
+		},
+		visitCallExpression: function (n) {
+			// Add the imported plugin to the config
+			// ```
+			// defineConfig({
+			//   plugins: [react(), cloudflare()],
+			// });
+			const callee = n.node.callee as types.namedTypes.Identifier;
+			if (callee.name !== "defineConfig") {
+				return this.traverse(n);
+			}
+
+			const config = n.node.arguments[0];
+			assert(t.ObjectExpression.check(config));
+			const pluginsProp = config.properties.find((prop) => isPluginsProp(prop));
+			assert(pluginsProp && t.ArrayExpression.check(pluginsProp.value));
+			pluginsProp.value.elements.push(
+				b.callExpression(b.identifier("cloudflare"), [
+					b.objectExpression([
+						b.objectProperty(
+							b.identifier("viteEnvironment"),
+							b.objectExpression([
+								b.objectProperty(b.identifier("name"), b.literal("ssr")),
+							]),
+						),
+					]),
+				]),
+			);
+
+			return false;
+		},
+	});
+};
+
+function isPluginsProp(
+	prop: unknown,
+): prop is types.namedTypes.ObjectProperty | types.namedTypes.Property {
+	return (
+		(t.Property.check(prop) || t.ObjectProperty.check(prop)) &&
+		t.Identifier.check(prop.key) &&
+		prop.key.name === "plugins"
+	);
+}
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "tanstack",
+	platform: "workers",
+	frameworkCli: "@tanstack/create-start",
+	displayName: "TanStack Start",
+	generate,
+	configure,
+	copyFiles: {
+		path: "./templates",
+	},
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && vite preview`,
+			"cf-typegen": `wrangler types`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

packages/create-cloudflare/templates/tanstack/templates/wrangler.jsonc

@@ -0,0 +1,7 @@
+{
+	"$schema": "node_modules/wrangler/config-schema.json",
+	"name": "<TBD>",
+	"compatibility_date": "<TBD>",
+	"compatibility_flags": ["nodejs_compat"],
+	"main": "@tanstack/react-start/server-entry"
+}