templates: set packageManager pnpm version for vercel templates (#11992)

There have been issues with deploying our templates to Vercel when we
rely on `engines.pnpm` configuration.

Vercel's deployments work best when we specify a `packageManager` in
`package.json` since we ship our templates without lockfiles that would
help Vercel determine the right package manager to use.

This PR adjusts the script so that it adds a `packageManager` with the
latest version of `pnpm` to our Vercel templates and removes the
`engines.pnpm` only for those variants.

tools/scripts/src/generate-template-variations.ts

@@ -45,6 +45,13 @@ type TemplateVariation = {
   skipReadme?: boolean
   storage: StorageAdapterType
   vercelDeployButtonLink?: string
+  /**
+   * Identify where this template is intended to be deployed.
+   * Useful for making some modifications like PNPM's engines config for Vercel.
+   *
+   * @default 'default'
+   */
+  targetDeployment?: 'default' | 'vercel'
 }
 
 main().catch((error) => {
@@ -72,6 +79,7 @@ async function main() {
       sharp: false,
       skipDockerCompose: true,
       storage: 'vercelBlobStorage',
+      targetDeployment: 'vercel',
       vercelDeployButtonLink:
         `https://vercel.com/new/clone?repository-url=` +
         encodeURI(
@@ -95,6 +103,7 @@ async function main() {
       skipDockerCompose: true,
       skipReadme: true,
       storage: 'vercelBlobStorage',
+      targetDeployment: 'vercel',
       vercelDeployButtonLink:
         `https://vercel.com/new/clone?repository-url=` +
         encodeURI(
@@ -122,6 +131,7 @@ async function main() {
       },
       sharp: false,
       storage: 'vercelBlobStorage',
+      targetDeployment: 'vercel',
       vercelDeployButtonLink:
         `https://vercel.com/new/clone?repository-url=` +
         encodeURI(
@@ -186,6 +196,7 @@ async function main() {
       skipReadme = false,
       storage,
       vercelDeployButtonLink,
+      targetDeployment = 'default',
     } = variation
 
     header(`Generating ${name}...`)
@@ -239,12 +250,12 @@ async function main() {
     }
 
     // Fetch latest npm version of payload package:
-    const version = await getLatestPayloadVersion()
+    const payloadVersion = await getLatestPackageVersion({ packageName: 'payload' })
 
     // Bump package.json versions
     await bumpPackageJson({
       templateDir: destDir,
-      latestVersion: version,
+      latestVersion: payloadVersion,
     })
 
     if (generateLockfile) {
@@ -284,6 +295,13 @@ async function main() {
       })
     }
 
+    if (targetDeployment) {
+      await handleDeploymentTarget({
+        targetDeployment,
+        destDir,
+      })
+    }
+
     // Generate importmap
     log('Generating import map')
     execSyncSafe(`pnpm --ignore-workspace generate:importmap`, { cwd: destDir })
@@ -337,6 +355,30 @@ ${description}
   log('Generated README.md')
 }
 
+async function handleDeploymentTarget({
+  targetDeployment,
+  destDir,
+}: {
+  targetDeployment: TemplateVariation['targetDeployment']
+  destDir: string
+}) {
+  if (targetDeployment === 'vercel') {
+    // Add Vercel specific settings to package.json
+    const packageJsonPath = path.join(destDir, 'package.json')
+    const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'))
+
+    if (packageJson.engines?.pnpm) {
+      delete packageJson.engines.pnpm
+    }
+
+    const pnpmVersion = await getLatestPackageVersion({ packageName: 'pnpm' })
+
+    packageJson.packageManager = `pnpm@${pnpmVersion}`
+
+    await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2))
+  }
+}
+
 async function writeEnvExample({
   dbType,
   destDir,
@@ -450,9 +492,20 @@ async function bumpPackageJson({
   )
 }
 
-async function getLatestPayloadVersion() {
+async function getLatestPackageVersion({
+  packageName = 'payload',
+}: {
+  /**
+   * Package name to fetch the latest version for based on the NPM registry URL
+   *
+   * Eg. for `'payload'`, it will fetch the version from `https://registry.npmjs.org/payload`
+   *
+   * @default 'payload'
+   */
+  packageName?: string
+}) {
   try {
-    const response = await fetch('https://registry.npmjs.org/payload')
+    const response = await fetch(`https://registry.npmjs.org/${packageName}`)
     const data = await response.json()
     const latestVersion = data['dist-tags'].latest