C3: Add env.d.ts to Nuxt template (#5157)

* C3: Add type definition for Cloudflare Env type * changeset * Add comment
cloudflare · Mar 5, 2024 · 01a53b2 · 01a53b2
1 parent 11951f3
commit 01a53b2
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 5 deletions.
diff --git a/.changeset/kind-rules-beam.md b/.changeset/kind-rules-beam.md
@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+Updates the Nuxt template by adding a `env.d.ts` file which updates the type difinition for `H3EventContext` to include the `cf` property from the request and an `env` type generated from the recently added `build-cf-types` script.
diff --git a/packages/create-cloudflare/src/helpers/packages.ts b/packages/create-cloudflare/src/helpers/packages.ts
@@ -2,6 +2,8 @@ import semver from "semver";
 import whichPmRuns from "which-pm-runs";
 import { devDependencies } from "../../package.json";
 
+type PmName = "pnpm" | "npm" | "yarn" | "bun";
+
 /*
   A helper function for determining which pm command to use based on which one the user
   invoked this CLI with.
@@ -12,7 +14,9 @@ import { devDependencies } from "../../package.json";
   - dlx: executing packages that are not installed locally (ex. `pnpm dlx create-solid`)
 */
 export const detectPackageManager = () => {
-	let { name, version } = whichPmRuns() ?? { name: "npm", version: "0.0.0" };
+	const pmInfo = whichPmRuns() as { name: PmName; version: string } | undefined;
+
+	let { name, version } = pmInfo ?? { name: "npm", version: "0.0.0" };
 
 	if (process.env.TEST_PM) {
 		switch (process.env.TEST_PM) {

diff --git a/packages/create-cloudflare/templates/nuxt/c3.ts b/packages/create-cloudflare/templates/nuxt/c3.ts
@@ -3,13 +3,14 @@ import { brandColor, dim } from "@cloudflare/cli/colors";
 import { spinner } from "@cloudflare/cli/interactive";
 import { transformFile } from "helpers/codemod";
 import { installPackages, runFrameworkGenerator } from "helpers/command";
-import { writeFile } from "helpers/files";
+import { readFile, writeFile } from "helpers/files";
 import { detectPackageManager } from "helpers/packages";
 import * as recast from "recast";
+import { getLatestTypesEntrypoint } from "../../src/workers";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
-const { npm } = detectPackageManager();
+const { npm, name: pm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
 	const gitFlag = ctx.args.git ? `--gitInit` : `--no-gitInit`;
@@ -27,13 +28,44 @@ const generate = async (ctx: C3Context) => {
 	logRaw(""); // newline
 };
 
-const configure = async () => {
-	await installPackages(["nitro-cloudflare-dev"], {
+const configure = async (ctx: C3Context) => {
+	const packages = ["nitro-cloudflare-dev"];
+
+	// When using pnpm, explicitly add h3 package so the H3Event type declaration can be updated.
+	// Package managers other than pnpm will hoist the dependency, as will pnpm with `--shamefully-hoist`
+	if (pm === "pnpm") {
+		packages.push("h3");
+	}
+
+	await installPackages(packages, {
 		dev: true,
 		startText: "Installing nitro module `nitro-cloudflare-dev`",
 		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
 	});
 	updateNuxtConfig();
+
+	updateEnvTypes(ctx);
+};
+
+const updateEnvTypes = (ctx: C3Context) => {
+	const filepath = "env.d.ts";
+
+	const s = spinner();
+	s.start(`Updating ${filepath}`);
+
+	let file = readFile(filepath);
+
+	let typesEntrypoint = `@cloudflare/workers-types/`;
+	const latestEntrypoint = getLatestTypesEntrypoint(ctx);
+	if (latestEntrypoint) {
+		typesEntrypoint += `/${latestEntrypoint}`;
+	}
+
+	// Replace placeholder with actual types entrypoint
+	file = file.replace("WORKERS_TYPES_ENTRYPOINT", typesEntrypoint);
+	writeFile("env.d.ts", file);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${filepath}\``)}`);
 };
 
 const updateNuxtConfig = () => {

diff --git a/packages/create-cloudflare/templates/nuxt/templates/env.d.ts b/packages/create-cloudflare/templates/nuxt/templates/env.d.ts
@@ -0,0 +1,14 @@
+/// <reference types="WORKERS_TYPES_ENTRYPOINT" />
+
+declare module "h3" {
+  interface H3EventContext {
+    cf: CfProperties;
+    cloudflare: {
+      request: Request;
+      env: Env;
+      context: ExecutionContext;
+    };
+  }
+}
+
+export {};
diff --git a/packages/create-cloudflare/templates/nuxt/templates/worker-configuration.d.ts b/packages/create-cloudflare/templates/nuxt/templates/worker-configuration.d.ts
@@ -0,0 +1,3 @@
+// Generated by Wrangler on Fri Feb 16 2024 15:52:18 GMT-0600 (Central Standard Time)
+// After adding bindings to `wrangler.toml`, regenerate this interface via `npm build-cf-types`
+interface Env {}