diff --git a/.changeset/kind-rules-beam.md b/.changeset/kind-rules-beam.md new file mode 100644 index 000000000000..32b2d77847b8 --- /dev/null +++ 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 index 82842b01b366..7ce5d525a474 100644 --- 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 index cace03728d43..cecc4a383885 100644 --- 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 new file mode 100644 index 000000000000..dda21a4ab105 --- /dev/null +++ b/packages/create-cloudflare/templates/nuxt/templates/env.d.ts @@ -0,0 +1,14 @@ +/// + +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 new file mode 100644 index 000000000000..cc2db3f0d7e5 --- /dev/null +++ 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 {}