Publish Stable

- @vercel/build-utils@5.5.0
 - vercel@28.4.2
 - @vercel/client@12.2.7
 - @vercel/go@2.2.8
 - @vercel/hydrogen@0.0.21
 - @vercel/next@3.1.29
 - @vercel/node@2.5.18
 - @vercel/python@3.1.17
 - @vercel/redwood@1.0.26
 - @vercel/remix@1.0.27
 - @vercel/ruby@1.3.34
 - @vercel/static-build@1.0.26

.github/CODEOWNERS

@@ -1,23 +1,17 @@
 # Documentation
 # https://help.github.com/en/articles/about-code-owners
 
-*                                        @TooTallNate @EndangeredMassa @styfle
-/.github/workflows                       @TooTallNate @EndangeredMassa @styfle @ijjk
-/packages/frameworks                     @TooTallNate @EndangeredMassa @styfle @AndyBitz
-/packages/cli/src/commands/domains       @javivelasco @mglagola @anatrajkovska
-/packages/cli/src/commands/certs         @javivelasco @mglagola @anatrajkovska
-/packages/cli/src/commands/env           @styfle @lucleray
-/packages/client                         @TooTallNate @EndangeredMassa @styfle
-/packages/build-utils                    @TooTallNate @EndangeredMassa @styfle @AndyBitz
-/packages/middleware                     @gdborton @javivelasco
-/packages/node                           @TooTallNate @EndangeredMassa @styfle
-/packages/node-bridge                    @TooTallNate @EndangeredMassa @styfle @ijjk
-/packages/next                           @TooTallNate @ijjk
-/packages/go                             @TooTallNate @EndangeredMassa @styfle
-/packages/python                         @TooTallNate @EndangeredMassa @styfle
-/packages/ruby                           @TooTallNate @EndangeredMassa @styfle
-/packages/static-build                   @TooTallNate @EndangeredMassa @styfle @AndyBitz
-/packages/routing-utils                  @TooTallNate @EndangeredMassa @styfle @ijjk
+*                                        @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood
+/.github/workflows                       @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @ijjk
+/packages/cli/src/commands/domains       @mglagola @anatrajkovska
+/packages/cli/src/commands/certs         @mglagola @anatrajkovska
+/packages/cli/src/commands/env           @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood
+/packages/fs-detectors                   @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @agadzik @chloetedder
+/packages/middleware                     @gdborton @vercel/edge-function
+/packages/node-bridge                    @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @ijjk
+/packages/next                           @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @ijjk
+/packages/routing-utils                  @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @ijjk
+/packages/edge                           @vercel/edge-function
 /examples                                @leerob
 /examples/create-react-app               @Timer
 /examples/nextjs                         @timneutkens @ijjk @styfle

.github/workflows/cron-update-next.yml

@@ -0,0 +1,25 @@
+name: Cron Update Next
+
+on:
+  # Run every 4 hours https://crontab.guru/every-4-hours
+  schedule:
+    - cron: '0 */4 * * *'
+
+jobs:
+  create-pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        # 0 means fetch all commits so we can commit and push in the script below
+        with:
+          fetch-depth: 0
+      - name: Create Pull Request
+        uses: actions/github-script@v6
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        # See https://github.com/actions/github-script#run-a-separate-file-with-an-async-function
+        with:
+          script: |
+            const script = require('./utils/update-next.js')
+            await script({ github, context })

.github/workflows/publish.yml

@@ -7,6 +7,11 @@ on:
     tags:
     - '!*'
 
+env:
+  TURBO_REMOTE_ONLY: 'true'
+  TURBO_TEAM: 'vercel'
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+
 jobs:
   publish:
     name: Publish
@@ -32,8 +37,11 @@ jobs:
     - name: Setup Node
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
       uses: actions/setup-node@v3
+      env:
+        SEGMENT_DOWNLOAD_TIMEOUT_MIN: 5 # https://github.com/actions/cache/issues/810
       with:
         node-version: 14
+        cache: 'yarn'
     - name: Install
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
       run: yarn install --check-files --frozen-lockfile --network-timeout 1000000

.github/workflows/required-pr-label.yml

@@ -0,0 +1,22 @@
+name: Required PR Label
+on:
+  pull_request:
+    types: [opened, labeled, unlabeled, synchronize]
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check PR Labels
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const labels = context.payload.pull_request.labels.map(l => l.name);
+            if (labels.filter(l => l.startsWith('area:')).length === 0) {
+              console.error('\u001b[31mMissing label: Please add at least one "area" label.');
+              process.exit(1);
+            }
+            if (labels.filter(l => l.startsWith('semver:')).length !== 1) {
+              console.error('\u001b[31mMissing label: Please add exactly one "semver" label.');
+              process.exit(1);
+            }
+            console.log('\u001b[32mSuccess: This pull request has correct labels, thanks!');

.github/workflows/test-integration-cli.yml

@@ -8,6 +8,11 @@ on:
     - '!*'
   pull_request:
 
+env:
+  TURBO_REMOTE_ONLY: 'true'
+  TURBO_TEAM: 'vercel'
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+
 jobs:
   test:
     name: CLI
@@ -19,28 +24,21 @@ jobs:
         node: [14]
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Conditionally set remote env
-        if: github.event.pull_request.head.repo.full_name == github.repository
-        run: |
-            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
-            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
-            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
       - uses: actions/setup-go@v3
         with:
           go-version: '1.13.15'
       - uses: actions/setup-node@v3
+        env:
+          SEGMENT_DOWNLOAD_TIMEOUT_MIN: 5 # https://github.com/actions/cache/issues/810
         with:
           node-version: ${{ matrix.node }}
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 100
-      - run: git --version
-      - run: git fetch origin main --depth=100
-      - run: git fetch origin ${{ github.ref }} --depth=100
-      - run: git diff origin/main...HEAD --name-only
+          cache: 'yarn'
       - run: yarn install --network-timeout 1000000 --frozen-lockfile
       - run: yarn run build
       - run: yarn test-integration-cli
         env:
-          VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
-          VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}
+          VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
+          VERCEL_TEST_REGISTRATION_URL: ${{ secrets.VERCEL_TEST_REGISTRATION_URL }}

.github/workflows/test-unit.yml

@@ -8,6 +8,11 @@ on:
     - '!*'
   pull_request:
 
+env:
+  TURBO_REMOTE_ONLY: 'true'
+  TURBO_TEAM: 'vercel'
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+
 jobs:
   test:
     name: Unit
@@ -19,25 +24,18 @@ jobs:
         node: [14]
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Conditionally set remote env
-        if: github.event.pull_request.head.repo.full_name == github.repository
-        run: |
-            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
-            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
-            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
       - uses: actions/setup-go@v3
         with:
           go-version: '1.13.15'
-      - uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node }}
       - uses: actions/checkout@v3
         with:
-          fetch-depth: 100
-      - run: git --version
-      - run: git fetch origin main --depth=100
-      - run: git fetch origin ${{ github.ref }} --depth=100
-      - run: git diff origin/main...HEAD --name-only
+            fetch-depth: 2
+      - uses: actions/setup-node@v3
+        env:
+          SEGMENT_DOWNLOAD_TIMEOUT_MIN: 5 # https://github.com/actions/cache/issues/810
+        with:
+            node-version: ${{ matrix.node }}
+            cache: 'yarn'
       - run: yarn install --network-timeout 1000000 --frozen-lockfile
       - run: yarn run build
       - run: yarn run lint

.github/workflows/test.yml

@@ -10,6 +10,9 @@ on:
 
 env:
   NODE_VERSION: '14'
+  TURBO_REMOTE_ONLY: 'true'
+  TURBO_TEAM: 'vercel'
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
 
 jobs:
   setup:
@@ -20,9 +23,14 @@ jobs:
       dplUrl: ${{ steps.waitForTarball.outputs.url }}
     steps:
       - uses: actions/checkout@v3
-      - run: git --version
-      - run: git fetch origin main
+        with:
+          fetch-depth: 2
+      - uses: actions/setup-go@v3
+        with:
+          go-version: '1.13.15'
       - uses: actions/setup-node@v3
+        env:
+          SEGMENT_DOWNLOAD_TIMEOUT_MIN: 5 # https://github.com/actions/cache/issues/810
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'yarn'
@@ -52,12 +60,6 @@ jobs:
       matrix:
         include: ${{ fromJson(needs.setup.outputs['tests']) }}
     steps:
-      - name: Conditionally set remote env
-        if: github.event.pull_request.head.repo.full_name == github.repository
-        run: |
-            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
-            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
-            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
       - uses: actions/checkout@v3
         with:
           fetch-depth: 2
@@ -65,6 +67,8 @@ jobs:
         with:
           go-version: '1.13.15'
       - uses: actions/setup-node@v3
+        env:
+          SEGMENT_DOWNLOAD_TIMEOUT_MIN: 5 # https://github.com/actions/cache/issues/810
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'yarn'
@@ -84,8 +88,8 @@ jobs:
         shell: bash
         env:
           VERCEL_CLI_VERSION: ${{ needs.setup.outputs.dplUrl }}/tarballs/vercel.tgz
-          VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
-          VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}
+          VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
+          VERCEL_TEST_REGISTRATION_URL: ${{ secrets.VERCEL_TEST_REGISTRATION_URL }}
           FORCE_COLOR: '1'
 
   conclusion:

.kodiak.toml

@@ -1,7 +1,7 @@
 version = 1
 
 [merge]
-automerge_label = ["semver-major","semver-minor","semver-patch"]
+automerge_label = ["pr: automerge"]
 blacklist_title_regex = "^WIP.*"
 blacklist_labels = ["work in progress"]
 method = "squash"

api/_lib/script/build.ts

@@ -1,6 +1,5 @@
 import fs from 'fs/promises';
 import { join, dirname } from 'path';
-import execa from 'execa';
 import { getExampleList } from '../examples/example-list';
 import { mapOldToNew } from '../examples/map-old-to-new';
 
@@ -13,6 +12,12 @@ async function main() {
   await fs.rm(pubDir, { recursive: true, force: true });
   await fs.mkdir(pubDir);
 
+  await fs.cp(
+    join(repoRoot, 'packages', 'frameworks', 'logos'),
+    join(pubDir, 'framework-logos'),
+    { recursive: true, force: true }
+  );
+
   const examples = await getExampleList();
   const pathListAll = join(pubDir, 'list-all.json');
   await fs.writeFile(pathListAll, JSON.stringify(examples));
@@ -41,10 +46,6 @@ async function main() {
     JSON.stringify([...existingExamples, ...oldExamples])
   );
 
-  const { stdout: sha } = await execa('git', ['rev-parse', '--short', 'HEAD'], {
-    cwd: repoRoot,
-  });
-
   const tarballsDir = join(pubDir, 'tarballs');
   const packagesDir = join(repoRoot, 'packages');
   const packages = await fs.readdir(packagesDir);
@@ -55,12 +56,21 @@ async function main() {
       'utf-8'
     );
     const packageJson = JSON.parse(packageJsonRaw);
-    const tarballName = `${packageJson.name
-      .replace('@', '')
-      .replace('/', '-')}-v${packageJson.version}-${sha.trim()}.tgz`;
+    const files = await fs.readdir(fullDir);
+    const tarballName = files.find(f => /^vercel-.+\.tgz$/.test(f));
+    if (!tarballName) {
+      throw new Error(
+        `Expected vercel-*.tgz in ${fullDir} but found ${JSON.stringify(
+          files,
+          null,
+          2
+        )}`
+      );
+    }
+    const srcTarballPath = join(fullDir, tarballName);
     const destTarballPath = join(tarballsDir, `${packageJson.name}.tgz`);
     await fs.mkdir(dirname(destTarballPath), { recursive: true });
-    await fs.copyFile(join(fullDir, tarballName), destTarballPath);
+    await fs.copyFile(srcTarballPath, destTarballPath);
   }
 
   console.log('Completed building static frontend.');

api/frameworks.ts

@@ -16,10 +16,6 @@ const frameworks = (_frameworks as Framework[])
       defaultRoutes: undefined,
     };
 
-    if (framework.logo) {
-      framework.logo = `https://res.cloudinary.com/zeit-inc/image/fetch/${framework.logo}`;
-    }
-
     return framework;
   });
 

examples/nextjs/.gitignore

@@ -26,10 +26,11 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  swcMinify: true,
 }
 
 module.exports = nextConfig

examples/nextjs/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "nextjs",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -7,12 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "12.1.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "next": "12.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "eslint": "8.12.0",
-    "eslint-config-next": "12.1.4"
+    "eslint": "8.23.1",
+    "eslint-config-next": "12.3.1"
   }
 }

examples/nextjs/styles/Home.module.css

@@ -114,3 +114,16 @@
     flex-direction: column;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .card,
+  .footer {
+    border-color: #222;
+  }
+  .code {
+    background: #111;
+  }
+  .logo img {
+    filter: invert(1);
+  }
+}

examples/nextjs/styles/globals.css

@@ -14,3 +14,13 @@ a {
 * {
   box-sizing: border-box;
 }
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}

examples/sveltekit/README.md

@@ -8,21 +8,9 @@ Everything you need to build a Svelte project, powered by [`create-svelte`](http
 
 _Live Example: https://sveltekit-template.vercel.app_
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm init svelte
-
-# create a new project in my-app
-npm init svelte my-app
-```
-
 ## Developing
 
-Once you've created a project and installed dependencies with `pnpm install`, start a development server:
+Once you've installed dependencies with `pnpm install`, start a development server:
 
 ```bash
 pnpm run dev

examples/sveltekit/jsconfig.json

@@ -10,4 +10,8 @@
     "sourceMap": true,
     "strict": true
   }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
 }

examples/sveltekit/package.json

@@ -1,25 +1,25 @@
 {
   "private": true,
   "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
+    "dev": "vite dev",
+    "build": "vite build",
     "package": "svelte-kit package",
-    "preview": "svelte-kit preview",
-    "prepare": "svelte-kit sync",
+    "preview": "vite preview",
     "check": "svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-check --tsconfig ./jsconfig.json --watch",
-    "lint": "prettier --check --plugin-search-dir=. .",
-    "format": "prettier --write --plugin-search-dir=. ."
+    "lint": "prettier --check .",
+    "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "1.0.0-next.50",
-    "@sveltejs/kit": "1.0.0-next.347",
-    "@types/cookie": "^0.4.1",
-    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.0",
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@types/cookie": "^0.5.1",
+    "prettier": "^2.6.2",
+    "prettier-plugin-svelte": "^2.7.0",
     "svelte": "^3.46.0",
-    "svelte-check": "^2.2.6",
-    "typescript": "~4.6.2"
+    "svelte-check": "^2.7.1",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.8"
   },
   "type": "module",
   "dependencies": {

examples/sveltekit/src/app.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="@sveltejs/kit" />
-
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+// and what to do when importing types
 declare namespace App {
   interface Locals {
     userid: string;
@@ -9,7 +8,7 @@ declare namespace App {
 
   // interface Platform {}
 
-  // interface Session {}
+  // interface PrivateEnv {}
 
-  // interface Stuff {}
+  // interface PublicEnv {}
 }

examples/sveltekit/src/app.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
   </head>
   <body>

examples/sveltekit/src/lib/Counter.svelte

@@ -1,107 +1,107 @@
 <script>
-  import { spring } from 'svelte/motion';
+	import { spring } from 'svelte/motion';
 
-  let count = 0;
+	let count = 0;
 
-  const displayed_count = spring();
-  $: displayed_count.set(count);
-  $: offset = modulo($displayed_count, 1);
+	const displayed_count = spring();
+	$: displayed_count.set(count);
+	$: offset = modulo($displayed_count, 1);
 
-  /**
-   * @param {number} n
-   * @param {number} m
-   */
-  function modulo(n, m) {
-    // handle negative numbers
-    return ((n % m) + m) % m;
-  }
+	/**
+	 * @param {number} n
+	 * @param {number} m
+	 */
+	function modulo(n, m) {
+		// handle negative numbers
+		return ((n % m) + m) % m;
+	}
 </script>
 
 <div class="counter">
-  <button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-    <svg aria-hidden="true" viewBox="0 0 1 1">
-      <path d="M0,0.5 L1,0.5" />
-    </svg>
-  </button>
+	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5" />
+		</svg>
+	</button>
 
-  <div class="counter-viewport">
-    <div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-      <strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-      <strong>{Math.floor($displayed_count)}</strong>
-    </div>
-  </div>
+	<div class="counter-viewport">
+		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
+			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
+			<strong>{Math.floor($displayed_count)}</strong>
+		</div>
+	</div>
 
-  <button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-    <svg aria-hidden="true" viewBox="0 0 1 1">
-      <path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-    </svg>
-  </button>
+	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
+		</svg>
+	</button>
 </div>
 
 <style>
-  .counter {
-    display: flex;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    margin: 1rem 0;
-  }
+	.counter {
+		display: flex;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		margin: 1rem 0;
+	}
 
-  .counter button {
-    width: 2em;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background-color: transparent;
-    touch-action: manipulation;
-    color: var(--text-color);
-    font-size: 2rem;
-  }
+	.counter button {
+		width: 2em;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background-color: transparent;
+		touch-action: manipulation;
+		color: var(--text-color);
+		font-size: 2rem;
+	}
 
-  .counter button:hover {
-    background-color: var(--secondary-color);
-  }
+	.counter button:hover {
+		background-color: var(--secondary-color);
+	}
 
-  svg {
-    width: 25%;
-    height: 25%;
-  }
+	svg {
+		width: 25%;
+		height: 25%;
+	}
 
-  path {
-    vector-effect: non-scaling-stroke;
-    stroke-width: 2px;
-    stroke: var(--text-color);
-  }
+	path {
+		vector-effect: non-scaling-stroke;
+		stroke-width: 2px;
+		stroke: var(--text-color);
+	}
 
-  .counter-viewport {
-    width: 8em;
-    height: 4em;
-    overflow: hidden;
-    text-align: center;
-    position: relative;
-  }
+	.counter-viewport {
+		width: 8em;
+		height: 4em;
+		overflow: hidden;
+		text-align: center;
+		position: relative;
+	}
 
-  .counter-viewport strong {
-    position: absolute;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    font-weight: 400;
-    color: var(--accent-color);
-    font-size: 4rem;
-    align-items: center;
-    justify-content: center;
-  }
+	.counter-viewport strong {
+		position: absolute;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		font-weight: 400;
+		color: var(--accent-color);
+		font-size: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
 
-  .counter-digits {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
+	.counter-digits {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 
-  .hidden {
-    top: -100%;
-    user-select: none;
-  }
+	.hidden {
+		top: -100%;
+		user-select: none;
+	}
 </style>

examples/sveltekit/src/lib/form.js

@@ -31,11 +31,11 @@ import { invalidate } from '$app/navigation';
 export function enhance(form, { pending, error, result } = {}) {
   let current_token;
 
-  /** @param {SubmitEvent} e */
-  async function handle_submit(e) {
+  /** @param {SubmitEvent} event */
+  async function handle_submit(event) {
     const token = (current_token = {});
 
-    e.preventDefault();
+    event.preventDefault();
 
     const data = new FormData(form);
 
@@ -63,11 +63,11 @@ export function enhance(form, { pending, error, result } = {}) {
       } else {
         console.error(await response.text());
       }
-    } catch (e) {
-      if (error && e instanceof Error) {
-        error({ data, form, error: e, response: null });
+    } catch (err) {
+      if (error && err instanceof Error) {
+        error({ data, form, error: err, response: null });
       } else {
-        throw e;
+        throw err;
       }
     }
   }

examples/sveltekit/src/lib/header/Header.svelte

@@ -1,124 +1,124 @@
 <script>
-  import { page } from '$app/stores';
-  import logo from './svelte-logo.svg';
+	import { page } from '$app/stores';
+	import logo from './svelte-logo.svg';
 </script>
 
 <header>
-  <div class="corner">
-    <a href="https://kit.svelte.dev">
-      <img src={logo} alt="SvelteKit" />
-    </a>
-  </div>
+	<div class="corner">
+		<a href="https://kit.svelte.dev">
+			<img src={logo} alt="SvelteKit" />
+		</a>
+	</div>
 
-  <nav>
-    <svg viewBox="0 0 2 3" aria-hidden="true">
-      <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
-    </svg>
-    <ul>
-      <li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-      <li class:active={$page.url.pathname === '/about'}>
-        <a sveltekit:prefetch href="/about">About</a>
-      </li>
-      <li class:active={$page.url.pathname === '/todos'}>
-        <a sveltekit:prefetch href="/todos">Todos</a>
-      </li>
-    </ul>
-    <svg viewBox="0 0 2 3" aria-hidden="true">
-      <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
-    </svg>
-  </nav>
+	<nav>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
+		</svg>
+		<ul>
+			<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
+			<li class:active={$page.url.pathname === '/about'}>
+				<a sveltekit:prefetch href="/about">About</a>
+			</li>
+			<li class:active={$page.url.pathname === '/todos'}>
+				<a sveltekit:prefetch href="/todos">Todos</a>
+			</li>
+		</ul>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
+		</svg>
+	</nav>
 
-  <div class="corner">
-    <!-- TODO put something else here? github link? -->
-  </div>
+	<div class="corner">
+		<!-- TODO put something else here? github link? -->
+	</div>
 </header>
 
 <style>
-  header {
-    display: flex;
-    justify-content: space-between;
-  }
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
 
-  .corner {
-    width: 3em;
-    height: 3em;
-  }
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
 
-  .corner a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
 
-  .corner img {
-    width: 2em;
-    height: 2em;
-    object-fit: contain;
-  }
+	.corner img {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
 
-  nav {
-    display: flex;
-    justify-content: center;
-    --background: rgba(255, 255, 255, 0.7);
-  }
+	nav {
+		display: flex;
+		justify-content: center;
+		--background: rgba(255, 255, 255, 0.7);
+	}
 
-  svg {
-    width: 2em;
-    height: 3em;
-    display: block;
-  }
+	svg {
+		width: 2em;
+		height: 3em;
+		display: block;
+	}
 
-  path {
-    fill: var(--background);
-  }
+	path {
+		fill: var(--background);
+	}
 
-  ul {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    height: 3em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    list-style: none;
-    background: var(--background);
-    background-size: contain;
-  }
+	ul {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		height: 3em;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		list-style: none;
+		background: var(--background);
+		background-size: contain;
+	}
 
-  li {
-    position: relative;
-    height: 100%;
-  }
+	li {
+		position: relative;
+		height: 100%;
+	}
 
-  li.active::before {
-    --size: 6px;
-    content: '';
-    width: 0;
-    height: 0;
-    position: absolute;
-    top: 0;
-    left: calc(50% - var(--size));
-    border: var(--size) solid transparent;
-    border-top: var(--size) solid var(--accent-color);
-  }
+	li.active::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--accent-color);
+	}
 
-  nav a {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 0 1em;
-    color: var(--heading-color);
-    font-weight: 700;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    text-decoration: none;
-    transition: color 0.2s linear;
-  }
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 1em;
+		color: var(--heading-color);
+		font-weight: 700;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
 
-  a:hover {
-    color: var(--accent-color);
-  }
+	a:hover {
+		color: var(--accent-color);
+	}
 </style>

examples/sveltekit/src/routes/+layout.svelte

@@ -0,0 +1,58 @@
+<script>
+	import Header from '$lib/header/Header.svelte';
+  import { webVitals } from '$lib/vitals';
+  import { browser } from '$app/env';
+  import { page } from '$app/stores';
+  import '../app.css';
+
+  let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
+
+  $: if (browser && analyticsId) {
+    webVitals({
+      path: $page.url.pathname,
+      params: $page.params,
+      analyticsId
+    })
+  }
+</script>
+
+<Header />
+
+<main>
+	<slot />
+</main>
+
+<footer>
+	<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+</footer>
+
+<style>
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 1rem;
+		width: 100%;
+		max-width: 1024px;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+
+	footer {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 40px;
+	}
+
+	footer a {
+		font-weight: bold;
+	}
+
+	@media (min-width: 480px) {
+		footer {
+			padding: 40px 0;
+		}
+	}
+</style>

examples/sveltekit/src/routes/+page.js

@@ -0,0 +1 @@
+export const prerender = true;

examples/sveltekit/src/routes/+page.svelte

@@ -0,0 +1,57 @@
+<script>
+	import Counter from '$lib/Counter.svelte';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<section>
+	<h1>
+		<span class="welcome">
+			<picture>
+				<source srcset="svelte-welcome.webp" type="image/webp" />
+				<img src="svelte-welcome.png" alt="Welcome" />
+			</picture>
+		</span>
+
+		to your new<br />SvelteKit app
+	</h1>
+
+	<h2>
+		try editing <strong>src/routes/index.svelte</strong>
+	</h2>
+
+	<Counter />
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+	}
+
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		display: block;
+		position: relative;
+		width: 100%;
+		height: 0;
+		padding: 0 0 calc(100% * 495 / 2048) 0;
+	}
+
+	.welcome img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: block;
+	}
+</style>

examples/sveltekit/src/routes/__layout.svelte

@@ -1,58 +0,0 @@
-<script>
-  import Header from '$lib/header/Header.svelte';
-  import { webVitals } from '$lib/vitals';
-  import { browser } from '$app/env';
-  import { page } from '$app/stores';
-  import '../app.css';
-
-  let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
-
-  $: if (browser && analyticsId) {
-    webVitals({
-      path: $page.url.pathname,
-      params: $page.params,
-      analyticsId
-    })
-  }
-</script>
-
-<Header />
-
-<main>
-  <slot />
-</main>
-
-<footer>
-  <p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
-</footer>
-
-<style>
-  main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    width: 100%;
-    max-width: 1024px;
-    margin: 0 auto;
-    box-sizing: border-box;
-  }
-
-  footer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 40px;
-  }
-
-  footer a {
-    font-weight: bold;
-  }
-
-  @media (min-width: 480px) {
-    footer {
-      padding: 40px 0;
-    }
-  }
-</style>

examples/sveltekit/src/routes/about.svelte

@@ -1,50 +0,0 @@
-<script context="module">
-  import { browser, dev } from '$app/env';
-
-  // we don't need any JS on this page, though we'll load
-  // it in dev so that we get hot module replacement...
-  export const hydrate = dev;
-
-  // ...but if the client-side router is already loaded
-  // (i.e. we came here from elsewhere in the app), use it
-  export const router = browser;
-
-  // since there's no dynamic data here, we can prerender
-  // it so that it gets served as a static asset in prod
-  export const prerender = true;
-</script>
-
-<svelte:head>
-  <title>About</title>
-  <meta name="description" content="About this app" />
-</svelte:head>
-
-<div class="content">
-  <h1>About this app</h1>
-
-  <p>
-    This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
-    following into your command line and following the prompts:
-  </p>
-
-  <pre>npm init svelte</pre>
-
-  <p>
-    The page you're looking at is purely static HTML, with no client-side interactivity needed.
-    Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
-    the devtools network panel and reloading.
-  </p>
-
-  <p>
-    The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
-    it with JavaScript disabled!
-  </p>
-</div>
-
-<style>
-  .content {
-    width: 100%;
-    max-width: var(--column-width);
-    margin: var(--column-margin-top) auto 0 auto;
-  }
-</style>

examples/sveltekit/src/routes/about/+page.js

@@ -0,0 +1,13 @@
+import { browser, dev } from '$app/env';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement...
+export const hydrate = dev;
+
+// ...but if the client-side router is already loaded
+// (i.e. we came here from elsewhere in the app), use it
+export const router = browser;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in prod
+export const prerender = true;

examples/sveltekit/src/routes/about/+page.svelte

@@ -0,0 +1,34 @@
+<svelte:head>
+	<title>About</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="content">
+	<h1>About this app</h1>
+
+	<p>
+		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
+		following into your command line and following the prompts:
+	</p>
+
+	<pre>npm create svelte@latest</pre>
+
+	<p>
+		The page you're looking at is purely static HTML, with no client-side interactivity needed.
+		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+		the devtools network panel and reloading.
+	</p>
+
+	<p>
+		The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
+		it with JavaScript disabled!
+	</p>
+</div>
+
+<style>
+	.content {
+		width: 100%;
+		max-width: var(--column-width);
+		margin: var(--column-margin-top) auto 0 auto;
+	}
+</style>

examples/sveltekit/src/routes/index.svelte

@@ -1,60 +0,0 @@
-<script context="module">
-  export const prerender = true;
-</script>
-
-<script>
-  import Counter from '$lib/Counter.svelte';
-</script>
-
-<svelte:head>
-  <title>Home</title>
-  <meta name="description" content="Svelte demo app" />
-</svelte:head>
-
-<section>
-  <h1>
-    <div class="welcome">
-      <picture>
-        <source srcset="svelte-welcome.webp" type="image/webp" />
-        <img src="svelte-welcome.png" alt="Welcome" />
-      </picture>
-    </div>
-
-    to your new<br />SvelteKit app
-  </h1>
-
-  <h2>
-    try editing <strong>src/routes/index.svelte</strong>
-  </h2>
-
-  <Counter />
-</section>
-
-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-  }
-
-  h1 {
-    width: 100%;
-  }
-
-  .welcome {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding: 0 0 calc(100% * 495 / 2048) 0;
-  }
-
-  .welcome img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    display: block;
-  }
-</style>

examples/sveltekit/src/routes/todos/+page.server.js

@@ -0,0 +1,62 @@
+import { error } from '@sveltejs/kit';
+import { api } from './api';
+
+/**
+ * @typedef {{
+ *   uid: string;
+ *   created_at: Date;
+ *   text: string;
+ *   done: boolean;
+ *   pending_delete: boolean;
+ * }} Todo
+ */
+
+/** @type {import('./$types').PageServerLoad} */
+export const load = async ({ locals }) => {
+  // locals.userid comes from src/hooks.js
+  const response = await api('GET', `todos/${locals.userid}`);
+
+  if (response.status === 404) {
+    // user hasn't created a todo list.
+    // start with an empty array
+    return {
+      /** @type {Todo[]} */
+      todos: []
+    };
+  }
+
+  if (response.status === 200) {
+    return {
+      /** @type {Todo[]} */
+      todos: await response.json()
+    };
+  }
+
+  throw error(response.status);
+};
+
+/** @type {import('./$types').Action} */
+export const POST = async ({ request, locals }) => {
+  const form = await request.formData();
+
+  await api('POST', `todos/${locals.userid}`, {
+    text: form.get('text')
+  });
+};
+
+/** @type {import('./$types').Action} */
+export const PATCH = async ({ request, locals }) => {
+  const form = await request.formData();
+
+  await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
+    text: form.has('text') ? form.get('text') : undefined,
+    done: form.has('done') ? !!form.get('done') : undefined
+  });
+};
+
+/** @type {import('./$types').Action} */
+export const DELETE = async ({ request, locals }) => {
+  const form = await request.formData();
+
+  await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`);
+};

examples/sveltekit/src/routes/todos/+page.svelte

@@ -0,0 +1,180 @@
+<script>
+	import { enhance } from '$lib/form';
+	import { scale } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	/** @type {import('./$types').PageData} */
+	export let data;
+</script>
+
+<svelte:head>
+	<title>Todos</title>
+	<meta name="description" content="A todo list app" />
+</svelte:head>
+
+<div class="todos">
+	<h1>Todos</h1>
+
+	<form
+		class="new"
+		action="/todos"
+		method="post"
+		use:enhance={{
+			result: async ({ form }) => {
+				form.reset();
+			}
+		}}
+	>
+		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
+	</form>
+
+	{#each data.todos as todo (todo.uid)}
+		<div
+			class="todo"
+			class:done={todo.done}
+			transition:scale|local={{ start: 0.7 }}
+			animate:flip={{ duration: 200 }}
+		>
+			<form
+				action="/todos?_method=PATCH"
+				method="post"
+				use:enhance={{
+					pending: ({ data }) => {
+						todo.done = !!data.get('done');
+					}
+				}}
+			>
+				<input type="hidden" name="uid" value={todo.uid} />
+				<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
+				<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
+			</form>
+
+			<form class="text" action="/todos?_method=PATCH" method="post" use:enhance>
+				<input type="hidden" name="uid" value={todo.uid} />
+				<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
+				<button class="save" aria-label="Save todo" />
+			</form>
+
+			<form
+				action="/todos?_method=DELETE"
+				method="post"
+				use:enhance={{
+					pending: () => (todo.pending_delete = true)
+				}}
+			>
+				<input type="hidden" name="uid" value={todo.uid} />
+				<button class="delete" aria-label="Delete todo" disabled={todo.pending_delete} />
+			</form>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.todos {
+		width: 100%;
+		max-width: var(--column-width);
+		margin: var(--column-margin-top) auto 0 auto;
+		line-height: 1;
+	}
+
+	.new {
+		margin: 0 0 0.5rem 0;
+	}
+
+	input {
+		border: 1px solid transparent;
+	}
+
+	input:focus-visible {
+		box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
+		border: 1px solid #ff3e00 !important;
+		outline: none;
+	}
+
+	.new input {
+		font-size: 28px;
+		width: 100%;
+		padding: 0.5em 1em 0.3em 1em;
+		box-sizing: border-box;
+		background: rgba(255, 255, 255, 0.05);
+		border-radius: 8px;
+		text-align: center;
+	}
+
+	.todo {
+		display: grid;
+		grid-template-columns: 2rem 1fr 2rem;
+		grid-gap: 0.5rem;
+		align-items: center;
+		margin: 0 0 0.5rem 0;
+		padding: 0.5rem;
+		background-color: white;
+		border-radius: 8px;
+		filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
+		transform: translate(-1px, -1px);
+		transition: filter 0.2s, transform 0.2s;
+	}
+
+	.done {
+		transform: none;
+		opacity: 0.4;
+		filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
+	}
+
+	form.text {
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.todo input {
+		flex: 1;
+		padding: 0.5em 2em 0.5em 0.8em;
+		border-radius: 3px;
+	}
+
+	.todo button {
+		width: 2em;
+		height: 2em;
+		border: none;
+		background-color: transparent;
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+	}
+
+	button.toggle {
+		border: 1px solid rgba(0, 0, 0, 0.2);
+		border-radius: 50%;
+		box-sizing: border-box;
+		background-size: 1em auto;
+	}
+
+	.done .toggle {
+		background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+	}
+
+	.delete {
+		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+		opacity: 0.2;
+	}
+
+	.delete:hover,
+	.delete:focus {
+		transition: opacity 0.2s;
+		opacity: 1;
+	}
+
+	.save {
+		position: absolute;
+		right: 0;
+		opacity: 0;
+		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+	}
+
+	.todo input:focus + .save,
+	.save:focus {
+		transition: opacity 0.2s;
+		opacity: 1;
+	}
+</style>

examples/sveltekit/src/routes/todos/api.js

@@ -1,9 +1,7 @@
 /*
 	This module is used by the /todos endpoint to
 	make calls to api.svelte.dev, which stores todos
-	for each user. The leading underscore indicates that this is
-	a private module, _not_ an endpoint — visiting /todos/_api
-	will net you a 404 response.
+	for each user.
 
 	(The data on the todo app will expire periodically; no
 	guarantees are made. Don't use it to organise your life.)

examples/sveltekit/src/routes/todos/index.js

@@ -1,70 +0,0 @@
-import { api } from './_api';
-
-/** @type {import('./__types').RequestHandler} */
-export const get = async ({ locals }) => {
-  // locals.userid comes from src/hooks.js
-  const response = await api('get', `todos/${locals.userid}`);
-
-  if (response.status === 404) {
-    // user hasn't created a todo list.
-    // start with an empty array
-    return {
-      body: {
-        todos: []
-      }
-    };
-  }
-
-  if (response.status === 200) {
-    return {
-      body: {
-        todos: await response.json()
-      }
-    };
-  }
-
-  return {
-    status: response.status
-  };
-};
-
-/** @type {import('./index').RequestHandler} */
-export const post = async ({ request, locals }) => {
-  const form = await request.formData();
-
-  await api('post', `todos/${locals.userid}`, {
-    text: form.get('text')
-  });
-
-  return {};
-};
-
-// If the user has JavaScript disabled, the URL will change to
-// include the method override unless we redirect back to /todos
-const redirect = {
-  status: 303,
-  headers: {
-    location: '/todos'
-  }
-};
-
-/** @type {import('./index').RequestHandler} */
-export const patch = async ({ request, locals }) => {
-  const form = await request.formData();
-
-  await api('patch', `todos/${locals.userid}/${form.get('uid')}`, {
-    text: form.has('text') ? form.get('text') : undefined,
-    done: form.has('done') ? !!form.get('done') : undefined
-  });
-
-  return redirect;
-};
-
-/** @type {import('./index').RequestHandler} */
-export const del = async ({ request, locals }) => {
-  const form = await request.formData();
-
-  await api('delete', `todos/${locals.userid}/${form.get('uid')}`);
-
-  return redirect;
-};

examples/sveltekit/src/routes/todos/index.svelte

@@ -1,190 +0,0 @@
-<script>
-  import { enhance } from '$lib/form';
-  import { scale } from 'svelte/transition';
-  import { flip } from 'svelte/animate';
-
-  /**
-   * @typedef {{
-   *   uid: string;
-   *   created_at: Date;
-   *   text: string;
-   *   done: boolean;
-   *   pending_delete: boolean;
-   * }} Todo
-   */
-
-  /** @type {Todo[]} */
-  export let todos;
-</script>
-
-<svelte:head>
-  <title>Todos</title>
-  <meta name="description" content="A todo list app" />
-</svelte:head>
-
-<div class="todos">
-  <h1>Todos</h1>
-
-  <form
-    class="new"
-    action="/todos"
-    method="post"
-    use:enhance={{
-      result: async ({ form }) => {
-        form.reset();
-      }
-    }}
-  >
-    <input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
-  </form>
-
-  {#each todos as todo (todo.uid)}
-    <div
-      class="todo"
-      class:done={todo.done}
-      transition:scale|local={{ start: 0.7 }}
-      animate:flip={{ duration: 200 }}
-    >
-      <form
-        action="/todos?_method=PATCH"
-        method="post"
-        use:enhance={{
-          pending: ({ data }) => {
-            todo.done = !!data.get('done');
-          }
-        }}
-      >
-        <input type="hidden" name="uid" value={todo.uid} />
-        <input type="hidden" name="done" value={todo.done ? '' : 'true'} />
-        <button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
-      </form>
-
-      <form class="text" action="/todos?_method=PATCH" method="post" use:enhance>
-        <input type="hidden" name="uid" value={todo.uid} />
-        <input aria-label="Edit todo" type="text" name="text" value={todo.text} />
-        <button class="save" aria-label="Save todo" />
-      </form>
-
-      <form
-        action="/todos?_method=DELETE"
-        method="post"
-        use:enhance={{
-          pending: () => (todo.pending_delete = true)
-        }}
-      >
-        <input type="hidden" name="uid" value={todo.uid} />
-        <button class="delete" aria-label="Delete todo" disabled={todo.pending_delete} />
-      </form>
-    </div>
-  {/each}
-</div>
-
-<style>
-  .todos {
-    width: 100%;
-    max-width: var(--column-width);
-    margin: var(--column-margin-top) auto 0 auto;
-    line-height: 1;
-  }
-
-  .new {
-    margin: 0 0 0.5rem 0;
-  }
-
-  input {
-    border: 1px solid transparent;
-  }
-
-  input:focus-visible {
-    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
-    border: 1px solid #ff3e00 !important;
-    outline: none;
-  }
-
-  .new input {
-    font-size: 28px;
-    width: 100%;
-    padding: 0.5em 1em 0.3em 1em;
-    box-sizing: border-box;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 8px;
-    text-align: center;
-  }
-
-  .todo {
-    display: grid;
-    grid-template-columns: 2rem 1fr 2rem;
-    grid-gap: 0.5rem;
-    align-items: center;
-    margin: 0 0 0.5rem 0;
-    padding: 0.5rem;
-    background-color: white;
-    border-radius: 8px;
-    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
-    transform: translate(-1px, -1px);
-    transition: filter 0.2s, transform 0.2s;
-  }
-
-  .done {
-    transform: none;
-    opacity: 0.4;
-    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
-  }
-
-  form.text {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-
-  .todo input {
-    flex: 1;
-    padding: 0.5em 2em 0.5em 0.8em;
-    border-radius: 3px;
-  }
-
-  .todo button {
-    width: 2em;
-    height: 2em;
-    border: none;
-    background-color: transparent;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-  }
-
-  button.toggle {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 50%;
-    box-sizing: border-box;
-    background-size: 1em auto;
-  }
-
-  .done .toggle {
-    background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  }
-
-  .delete {
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-    opacity: 0.2;
-  }
-
-  .delete:hover,
-  .delete:focus {
-    transition: opacity 0.2s;
-    opacity: 1;
-  }
-
-  .save {
-    position: absolute;
-    right: 0;
-    opacity: 0;
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
-  }
-
-  .todo input:focus + .save,
-  .save:focus {
-    transition: opacity 0.2s;
-    opacity: 1;
-  }
-</style>

examples/sveltekit/svelte.config.js

@@ -8,11 +8,6 @@ const config = {
     // Override http methods in the Todo forms
     methodOverride: {
       allowed: ['PATCH', 'DELETE']
-    },
-    vite: {
-      define: {
-        'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
-      }
     }
   }
 };

examples/sveltekit/vite.config.js

@@ -0,0 +1,11 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [sveltekit()],
+  define: {
+    'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
+  }
+};
+
+export default config;

package.json

@@ -8,7 +8,10 @@
       "packages/*"
     ],
     "nohoist": [
-      "**/@types/**"
+      "**/@types/**",
+      "**/typedoc",
+      "**/typedoc-plugin-markdown",
+      "**/typedoc-plugin-mdn-links"
     ]
   },
   "dependencies": {
@@ -31,7 +34,7 @@
     "prettier": "2.6.2",
     "ts-eager": "2.0.2",
     "ts-jest": "28.0.5",
-    "turbo": "1.3.2-canary.1"
+    "turbo": "1.4.7"
   },
   "scripts": {
     "lerna": "lerna",

packages/build-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/build-utils",
-  "version": "5.3.1",
+  "version": "5.5.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",

packages/build-utils/src/clone-env.ts

@@ -0,0 +1,34 @@
+import type { Env } from './types';
+
+const { hasOwnProperty } = Object.prototype;
+
+/**
+ * Clones zero or more objects into a single new object while ensuring that the
+ * `PATH` environment variable is defined when the `PATH` or `Path` environment
+ * variables are defined.
+ *
+ * @param {Object} [...envs] Objects and/or `process.env` to clone and merge
+ * @returns {Object} The new object
+ */
+export function cloneEnv(...envs: (Env | undefined)[]): Env {
+  return envs.reduce((obj: Env, env) => {
+    if (env === undefined || env === null) {
+      return obj;
+    }
+
+    // mixin the env first
+    obj = Object.assign(obj, env);
+
+    if (hasOwnProperty.call(env, 'Path')) {
+      // the system path is called `Path` on Windows and Node.js will
+      // automatically return the system path when accessing `PATH`,
+      // however we lose this proxied value when we destructure and
+      // thus we must explicitly copy it, but we must also remove the
+      // `Path` property since we can't have both a `PATH` and `Path`
+      obj.PATH = obj.Path;
+      delete obj.Path;
+    }
+
+    return obj;
+  }, {});
+}

packages/build-utils/src/debug.ts

@@ -3,5 +3,7 @@ import { getPlatformEnv } from './get-platform-env';
 export default function debug(message: string, ...additional: any[]) {
   if (getPlatformEnv('BUILDER_DEBUG')) {
     console.log(message, ...additional);
+  } else if (process.env.VERCEL_DEBUG_PREFIX) {
+    console.log(`${process.env.VERCEL_DEBUG_PREFIX}${message}`, ...additional);
   }
 }

packages/build-utils/src/edge-function.ts

@@ -38,6 +38,9 @@ export class EdgeFunction {
    */
   assets?: { name: string; path: string }[];
 
+  /** The regions where the edge function will be executed on */
+  regions?: 'auto' | string[] | 'all' | 'default';
+
   constructor(params: Omit<EdgeFunction, 'type'>) {
     this.type = 'EdgeFunction';
     this.name = params.name;
@@ -46,5 +49,6 @@ export class EdgeFunction {
     this.files = params.files;
     this.envVarsInUse = params.envVarsInUse;
     this.assets = params.assets;
+    this.regions = params.regions;
   }
 }

packages/build-utils/src/fs/run-user-scripts.ts

@@ -11,6 +11,7 @@ import { NowBuildError } from '../errors';
 import { Meta, PackageJson, NodeVersion, Config } from '../types';
 import { getSupportedNodeVersion, getLatestNodeVersion } from './node-version';
 import { readConfigFile } from './read-config-file';
+import { cloneEnv } from '../clone-env';
 
 // Only allow one `runNpmInstall()` invocation to run concurrently
 const runNpmInstallSema = new Sema(1);
@@ -23,8 +24,7 @@ export interface ScanParentDirsResult {
    */
   cliType: CliType;
   /**
-   * The file path of found `package.json` file, or `undefined` if none was
-   * found.
+   * The file path of found `package.json` file, or `undefined` if not found.
    */
   packageJsonPath?: string;
   /**
@@ -33,8 +33,13 @@ export interface ScanParentDirsResult {
    */
   packageJson?: PackageJson;
   /**
-   * The `lockfileVersion` number from the `package-lock.json` file,
-   * when present.
+   * The file path of the lockfile (`yarn.lock`, `package-lock.json`, or `pnpm-lock.yaml`)
+   * or `undefined` if not found.
+   */
+  lockfilePath?: string;
+  /**
+   * The `lockfileVersion` number from lockfile (`package-lock.json` or `pnpm-lock.yaml`),
+   * or `undefined` if not found.
    */
   lockfileVersion?: number;
 }
@@ -178,25 +183,9 @@ export async function getNodeBinPath({
 }: {
   cwd: string;
 }): Promise<string> {
-  const { code, stdout, stderr } = await execAsync('npm', ['bin'], {
-    cwd,
-    prettyCommand: 'npm bin',
-
-    // in some rare cases, we saw `npm bin` exit with a non-0 code, but still
-    // output the right bin path, so we ignore the exit code
-    ignoreNon0Exit: true,
-  });
-
-  const nodeBinPath = stdout.trim();
-
-  if (path.isAbsolute(nodeBinPath)) {
-    return nodeBinPath;
-  }
-
-  throw new NowBuildError({
-    code: `BUILD_UTILS_GET_NODE_BIN_PATH`,
-    message: `Running \`npm bin\` failed to return a valid bin path (code=${code}, stdout=${stdout}, stderr=${stderr})`,
-  });
+  const { lockfilePath } = await scanParentDirs(cwd);
+  const dir = path.dirname(lockfilePath || cwd);
+  return path.join(dir, 'node_modules', '.bin');
 }
 
 async function chmodPlusX(fsPath: string) {
@@ -229,7 +218,7 @@ export function getSpawnOptions(
   nodeVersion: NodeVersion
 ): SpawnOptions {
   const opts = {
-    env: { ...process.env },
+    env: cloneEnv(process.env),
   };
 
   if (!meta.isDev) {
@@ -319,6 +308,7 @@ export async function scanParentDirs(
     start: destPath,
     filenames: ['yarn.lock', 'package-lock.json', 'pnpm-lock.yaml'],
   });
+  let lockfilePath: string | undefined;
   let lockfileVersion: number | undefined;
   let cliType: CliType = 'yarn';
 
@@ -335,17 +325,25 @@ export async function scanParentDirs(
   // Priority order is Yarn > pnpm > npm
   if (hasYarnLock) {
     cliType = 'yarn';
+    lockfilePath = yarnLockPath;
   } else if (pnpmLockYaml) {
     cliType = 'pnpm';
-    // just ensure that it is read as a number and not a string
+    lockfilePath = pnpmLockPath;
     lockfileVersion = Number(pnpmLockYaml.lockfileVersion);
   } else if (packageLockJson) {
     cliType = 'npm';
+    lockfilePath = npmLockPath;
     lockfileVersion = packageLockJson.lockfileVersion;
   }
 
   const packageJsonPath = pkgJsonPath || undefined;
-  return { cliType, packageJson, lockfileVersion, packageJsonPath };
+  return {
+    cliType,
+    packageJson,
+    lockfilePath,
+    lockfileVersion,
+    packageJsonPath,
+  };
 }
 
 export async function walkParentDirs({
@@ -452,7 +450,7 @@ export async function runNpmInstall(
     debug(`Installing to ${destPath}`);
 
     const opts: SpawnOptionsExtended = { cwd: destPath, ...spawnOpts };
-    const env = opts.env ? { ...opts.env } : { ...process.env };
+    const env = cloneEnv(opts.env || process.env);
     delete env.NODE_ENV;
     opts.env = getEnvForPackageManager({
       cliType,
@@ -461,12 +459,29 @@ export async function runNpmInstall(
       env,
     });
     let commandArgs: string[];
+    const isPotentiallyBrokenNpm =
+      cliType === 'npm' &&
+      nodeVersion?.major === 16 &&
+      !args.includes('--legacy-peer-deps') &&
+      spawnOpts?.env?.ENABLE_EXPERIMENTAL_COREPACK !== '1';
 
     if (cliType === 'npm') {
       opts.prettyCommand = 'npm install';
       commandArgs = args
         .filter(a => a !== '--prefer-offline')
         .concat(['install', '--no-audit', '--unsafe-perm']);
+      if (
+        isPotentiallyBrokenNpm &&
+        spawnOpts?.env?.VERCEL_NPM_LEGACY_PEER_DEPS === '1'
+      ) {
+        // Starting in npm@8.6.0, if you ran `npm install --legacy-peer-deps`,
+        // and then later ran `npm install`, it would fail. So the only way
+        // to safely upgrade npm from npm@8.5.0 is to set this flag. The docs
+        // say this flag is not recommended so its is behind a feature flag
+        // so we can remove it in node@18, which can introduce breaking changes.
+        // See https://docs.npmjs.com/cli/v8/using-npm/config#legacy-peer-deps
+        commandArgs.push('--legacy-peer-deps');
+      }
     } else if (cliType === 'pnpm') {
       // PNPM's install command is similar to NPM's but without the audit nonsense
       // @see options https://pnpm.io/cli/install
@@ -483,7 +498,26 @@ export async function runNpmInstall(
       commandArgs.push('--production');
     }
 
-    await spawnAsync(cliType, commandArgs, opts);
+    try {
+      await spawnAsync(cliType, commandArgs, opts);
+    } catch (_) {
+      const potentialErrorPath = path.join(
+        process.env.HOME || '/',
+        '.npm',
+        'eresolve-report.txt'
+      );
+      if (
+        isPotentiallyBrokenNpm &&
+        !commandArgs.includes('--legacy-peer-deps') &&
+        fs.existsSync(potentialErrorPath)
+      ) {
+        console.warn(
+          'Warning: Retrying "Install Command" with `--legacy-peer-deps` which may accept a potentially broken dependency and slow install time.'
+        );
+        commandArgs.push('--legacy-peer-deps');
+        await spawnAsync(cliType, commandArgs, opts);
+      }
+    }
     debug(`Install complete [${Date.now() - installTime}ms]`);
     return true;
   } finally {
@@ -594,10 +628,7 @@ export async function runPackageJsonScript(
       cliType,
       lockfileVersion,
       nodeVersion: undefined,
-      env: {
-        ...process.env,
-        ...spawnOpts?.env,
-      },
+      env: cloneEnv(process.env, spawnOpts?.env),
     }),
   };
 

packages/build-utils/src/index.ts

@@ -41,6 +41,7 @@ import debug from './debug';
 import getIgnoreFilter from './get-ignore-filter';
 import { getPlatformEnv } from './get-platform-env';
 import { getPrefixedEnvVars } from './get-prefixed-env-vars';
+import { cloneEnv } from './clone-env';
 
 export {
   FileBlob,
@@ -84,6 +85,7 @@ export {
   getLambdaOptionsFromFunction,
   scanParentDirs,
   getIgnoreFilter,
+  cloneEnv,
 };
 
 export { EdgeFunction } from './edge-function';

packages/build-utils/src/types.ts

@@ -41,6 +41,7 @@ export interface Config {
   devCommand?: string;
   framework?: string | null;
   nodeVersion?: string;
+  middleware?: boolean;
   [key: string]: unknown;
 }
 
@@ -335,13 +336,13 @@ export interface ProjectSettings {
   directoryListing?: boolean;
   gitForkProtection?: boolean;
   commandForIgnoringBuildStep?: string | null;
-  skipGitConnectDuringLink?: boolean;
 }
 
 export interface BuilderV2 {
   version: 2;
   build: BuildV2;
   prepareCache?: PrepareCache;
+  shouldServe?: ShouldServe;
 }
 
 export interface BuilderV3 {

packages/build-utils/test/fixtures/15-npm-8-legacy-peer-deps/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.vercel

packages/build-utils/test/fixtures/15-npm-8-legacy-peer-deps/package-lock.json

@@ -0,0 +1,143 @@
+{
+  "name": "15-npm-8-legacy-peer-deps",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react": "16.8.0",
+        "swr": "1.3.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/react": {
+      "version": "16.8.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.0.tgz",
+      "integrity": "sha512-g+nikW2D48kqgWSPwNo0NH9tIGG3DsQFlrtrQ1kj6W77z5ahyIHG0w8kPpz4Sdj6gyLnz0lEd/xsjOoGge2MYQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.13.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/scheduler": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+      "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    }
+  },
+  "dependencies": {
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "react": {
+      "version": "16.8.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.0.tgz",
+      "integrity": "sha512-g+nikW2D48kqgWSPwNo0NH9tIGG3DsQFlrtrQ1kj6W77z5ahyIHG0w8kPpz4Sdj6gyLnz0lEd/xsjOoGge2MYQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.13.0"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "scheduler": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+      "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw=="
+    }
+  }
+}

packages/build-utils/test/fixtures/15-npm-8-legacy-peer-deps/package.json

@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "mkdir -p public && echo 'legacy peer deps' > public/index.txt"
+  },
+  "packageManager": "npm@8.6.0",
+  "dependencies": {
+    "swr": "1.3.0",
+    "react": "16.8.0"
+  }
+}

packages/build-utils/test/fixtures/15-npm-8-legacy-peer-deps/probes.json

@@ -0,0 +1,3 @@
+{
+  "probes": [{ "path": "/", "mustContain": "legacy peer deps" }]
+}

packages/build-utils/test/fixtures/20-npm-7/package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "20-npm-7",
       "version": "1.0.0"
     }
   }

packages/build-utils/test/integration.test.ts

@@ -21,6 +21,8 @@ const skipFixtures: string[] = [
   '08-zero-config-middleman',
   '21-npm-workspaces',
   '23-pnpm-workspaces',
+  '41-nx-monorepo',
+  '42-npm-workspace-with-nx',
 ];
 
 // eslint-disable-next-line no-restricted-syntax

packages/build-utils/test/unit.clone-env.test.ts

@@ -0,0 +1,117 @@
+import { cloneEnv } from '../src';
+
+it('should clone env with Path', () => {
+  expect(
+    cloneEnv(
+      new Proxy(
+        {
+          foo: 'bar',
+          Path: 'baz',
+        },
+        {
+          get(target: typeof process.env, prop: string) {
+            if (prop === 'PATH') {
+              return target.PATH ?? target.Path;
+            }
+            return target[prop];
+          },
+        }
+      )
+    )
+  ).toEqual({
+    foo: 'bar',
+    PATH: 'baz',
+  });
+});
+
+it('should clone env with PATH', () => {
+  expect(
+    cloneEnv({
+      foo: 'bar',
+      PATH: 'baz',
+    })
+  ).toEqual({
+    foo: 'bar',
+    PATH: 'baz',
+  });
+});
+
+it('should clone and merge multiple env objects', () => {
+  // note: this also tests the last object doesn't overwrite `PATH` with
+  // `undefined`
+  expect(
+    cloneEnv(
+      {
+        foo: 'bar',
+      },
+      {
+        PATH: 'baz',
+      },
+      {
+        baz: 'wiz',
+      }
+    )
+  ).toEqual({
+    foo: 'bar',
+    PATH: 'baz',
+    baz: 'wiz',
+  });
+});
+
+it('should clone the actual process.env object', () => {
+  expect(cloneEnv(process.env).PATH).toEqual(process.env.PATH);
+});
+
+it('should overwrite PATH with last value', () => {
+  expect(
+    cloneEnv(
+      new Proxy(
+        {
+          Path: 'foo',
+        },
+        {
+          get(target: typeof process.env, prop: string) {
+            if (prop === 'PATH') {
+              return target.PATH ?? target.Path;
+            }
+            return target[prop];
+          },
+        }
+      ),
+      {
+        PATH: 'bar',
+      },
+      {
+        PATH: undefined,
+      }
+    )
+  ).toEqual({
+    PATH: undefined,
+  });
+});
+
+it('should handle process.env at any argument position', () => {
+  expect(
+    cloneEnv(
+      {
+        foo: 'bar',
+      },
+      new Proxy(
+        {
+          Path: 'baz',
+        },
+        {
+          get(target: typeof process.env, prop: string) {
+            if (prop === 'PATH') {
+              return target.PATH ?? target.Path;
+            }
+            return target[prop];
+          },
+        }
+      )
+    )
+  ).toEqual({
+    foo: 'bar',
+    PATH: 'baz',
+  });
+});

packages/build-utils/test/unit.get-npm-bin-path.test.ts

@@ -0,0 +1,46 @@
+import { join, parse } from 'path';
+import { getNodeBinPath } from '../src';
+
+describe('Test `getNodeBinPath()`', () => {
+  it('should work with npm7', async () => {
+    const cwd = join(__dirname, 'fixtures', '20-npm-7');
+    const result = await getNodeBinPath({ cwd });
+    expect(result).toBe(join(cwd, 'node_modules', '.bin'));
+  });
+
+  it('should work with yarn', async () => {
+    const cwd = join(__dirname, 'fixtures', '19-yarn-v2');
+    const result = await getNodeBinPath({ cwd });
+    expect(result).toBe(join(cwd, 'node_modules', '.bin'));
+  });
+
+  it('should work with npm 6', async () => {
+    const cwd = join(__dirname, 'fixtures', '08-yarn-npm/with-npm');
+    const result = await getNodeBinPath({ cwd });
+    expect(result).toBe(join(cwd, 'node_modules', '.bin'));
+  });
+
+  it('should work with npm workspaces', async () => {
+    const cwd = join(__dirname, 'fixtures', '21-npm-workspaces/a');
+    const result = await getNodeBinPath({ cwd });
+    expect(result).toBe(join(cwd, '..', 'node_modules', '.bin'));
+  });
+
+  it('should work with pnpm', async () => {
+    const cwd = join(__dirname, 'fixtures', '22-pnpm');
+    const result = await getNodeBinPath({ cwd });
+    expect(result).toBe(join(cwd, 'node_modules', '.bin'));
+  });
+
+  it('should work with pnpm workspaces', async () => {
+    const cwd = join(__dirname, 'fixtures', '23-pnpm-workspaces/c');
+    const result = await getNodeBinPath({ cwd });
+    expect(result).toBe(join(cwd, '..', 'node_modules', '.bin'));
+  });
+
+  it('should fallback to cwd if no lockfile found', async () => {
+    const cwd = parse(process.cwd()).root;
+    const result = await getNodeBinPath({ cwd });
+    expect(result).toBe(join(cwd, 'node_modules', '.bin'));
+  });
+});

packages/build-utils/test/unit.run-npm-install.test.ts

@@ -0,0 +1,172 @@
+const spawnMock = jest.fn();
+jest.mock('cross-spawn', () => {
+  const spawn = (...args: any) => {
+    spawnMock(...args);
+    const child = {
+      on: (type: string, fn: (code: number) => void) => {
+        if (type === 'close') {
+          return fn(0);
+        }
+      },
+    };
+    return child;
+  };
+  return spawn;
+});
+
+afterEach(() => {
+  spawnMock.mockClear();
+});
+
+import path from 'path';
+import { runNpmInstall, cloneEnv } from '../src';
+import type { Meta } from '../src/types';
+
+function getTestSpawnOpts(env: Record<string, string>) {
+  return { env: cloneEnv(process.env, env) };
+}
+
+function getNodeVersion(major: number) {
+  return { major, range: `${major}.x`, runtime: `nodejs${major}.x` };
+}
+
+it('should not include peer dependencies when missing VERCEL_NPM_LEGACY_PEER_DEPS on node16', async () => {
+  const fixture = path.join(__dirname, 'fixtures', '20-npm-7');
+  const meta: Meta = {};
+  const spawnOpts = getTestSpawnOpts({});
+  const nodeVersion = { major: 16 } as any;
+  await runNpmInstall(fixture, [], spawnOpts, meta, nodeVersion);
+  expect(spawnMock.mock.calls.length).toBe(1);
+  const args = spawnMock.mock.calls[0];
+  expect(args[0]).toEqual('npm');
+  expect(args[1]).toEqual(['install', '--no-audit', '--unsafe-perm']);
+  expect(args[2]).toEqual({
+    cwd: fixture,
+    prettyCommand: 'npm install',
+    stdio: 'inherit',
+    env: expect.any(Object),
+  });
+});
+
+it('should include peer dependencies when VERCEL_NPM_LEGACY_PEER_DEPS=1 on node16', async () => {
+  const fixture = path.join(__dirname, 'fixtures', '20-npm-7');
+  const meta: Meta = {};
+  const spawnOpts = getTestSpawnOpts({ VERCEL_NPM_LEGACY_PEER_DEPS: '1' });
+  const nodeVersion = getNodeVersion(16);
+  await runNpmInstall(fixture, [], spawnOpts, meta, nodeVersion);
+  expect(spawnMock.mock.calls.length).toBe(1);
+  const args = spawnMock.mock.calls[0];
+  expect(args[0]).toEqual('npm');
+  expect(args[1]).toEqual([
+    'install',
+    '--no-audit',
+    '--unsafe-perm',
+    '--legacy-peer-deps',
+  ]);
+  expect(args[2]).toEqual({
+    cwd: fixture,
+    prettyCommand: 'npm install',
+    stdio: 'inherit',
+    env: expect.any(Object),
+  });
+});
+
+it('should not include peer dependencies when VERCEL_NPM_LEGACY_PEER_DEPS=1 on node14', async () => {
+  const fixture = path.join(__dirname, 'fixtures', '20-npm-7');
+  const meta: Meta = {};
+  const spawnOpts = getTestSpawnOpts({ VERCEL_NPM_LEGACY_PEER_DEPS: '1' });
+  const nodeVersion = getNodeVersion(14);
+  await runNpmInstall(fixture, [], spawnOpts, meta, nodeVersion);
+  expect(spawnMock.mock.calls.length).toBe(1);
+  const args = spawnMock.mock.calls[0];
+  expect(args[0]).toEqual('npm');
+  expect(args[1]).toEqual(['install', '--no-audit', '--unsafe-perm']);
+  expect(args[2]).toEqual({
+    cwd: fixture,
+    prettyCommand: 'npm install',
+    stdio: 'inherit',
+    env: expect.any(Object),
+  });
+});
+
+it('should not include peer dependencies when VERCEL_NPM_LEGACY_PEER_DEPS=1 on node16 with corepack enabled', async () => {
+  const fixture = path.join(__dirname, 'fixtures', '20-npm-7');
+  const meta: Meta = {};
+  const spawnOpts = getTestSpawnOpts({
+    VERCEL_NPM_LEGACY_PEER_DEPS: '1',
+    ENABLE_EXPERIMENTAL_COREPACK: '1',
+  });
+  const nodeVersion = getNodeVersion(16);
+  await runNpmInstall(fixture, [], spawnOpts, meta, nodeVersion);
+  expect(spawnMock.mock.calls.length).toBe(1);
+  const args = spawnMock.mock.calls[0];
+  expect(args[0]).toEqual('npm');
+  expect(args[1]).toEqual(['install', '--no-audit', '--unsafe-perm']);
+  expect(args[2]).toEqual({
+    cwd: fixture,
+    prettyCommand: 'npm install',
+    stdio: 'inherit',
+    env: expect.any(Object),
+  });
+});
+
+it('should only invoke `runNpmInstall()` once per `package.json` file (serial)', async () => {
+  const meta: Meta = {};
+  const fixture = path.join(__dirname, 'fixtures', '02-zero-config-api');
+  const apiDir = path.join(fixture, 'api');
+
+  const run1 = await runNpmInstall(apiDir, [], undefined, meta);
+  expect(run1).toEqual(true);
+  expect(
+    (meta.runNpmInstallSet as Set<string>).has(
+      path.join(fixture, 'package.json')
+    )
+  ).toEqual(true);
+
+  const run2 = await runNpmInstall(apiDir, [], undefined, meta);
+  expect(run2).toEqual(false);
+
+  const run3 = await runNpmInstall(fixture, [], undefined, meta);
+  expect(run3).toEqual(false);
+
+  expect(spawnMock.mock.calls.length).toBe(1);
+  const args = spawnMock.mock.calls[0];
+  expect(args[0]).toEqual('yarn');
+  expect(args[1]).toEqual(['install']);
+  expect(args[2]).toEqual({
+    cwd: apiDir,
+    prettyCommand: 'yarn install',
+    stdio: 'inherit',
+    env: expect.any(Object),
+  });
+});
+
+it('should only invoke `runNpmInstall()` once per `package.json` file (parallel)', async () => {
+  const meta: Meta = {};
+  const fixture = path.join(__dirname, 'fixtures', '02-zero-config-api');
+  const apiDir = path.join(fixture, 'api');
+  const [run1, run2, run3] = await Promise.all([
+    runNpmInstall(apiDir, [], undefined, meta),
+    runNpmInstall(apiDir, [], undefined, meta),
+    runNpmInstall(fixture, [], undefined, meta),
+  ]);
+  expect(run1).toEqual(true);
+  expect(run2).toEqual(false);
+  expect(run3).toEqual(false);
+  expect(
+    (meta.runNpmInstallSet as Set<string>).has(
+      path.join(fixture, 'package.json')
+    )
+  ).toEqual(true);
+
+  expect(spawnMock.mock.calls.length).toBe(1);
+  const args = spawnMock.mock.calls[0];
+  expect(args[0]).toEqual('yarn');
+  expect(args[1]).toEqual(['install']);
+  expect(args[2]).toEqual({
+    cwd: apiDir,
+    prettyCommand: 'yarn install',
+    stdio: 'inherit',
+    env: expect.any(Object),
+  });
+});

packages/build-utils/test/unit.test.ts

@@ -1,7 +1,6 @@
 import ms from 'ms';
 import path from 'path';
 import fs, { readlink } from 'fs-extra';
-import retry from 'async-retry';
 import { strict as assert, strictEqual } from 'assert';
 import { createZip } from '../src/lambda';
 import { getSupportedNodeVersion } from '../src/fs/node-version';
@@ -16,7 +15,6 @@ import {
   runPackageJsonScript,
   scanParentDirs,
   FileBlob,
-  Meta,
 } from '../src';
 
 jest.setTimeout(10 * 1000);
@@ -501,6 +499,7 @@ it('should return lockfileVersion 2 with npm7', async () => {
   const result = await scanParentDirs(fixture);
   expect(result.cliType).toEqual('npm');
   expect(result.lockfileVersion).toEqual(2);
+  expect(result.lockfilePath).toEqual(path.join(fixture, 'package-lock.json'));
   expect(result.packageJsonPath).toEqual(path.join(fixture, 'package.json'));
 });
 
@@ -509,6 +508,7 @@ it('should not return lockfileVersion with yarn', async () => {
   const result = await scanParentDirs(fixture);
   expect(result.cliType).toEqual('yarn');
   expect(result.lockfileVersion).toEqual(undefined);
+  expect(result.lockfilePath).toEqual(path.join(fixture, 'yarn.lock'));
   expect(result.packageJsonPath).toEqual(path.join(fixture, 'package.json'));
 });
 
@@ -517,6 +517,7 @@ it('should return lockfileVersion 1 with older versions of npm', async () => {
   const result = await scanParentDirs(fixture);
   expect(result.cliType).toEqual('npm');
   expect(result.lockfileVersion).toEqual(1);
+  expect(result.lockfilePath).toEqual(path.join(fixture, 'package-lock.json'));
   expect(result.packageJsonPath).toEqual(path.join(fixture, 'package.json'));
 });
 
@@ -525,6 +526,9 @@ it('should detect npm Workspaces', async () => {
   const result = await scanParentDirs(fixture);
   expect(result.cliType).toEqual('npm');
   expect(result.lockfileVersion).toEqual(2);
+  expect(result.lockfilePath).toEqual(
+    path.join(fixture, '..', 'package-lock.json')
+  );
   expect(result.packageJsonPath).toEqual(path.join(fixture, 'package.json'));
 });
 
@@ -533,6 +537,7 @@ it('should detect pnpm without workspace', async () => {
   const result = await scanParentDirs(fixture);
   expect(result.cliType).toEqual('pnpm');
   expect(result.lockfileVersion).toEqual(5.3);
+  expect(result.lockfilePath).toEqual(path.join(fixture, 'pnpm-lock.yaml'));
   expect(result.packageJsonPath).toEqual(path.join(fixture, 'package.json'));
 });
 
@@ -541,6 +546,9 @@ it('should detect pnpm with workspaces', async () => {
   const result = await scanParentDirs(fixture);
   expect(result.cliType).toEqual('pnpm');
   expect(result.lockfileVersion).toEqual(5.3);
+  expect(result.lockfilePath).toEqual(
+    path.join(fixture, '..', 'pnpm-lock.yaml')
+  );
   expect(result.packageJsonPath).toEqual(path.join(fixture, 'package.json'));
 });
 
@@ -552,6 +560,7 @@ it('should detect package.json in nested backend', async () => {
   const result = await scanParentDirs(fixture);
   expect(result.cliType).toEqual('yarn');
   expect(result.lockfileVersion).toEqual(undefined);
+  // There is no lockfile but this test will pick up vercel/vercel/yarn.lock
   expect(result.packageJsonPath).toEqual(path.join(fixture, 'package.json'));
 });
 
@@ -563,56 +572,20 @@ it('should detect package.json in nested frontend', async () => {
   const result = await scanParentDirs(fixture);
   expect(result.cliType).toEqual('yarn');
   expect(result.lockfileVersion).toEqual(undefined);
+  // There is no lockfile but this test will pick up vercel/vercel/yarn.lock
   expect(result.packageJsonPath).toEqual(path.join(fixture, 'package.json'));
 });
 
-it('should only invoke `runNpmInstall()` once per `package.json` file (serial)', async () => {
-  const meta: Meta = {};
-  const fixture = path.join(__dirname, 'fixtures', '02-zero-config-api');
-  const apiDir = path.join(fixture, 'api');
-  const retryOpts = { maxRetryTime: 1000 };
-  let run1, run2, run3;
-  await retry(async () => {
-    run1 = await runNpmInstall(apiDir, [], undefined, meta);
-    expect(run1).toEqual(true);
-    expect(
-      (meta.runNpmInstallSet as Set<string>).has(
-        path.join(fixture, 'package.json')
-      )
-    ).toEqual(true);
-  }, retryOpts);
-  await retry(async () => {
-    run2 = await runNpmInstall(apiDir, [], undefined, meta);
-    expect(run2).toEqual(false);
-  }, retryOpts);
-  await retry(async () => {
-    run3 = await runNpmInstall(fixture, [], undefined, meta);
-    expect(run3).toEqual(false);
-  }, retryOpts);
-});
-
-it('should only invoke `runNpmInstall()` once per `package.json` file (parallel)', async () => {
-  const meta: Meta = {};
-  const fixture = path.join(__dirname, 'fixtures', '02-zero-config-api');
-  const apiDir = path.join(fixture, 'api');
-  let results: [boolean, boolean, boolean] | undefined;
-  await retry(
-    async () => {
-      results = await Promise.all([
-        runNpmInstall(apiDir, [], undefined, meta),
-        runNpmInstall(apiDir, [], undefined, meta),
-        runNpmInstall(fixture, [], undefined, meta),
-      ]);
-    },
-    { maxRetryTime: 3000 }
-  );
-  const [run1, run2, run3] = results || [];
-  expect(run1).toEqual(true);
-  expect(run2).toEqual(false);
-  expect(run3).toEqual(false);
-  expect(
-    (meta.runNpmInstallSet as Set<string>).has(
-      path.join(fixture, 'package.json')
-    )
-  ).toEqual(true);
+it('should retry npm install when peer deps invalid and npm@8 on node@16', async () => {
+  const nodeMajor = Number(process.versions.node.split('.')[0]);
+  if (nodeMajor !== 16) {
+    console.log(`Skipping test on node@${nodeMajor}`);
+    return;
+  }
+  const fixture = path.join(__dirname, 'fixtures', '15-npm-8-legacy-peer-deps');
+  const nodeVersion = { major: nodeMajor } as any;
+  await runNpmInstall(fixture, [], {}, {}, nodeVersion);
+  expect(warningMessages).toStrictEqual([
+    'Warning: Retrying "Install Command" with `--legacy-peer-deps` which may accept a potentially broken dependency and slow install time.',
+  ]);
 });

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vercel",
-  "version": "28.0.2",
+  "version": "28.4.2",
   "preferGlobal": true,
   "license": "Apache-2.0",
   "description": "The command-line interface for Vercel",
@@ -41,16 +41,16 @@
     "node": ">= 14"
   },
   "dependencies": {
-    "@vercel/build-utils": "5.3.1",
-    "@vercel/go": "2.1.1",
-    "@vercel/hydrogen": "0.0.14",
-    "@vercel/next": "3.1.18",
-    "@vercel/node": "2.5.8",
-    "@vercel/python": "3.1.9",
-    "@vercel/redwood": "1.0.18",
-    "@vercel/remix": "1.0.19",
-    "@vercel/ruby": "1.3.27",
-    "@vercel/static-build": "1.0.18",
+    "@vercel/build-utils": "5.5.0",
+    "@vercel/go": "2.2.8",
+    "@vercel/hydrogen": "0.0.21",
+    "@vercel/next": "3.1.29",
+    "@vercel/node": "2.5.18",
+    "@vercel/python": "3.1.17",
+    "@vercel/redwood": "1.0.26",
+    "@vercel/remix": "1.0.27",
+    "@vercel/ruby": "1.3.34",
+    "@vercel/static-build": "1.0.26",
     "update-notifier": "5.1.0"
   },
   "devDependencies": {
@@ -85,7 +85,6 @@
     "@types/node-fetch": "2.5.10",
     "@types/npm-package-arg": "6.1.0",
     "@types/pluralize": "0.0.29",
-    "@types/progress": "2.0.3",
     "@types/psl": "1.1.0",
     "@types/semver": "6.0.1",
     "@types/tar-fs": "1.16.1",
@@ -96,9 +95,9 @@
     "@types/which": "1.3.2",
     "@types/write-json-file": "2.2.1",
     "@types/yauzl-promise": "2.1.0",
-    "@vercel/client": "12.2.0",
-    "@vercel/frameworks": "1.1.3",
-    "@vercel/fs-detectors": "2.0.5",
+    "@vercel/client": "12.2.7",
+    "@vercel/frameworks": "1.1.6",
+    "@vercel/fs-detectors": "3.4.0",
     "@vercel/fun": "1.0.4",
     "@vercel/ncc": "0.24.0",
     "@zeit/source-map-support": "0.6.2",
@@ -153,7 +152,6 @@
     "ora": "3.4.0",
     "pcre-to-regexp": "1.0.0",
     "pluralize": "7.0.0",
-    "progress": "2.0.3",
     "promisepipe": "3.0.0",
     "psl": "1.1.31",
     "qr-image": "3.2.0",

packages/cli/scripts/preinstall.js

@@ -4,7 +4,7 @@ const { statSync } = require('fs');
 const pkg = require('../package');
 
 function error(command) {
-  console.error('> Error!', command);
+  console.error('> Error:', command);
 }
 
 function debug(str) {

packages/cli/src/commands/alias/rm.ts

@@ -59,7 +59,7 @@ export default async function rm(
 
   const removeStamp = stamp();
   if (!opts['--yes'] && !(await confirmAliasRemove(client, alias))) {
-    output.log('Aborted');
+    output.log('Canceled');
     return 0;
   }
 

packages/cli/src/commands/alias/set.ts

@@ -220,7 +220,7 @@ function handleSetupDomainError<T>(
   }
 
   if (error instanceof ERRORS.UserAborted) {
-    output.error(`User aborted`);
+    output.error(`User canceled.`);
     return 1;
   }
 

packages/cli/src/commands/build.ts

@@ -37,6 +37,7 @@ import cliPkg from '../util/pkg';
 import readJSONFile from '../util/read-json-file';
 import { CantParseJSONFile } from '../util/errors-ts';
 import {
+  pickOverrides,
   ProjectLinkAndSettings,
   readProjectSettings,
 } from '../util/projects/project-settings';
@@ -171,7 +172,7 @@ export default async function main(client: Client): Promise<number> {
       );
     }
     if (!confirmed) {
-      client.output.print(`Aborted. No Project Settings retrieved.\n`);
+      client.output.print(`Canceled. No Project Settings retrieved.\n`);
       return 0;
     }
     const { argv: originalArgv } = client;
@@ -278,6 +279,11 @@ async function doBuild(
   if (pkg instanceof CantParseJSONFile) throw pkg;
   if (vercelConfig instanceof CantParseJSONFile) throw vercelConfig;
 
+  const projectSettings = {
+    ...project.settings,
+    ...pickOverrides(vercelConfig || {}),
+  };
+
   // Get a list of source files
   const files = (await getFiles(workPath, client)).map(f =>
     normalizePath(relative(workPath, f))
@@ -313,7 +319,7 @@ async function doBuild(
     // Detect the Vercel Builders that will need to be invoked
     const detectedBuilders = await detectBuilders(files, pkg, {
       ...vercelConfig,
-      projectSettings: project.settings,
+      projectSettings,
       ignoreBuildScript: true,
       featHandleMiss: true,
     });
@@ -425,14 +431,14 @@ async function doBuild(
 
       const buildConfig: Config = isZeroConfig
         ? {
-            outputDirectory: project.settings.outputDirectory ?? undefined,
+            outputDirectory: projectSettings.outputDirectory ?? undefined,
             ...build.config,
-            projectSettings: project.settings,
-            installCommand: project.settings.installCommand ?? undefined,
-            devCommand: project.settings.devCommand ?? undefined,
-            buildCommand: project.settings.buildCommand ?? undefined,
-            framework: project.settings.framework,
-            nodeVersion: project.settings.nodeVersion,
+            projectSettings,
+            installCommand: projectSettings.installCommand ?? undefined,
+            devCommand: projectSettings.devCommand ?? undefined,
+            buildCommand: projectSettings.buildCommand ?? undefined,
+            framework: projectSettings.framework,
+            nodeVersion: projectSettings.nodeVersion,
           }
         : build.config || {};
       const buildOptions: BuildOptions = {
@@ -549,7 +555,150 @@ async function doBuild(
     builds: builderRoutes,
   });
 
-  const mergedImages = mergeImages(buildResults.values());
+  const images = vercelConfig?.images
+  if (images) {
+    if (typeof images !== 'object') {
+      throw new Error(
+        `vercel.json "images" should be an object received ${typeof images}.`
+      );
+    }
+
+    if (!Array.isArray(images.domains)) {
+      throw new Error(
+        `vercel.json "images.domains" should be an Array received ${typeof images.domains}.`
+      );
+    }
+
+    if (images.domains.length > 50) {
+      throw new Error(
+        `vercel.json "images.domains" exceeds length of 50 received length (${images.domains.length}).`
+      );
+    }
+
+    const invalidImageDomains = images.domains.filter(
+      (d: unknown) => typeof d !== 'string'
+    );
+    if (invalidImageDomains.length > 0) {
+      throw new Error(
+        `vercel.json "images.domains" should be an Array of strings received invalid values (${invalidImageDomains.join(
+          ', '
+        )}).`
+      );
+    }
+
+    if (images.remotePatterns) {
+      if (!Array.isArray(images.remotePatterns)) {
+        throw new Error(
+          `vercel.json "images.remotePatterns" should be an Array received ${typeof images.remotePatterns}.`
+        );
+      }
+
+      if (images.remotePatterns.length > 50) {
+        throw new Error(
+          `vercel.json "images.remotePatterns" exceeds length of 50, received length (${images.remotePatterns.length}).`
+        );
+      }
+
+      const validProps = new Set(['protocol', 'hostname', 'pathname', 'port']);
+      const requiredProps = ['hostname'];
+      const invalidPatterns = images.remotePatterns.filter(
+        (d: unknown) =>
+          !d ||
+          typeof d !== 'object' ||
+          Object.entries(d).some(
+            ([k, v]) => !validProps.has(k) || typeof v !== 'string'
+          ) ||
+          requiredProps.some(k => !(k in d))
+      );
+      if (invalidPatterns.length > 0) {
+        throw new Error(
+          `vercel.json "images.remotePatterns" received invalid values:\n${invalidPatterns
+            .map(item => JSON.stringify(item))
+            .join(
+              '\n'
+            )}\n\nremotePatterns value must follow format { protocol: 'https', hostname: 'example.com', port: '', pathname: '/imgs/**' }.`
+        );
+      }
+    }
+
+    if (!Array.isArray(images.sizes)) {
+      throw new Error(
+        `vercel.json "images.sizes" should be an Array received ${typeof images.sizes}.`
+      );
+    }
+
+    if (images.sizes.length < 1 || images.sizes.length > 50) {
+      throw new Error(
+        `vercel.json "images.sizes" should be an Array of length between 1 to 50 received length (${images.sizes.length}).`
+      );
+    }
+
+    const invalidImageSizes = images.sizes.filter((d: unknown) => {
+      return typeof d !== 'number' || d < 1 || d > 10000;
+    });
+    if (invalidImageSizes.length > 0) {
+      throw new Error(
+        `vercel.json "images.sizes" should be an Array of numbers that are between 1 and 10000, received invalid values (${invalidImageSizes.join(
+          ', '
+        )}).`
+      );
+    }
+
+    if (images.minimumCacheTTL) {
+      if (
+        !Number.isInteger(images.minimumCacheTTL) ||
+        images.minimumCacheTTL < 0
+      ) {
+        throw new Error(
+          `vercel.json "images.minimumCacheTTL" should be an integer 0 or more received (${images.minimumCacheTTL}).`
+        );
+      }
+    }
+
+    if (images.formats) {
+      if (!Array.isArray(images.formats)) {
+        throw new Error(
+          `vercel.json "images.formats" should be an Array received ${typeof images.formats}.`
+        );
+      }
+      if (images.formats.length < 1 || images.formats.length > 2) {
+        throw new Error(
+          `vercel.json "images.formats" must be length 1 or 2, received length (${images.formats.length}).`
+        );
+      }
+
+      const invalid = images.formats.filter(f => {
+        return f !== 'image/avif' && f !== 'image/webp';
+      });
+      if (invalid.length > 0) {
+        throw new Error(
+          `vercel.json "images.formats" should be an Array of mime type strings, received invalid values (${invalid.join(
+            ', '
+          )}).`
+        );
+      }
+    }
+
+    if (
+      typeof images.dangerouslyAllowSVG !== 'undefined' &&
+      typeof images.dangerouslyAllowSVG !== 'boolean'
+    ) {
+      throw new Error(
+        `vercel.json "images.dangerouslyAllowSVG" should be a boolean received (${images.dangerouslyAllowSVG}).`
+      );
+    }
+
+    if (
+      typeof images.contentSecurityPolicy !== 'undefined' &&
+      typeof images.contentSecurityPolicy !== 'string'
+    ) {
+      throw new Error(
+        `vercel.json "images.contentSecurityPolicy" should be a string received ${images.contentSecurityPolicy}`
+      );
+    }
+  }
+
+  const mergedImages = mergeImages(images, buildResults.values());
   const mergedWildcard = mergeWildcard(buildResults.values());
   const mergedOverrides: Record<string, PathOverride> =
     overrides.length > 0 ? Object.assign({}, ...overrides) : undefined;
@@ -618,9 +767,9 @@ function expandBuild(files: string[], build: Builder): Builder[] {
 }
 
 function mergeImages(
+  images: BuildResultV2Typical['images'],
   buildResults: Iterable<BuildResult>
 ): BuildResultV2Typical['images'] {
-  let images: BuildResultV2Typical['images'] = undefined;
   for (const result of buildResults) {
     if ('images' in result && result.images) {
       images = Object.assign({}, images, result.images);

packages/cli/src/commands/deploy/index.ts

@@ -47,9 +47,7 @@ import {
 import { SchemaValidationFailed } from '../../util/errors';
 import purchaseDomainIfAvailable from '../../util/domains/purchase-domain-if-available';
 import confirm from '../../util/input/confirm';
-import editProjectSettings, {
-  PartialProjectSettings,
-} from '../../util/input/edit-project-settings';
+import editProjectSettings from '../../util/input/edit-project-settings';
 import {
   getLinkedProject,
   linkFolderToProject,
@@ -73,6 +71,7 @@ import { createGitMeta } from '../../util/create-git-meta';
 import { isValidArchive } from '../../util/deploy/validate-archive-format';
 import { parseEnv } from '../../util/parse-env';
 import { errorToString, isErrnoException, isError } from '../../util/is-error';
+import { pickOverrides } from '../../util/projects/project-settings';
 
 export default async (client: Client): Promise<number> => {
   const { output } = client;
@@ -296,7 +295,7 @@ export default async (client: Client): Promise<number> => {
       ));
 
     if (!shouldStartSetup) {
-      output.print(`Aborted. Project not set up.\n`);
+      output.print(`Canceled. Project not set up.\n`);
       return 0;
     }
 
@@ -509,14 +508,7 @@ export default async (client: Client): Promise<number> => {
   let deployStamp = stamp();
   let deployment = null;
 
-  const localConfigurationOverrides: PartialProjectSettings = {
-    buildCommand: localConfig?.buildCommand,
-    devCommand: localConfig?.devCommand,
-    framework: localConfig?.framework,
-    commandForIgnoringBuildStep: localConfig?.ignoreCommand,
-    installCommand: localConfig?.installCommand,
-    outputDirectory: localConfig?.outputDirectory,
-  };
+  const localConfigurationOverrides = pickOverrides(localConfig);
 
   try {
     const createArgs: any = {
@@ -530,7 +522,12 @@ export default async (client: Client): Promise<number> => {
       quiet,
       wantsPublic: argv['--public'] || localConfig.public,
       type: null,
-      nowConfig: localConfig,
+      nowConfig: {
+        ...localConfig,
+        // `images` is allowed in "vercel.json" and processed
+        // by `vc build`, but don't send it to the API endpoint
+        images: undefined,
+      },
       regions,
       meta,
       gitMetadata,

packages/cli/src/commands/dev/dev.ts

@@ -2,11 +2,10 @@ import { resolve, join } from 'path';
 import fs from 'fs-extra';
 
 import DevServer from '../../util/dev/server';
-import parseListen from '../../util/dev/parse-listen';
+import { parseListen } from '../../util/dev/parse-listen';
 import { ProjectEnvVariable } from '../../types';
 import Client from '../../util/client';
 import { getLinkedProject } from '../../util/projects/link';
-import { getFrameworks } from '../../util/get-frameworks';
 import { ProjectSettings } from '../../types';
 import getDecryptedEnvRecords from '../../util/get-decrypted-env-records';
 import setupAndLink from '../../util/link/setup-and-link';
@@ -31,10 +30,7 @@ export default async function dev(
   const listen = parseListen(opts['--listen'] || '3000');
 
   // retrieve dev command
-  let [link, frameworks] = await Promise.all([
-    getLinkedProject(client, cwd),
-    getFrameworks(client),
-  ]);
+  let link = await getLinkedProject(client, cwd);
 
   if (link.status === 'not_linked' && !process.env.__VERCEL_SKIP_DEV_CMD) {
     link = await setupAndLink(client, cwd, {
@@ -60,7 +56,6 @@ export default async function dev(
     return link.exitCode;
   }
 
-  let devCommand: string | undefined;
   let projectSettings: ProjectSettings | undefined;
   let projectEnvs: ProjectEnvVariable[] = [];
   let systemEnvValues: string[] = [];
@@ -70,19 +65,6 @@ export default async function dev(
 
     projectSettings = project;
 
-    if (project.devCommand) {
-      devCommand = project.devCommand;
-    } else if (project.framework) {
-      const framework = frameworks.find(f => f.slug === project.framework);
-
-      if (framework) {
-        const defaults = framework.settings.devCommand.value;
-        if (defaults) {
-          devCommand = defaults;
-        }
-      }
-    }
-
     if (project.rootDirectory) {
       cwd = join(cwd, project.rootDirectory);
     }
@@ -95,16 +77,17 @@ export default async function dev(
     ]);
   }
 
-  // This is just for tests - can be removed once project settings
-  // are respected locally in `.vercel/project.json`
-  if (process.env.VERCEL_DEV_COMMAND) {
-    devCommand = process.env.VERCEL_DEV_COMMAND;
-  }
+  const devServer = new DevServer(cwd, {
+    output,
+    projectSettings,
+    projectEnvs,
+    systemEnvValues,
+  });
 
   // If there is no Development Command, we must delete the
   // v3 Build Output because it will incorrectly be detected by
   // @vercel/static-build in BuildOutputV3.getBuildOutputDirectory()
-  if (!devCommand) {
+  if (!devServer.devCommand) {
     const outputDir = join(cwd, OUTPUT_DIR);
     if (await fs.pathExists(outputDir)) {
       output.log(`Removing ${OUTPUT_DIR}`);
@@ -112,13 +95,5 @@ export default async function dev(
     }
   }
 
-  const devServer = new DevServer(cwd, {
-    output,
-    devCommand,
-    projectSettings,
-    projectEnvs,
-    systemEnvValues,
-  });
-
   await devServer.start(...listen);
 }

packages/cli/src/commands/dns/add.ts

@@ -37,7 +37,7 @@ export default async function add(
   const { domain, data: argData } = parsedParams;
   const data = await getDNSData(client, argData);
   if (!data) {
-    output.log(`Aborted`);
+    output.log(`Canceled`);
     return 1;
   }
 

packages/cli/src/commands/dns/rm.ts

@@ -46,7 +46,7 @@ export default async function rm(
   );
 
   if (!yes) {
-    output.error(`User aborted.`);
+    output.error(`User canceled.`);
     return 0;
   }
 

packages/cli/src/commands/domains/move.ts

@@ -68,7 +68,7 @@ export default async function move(
         client
       ))
     ) {
-      output.log('Aborted');
+      output.log('Canceled');
       return 0;
     }
   }
@@ -87,7 +87,7 @@ export default async function move(
           client
         ))
       ) {
-        output.log('Aborted');
+        output.log('Canceled');
         return 0;
       }
     }

packages/cli/src/commands/domains/rm.ts

@@ -86,7 +86,7 @@ export default async function rm(
       client
     ))
   ) {
-    output.log('Aborted');
+    output.log('Canceled');
     return 0;
   }
 
@@ -224,7 +224,7 @@ async function removeDomain(
       !skipConfirmation &&
       !(await promptBool(`Remove conflicts associated with domain?`, client))
     ) {
-      output.log('Aborted');
+      output.log('Canceled');
       return 0;
     }
 

packages/cli/src/commands/env/pull.ts

@@ -84,7 +84,7 @@ export default async function pull(
       false
     ))
   ) {
-    output.log('Aborted');
+    output.log('Canceled');
     return 0;
   }
 

packages/cli/src/commands/env/rm.ts

@@ -111,7 +111,7 @@ export default async function rm(
       false
     ))
   ) {
-    output.log('Aborted');
+    output.log('Canceled');
     return 0;
   }
 

packages/cli/src/commands/git/connect.ts

@@ -149,7 +149,7 @@ export default async function connect(
   }
 
   if (remoteUrl === '') {
-    output.log('Aborted.');
+    output.log('Canceled');
     return 0;
   }
 
@@ -317,7 +317,7 @@ async function promptConnectArg({
       false
     );
     if (!shouldConnect) {
-      client.output.log('Aborted. Repo not connected.');
+      client.output.log('Canceled. Repo not connected.');
     }
   }
   return shouldConnect;
@@ -404,7 +404,7 @@ async function confirmRepoConnect(
       true
     );
     if (!shouldReplaceProject) {
-      client.output.log('Aborted. Repo not connected.');
+      client.output.log('Canceled. Repo not connected.');
     }
   }
   return shouldReplaceProject;

packages/cli/src/commands/git/disconnect.ts

@@ -43,7 +43,7 @@ export default async function disconnect(
       await disconnectGitProvider(client, org, project.id);
       output.log(`Disconnected ${chalk.cyan(`${linkOrg}/${repo}`)}.`);
     } else {
-      output.log('Aborted.');
+      output.log('Canceled');
     }
   } else {
     output.error(

packages/cli/src/commands/git/index.ts

@@ -25,7 +25,7 @@ const help = () => {
     -t ${chalk.bold.underline('TOKEN')}, --token=${chalk.bold.underline(
     'TOKEN'
   )}   Login token
-    -y, --yes                 Skip questions when setting up new project using default scope and settings
+    -y, --yes                 Skip confirmation when connecting a Git provider
 
   ${chalk.dim('Examples:')}
 
@@ -35,7 +35,9 @@ const help = () => {
 
     ${chalk.cyan(`$ ${getPkgName()} git connect`)}
   
-  ${chalk.gray('–')} Connect your Vercel Project to a Git repository using the remote URL
+  ${chalk.gray(
+    '–'
+  )} Connect your Vercel Project to a Git repository using the remote URL
 
     ${chalk.cyan(
       `$ ${getPkgName()} git connect https://github.com/user/repo.git`

packages/cli/src/commands/init/init.ts

@@ -53,7 +53,7 @@ export default async function init(
     );
 
     if (!chosen) {
-      output.log('Aborted');
+      output.log('Canceled');
       return 0;
     }
 

packages/cli/src/commands/list.ts

@@ -293,9 +293,7 @@ export default async function main(client: Client) {
 
   // information to help the user find other deployments or instances
   log(
-    `To list more deployments for a project, run ${getCommandName(
-      'ls [project]'
-    )}.`
+    `To list deployments for a project, run ${getCommandName('ls [project]')}.`
   );
 
   print('\n');
@@ -338,7 +336,7 @@ export default async function main(client: Client) {
   if (pagination && pagination.count === 20) {
     const flags = getCommandFlags(argv, ['_', '--next']);
     log(
-      `To display the next page run ${getCommandName(
+      `To display the next page, run ${getCommandName(
         `ls${app ? ' ' + app : ''}${flags} --next ${pagination.next}`
       )}`
     );

packages/cli/src/commands/remove.ts

@@ -226,7 +226,7 @@ export default async function main(client: Client) {
     ).toLowerCase();
 
     if (confirmation !== 'y' && confirmation !== 'yes') {
-      output.log('Aborted');
+      output.log('Canceled');
       return 1;
     }
   }

packages/cli/src/commands/secrets.js

@@ -229,7 +229,7 @@ async function run({ output, contextName, currentTeam, client }) {
         argv.yes ||
         (await readConfirmation(client, output, theSecret, contextName));
       if (!yes) {
-        output.print(`Aborted. Secret not deleted.\n`);
+        output.print(`Canceled. Secret not deleted.\n`);
         return 0;
       }
     } else {

packages/cli/src/commands/teams/add.ts

@@ -59,7 +59,7 @@ export default async function add(client: Client): Promise<number> {
       });
     } catch (err: unknown) {
       if (isError(err) && err.message === 'USER_ABORT') {
-        output.log('Aborted');
+        output.log('Canceled');
         return 0;
       }
 

packages/cli/src/index.ts

@@ -7,7 +7,7 @@ try {
   process.cwd();
 } catch (err: unknown) {
   if (isError(err) && err.message.includes('uv_cwd')) {
-    console.error('Error! The current working directory does not exist.');
+    console.error('Error: The current working directory does not exist.');
     process.exit(1);
   }
 }

packages/cli/src/util/build/import-builders.ts

@@ -1,7 +1,10 @@
+import { URL } from 'url';
+import plural from 'pluralize';
 import npa from 'npm-package-arg';
 import { satisfies } from 'semver';
 import { dirname, join } from 'path';
 import { mkdirp, outputJSON, readJSON, symlink } from 'fs-extra';
+import { isStaticRuntime } from '@vercel/fs-detectors';
 import {
   BuilderV2,
   BuilderV3,
@@ -13,6 +16,9 @@ import { VERCEL_DIR } from '../projects/link';
 import { Output } from '../output';
 import readJSONFile from '../read-json-file';
 import { CantParseJSONFile } from '../errors-ts';
+import { errorToString, isErrnoException, isError } from '../is-error';
+import cmd from '../output/cmd';
+import code from '../output/code';
 
 export interface BuilderWithPkg {
   path: string;
@@ -81,7 +87,7 @@ export async function resolveBuilders(
       continue;
     }
 
-    if (name === '@vercel/static' || name === '@now/static') {
+    if (isStaticRuntime(name)) {
       // `@vercel/static` is a special-case built-in builder
       builders.set(name, {
         builder: staticBuilder,
@@ -201,15 +207,54 @@ async function installBuilders(
     if (err.code !== 'EEXIST') throw err;
   }
 
-  output.debug(`Installing Builders: ${Array.from(buildersToAdd).join(', ')}`);
-  await spawnAsync('yarn', ['add', '@vercel/build-utils', ...buildersToAdd], {
-    cwd: buildersDir,
-  });
+  output.log(
+    `Installing ${plural('Builder', buildersToAdd.size)}: ${Array.from(
+      buildersToAdd
+    ).join(', ')}`
+  );
+  try {
+    await spawnAsync(
+      'npm',
+      ['install', '@vercel/build-utils', ...buildersToAdd],
+      {
+        cwd: buildersDir,
+        stdio: 'pipe',
+      }
+    );
+  } catch (err: unknown) {
+    if (isError(err)) {
+      (err as any).link =
+        'https://vercel.link/builder-dependencies-install-failed';
+      if (isErrnoException(err) && err.code === 'ENOENT') {
+        // `npm` is not installed
+        err.message = `Please install ${cmd('npm')} before continuing`;
+      } else {
+        const message = errorToString(err);
+        const notFound = /GET (.*) - Not found/.exec(message);
+        if (notFound) {
+          const url = new URL(notFound[1]);
+          const packageName = decodeURIComponent(url.pathname.slice(1));
+          err.message = `The package ${code(
+            packageName
+          )} is not published on the npm registry`;
+        }
+      }
+    }
+    throw err;
+  }
 
   // Symlink `@now/build-utils` -> `@vercel/build-utils` to support legacy Builders
   const nowScopePath = join(buildersDir, 'node_modules/@now');
   await mkdirp(nowScopePath);
-  await symlink('../@vercel/build-utils', join(nowScopePath, 'build-utils'));
+
+  try {
+    await symlink('../@vercel/build-utils', join(nowScopePath, 'build-utils'));
+  } catch (err: unknown) {
+    if (!isErrnoException(err) || err.code !== 'EEXIST') {
+      // Throw unless the error is due to the symlink already existing
+      throw err;
+    }
+  }
 
   // Cross-reference any builderSpecs from the saved `package.json` file,
   // in case they were installed from a URL

packages/cli/src/util/build/static-builder.ts

@@ -1,5 +1,6 @@
 import minimatch from 'minimatch';
-import { BuildV2, Files } from '@vercel/build-utils';
+import { shouldServe as defaultShouldServe } from '@vercel/build-utils';
+import type { BuildV2, Files, ShouldServe } from '@vercel/build-utils';
 
 export const version = 2;
 
@@ -39,3 +40,18 @@ export const build: BuildV2 = async ({ entrypoint, files, config }) => {
 
   return { output };
 };
+
+export const shouldServe: ShouldServe = _opts => {
+  const opts = { ..._opts };
+  const {
+    config: { zeroConfig, outputDirectory },
+  } = opts;
+
+  // Add the output directory prefix
+  if (zeroConfig && outputDirectory) {
+    opts.entrypoint = `${outputDirectory}/${opts.entrypoint}`;
+    opts.requestPath = `${outputDirectory}/${opts.requestPath}`;
+  }
+
+  return defaultShouldServe(opts);
+};

packages/cli/src/util/create-git-meta.ts

@@ -78,16 +78,23 @@ function getLastCommit(directory: string): Promise<git.Commit> {
 
 export function isDirty(directory: string, output: Output): Promise<boolean> {
   return new Promise(resolve => {
-    exec('git status -s', { cwd: directory }, function (err, stdout, stderr) {
-      let debugMessage = `Failed to determine if Git repo has been modified:`;
-      if (err || stderr) {
-        if (err) debugMessage += `\n${err}`;
-        if (stderr) debugMessage += `\n${stderr.trim()}`;
-        output.debug(debugMessage);
-        return resolve(false);
+    // note: we specify the `--no-optional-locks` git flag so that `git status`
+    // does not perform any "optional" operations such as optimizing the index
+    // in the background: https://git-scm.com/docs/git-status#_background_refresh
+    exec(
+      'git --no-optional-locks status -s',
+      { cwd: directory },
+      function (err, stdout, stderr) {
+        let debugMessage = `Failed to determine if Git repo has been modified:`;
+        if (err || stderr) {
+          if (err) debugMessage += `\n${err}`;
+          if (stderr) debugMessage += `\n${stderr.trim()}`;
+          output.debug(debugMessage);
+          return resolve(false);
+        }
+        resolve(stdout.trim().length > 0);
       }
-      resolve(stdout.trim().length > 0);
-    });
+    );
   });
 }
 

packages/cli/src/util/deploy/process-deployment.ts

@@ -1,5 +1,4 @@
 import bytes from 'bytes';
-import Progress from 'progress';
 import chalk from 'chalk';
 import {
   ArchiveFormat,
@@ -8,6 +7,7 @@ import {
   VercelClientOptions,
 } from '@vercel/client';
 import { Output } from '../output';
+import { progress } from '../output/progress';
 import Now from '../../util';
 import { Org } from '../../types';
 import ua from '../ua';
@@ -68,7 +68,6 @@ export default async function processDeployment({
   } = args;
 
   const { debug } = output;
-  let bar: Progress | null = null;
 
   const { env = {} } = requestBody;
 
@@ -114,32 +113,28 @@ export default async function processDeployment({
         const missingSize = missing
           .map((sha: string) => total.get(sha).data.length)
           .reduce((a: number, b: number) => a + b, 0);
-
-        output.stopSpinner();
-        bar = new Progress(`${chalk.gray('>')} Upload [:bar] :percent :etas`, {
-          width: 20,
-          complete: '=',
-          incomplete: '',
-          total: missingSize,
-          clear: true,
-        });
-
-        bar.tick(0);
+        const totalSizeHuman = bytes.format(missingSize, { decimalPlaces: 1 });
 
         uploads.forEach((e: any) =>
           e.on('progress', () => {
-            if (!bar) return;
-
-            const totalBytesUploaded = uploads.reduce((acc: number, e: any) => {
+            const uploadedBytes = uploads.reduce((acc: number, e: any) => {
               return acc + e.bytesUploaded;
             }, 0);
-            // set the current progress bar value
-            bar.curr = totalBytesUploaded;
-            // trigger rendering
-            bar.tick(0);
 
-            if (bar.complete) {
+            const bar = progress(uploadedBytes, missingSize);
+            if (!bar || uploadedBytes === missingSize) {
               output.spinner(deployingSpinnerVal, 0);
+            } else {
+              const uploadedHuman = bytes.format(uploadedBytes, {
+                decimalPlaces: 1,
+                fixedDecimals: true,
+              });
+              output.spinner(
+                `Uploading ${chalk.reset(
+                  `[${bar}] (${uploadedHuman}/${totalSizeHuman})`
+                )}`,
+                0
+              );
             }
           })
         );
@@ -154,10 +149,6 @@ export default async function processDeployment({
       }
 
       if (event.type === 'created') {
-        if (bar && !bar.complete) {
-          bar.tick(bar.total + 1);
-        }
-
         await linkFolderToProject(
           output,
           cwd || paths[0],

packages/cli/src/util/dev/builder-cache.ts

@@ -1,412 +0,0 @@
-import chalk from 'chalk';
-import execa from 'execa';
-import semver from 'semver';
-import npa from 'npm-package-arg';
-import pluralize from 'pluralize';
-import { basename, join } from 'path';
-import XDGAppPaths from 'xdg-app-paths';
-import { mkdirp, readJSON, writeJSON } from 'fs-extra';
-import { NowBuildError, PackageJson } from '@vercel/build-utils';
-import cliPkg from '../pkg';
-
-import cmd from '../output/cmd';
-import { Output } from '../output';
-import { NoBuilderCacheError } from '../errors-ts';
-
-import * as staticBuilder from './static-builder';
-import { BuilderWithPackage } from './types';
-import { isErrnoException } from '../is-error';
-
-const require_: typeof require = eval('require');
-
-const registryTypes = new Set(['version', 'tag', 'range']);
-
-const createStaticBuilder = (scope: string): BuilderWithPackage => {
-  return {
-    runInProcess: true,
-    requirePath: `${scope}/static`,
-    builder: Object.freeze(staticBuilder),
-    package: Object.freeze({ name: `@${scope}/static`, version: '' }),
-  };
-};
-
-const localBuilders: { [key: string]: BuilderWithPackage } = {
-  '@now/static': createStaticBuilder('now'),
-  '@vercel/static': createStaticBuilder('vercel'),
-};
-
-export const cacheDirPromise = prepareCacheDir();
-export const builderDirPromise = prepareBuilderDir();
-
-/**
- * Prepare cache directory for installing Vercel runtimes.
- */
-export async function prepareCacheDir() {
-  const designated = XDGAppPaths('com.vercel.cli').cache();
-
-  if (!designated) {
-    throw new NoBuilderCacheError();
-  }
-
-  const cacheDir = join(designated, 'dev');
-  await mkdirp(cacheDir);
-  return cacheDir;
-}
-
-export async function prepareBuilderDir() {
-  const builderDir = join(await cacheDirPromise, 'builders');
-  await mkdirp(builderDir);
-
-  // Create an empty `package.json` file, only if one does not already exist
-  try {
-    const buildersPkg = join(builderDir, 'package.json');
-    await writeJSON(buildersPkg, { private: true }, { flag: 'wx' });
-  } catch (err: unknown) {
-    if (!isErrnoException(err) || err.code !== 'EEXIST') {
-      throw err;
-    }
-  }
-
-  return builderDir;
-}
-
-function getNpmVersion(use = ''): string {
-  const parsed = npa(use);
-  if (registryTypes.has(parsed.type)) {
-    return parsed.fetchSpec || '';
-  }
-  return '';
-}
-
-export function getBuildUtils(packages: string[]): string {
-  const version = packages
-    .map(getNpmVersion)
-    .some(ver => ver.includes('canary'))
-    ? 'canary'
-    : 'latest';
-
-  return `@vercel/build-utils@${version}`;
-}
-
-function parseVersionSafe(rawSpec: string) {
-  try {
-    return semver.parse(rawSpec);
-  } catch (e) {
-    return null;
-  }
-}
-
-export function filterPackage(
-  builderSpec: string,
-  buildersPkg: PackageJson,
-  cliPkg: Partial<PackageJson>
-) {
-  if (builderSpec in localBuilders) return false;
-  const parsed = npa(builderSpec);
-  const parsedVersion = parseVersionSafe(parsed.rawSpec);
-
-  // Skip install of Runtimes that are part of Vercel CLI's `dependencies`
-  if (isBundledBuilder(parsed, cliPkg)) {
-    return false;
-  }
-
-  // Skip install of already installed Runtime with exact version match
-  if (
-    parsed.name &&
-    parsed.type === 'version' &&
-    parsedVersion &&
-    buildersPkg.dependencies &&
-    parsedVersion.version == buildersPkg.dependencies[parsed.name]
-  ) {
-    return false;
-  }
-
-  return true;
-}
-
-/**
- * Install a list of builders to the cache directory.
- */
-export async function installBuilders(
-  packagesSet: Set<string>,
-  output: Output,
-  builderDir?: string
-): Promise<void> {
-  const packages = Array.from(packagesSet);
-  if (
-    packages.length === 0 ||
-    (packages.length === 1 &&
-      Object.hasOwnProperty.call(localBuilders, packages[0]))
-  ) {
-    // Static deployment, no builders to install
-    return;
-  }
-  if (!builderDir) {
-    builderDir = await builderDirPromise;
-  }
-  const buildersPkgPath = join(builderDir, 'package.json');
-  const buildersPkgBefore = await readJSON(buildersPkgPath);
-  const depsBefore = {
-    ...buildersPkgBefore.devDependencies,
-    ...buildersPkgBefore.dependencies,
-  };
-
-  // Filter out any packages that come packaged with Vercel CLI
-  const packagesToInstall = packages.filter(p =>
-    filterPackage(p, buildersPkgBefore, cliPkg)
-  );
-
-  if (packagesToInstall.length === 0) {
-    output.debug('No Runtimes need to be installed');
-    return;
-  }
-
-  packagesToInstall.push(getBuildUtils(packages));
-
-  await npmInstall(builderDir, output, packagesToInstall, false);
-
-  const updatedPackages: string[] = [];
-  const buildersPkgAfter = await readJSON(buildersPkgPath);
-  const depsAfter = {
-    ...buildersPkgAfter.devDependencies,
-    ...buildersPkgAfter.dependencies,
-  };
-  for (const [name, version] of Object.entries(depsAfter)) {
-    if (version !== depsBefore[name]) {
-      output.debug(`Runtime "${name}" updated to version \`${version}\``);
-      updatedPackages.push(name);
-    }
-  }
-
-  purgeRequireCache(updatedPackages, builderDir, output);
-}
-
-async function npmInstall(
-  cwd: string,
-  output: Output,
-  packagesToInstall: string[],
-  silent: boolean
-) {
-  const sortedPackages = packagesToInstall.sort();
-
-  if (!silent) {
-    output.spinner(
-      `Installing ${pluralize(
-        'Runtime',
-        sortedPackages.length
-      )}: ${sortedPackages.join(', ')}`
-    );
-  }
-
-  output.debug(`Running npm install in ${cwd}`);
-
-  try {
-    const args = [
-      'install',
-      '--save-exact',
-      '--no-package-lock',
-      '--no-audit',
-      '--no-progress',
-    ];
-    if (process.stderr.isTTY) {
-      // Force colors in the npm child process
-      // https://docs.npmjs.com/misc/config#color
-      args.push('--color=always');
-    }
-    args.push(...sortedPackages);
-    const result = await execa('npm', args, {
-      cwd,
-      reject: false,
-      stdio: output.isDebugEnabled() ? 'inherit' : 'pipe',
-    });
-    if (result.failed) {
-      output.stopSpinner();
-      if (result.stdout) {
-        console.log(result.stdout);
-      }
-      if (result.stderr) {
-        console.error(result.stderr);
-      }
-      throw new NowBuildError({
-        message:
-          (result as any).code === 'ENOENT'
-            ? `Command not found: ${chalk.cyan(
-                'npm'
-              )}\nPlease ensure that ${cmd('npm')} is properly installed`
-            : 'Failed to install `vercel dev` dependencies',
-        code: 'NPM_INSTALL_ERROR',
-        link: 'https://vercel.link/npm-install-failed-dev',
-      });
-    }
-  } finally {
-    output.stopSpinner();
-  }
-}
-
-export async function updateBuilders(
-  packagesSet: Set<string>,
-  output: Output,
-  builderDir?: string
-): Promise<string[]> {
-  if (!builderDir) {
-    builderDir = await builderDirPromise;
-  }
-
-  const updatedPackages: string[] = [];
-  const packages = Array.from(packagesSet);
-  const buildersPkgPath = join(builderDir, 'package.json');
-  const buildersPkgBefore = await readJSON(buildersPkgPath);
-  const depsBefore = {
-    ...buildersPkgBefore.devDependencies,
-    ...buildersPkgBefore.dependencies,
-  };
-
-  const packagesToUpdate = packages.filter(p => {
-    if (p in localBuilders) return false;
-
-    // If it's a builder that is part of Vercel CLI's
-    // `dependencies` then don't update it
-    if (isBundledBuilder(npa(p), cliPkg)) {
-      return false;
-    }
-
-    return true;
-  });
-
-  if (packagesToUpdate.length > 0) {
-    packagesToUpdate.push(getBuildUtils(packages));
-
-    await npmInstall(builderDir, output, packagesToUpdate, true);
-
-    const buildersPkgAfter = await readJSON(buildersPkgPath);
-    const depsAfter = {
-      ...buildersPkgAfter.devDependencies,
-      ...buildersPkgAfter.dependencies,
-    };
-    for (const [name, version] of Object.entries(depsAfter)) {
-      if (version !== depsBefore[name]) {
-        output.debug(`Runtime "${name}" updated to version \`${version}\``);
-        updatedPackages.push(name);
-      }
-    }
-
-    purgeRequireCache(updatedPackages, builderDir, output);
-  }
-
-  return updatedPackages;
-}
-
-/**
- * Get a builder from the cache directory.
- */
-export async function getBuilder(
-  builderPkg: string,
-  output: Output,
-  builderDir?: string,
-  isRetry = false
-): Promise<BuilderWithPackage> {
-  let builderWithPkg: BuilderWithPackage = localBuilders[builderPkg];
-  if (!builderWithPkg) {
-    if (!builderDir) {
-      builderDir = await builderDirPromise;
-    }
-    let requirePath: string;
-    const parsed = npa(builderPkg);
-
-    // First check if it's a bundled Runtime in Vercel CLI's `node_modules`
-    const bundledBuilder = isBundledBuilder(parsed, cliPkg);
-    if (bundledBuilder && parsed.name) {
-      requirePath = parsed.name;
-    } else {
-      const buildersPkg = await readJSON(join(builderDir, 'package.json'));
-      const pkgName = getPackageName(parsed, buildersPkg) || builderPkg;
-      requirePath = join(builderDir, 'node_modules', pkgName);
-    }
-
-    try {
-      output.debug(`Requiring runtime: "${requirePath}"`);
-      const mod = require_(requirePath);
-      const pkg = require_(join(requirePath, 'package.json'));
-      builderWithPkg = {
-        requirePath,
-        builder: Object.freeze(mod),
-        package: Object.freeze(pkg),
-      };
-    } catch (err: unknown) {
-      if (
-        isErrnoException(err) &&
-        err.code === 'MODULE_NOT_FOUND' &&
-        !isRetry
-      ) {
-        output.debug(
-          `Attempted to require ${requirePath}, but it is not installed`
-        );
-        const pkgSet = new Set([builderPkg]);
-        await installBuilders(pkgSet, output, builderDir);
-
-        // Run `getBuilder()` again now that the builder has been installed
-        return getBuilder(builderPkg, output, builderDir, true);
-      }
-      throw err;
-    }
-
-    // If it's a bundled builder, then cache the require call
-    if (bundledBuilder) {
-      localBuilders[builderPkg] = builderWithPkg;
-    }
-  }
-  return builderWithPkg;
-}
-
-export function isBundledBuilder(
-  parsed: npa.Result,
-  { dependencies = {} }: PackageJson
-): boolean {
-  if (!parsed.name) {
-    return false;
-  }
-
-  const inCliDependencyList = !!dependencies[parsed.name];
-  const inScope = parsed.scope === '@vercel';
-  const isVersionedReference = ['tag', 'version', 'range'].includes(
-    parsed.type
-  );
-
-  return inCliDependencyList && inScope && isVersionedReference;
-}
-
-function getPackageName(
-  parsed: npa.Result,
-  buildersPkg: PackageJson
-): string | null {
-  if (registryTypes.has(parsed.type)) {
-    return parsed.name;
-  }
-  const deps: PackageJson.DependencyMap = {
-    ...buildersPkg.devDependencies,
-    ...buildersPkg.dependencies,
-  };
-  for (const [name, dep] of Object.entries(deps)) {
-    if (dep === parsed.raw || basename(dep) === basename(parsed.raw)) {
-      return name;
-    }
-  }
-  return null;
-}
-
-function purgeRequireCache(
-  packages: string[],
-  builderDir: string,
-  output: Output
-) {
-  // The `require()` cache for the builder's assets must be purged
-  const packagesPaths = packages.map(b => join(builderDir, 'node_modules', b));
-  for (const id of Object.keys(require_.cache)) {
-    for (const path of packagesPaths) {
-      if (id.startsWith(path)) {
-        output.debug(`Purging require cache for "${id}"`);
-        delete require_.cache[id];
-      }
-    }
-  }
-}

packages/cli/src/util/dev/builder.ts

@@ -13,8 +13,9 @@ import {
   Lambda,
   FileBlob,
   FileFsRef,
+  normalizePath,
 } from '@vercel/build-utils';
-import { isOfficialRuntime } from '@vercel/fs-detectors';
+import { isStaticRuntime } from '@vercel/fs-detectors';
 import plural from 'pluralize';
 import minimatch from 'minimatch';
 
@@ -25,7 +26,6 @@ import { relative } from '../path-helpers';
 import { LambdaSizeExceededError } from '../errors-ts';
 
 import DevServer from './server';
-import { getBuilder } from './builder-cache';
 import {
   VercelConfig,
   BuildMatch,
@@ -40,6 +40,7 @@ import {
 import { normalizeRoutes } from '@vercel/routing-utils';
 import getUpdateCommand from '../get-update-command';
 import { getTitleName } from '../pkg-name';
+import { importBuilders } from '../build/import-builders';
 
 interface BuildMessage {
   type: string;
@@ -107,18 +108,18 @@ export async function executeBuild(
   filesRemoved?: string[]
 ): Promise<void> {
   const {
-    builderWithPkg: { runInProcess, requirePath, builder, package: pkg },
+    builderWithPkg: { path: requirePath, builder, pkg },
   } = match;
-  const { entrypoint } = match;
+  const { entrypoint, use } = match;
+  const isStatic = isStaticRuntime(use);
   const { envConfigs, cwd: workPath, devCacheDir } = devServer;
   const debug = devServer.output.isDebugEnabled();
 
   const startTime = Date.now();
-  const showBuildTimestamp =
-    !isOfficialRuntime('static', match.use) && (!isInitialBuild || debug);
+  const showBuildTimestamp = !isStatic && (!isInitialBuild || debug);
 
   if (showBuildTimestamp) {
-    devServer.output.log(`Building ${match.use}:${entrypoint}`);
+    devServer.output.log(`Building ${use}:${entrypoint}`);
     devServer.output.debug(
       `Using \`${pkg.name}${pkg.version ? `@${pkg.version}` : ''}\``
     );
@@ -129,7 +130,7 @@ export async function executeBuild(
   let result: BuildResult;
 
   let { buildProcess } = match;
-  if (!runInProcess && !buildProcess) {
+  if (!isStatic && !buildProcess) {
     buildProcess = await createBuildProcess(
       match,
       envConfigs,
@@ -157,7 +158,7 @@ export async function executeBuild(
     },
   };
 
-  let buildResultOrOutputs: BuilderOutputs | BuildResult | BuildResultV3;
+  let buildResultOrOutputs;
   if (buildProcess) {
     buildProcess.send({
       type: 'build',
@@ -197,16 +198,12 @@ export async function executeBuild(
   }
 
   // Sort out build result to builder v2 shape
-  if (!builder.version || builder.version === 1) {
+  if (!builder.version || (builder as any).version === 1) {
     // `BuilderOutputs` map was returned (Now Builder v1 behavior)
     result = {
       output: buildResultOrOutputs as BuilderOutputs,
       routes: [],
       watch: [],
-      distPath:
-        typeof buildResultOrOutputs.distPath === 'string'
-          ? buildResultOrOutputs.distPath
-          : undefined,
     };
   } else if (builder.version === 2) {
     result = buildResultOrOutputs as BuildResult;
@@ -252,7 +249,7 @@ export async function executeBuild(
   } else {
     throw new Error(
       `${getTitleName()} CLI does not support builder version ${
-        builder.version
+        (builder as any).version
       }.\nPlease run \`${await getUpdateCommand()}\` to update to the latest CLI.`
     );
   }
@@ -269,7 +266,9 @@ export async function executeBuild(
   const { cleanUrls } = vercelConfig;
 
   // Mimic fmeta-util and perform file renaming
-  Object.entries(output).forEach(([path, value]) => {
+  for (const [originalPath, value] of Object.entries(output)) {
+    let path = normalizePath(originalPath);
+
     if (cleanUrls && path.endsWith('.html')) {
       path = path.slice(0, -5);
 
@@ -284,7 +283,7 @@ export async function executeBuild(
     }
 
     output[path] = value;
-  });
+  }
 
   // Convert the JSON-ified output map back into their corresponding `File`
   // subclass type instances.
@@ -380,7 +379,7 @@ export async function executeBuild(
   if (showBuildTimestamp) {
     const endTime = Date.now();
     devServer.output.log(
-      `Built ${match.use}:${entrypoint} [${ms(endTime - startTime)}]`
+      `Built ${use}:${entrypoint} [${ms(endTime - startTime)}]`
     );
   }
 }
@@ -402,6 +401,8 @@ export async function getBuildMatches(
 
   const noMatches: Builder[] = [];
   const builds = vercelConfig.builds || [{ src: '**', use: '@vercel/static' }];
+  const builderSpecs = new Set(builds.map(b => b.use).filter(Boolean));
+  const buildersWithPkgs = await importBuilders(builderSpecs, cwd, output);
 
   for (const buildConfig of builds) {
     let { src = '**', use, config = {} } = buildConfig;
@@ -436,6 +437,8 @@ export async function getBuildMatches(
     for (const file of files) {
       src = relative(cwd, file);
 
+      const entrypoint = mapToEntrypoint.get(src) || src;
+
       // Remove the output directory prefix
       if (config.zeroConfig && config.outputDirectory) {
         const outputMatch = config.outputDirectory + '/';
@@ -444,11 +447,15 @@ export async function getBuildMatches(
         }
       }
 
-      const builderWithPkg = await getBuilder(use, output);
+      const builderWithPkg = buildersWithPkgs.get(use);
+      if (!builderWithPkg) {
+        throw new Error(`Failed to load Builder "${use}"`);
+      }
+
       matches.push({
         ...buildConfig,
         src,
-        entrypoint: mapToEntrypoint.get(src) || src,
+        entrypoint,
         builderWithPkg,
         buildOutput: {},
         buildResults: new Map(),

packages/cli/src/util/dev/parse-listen.ts

@@ -1,10 +1,7 @@
 import { parse } from 'url';
 import { ListenSpec } from './types';
 
-export default function parseListen(
-  str: string,
-  defaultPort = 3000
-): ListenSpec {
+export function parseListen(str: string, defaultPort = 3000): ListenSpec {
   let port = Number(str);
 
   if (!isNaN(port)) {
@@ -50,3 +47,7 @@ export default function parseListen(
       );
   }
 }
+
+export function replaceLocalhost(address: string): string {
+  return address.replace('[::]', 'localhost').replace('0.0.0.0', 'localhost');
+}

packages/cli/src/util/dev/server.ts

@@ -1,4 +1,3 @@
-import ms from 'ms';
 import url, { URL } from 'url';
 import http from 'http';
 import fs from 'fs-extra';
@@ -32,6 +31,7 @@ import {
 } from '@vercel/routing-utils';
 import {
   Builder,
+  cloneEnv,
   Env,
   StartDevServerResult,
   FileFsRef,
@@ -62,11 +62,6 @@ import { devRouter, getRoutesTypes } from './router';
 import getMimeType from './mime-type';
 import { executeBuild, getBuildMatches, shutdownBuilder } from './builder';
 import { generateErrorMessage, generateHttpStatusDescription } from './errors';
-import {
-  installBuilders,
-  updateBuilders,
-  builderDirPromise,
-} from './builder-cache';
 
 // HTML templates
 import errorTemplate from './templates/error';
@@ -101,6 +96,9 @@ import {
   isError,
   isSpawnError,
 } from '../is-error';
+import isURL from './is-url';
+import { pickOverrides } from '../projects/project-settings';
+import { replaceLocalhost } from './parse-listen';
 
 const frontendRuntimeSet = new Set(
   frameworkList.map(f => f.useRuntime?.use || '@vercel/static-build')
@@ -133,9 +131,19 @@ export default class DevServer {
   public proxy: httpProxy;
   public envConfigs: EnvConfigs;
   public files: BuilderInputs;
-  public address: string;
-  public devCacheDir: string;
 
+  private _address: URL | undefined;
+  public get address(): URL {
+    if (!this._address) {
+      throw new Error(
+        'Invalid access to `address` because `start` has not yet populated `this.address`.'
+      );
+    }
+    return this._address;
+  }
+
+  public devCacheDir: string;
+  private currentDevCommand?: string;
   private caseSensitive: boolean;
   private apiDir: string | null;
   private apiExtensions: Set<string>;
@@ -149,17 +157,15 @@ export default class DevServer {
   private watchAggregationTimeout: number;
   private filter: (path: string) => boolean;
   private podId: string;
-  private devCommand?: string;
   private devProcess?: ChildProcess;
-  private devProcessPort?: number;
+  private devProcessOrigin?: string;
   private devServerPids: Set<number>;
+  private originalProjectSettings?: ProjectSettings;
   private projectSettings?: ProjectSettings;
 
   private vercelConfigWarning: boolean;
   private getVercelConfigPromise: Promise<VercelConfig> | null;
   private blockingBuildsPromise: Promise<void> | null;
-  private updateBuildersPromise: Promise<void> | null;
-  private updateBuildersTimeout: NodeJS.Timeout | undefined;
   private startPromise: Promise<void> | null;
 
   private systemEnvValues: string[];
@@ -172,17 +178,22 @@ export default class DevServer {
     this.systemEnvValues = options.systemEnvValues || [];
     this.projectEnvs = options.projectEnvs || [];
     this.files = {};
-    this.address = '';
-    this.devCommand = options.devCommand;
+    this.originalProjectSettings = options.projectSettings;
     this.projectSettings = options.projectSettings;
     this.caseSensitive = false;
     this.apiDir = null;
     this.apiExtensions = new Set();
+
     this.proxy = httpProxy.createProxyServer({
       changeOrigin: true,
       ws: true,
       xfwd: true,
     });
+    this.proxy.on('proxyRes', proxyRes => {
+      // override "server" header, like production
+      proxyRes.headers['server'] = 'Vercel';
+    });
+
     this.server = http.createServer(this.devServerHandler);
     this.server.timeout = 0; // Disable timeout
     this.stopping = false;
@@ -193,7 +204,6 @@ export default class DevServer {
     this.vercelConfigWarning = false;
     this.getVercelConfigPromise = null;
     this.blockingBuildsPromise = null;
-    this.updateBuildersPromise = null;
     this.startPromise = null;
 
     this.watchAggregationId = null;
@@ -475,33 +485,6 @@ export default class DevServer {
     );
   }
 
-  async invalidateBuildMatches(
-    vercelConfig: VercelConfig,
-    updatedBuilders: string[]
-  ): Promise<void> {
-    if (updatedBuilders.length === 0) {
-      this.output.debug('No builders were updated');
-      return;
-    }
-
-    // Delete any build matches that have the old builder required already
-    for (const buildMatch of this.buildMatches.values()) {
-      const {
-        src,
-        builderWithPkg: { package: pkg },
-      } = buildMatch;
-      if (isOfficialRuntime('static', pkg.name)) continue;
-      if (pkg.name && updatedBuilders.includes(pkg.name)) {
-        shutdownBuilder(buildMatch, this.output);
-        this.buildMatches.delete(src);
-        this.output.debug(`Invalidated build match for "${src}"`);
-      }
-    }
-
-    // Re-add the build matches that were just removed, but with the new builder
-    await this.updateBuildMatches(vercelConfig);
-  }
-
   async getLocalEnv(fileName: string, base?: Env): Promise<Env> {
     // TODO: use the file watcher to only invalidate the env `dotfile`
     // once a change to the `fileName` occurs
@@ -549,6 +532,23 @@ export default class DevServer {
     return this.getVercelConfigPromise;
   }
 
+  get devCommand() {
+    if (this.projectSettings?.devCommand) {
+      return this.projectSettings.devCommand;
+    } else if (this.projectSettings?.framework) {
+      const frameworkSlug = this.projectSettings.framework;
+      const framework = frameworkList.find(f => f.slug === frameworkSlug);
+
+      if (framework) {
+        const defaults = framework.settings.devCommand.value;
+        if (defaults) {
+          return defaults;
+        }
+      }
+    }
+    return undefined;
+  }
+
   async _getVercelConfig(): Promise<VercelConfig> {
     const configPath = getVercelConfigPath(this.cwd);
 
@@ -563,6 +563,12 @@ export default class DevServer {
     ]);
 
     await this.validateVercelConfig(vercelConfig);
+
+    this.projectSettings = {
+      ...this.originalProjectSettings,
+      ...pickOverrides(vercelConfig),
+    };
+
     const { error: routeError, routes: maybeRoutes } =
       getTransformedRoutes(vercelConfig);
     if (routeError) {
@@ -682,7 +688,7 @@ export default class DevServer {
         this.projectEnvs || [],
         this.systemEnvValues || [],
         this.projectSettings?.autoExposeSystemEnvs,
-        new URL(this.address).host
+        this.address.host
       );
 
       allEnv = { ...cloudEnv };
@@ -703,6 +709,11 @@ export default class DevServer {
     }
 
     this.envConfigs = { buildEnv, runEnv, allEnv };
+
+    // If the `devCommand` was modified via project settings
+    // overrides then the dev process needs to be restarted
+    await this.runDevCommand();
+
     return vercelConfig;
   }
 
@@ -812,7 +823,7 @@ export default class DevServer {
   injectSystemValuesInDotenv(env: Env): Env {
     for (const name of Object.keys(env)) {
       if (name === 'VERCEL_URL') {
-        env['VERCEL_URL'] = new URL(this.address).host;
+        env['VERCEL_URL'] = this.address.host;
       } else if (name === 'VERCEL_REGION') {
         env['VERCEL_REGION'] = 'dev1';
       }
@@ -885,9 +896,7 @@ export default class DevServer {
       }
     }
 
-    this.address = address
-      .replace('[::]', 'localhost')
-      .replace('127.0.0.1', 'localhost');
+    this._address = new URL(replaceLocalhost(address));
 
     const vercelConfig = await this.getVercelConfig();
     const devCommandPromise = this.runDevCommand();
@@ -904,30 +913,8 @@ export default class DevServer {
       }
     }
 
-    const builders = new Set<string>(
-      (vercelConfig.builds || [])
-        .filter((b: Builder) => b.use)
-        .map((b: Builder) => b.use)
-    );
-
-    await installBuilders(builders, this.output);
     await this.updateBuildMatches(vercelConfig, true);
 
-    // Updating builders happens lazily, and any builders that were updated
-    // get their "build matches" invalidated so that the new version is used.
-    this.updateBuildersTimeout = setTimeout(() => {
-      this.updateBuildersPromise = updateBuilders(builders, this.output)
-        .then(updatedBuilders => {
-          this.updateBuildersPromise = null;
-          this.invalidateBuildMatches(vercelConfig, updatedBuilders);
-        })
-        .catch(err => {
-          this.updateBuildersPromise = null;
-          this.output.prettyError(err);
-          this.output.debug(err.stack);
-        });
-    }, ms('30s'));
-
     // Builders that do not define a `shouldServe()` function need to be
     // executed at boot-up time in order to get the initial assets and/or routes
     // that can be served by the builder.
@@ -977,37 +964,37 @@ export default class DevServer {
     // Configure the server to forward WebSocket "upgrade" events to the proxy.
     this.server.on('upgrade', async (req, socket, head) => {
       await this.startPromise;
-      if (!this.devProcessPort) {
+      if (!this.devProcessOrigin) {
         this.output.debug(
           `Detected "upgrade" event, but closing socket because no frontend dev server is running`
         );
         socket.destroy();
         return;
       }
-      const target = `http://127.0.0.1:${this.devProcessPort}`;
+      const target = this.devProcessOrigin;
       this.output.debug(`Detected "upgrade" event, proxying to ${target}`);
       this.proxy.ws(req, socket, head, { target });
     });
 
     await devCommandPromise;
 
-    this.output.ready(`Available at ${link(this.address)}`);
+    let addressFormatted = this.address.toString();
+    if (this.address.pathname === '/' && this.address.protocol === 'http:') {
+      // log address without trailing slash to maintain backwards compatibility
+      addressFormatted = addressFormatted.replace(/\/$/, '');
+    }
+    this.output.ready(`Available at ${link(addressFormatted)}`);
   }
 
   /**
    * Shuts down the `vercel dev` server, and cleans up any temporary resources.
    */
   async stop(exitCode?: number): Promise<void> {
-    const { devProcess } = this;
-    const { debug } = this.output;
     if (this.stopping) return;
-
     this.stopping = true;
 
-    if (typeof this.updateBuildersTimeout !== 'undefined') {
-      clearTimeout(this.updateBuildersTimeout);
-    }
-
+    const { devProcess } = this;
+    const { debug } = this.output;
     const ops: Promise<any>[] = [];
 
     for (const match of this.buildMatches.values()) {
@@ -1025,18 +1012,10 @@ export default class DevServer {
       ops.push(this.watcher.close());
     }
 
-    if (this.updateBuildersPromise) {
-      debug(`Waiting for builders update to complete`);
-      ops.push(this.updateBuildersPromise);
-    }
-
     for (const pid of this.devServerPids) {
       ops.push(this.killBuilderDevServer(pid));
     }
 
-    // Ensure that the builders module cache is created
-    ops.push(builderDirPromise);
-
     try {
       await Promise.all(ops);
     } catch (err: unknown) {
@@ -1435,8 +1414,9 @@ export default class DevServer {
       // the middleware server for every HTTP request?
       const { envConfigs, files, devCacheDir, cwd: workPath } = this;
       try {
-        startMiddlewareResult =
-          await middleware.builderWithPkg.builder.startDevServer?.({
+        const { builder } = middleware.builderWithPkg;
+        if (builder.version === 3) {
+          startMiddlewareResult = await builder.startDevServer?.({
             files,
             entrypoint: middleware.entrypoint,
             workPath,
@@ -1450,6 +1430,7 @@ export default class DevServer {
               buildEnv: { ...envConfigs.buildEnv },
             },
           });
+        }
 
         if (startMiddlewareResult) {
           const { port, pid } = startMiddlewareResult;
@@ -1530,15 +1511,34 @@ export default class DevServer {
           }
 
           if (rewritePath) {
-            // TODO: add validation?
             debug(`Detected rewrite path from middleware: "${rewritePath}"`);
             prevUrl = rewritePath;
 
-            // Retain orginal pathname, but override query parameters from the rewrite
             const beforeRewriteUrl = req.url || '/';
-            const rewriteUrlParsed = url.parse(beforeRewriteUrl);
-            rewriteUrlParsed.search = url.parse(rewritePath).search;
-            req.url = url.format(rewriteUrlParsed);
+
+            if (isURL(rewritePath)) {
+              const rewriteUrlParsed = new URL(rewritePath);
+
+              // `this.address` already has localhost normalized from ip4 and ip6 values
+              if (this.address.origin === rewriteUrlParsed.origin) {
+                // remove origin, leaving the path
+                req.url =
+                  rewritePath.slice(rewriteUrlParsed.origin.length) || '/';
+                prevUrl = req.url;
+              } else {
+                // Proxy to absolute URL with different origin
+                debug(`ProxyPass: ${rewritePath}`);
+                this.setResponseHeaders(res, requestId);
+                proxyPass(req, res, rewritePath, this, requestId);
+                return;
+              }
+            } else {
+              // Retain orginal pathname, but override query parameters from the rewrite
+              const rewriteUrlParsed = url.parse(beforeRewriteUrl);
+              rewriteUrlParsed.search = url.parse(rewritePath).search;
+              req.url = url.format(rewriteUrlParsed);
+            }
+
             debug(
               `Rewrote incoming HTTP URL from "${beforeRewriteUrl}" to "${req.url}"`
             );
@@ -1587,12 +1587,16 @@ export default class DevServer {
         missRoutes,
         phase
       );
-      prevUrl =
-        routeResult.continue && routeResult.dest
-          ? getReqUrl(routeResult)
-          : req.url;
-      prevHeaders =
-        routeResult.continue && routeResult.headers ? routeResult.headers : {};
+
+      if (routeResult.continue) {
+        if (routeResult.dest) {
+          prevUrl = getReqUrl(routeResult);
+        }
+
+        if (routeResult.headers) {
+          prevHeaders = routeResult.headers;
+        }
+      }
 
       if (routeResult.isDestUrl) {
         // Mix the `routes` result dest query params into the req path
@@ -1765,8 +1769,8 @@ export default class DevServer {
 
     if (!match) {
       // If the dev command is started, then proxy to it
-      if (this.devProcessPort) {
-        const upstream = `http://127.0.0.1:${this.devProcessPort}`;
+      if (this.devProcessOrigin) {
+        const upstream = this.devProcessOrigin;
         debug(`Proxying to frontend dev server: ${upstream}`);
 
         // Add the Vercel platform proxy request headers
@@ -1839,8 +1843,8 @@ export default class DevServer {
     // up a single-serve dev HTTP server that vercel dev will proxy this HTTP request
     // to. Once the proxied request is finished, vercel dev shuts down the dev
     // server child process.
-    const { builder, package: builderPkg } = match.builderWithPkg;
-    if (typeof builder.startDevServer === 'function') {
+    const { builder, pkg: builderPkg } = match.builderWithPkg;
+    if (builder.version === 3 && typeof builder.startDevServer === 'function') {
       let devServerResult: StartDevServerResult = null;
       try {
         const { envConfigs, files, devCacheDir, cwd: workPath } = this;
@@ -1856,7 +1860,9 @@ export default class DevServer {
             devCacheDir,
             env: {
               ...envConfigs.runEnv,
-              VERCEL_BUILDER_DEBUG: this.output.debugEnabled ? '1' : undefined,
+              VERCEL_DEBUG_PREFIX: this.output.debugEnabled
+                ? '[builder]'
+                : undefined,
             },
             buildEnv: { ...envConfigs.buildEnv },
           },
@@ -1943,7 +1949,7 @@ export default class DevServer {
     // - when there is no asset
     // - when the asset is not a Lambda (the dev server must take care of all static files)
     if (
-      this.devProcessPort &&
+      this.devProcessOrigin &&
       (!foundAsset || (foundAsset && foundAsset.asset.type !== 'Lambda'))
     ) {
       debug('Proxying to frontend dev server');
@@ -1955,14 +1961,7 @@ export default class DevServer {
       }
 
       this.setResponseHeaders(res, requestId);
-      return proxyPass(
-        req,
-        res,
-        `http://127.0.0.1:${this.devProcessPort}`,
-        this,
-        requestId,
-        false
-      );
+      return proxyPass(req, res, this.devProcessOrigin, this, requestId, false);
     }
 
     if (!foundAsset) {
@@ -2203,28 +2202,43 @@ export default class DevServer {
   async runDevCommand() {
     const { devCommand, cwd } = this;
 
+    if (devCommand === this.currentDevCommand) {
+      // `devCommand` has not changed, so don't restart frontend dev process
+      return;
+    }
+
+    this.currentDevCommand = devCommand;
+
     if (!devCommand) {
       return;
     }
 
+    if (this.devProcess) {
+      await treeKill(this.devProcess.pid);
+    }
+
     this.output.log(
       `Running Dev Command ${chalk.cyan.bold(`“${devCommand}”`)}`
     );
 
     const port = await getPort();
 
-    const env: Env = {
-      // Because of child process 'pipe' below, isTTY will be false.
-      // Most frameworks use `chalk`/`supports-color` so we enable it anyway.
-      FORCE_COLOR: process.stdout.isTTY ? '1' : '0',
-      // Prevent framework dev servers from automatically opening a web
-      // browser window, since it will not be the port that `vc dev`
-      // is listening on and thus will be missing Vercel features.
-      BROWSER: 'none',
-      ...process.env,
-      ...this.envConfigs.allEnv,
-      PORT: `${port}`,
-    };
+    const env: Env = cloneEnv(
+      {
+        // Because of child process 'pipe' below, isTTY will be false.
+        // Most frameworks use `chalk`/`supports-color` so we enable it anyway.
+        FORCE_COLOR: process.stdout.isTTY ? '1' : '0',
+        // Prevent framework dev servers from automatically opening a web
+        // browser window, since it will not be the port that `vc dev`
+        // is listening on and thus will be missing Vercel features.
+        BROWSER: 'none',
+      },
+      process.env,
+      this.envConfigs.allEnv,
+      {
+        PORT: `${port}`,
+      }
+    );
 
     // This is necesary so that the dev command in the Project
     // will work cross-platform (especially Windows).
@@ -2258,7 +2272,6 @@ export default class DevServer {
 
     this.output.debug(`Spawning dev command: ${command}`);
 
-    const devPort = new URL(this.address).port;
     const proxyPort = new RegExp(port.toString(), 'g');
     const p = spawnCommand(command, {
       stdio: ['inherit', 'pipe', 'pipe'],
@@ -2275,17 +2288,16 @@ export default class DevServer {
     p.stdout.setEncoding('utf8');
 
     p.stdout.on('data', (data: string) => {
-      process.stdout.write(data.replace(proxyPort, devPort));
+      process.stdout.write(data.replace(proxyPort, this.address.port));
     });
 
     p.on('exit', (code, signal) => {
       this.output.debug(`Dev command exited with "${signal || code}"`);
-      this.devProcessPort = undefined;
+      this.devProcessOrigin = undefined;
     });
 
-    await checkForPort(port, 1000 * 60 * 5);
-
-    this.devProcessPort = port;
+    const devProcessHost = await checkForPort(port, 1000 * 60 * 5);
+    this.devProcessOrigin = `http://${devProcessHost}:${port}`;
   }
 }
 
@@ -2573,15 +2585,29 @@ function needsBlockingBuild(buildMatch: BuildMatch): boolean {
   return typeof builder.shouldServe !== 'function';
 }
 
-async function checkForPort(port: number, timeout: number): Promise<void> {
-  const opts = { host: '127.0.0.1' };
+async function checkForPort(port: number, timeout: number): Promise<string> {
+  let host;
   const start = Date.now();
-  while (!(await isPortReachable(port, opts))) {
+  while (!(host = await getReachableHostOnPort(port))) {
     if (Date.now() - start > timeout) {
-      throw new Error(`Detecting port ${port} timed out after ${timeout}ms`);
+      break;
     }
     await sleep(100);
   }
+  if (!host) {
+    throw new Error(`Detecting port ${port} timed out after ${timeout}ms`);
+  }
+  return host;
+}
+
+async function getReachableHostOnPort(port: number): Promise<string | false> {
+  const optsIpv4 = { host: '127.0.0.1' };
+  const optsIpv6 = { host: '::1' };
+  const results = await Promise.all([
+    isPortReachable(port, optsIpv6).then(r => r && `[${optsIpv6.host}]`),
+    isPortReachable(port, optsIpv4).then(r => r && optsIpv4.host),
+  ]);
+  return results.find(Boolean) || false;
 }
 
 function filterFrontendBuilds(build: Builder) {

packages/cli/src/util/dev/static-builder.ts

@@ -1,42 +0,0 @@
-import {
-  FileFsRef,
-  BuildOptions,
-  shouldServe as defaultShouldServe,
-  ShouldServeOptions,
-} from '@vercel/build-utils';
-import { BuildResult } from './types';
-
-export const version = 2;
-
-export function build({
-  files,
-  entrypoint,
-  config: { zeroConfig, outputDirectory },
-}: BuildOptions): BuildResult {
-  const path =
-    zeroConfig && outputDirectory
-      ? `${outputDirectory}/${entrypoint}`
-      : entrypoint;
-  return {
-    output: {
-      [entrypoint]: files[path] as FileFsRef,
-    },
-    routes: [],
-    watch: [path],
-  };
-}
-
-export function shouldServe(_opts: ShouldServeOptions) {
-  const opts = { ..._opts };
-  let {
-    config: { zeroConfig, outputDirectory },
-  } = opts;
-
-  // Add the output directory prefix
-  if (zeroConfig && outputDirectory) {
-    opts.entrypoint = `${outputDirectory}/${opts.entrypoint}`;
-    opts.requestPath = `${outputDirectory}/${opts.requestPath}`;
-  }
-
-  return defaultShouldServe(opts);
-}

packages/cli/src/util/dev/types.ts

@@ -12,18 +12,17 @@ import {
   FileBlob,
   FileFsRef,
   Lambda,
-  PackageJson,
 } from '@vercel/build-utils';
 import { VercelConfig } from '@vercel/client';
 import { HandleValue, Route } from '@vercel/routing-utils';
 import { Output } from '../output';
 import { ProjectEnvVariable, ProjectSettings } from '../../types';
+import { BuilderWithPkg } from '../build/import-builders';
 
 export { VercelConfig };
 
 export interface DevServerOptions {
   output: Output;
-  devCommand?: string;
   projectSettings?: ProjectSettings;
   systemEnvValues?: string[];
   projectEnvs?: ProjectEnvVariable[];
@@ -49,7 +48,7 @@ export interface EnvConfigs {
 export interface BuildMatch extends BuildConfig {
   entrypoint: string;
   src: string;
-  builderWithPkg: BuilderWithPackage;
+  builderWithPkg: BuilderWithPkg;
   buildOutput: BuilderOutputs;
   buildResults: Map<string | null, BuildResult>;
   buildTimestamp: number;
@@ -123,13 +122,6 @@ export interface BuildResultV4 {
   distPath?: string;
 }
 
-export interface BuilderWithPackage {
-  runInProcess?: boolean;
-  requirePath: string;
-  builder: Readonly<Builder>;
-  package: Readonly<PackageJson>;
-}
-
 export interface HttpHeadersConfig {
   [name: string]: string;
 }

packages/cli/src/util/errors-ts.ts

@@ -426,7 +426,7 @@ export class UserAborted extends NowError<'USER_ABORTED', {}> {
     super({
       code: 'USER_ABORTED',
       meta: {},
-      message: `The user aborted the operation.`,
+      message: `The user canceled the operation.`,
     });
   }
 }

packages/cli/src/util/git/connect-git-provider.ts

@@ -58,9 +58,9 @@ export async function connectGitProvider(
       (err.action === 'Install GitHub App' || err.code === 'repo_not_found')
     ) {
       client.output.error(
-        `Failed to link ${chalk.cyan(
+        `Failed to connect ${chalk.cyan(
           repo
-        )}. Make sure there aren't any typos and that you have access to the repository if it's private.`
+        )} to project. Make sure there aren't any typos and that you have access to the repository if it's private.`
       );
     } else if (apiError && err.action === 'Add a Login Connection') {
       client.output.error(

packages/cli/src/util/handle-error.ts

@@ -39,7 +39,7 @@ export default function handleError(error: unknown, { debug = false } = {}) {
   } else if (status === 500) {
     console.error(errorOutput('Unexpected server error. Please retry.'));
   } else if (code === 'USER_ABORT') {
-    info('Aborted');
+    info('Canceled');
   } else {
     console.error(
       errorOutput(`Unexpected error. Please try again later. (${message})`)

packages/cli/src/util/input/list.ts

@@ -21,7 +21,7 @@ interface ListOptions {
   choices: ListChoice[];
   pageSize?: number;
   separator?: boolean;
-  abort?: 'start' | 'end';
+  cancel?: 'start' | 'end';
   eraseFinalAnswer?: boolean;
 }
 
@@ -50,7 +50,7 @@ export default async function list(
     ],
     pageSize = 15, // Show 15 lines without scrolling (~4 credit cards)
     separator = false, // Puts a blank separator between each choice
-    abort = 'end', // Whether the `abort` option will be at the `start` or the `end`,
+    cancel = 'end', // Whether the `cancel` option will be at the `start` or the `end`,
     eraseFinalAnswer = false, // If true, the line with the final answer that inquirer prints will be erased before returning
   }: ListOptions
 ): Promise<string> {
@@ -97,17 +97,17 @@ export default async function list(
     }
   }
 
-  const abortSeparator = new inquirer.Separator('─'.repeat(biggestLength));
-  const _abort = {
-    name: 'Abort',
+  const cancelSeparator = new inquirer.Separator('─'.repeat(biggestLength));
+  const _cancel = {
+    name: 'Cancel',
     value: '',
     short: '',
   };
 
-  if (abort === 'start') {
-    choices.unshift(_abort, abortSeparator);
+  if (cancel === 'start') {
+    choices.unshift(_cancel, cancelSeparator);
   } else {
-    choices.push(abortSeparator, _abort);
+    choices.push(cancelSeparator, _cancel);
   }
 
   const answer = await client.prompt({

packages/cli/src/util/link/add-git-connection.ts

@@ -1,107 +0,0 @@
-import { Dictionary } from '@vercel/client';
-import { parseRepoUrl } from '../git/connect-git-provider';
-import Client from '../client';
-import { Org, Project, ProjectSettings } from '../../types';
-import { handleOptions } from './handle-options';
-import {
-  promptGitConnectMultipleUrls,
-  promptGitConnectSingleUrl,
-} from './git-connect-prompts';
-
-function getProjectSettings(project: Project): ProjectSettings {
-  return {
-    createdAt: project.createdAt,
-    framework: project.framework,
-    devCommand: project.devCommand,
-    installCommand: project.installCommand,
-    buildCommand: project.buildCommand,
-    outputDirectory: project.outputDirectory,
-    rootDirectory: project.rootDirectory,
-    directoryListing: project.directoryListing,
-    nodeVersion: project.nodeVersion,
-    skipGitConnectDuringLink: project.skipGitConnectDuringLink,
-  };
-}
-
-export async function addGitConnection(
-  client: Client,
-  org: Org,
-  project: Project,
-  remoteUrls: Dictionary<string>,
-  settings?: ProjectSettings
-): Promise<number | void> {
-  if (!settings) {
-    settings = getProjectSettings(project);
-  }
-  if (Object.keys(remoteUrls).length === 1) {
-    return addSingleGitRemote(
-      client,
-      org,
-      project,
-      remoteUrls,
-      settings || project
-    );
-  } else if (Object.keys(remoteUrls).length > 1 && !project.link) {
-    return addMultipleGitRemotes(
-      client,
-      org,
-      project,
-      remoteUrls,
-      settings || project
-    );
-  }
-}
-
-async function addSingleGitRemote(
-  client: Client,
-  org: Org,
-  project: Project,
-  remoteUrls: Dictionary<string>,
-  settings: ProjectSettings
-) {
-  const [remoteName, remoteUrl] = Object.entries(remoteUrls)[0];
-  const repoInfo = parseRepoUrl(remoteUrl);
-  if (!repoInfo) {
-    client.output.debug(`Could not parse repo url ${repoInfo}.`);
-    return 1;
-  }
-  const { org: parsedOrg, repo, provider } = repoInfo;
-  const alreadyLinked =
-    project.link &&
-    project.link.org === parsedOrg &&
-    project.link.repo === repo &&
-    project.link.type === provider;
-  if (alreadyLinked) {
-    client.output.debug('Project already linked. Skipping...');
-    return;
-  }
-
-  const replace =
-    project.link &&
-    (project.link.org !== parsedOrg ||
-      project.link.repo !== repo ||
-      project.link.type !== provider);
-  const shouldConnect = await promptGitConnectSingleUrl(
-    client,
-    project,
-    remoteName,
-    remoteUrl,
-    replace
-  );
-  return handleOptions(shouldConnect, client, org, project, settings, repoInfo);
-}
-
-async function addMultipleGitRemotes(
-  client: Client,
-  org: Org,
-  project: Project,
-  remoteUrls: Dictionary<string>,
-  settings: ProjectSettings
-) {
-  client.output.log('Found multiple Git remote URLs in Git config.');
-  const remoteUrlOrOptions = await promptGitConnectMultipleUrls(
-    client,
-    remoteUrls
-  );
-  return handleOptions(remoteUrlOrOptions, client, org, project, settings);
-}

packages/cli/src/util/link/git-connect-prompts.ts

@@ -1,86 +0,0 @@
-import { Dictionary } from '@vercel/client';
-import chalk from 'chalk';
-import { Project } from '../../types';
-import Client from '../client';
-import { formatProvider } from '../git/connect-git-provider';
-import list from '../input/list';
-export async function promptGitConnectSingleUrl(
-  client: Client,
-  project: Project,
-  remoteName: string,
-  remoteUrl: string,
-  hasDiffConnectedProvider = false
-) {
-  const { output } = client;
-  if (hasDiffConnectedProvider) {
-    const currentRepoPath = `${project.link!.org}/${project.link!.repo}`;
-    const currentProvider = project.link!.type;
-    output.print('\n');
-    output.log(
-      `Found Git remote URL ${chalk.cyan(
-        remoteUrl
-      )}, which is different from the connected ${formatProvider(
-        currentProvider
-      )} repository ${chalk.cyan(currentRepoPath)}.`
-    );
-  } else {
-    output.print('\n');
-    output.log(
-      `Found local Git remote "${remoteName}": ${chalk.cyan(remoteUrl)}`
-    );
-  }
-  return await list(client, {
-    message: hasDiffConnectedProvider
-      ? 'Do you want to replace it?'
-      : `Do you want to connect "${remoteName}" to your Vercel project?`,
-    choices: [
-      {
-        name: 'Yes',
-        value: 'yes',
-        short: 'yes',
-      },
-      {
-        name: 'No',
-        value: 'no',
-        short: 'no',
-      },
-      {
-        name: 'Do not ask again for this project',
-        value: 'opt-out',
-        short: 'no (opt out)',
-      },
-    ],
-  });
-}
-
-export async function promptGitConnectMultipleUrls(
-  client: Client,
-  remoteUrls: Dictionary<string>
-) {
-  const staticOptions = [
-    {
-      name: 'No',
-      value: 'no',
-      short: 'no',
-    },
-    {
-      name: 'Do not ask again for this project',
-      value: 'opt-out',
-      short: 'no (opt out)',
-    },
-  ];
-  let choices = [];
-  for (const url of Object.values(remoteUrls)) {
-    choices.push({
-      name: url,
-      value: url,
-      short: url,
-    });
-  }
-  choices = choices.concat(staticOptions);
-
-  return await list(client, {
-    message: 'Do you want to connect a Git repository to your Vercel project?',
-    choices,
-  });
-}

packages/cli/src/util/link/handle-options.ts

@@ -1,98 +0,0 @@
-import chalk from 'chalk';
-import { Org, Project, ProjectSettings } from '../../types';
-import Client from '../client';
-import {
-  connectGitProvider,
-  disconnectGitProvider,
-  formatProvider,
-  RepoInfo,
-  parseRepoUrl,
-} from '../git/connect-git-provider';
-import { Output } from '../output';
-import { getCommandName } from '../pkg-name';
-import updateProject from '../projects/update-project';
-
-export async function handleOptions(
-  option: string,
-  client: Client,
-  org: Org,
-  project: Project,
-  settings: ProjectSettings,
-  repoInfo?: RepoInfo
-) {
-  const { output } = client;
-  if (option === 'no') {
-    skip(output);
-    return;
-  } else if (option === 'opt-out') {
-    optOut(client, project, settings);
-    return;
-  } else if (option !== '') {
-    // Option is "yes" or a URL
-
-    // Ensure parsed url exists
-    if (!repoInfo) {
-      const _repoInfo = parseRepoUrl(option);
-      if (!_repoInfo) {
-        output.debug(`Could not parse repo url ${option}.`);
-        return 1;
-      }
-      repoInfo = _repoInfo;
-    }
-    return connect(client, org, project, repoInfo);
-  }
-}
-
-async function optOut(
-  client: Client,
-  project: Project,
-  settings: ProjectSettings
-) {
-  settings.skipGitConnectDuringLink = true;
-  await updateProject(client, project.name, settings);
-  client.output
-    .log(`Opted out. You can re-enable this prompt by visiting the Settings > Git page on the
-  dashboard for this Project.`);
-}
-
-function skip(output: Output) {
-  output.log('Skipping...');
-  output.log(
-    `You can connect a Git repository in the future by running ${getCommandName(
-      'git connect'
-    )}.`
-  );
-}
-
-async function connect(
-  client: Client,
-  org: Org,
-  project: Project,
-  repoInfo: RepoInfo
-): Promise<number | void> {
-  const { output } = client;
-  const { provider, org: parsedOrg, repo } = repoInfo;
-  const repoPath = `${parsedOrg}/${repo}`;
-
-  output.log('Connecting...');
-
-  if (project.link) {
-    await disconnectGitProvider(client, org, project.id);
-  }
-  const connect = await connectGitProvider(
-    client,
-    org,
-    project.id,
-    provider,
-    repoPath
-  );
-  if (connect !== 1) {
-    output.log(
-      `Connected ${formatProvider(provider)} repository ${chalk.cyan(
-        repoPath
-      )}!`
-    );
-  } else {
-    return connect;
-  }
-}

packages/cli/src/util/link/setup-and-link.ts

@@ -28,8 +28,6 @@ import { EmojiLabel } from '../emoji';
 import createDeploy from '../deploy/create-deploy';
 import Now, { CreateOptions } from '../index';
 import { isAPIError } from '../errors-ts';
-import { getRemoteUrls } from '../create-git-meta';
-import { addGitConnection } from './add-git-connection';
 
 export interface SetupAndLinkOptions {
   forceDelete?: boolean;
@@ -89,7 +87,7 @@ export default async function setupAndLink(
     ));
 
   if (!shouldStartSetup) {
-    output.print(`Aborted. Project not set up.\n`);
+    output.print(`Canceled. Project not set up.\n`);
     return { status: 'not_linked', org: null, project: null };
   }
 
@@ -130,19 +128,6 @@ export default async function setupAndLink(
   } else {
     const project = projectOrNewProjectName;
 
-    const remoteUrls = await getRemoteUrls(join(path, '.git/config'), output);
-    if (remoteUrls && !project.skipGitConnectDuringLink) {
-      const connectGit = await addGitConnection(
-        client,
-        org,
-        project,
-        remoteUrls
-      );
-      if (typeof connectGit === 'number') {
-        return { status: 'error', exitCode: connectGit };
-      }
-    }
-
     await linkFolderToProject(
       output,
       path,
@@ -257,20 +242,6 @@ export default async function setupAndLink(
 
     const project = await createProject(client, newProjectName);
 
-    const remoteUrls = await getRemoteUrls(join(path, '.git/config'), output);
-    if (remoteUrls) {
-      const connectGit = await addGitConnection(
-        client,
-        org,
-        project,
-        remoteUrls,
-        settings
-      );
-      if (typeof connectGit === 'number') {
-        return { status: 'error', exitCode: connectGit };
-      }
-    }
-
     await updateProject(client, project.id, settings);
     Object.assign(project, settings);