create-cloudflare 0.0.0-abfdbb41 → 0.0.0-abffd425c

package/templates/qwik/pages/c3.ts

@@ -0,0 +1,150 @@
+import { endSection } from "@cloudflare/cli";
+import { brandColor } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { loadTemplateSnippets, transformFile } from "helpers/codemod";
+import { quoteShellArgs, 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 } from "types";
+
+const { npm, npx, name } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, ["playground", ctx.project.name]);
+};
+
+const configure = async (ctx: C3Context) => {
+	// Add the pages integration
+	// For some reason `pnpx qwik add` fails for qwik so we use `pnpm qwik add` instead.
+	const cmd = [name === "pnpm" ? npm : npx, "qwik", "add", "cloudflare-pages"];
+	endSection(`Running ${quoteShellArgs(cmd)}`);
+	await runCommand(cmd);
+
+	addBindingsProxy(ctx);
+	populateCloudflareEnv();
+};
+
+const addBindingsProxy = (ctx: C3Context) => {
+	// Qwik only has a typescript template atm.
+	// This check is an extra precaution
+	if (!usesTypescript(ctx)) {
+		return;
+	}
+
+	const s = spinner();
+	s.start("Updating `vite.config.ts`");
+
+	const snippets = loadTemplateSnippets(ctx);
+	const b = recast.types.builders;
+
+	transformFile("vite.config.ts", {
+		// Insert the env declaration after the last import (but before the rest of the body)
+		visitProgram: function (n) {
+			const lastImportIndex = n.node.body.findLastIndex(
+				(t) => t.type === "ImportDeclaration",
+			);
+			const lastImport = n.get("body", lastImportIndex);
+			lastImport.insertAfter(...snippets.getPlatformProxyTs);
+
+			return this.traverse(n);
+		},
+		// Pass the `platform` object from the declaration to the `qwikCity` plugin
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name !== "qwikCity") {
+				return this.traverse(n);
+			}
+
+			// The config object passed to `qwikCity`
+			const configArgument = n.node.arguments[0] as
+				| recast.types.namedTypes.ObjectExpression
+				| undefined;
+
+			const platformPropery = b.objectProperty.from({
+				key: b.identifier("platform"),
+				value: b.identifier("platform"),
+				shorthand: true,
+			});
+
+			if (!configArgument) {
+				n.node.arguments = [b.objectExpression([platformPropery])];
+
+				return false;
+			}
+
+			if (configArgument.type !== "ObjectExpression") {
+				throw new Error("Failed to update `vite.config.ts`");
+			}
+
+			// Add the `platform` object to the object
+			configArgument.properties.push(platformPropery);
+
+			return false;
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
+};
+
+const populateCloudflareEnv = () => {
+	const entrypointPath = "src/entry.cloudflare-pages.tsx";
+
+	const s = spinner();
+	s.start(`Updating \`${entrypointPath}\``);
+
+	transformFile(entrypointPath, {
+		visitTSInterfaceDeclaration: function (n) {
+			const b = recast.types.builders;
+			const id = n.node.id as recast.types.namedTypes.Identifier;
+			if (id.name !== "QwikCityPlatform") {
+				this.traverse(n);
+			}
+
+			const newBody = [
+				["env", "Env"],
+				// Qwik doesn't supply `cf` to the platform object. Should they do so, uncomment this
+				// ["cf", "CfProperties"],
+			].map(([varName, type]) =>
+				b.tsPropertySignature(
+					b.identifier(varName),
+					b.tsTypeAnnotation(b.tsTypeReference(b.identifier(type))),
+				),
+			);
+
+			n.node.body.body = newBody;
+
+			return false;
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`${entrypointPath}\``);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "qwik",
+	frameworkCli: "create-qwik",
+	displayName: "Qwik",
+	platform: "pages",
+	hidden: true,
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/qwik/pages",
+	generate,
+	configure,
+	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/qwik/pages/snippets/getPlatformProxy.ts

@@ -0,0 +1,6 @@
+let platform = {};
+
+if(process.env.NODE_ENV === 'development') {
+  const { getPlatformProxy } = await import('wrangler');
+  platform = await getPlatformProxy();
+}

package/templates/qwik/pages/templates/worker-configuration.d.ts

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

package/templates/qwik/pages/templates/wrangler.jsonc

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

package/templates/qwik/workers/c3.ts

@@ -0,0 +1,154 @@
+import { crash, endSection } from "@cloudflare/cli";
+import { brandColor } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { loadTemplateSnippets, transformFile } from "helpers/codemod";
+import { quoteShellArgs, runCommand } from "helpers/command";
+import { removeFile, 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";
+
+const { npm, npx, name } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, ["playground", ctx.project.name]);
+};
+
+const configure = async (ctx: C3Context) => {
+	// Add the pages integration
+	// For some reason `pnpx qwik add` fails for qwik so we use `pnpm qwik add` instead.
+	const cmd = [name === "pnpm" ? npm : npx, "qwik", "add", "cloudflare-pages"];
+	endSection(`Running ${quoteShellArgs(cmd)}`);
+	await runCommand(cmd);
+
+	// Remove the extraneous Pages files
+	removeFile("./public/_headers");
+	removeFile("./public/_redirects");
+	removeFile("./public/_routes.json");
+
+	addBindingsProxy(ctx);
+	populateCloudflareEnv();
+};
+
+const addBindingsProxy = (ctx: C3Context) => {
+	// Qwik only has a typescript template atm.
+	// This check is an extra precaution
+	if (!usesTypescript(ctx)) {
+		return;
+	}
+
+	const s = spinner();
+	s.start("Updating `vite.config.ts`");
+
+	const snippets = loadTemplateSnippets(ctx);
+	const b = recast.types.builders;
+
+	transformFile("vite.config.ts", {
+		// Insert the env declaration after the last import (but before the rest of the body)
+		visitProgram: function (n) {
+			const lastImportIndex = n.node.body.findLastIndex(
+				(t) => t.type === "ImportDeclaration",
+			);
+			const lastImport = n.get("body", lastImportIndex);
+			lastImport.insertAfter(...snippets.getPlatformProxyTs);
+
+			return this.traverse(n);
+		},
+		// Pass the `platform` object from the declaration to the `qwikCity` plugin
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name !== "qwikCity") {
+				return this.traverse(n);
+			}
+
+			// The config object passed to `qwikCity`
+			const configArgument = n.node.arguments[0] as
+				| recast.types.namedTypes.ObjectExpression
+				| undefined;
+
+			const platformPropery = b.objectProperty.from({
+				key: b.identifier("platform"),
+				value: b.identifier("platform"),
+				shorthand: true,
+			});
+
+			if (!configArgument) {
+				n.node.arguments = [b.objectExpression([platformPropery])];
+
+				return false;
+			}
+
+			if (configArgument.type !== "ObjectExpression") {
+				crash("Failed to update `vite.config.ts`");
+			}
+
+			// Add the `platform` object to the object
+			configArgument.properties.push(platformPropery);
+
+			return false;
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
+};
+
+const populateCloudflareEnv = () => {
+	const entrypointPath = "src/entry.cloudflare-pages.tsx";
+
+	const s = spinner();
+	s.start(`Updating \`${entrypointPath}\``);
+
+	transformFile(entrypointPath, {
+		visitTSInterfaceDeclaration: function (n) {
+			const b = recast.types.builders;
+			const id = n.node.id as recast.types.namedTypes.Identifier;
+			if (id.name !== "QwikCityPlatform") {
+				this.traverse(n);
+			}
+
+			const newBody = [
+				["env", "Env"],
+				// Qwik doesn't supply `cf` to the platform object. Should they do so, uncomment this
+				// ["cf", "CfProperties"],
+			].map(([varName, type]) =>
+				b.tsPropertySignature(
+					b.identifier(varName),
+					b.tsTypeAnnotation(b.tsTypeReference(b.identifier(type))),
+				),
+			);
+
+			n.node.body.body = newBody;
+
+			return false;
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`${entrypointPath}\``);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "qwik",
+	frameworkCli: "create-qwik",
+	displayName: "Qwik",
+	platform: "workers",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/qwik/workers",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && wrangler dev`,
+			"cf-typegen": `wrangler types`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/qwik/workers/snippets/getPlatformProxy.ts

@@ -0,0 +1,6 @@
+let platform = {};
+
+if(process.env.NODE_ENV === 'development') {
+  const { getPlatformProxy } = await import('wrangler');
+  platform = await getPlatformProxy();
+}

package/templates/qwik/workers/templates/public/.assetsignore

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

package/templates/qwik/workers/templates/worker-configuration.d.ts

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

package/templates/qwik/workers/templates/wrangler.jsonc

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

package/templates/react/c3.ts

@@ -0,0 +1,9 @@
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
+
+const config: MultiPlatformTemplateConfig = {
+	displayName: "React",
+	platformVariants: { pages, workers },
+};
+export default config;

package/templates/react/pages/c3.ts

@@ -0,0 +1,63 @@
+import { logRaw } from "@cloudflare/cli";
+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 variant = await inputPrompt({
+		type: "select",
+		question: "Select a variant:",
+		label: "variant",
+		options: variantsOptions,
+		defaultValue: variantsOptions[0].value,
+	});
+
+	await runFrameworkGenerator(ctx, [ctx.project.name, "--template", variant]);
+
+	logRaw("");
+};
+
+const variantsOptions = [
+	{
+		value: "react-ts",
+		label: "TypeScript",
+	},
+	{
+		value: "react-swc-ts",
+		label: "TypeScript + SWC",
+	},
+	{
+		value: "react",
+		label: "JavaScript",
+	},
+	{
+		value: "react-swc",
+		label: "JavaScript + SWC",
+	},
+];
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "react",
+	// React's documentation now recommends using create-vite.
+	frameworkCli: "create-vite",
+	displayName: "React",
+	platform: "pages",
+	hidden: true,
+	path: "templates/react/pages",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/react/workers/c3.ts

@@ -0,0 +1,183 @@
+import assert from "assert";
+import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { transformFile } from "helpers/codemod";
+import { readJSON, usesTypescript, writeJSON } 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 { 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) => {
+	const variant = await getVariant();
+	ctx.args.lang = variant.lang;
+
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		variant.value,
+	]);
+
+	logRaw("");
+};
+
+const configure = async (ctx: C3Context) => {
+	await installPackages(["@cloudflare/vite-plugin"], {
+		dev: true,
+		startText: "Installing the Cloudflare Vite plugin",
+		doneText: `${brandColor(`installed`)} ${dim("@cloudflare/vite-plugin")}`,
+	});
+
+	await transformViteConfig(ctx);
+
+	if (usesTypescript(ctx)) {
+		updateTsconfigJson();
+	}
+};
+
+function transformViteConfig(ctx: C3Context) {
+	const filePath = `vite.config.${usesTypescript(ctx) ? "ts" : "js"}`;
+
+	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"), []),
+			);
+
+			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"
+	);
+}
+
+function updateTsconfigJson() {
+	const s = spinner();
+	s.start(`Updating tsconfig.json config`);
+	// Add a reference to the extra tsconfig.worker.json file.
+	// ```
+	// "references": [ ..., { path: "./tsconfig.worker.json" } ]
+	// ```
+	const tsconfig = readJSON("tsconfig.json") as { references: object[] };
+	if (tsconfig && typeof tsconfig === "object") {
+		tsconfig.references ??= [];
+		tsconfig.references.push({ path: "./tsconfig.worker.json" });
+	}
+	writeJSON("tsconfig.json", tsconfig);
+	s.stop(`${brandColor(`updated`)} ${dim(`\`tsconfig.json\``)}`);
+}
+
+async function getVariant() {
+	const variantsOptions = [
+		{
+			value: "react-ts",
+			lang: "ts",
+			label: "TypeScript",
+		},
+		{
+			value: "react-swc-ts",
+			lang: "ts",
+			label: "TypeScript + SWC",
+		},
+		{
+			value: "react",
+			lang: "js",
+			label: "JavaScript",
+		},
+		{
+			value: "react-swc",
+			lang: "js",
+			label: "JavaScript + SWC",
+		},
+	];
+	const value = await inputPrompt({
+		type: "select",
+		question: "Select a variant:",
+		label: "variant",
+		options: variantsOptions,
+		defaultValue: variantsOptions[0].value,
+	});
+
+	const selected = variantsOptions.find((variant) => variant.value === value);
+	assert(selected, "Expected a variant to be selected");
+	return selected;
+}
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "react",
+	frameworkCli: "create-vite",
+	displayName: "React",
+	platform: "workers",
+	path: "templates/react/workers",
+	copyFiles: {
+		variants: {
+			ts: {
+				path: "./ts",
+			},
+			js: {
+				path: "./js",
+			},
+		},
+	},
+	generate,
+	configure,
+	transformPackageJson: async (_, ctx) => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && vite preview`,
+			...(usesTypescript(ctx) && { "cf-typegen": `wrangler types` }),
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/react/workers/js/src/App.css

@@ -0,0 +1,45 @@
+#root {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+}
+
+.logo {
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
+}
+.logo:hover {
+	filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+	filter: drop-shadow(0 0 2em #61dafbaa);
+}
+.logo.cloudflare:hover {
+	filter: drop-shadow(0 0 2em #f6821faa);
+}
+
+@keyframes logo-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
+}
+
+.card {
+	padding: 2em;
+}
+
+.read-the-docs {
+	color: #888;
+}