Publish Stable

- @vercel/build-utils@5.7.5
 - vercel@28.11.1
 - @vercel/client@12.2.26
 - @vercel/fs-detectors@3.6.2
 - @vercel/gatsby-plugin-vercel-analytics@1.0.1
 - @vercel/go@2.2.24
 - @vercel/hydrogen@0.0.38
 - @vercel/next@3.3.9
 - @vercel/node@2.8.6
 - @vercel/python@3.1.34
 - @vercel/redwood@1.0.45
 - @vercel/remix@1.1.7
 - @vercel/ruby@1.3.50
 - @vercel/static-build@1.1.1

.eslintignore

@@ -42,3 +42,6 @@ packages/static-build/test/cache-fixtures
 
 # redwood
 packages/redwood/test/fixtures
+
+# gatsby-plugin-vercel-analytics
+packages/gatsby-plugin-vercel-analytics

.github/CODEOWNERS

@@ -7,11 +7,10 @@
 /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
+/packages/edge                           @vercel/edge-compute
 /examples                                @leerob
 /examples/create-react-app               @Timer
 /examples/nextjs                         @timneutkens @ijjk @styfle

.github/SECURITY.md

@@ -1,9 +0,0 @@
-# Reporting Security Issues
-
-If you believe you have found a security vulnerability in Vercel, we encourage you to let us know right away.
-
-We will investigate all legitimate reports and do our best to quickly fix the problem.
-
-Please email `responsible.disclosure@vercel.com` to disclose any security vulnerabilities.
-
-https://vercel.com/security

.github/workflows/label-feature-request.yml

@@ -0,0 +1,22 @@
+name: 🤖 Issue labeler - Feature Request
+on:
+  issues:
+    types:
+      - labeled
+jobs:
+  add-comment:
+    if: "github.event.label.name == 'triaged: feature request'"
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Add comment
+        uses: peter-evans/create-or-update-comment@5adcb0bb0f9fb3f95ef05400558bdb3f329ee808
+        with:
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Thank you for taking the time to created this request!             
+            
+            We added it to our backlog but need to discuss design/architecture before we can accept a PR. 
+            
+            Please let us know if you would be interested in sending a PR once we approve the design.

.github/workflows/label-triaged.yml

@@ -0,0 +1,24 @@
+name: 🤖 Issue labeler - Triaged
+on:
+  issues:
+    types:
+      - labeled
+jobs:
+  add-comment:
+    if: "github.event.label.name == 'triaged: bug'"
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Add comment
+        uses: peter-evans/create-or-update-comment@5adcb0bb0f9fb3f95ef05400558bdb3f329ee808
+        with:
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Thank you for taking the time to file this issue!             
+            
+            We have confirmed this is a bug and added it to our backlog.
+            
+            We don't have a timeline for when this issue will be fixed, but we will accept a Pull Request with a fix and a test.
+            
+            See the [contributing guidelines](https://github.com/vercel/vercel/blob/main/.github/CONTRIBUTING.md) for more info.

.github/workflows/publish.yml

@@ -27,9 +27,9 @@ jobs:
         tag="$(git describe --tags --exact-match 2> /dev/null || :)"
         if [[ -z "$tag" ]];
           then
-            echo "::set-output name=IS_RELEASE::false"
+            echo "IS_RELEASE=false" >> $GITHUB_OUTPUT
           else
-            echo "::set-output name=IS_RELEASE::true"
+            echo "IS_RELEASE=true" >> $GITHUB_OUTPUT
         fi
     - name: Setup Go
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
@@ -42,7 +42,13 @@ jobs:
       timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
       with:
         node-version: 14
-        cache: 'yarn'
+    - name: Cache
+      if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
+      uses: actions/cache@v3
+      with:
+        path: '**/node_modules'
+        key: yarn-${{ matrix.os }}-${{ matrix.node }}-${{ hashFiles('yarn.lock') }}
+        restore-keys: yarn-${{ matrix.os }}-${{ matrix.node }}
     - name: Install
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
       run: yarn install --check-files --frozen-lockfile --network-timeout 1000000

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

@@ -38,7 +38,11 @@ jobs:
         timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
+      - uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: yarn-${{ matrix.os }}-${{ matrix.node }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: yarn-${{ matrix.os }}-${{ matrix.node }}
       - run: yarn install --network-timeout 1000000 --frozen-lockfile
       - run: yarn run build
       - run: yarn test-integration-cli

.github/workflows/test-unit.yml

@@ -20,7 +20,7 @@ concurrency:
 jobs:
   test:
     name: Unit
-    timeout-minutes: 15
+    timeout-minutes: 20
     strategy:
       fail-fast: false
       matrix:
@@ -38,7 +38,11 @@ jobs:
         timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
         with:
             node-version: ${{ matrix.node }}
-            cache: 'yarn'
+      - uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: yarn-${{ matrix.os }}-${{ matrix.node }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: yarn-${{ matrix.os }}-${{ matrix.node }}
       - run: yarn install --network-timeout 1000000 --frozen-lockfile
       - run: yarn run build
       - run: yarn run lint

.github/workflows/test.yml

@@ -36,14 +36,18 @@ jobs:
         timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'yarn'
+      - uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: yarn-${{ matrix.os }}-${{ matrix.node }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: yarn-${{ matrix.os }}-${{ matrix.node }}
       - run: yarn install --network-timeout 1000000 --frozen-lockfile
       - id: set-tests
         run: |
           TESTS_ARRAY=$(node utils/chunk-tests.js $SCRIPT_NAME)
           echo "Files to test:"
           echo "$TESTS_ARRAY"
-          echo "::set-output name=tests::$TESTS_ARRAY"
+          echo "tests=$TESTS_ARRAY" >> $GITHUB_OUTPUT
       - uses: patrickedqvist/wait-for-vercel-preview@ae34b392ef30297f2b672f9afb3c329bde9bd487
         id: waitForTarball
         with:
@@ -73,7 +77,11 @@ jobs:
         timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'yarn'
+      - uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: yarn-${{ matrix.os }}-${{ matrix.node }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: yarn-${{ matrix.os }}-${{ matrix.node }}
 
       - name: Install Hugo
         if: matrix.runner == 'macos-latest'

.gitignore

@@ -19,6 +19,7 @@ packages/cli/test/dev/fixtures/**/dist
 packages/cli/test/dev/fixtures/**/public
 packages/cli/test/dev/fixtures/**/.now
 packages/cli/test/dev/fixtures/**/.vercel
+!packages/cli/test/fixtures/unit/commands/build/monorepo-detection/**/yarn.lock
 packages/cli/test/fixtures/integration
 test/lib/deployment/failed-page.txt
 .DS_Store
@@ -28,4 +29,5 @@ test/lib/deployment/failed-page.txt
 __pycache__
 .vercel
 .turbo
+.eslintcache
 turbo-cache-key.json

.prettierignore

@@ -3,3 +3,7 @@
 # ignore these files with an intentional syntax error
 packages/cli/test/dev/fixtures/edge-function-error/api/edge-error-syntax.js
 packages/cli/test/fixtures/unit/commands/build/node-error/api/typescript.ts
+examples/sveltekit-1
+
+# gatsby-plugin-vercel-analytics
+packages/gatsby-plugin-vercel-analytics

DEVELOPING_A_RUNTIME.md

@@ -28,7 +28,7 @@ Official Runtimes are published to [the npm registry](https://npmjs.com) as a pa
 > **Note:** The `use` property in the `builds` array will work with any [npm
 > install argument](https://docs.npmjs.com/cli/install) such as a git repo URL,
 > which is useful for testing your Runtime. Alternatively, the `functions` property
-> requires that you specify a specifc tag published to npm, for stability purposes.
+> requires that you specify a specific tag published to npm, for stability purposes.
 
 See the [Runtimes Documentation](https://vercel.com/docs/runtimes) to view example usage.
 

examples/nextjs/.gitignore

@@ -30,7 +30,3 @@ yarn-error.log*
 
 # vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

examples/nextjs/README.md

@@ -18,6 +18,8 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

examples/nextjs/package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "eslint": "8.28.0",
-    "eslint-config-next": "13.0.6",
-    "next": "13.0.6",
+    "@next/font": "13.1.1",
+    "eslint": "8.30.0",
+    "eslint-config-next": "13.1.1",
+    "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

examples/nextjs/pages/_app.js

@@ -1,7 +1,5 @@
 import '../styles/globals.css'
 
-function MyApp({ Component, pageProps }) {
+export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
-
-export default MyApp

examples/nextjs/pages/_document.js

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

examples/nextjs/pages/index.js

@@ -1,71 +1,123 @@
 import Head from 'next/head'
 import Image from 'next/image'
+import { Inter } from '@next/font/google'
 import styles from '../styles/Home.module.css'
 
+const inter = Inter({ subsets: ['latin'] })
+
 export default function Home() {
   return (
-    <div className={styles.container}>
+    <>
       <Head>
         <title>Create Next App</title>
         <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
       <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
+        <div className={styles.description}>
+          <p>
+            Get started by editing&nbsp;
+            <code className={styles.code}>pages/index.js</code>
+          </p>
+          <div>
+            <a
+              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              By{' '}
+              <Image
+                src="/vercel.svg"
+                alt="Vercel Logo"
+                className={styles.vercelLogo}
+                width={100}
+                height={24}
+                priority
+              />
+            </a>
+          </div>
+        </div>
 
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
+        <div className={styles.center}>
+          <Image
+            className={styles.logo}
+            src="/next.svg"
+            alt="Next.js Logo"
+            width={180}
+            height={37}
+            priority
+          />
+          <div className={styles.thirteen}>
+            <Image
+              src="/thirteen.svg"
+              alt="13"
+              width={40}
+              height={31}
+              priority
+            />
+          </div>
+        </div>
 
         <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          <a
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Docs <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Find in-depth information about Next.js features and&nbsp;API.
+            </p>
           </a>
 
           <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
+            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
             className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
+            <h2 className={inter.className}>
+              Learn <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Learn about Next.js in an interactive course with&nbsp;quizzes!
+            </p>
+          </a>
+
+          <a
+            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Templates <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Discover and deploy boilerplate example Next.js&nbsp;projects.
+            </p>
           </a>
 
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
             target="_blank"
             rel="noopener noreferrer"
-            className={styles.card}
           >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
+            <h2 className={inter.className}>
+              Deploy <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Instantly deploy your Next.js site to a shareable URL
+              with&nbsp;Vercel.
             </p>
           </a>
         </div>
       </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
+    </>
   )
 }

examples/nextjs/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

examples/nextjs/public/thirteen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>

examples/nextjs/public/vercel.svg

@@ -1,4 +1 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

examples/nextjs/styles/Home.module.css

@@ -1,129 +1,278 @@
-.container {
-  padding: 0 2rem;
-}
-
 .main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
 }
 
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  width: 100%;
+  z-index: 2;
+  font-family: var(--font-mono);
 }
 
-.footer a {
+.description a {
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-grow: 1;
+  gap: 0.5rem;
 }
 
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
+.description p {
+  position: relative;
   margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
 }
 
 .code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
+  font-weight: 700;
+  font-family: var(--font-mono);
 }
 
 .grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(25%, auto));
+  width: var(--max-width);
+  max-width: 100%;
 }
 
 .card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition: background 200ms, border 200ms;
 }
 
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
 }
 
 .card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.7rem;
 }
 
 .card p {
   margin: 0;
-  font-size: 1.25rem;
+  opacity: 0.6;
+  font-size: 0.9rem;
   line-height: 1.5;
+  max-width: 30ch;
 }
 
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
 }
 
-@media (max-width: 600px) {
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: '';
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+}
+
+.logo,
+.thirteen {
+  position: relative;
+}
+
+.thirteen {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 75px;
+  height: 75px;
+  padding: 25px 10px;
+  margin-left: 16px;
+  transform: translateZ(0);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: 0px 2px 8px -1px #0000001a;
+}
+
+.thirteen::before,
+.thirteen::after {
+  content: '';
+  position: absolute;
+  z-index: -1;
+}
+
+/* Conic Gradient Animation */
+.thirteen::before {
+  animation: 6s rotate linear infinite;
+  width: 200%;
+  height: 200%;
+  background: var(--tile-border);
+}
+
+/* Inner Square */
+.thirteen::after {
+  inset: 0;
+  padding: 1px;
+  border-radius: var(--border-radius);
+  background: linear-gradient(
+    to bottom right,
+    rgba(var(--tile-start-rgb), 1),
+    rgba(var(--tile-end-rgb), 1)
+  );
+  background-clip: content-box;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .thirteen::before {
+    animation: none;
+  }
+
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
   .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    position: fixed;
     width: 100%;
-    flex-direction: column;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(
+      to bottom,
+      rgba(var(--background-start-rgb), 1),
+      rgba(var(--callout-rgb), 0.5)
+    );
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgb(var(--background-end-rgb)) 40%
+    );
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  .card,
-  .footer {
-    border-color: #222;
-  }
-  .code {
-    background: #111;
-  }
-  .logo img {
+  .vercelLogo {
     filter: invert(1);
   }
+
+  .logo,
+  .thirteen img {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
 }

examples/nextjs/styles/globals.css

@@ -1,9 +1,98 @@
-html,
-body {
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
 }
 
 a {
@@ -11,16 +100,8 @@ a {
   text-decoration: none;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
   }
-  body {
-    color: white;
-    background: black;
-  }
 }

examples/sveltekit-1/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/sveltekit-1/.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended', 'prettier'],
+	plugins: ['svelte3'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

examples/sveltekit-1/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/sveltekit-1/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/sveltekit-1/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/sveltekit-1/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

examples/sveltekit-1/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## 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 create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

examples/sveltekit-1/jsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"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-1/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "sveltekit-2",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"test": "playwright test",
+		"test:unit": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-vercel": "^1.0.0",
+		"@sveltejs/kit": "^1.0.0",
+		"@types/cookie": "^0.5.1",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"svelte": "^3.54.0",
+		"svelte-check": "^2.9.2",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0",
+		"vitest": "^0.25.3"
+	},
+	"type": "module"
+}

examples/sveltekit-1/playwright.config.js

@@ -0,0 +1,10 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests'
+};
+
+export default config;

examples/sveltekit-1/src/app.d.ts

@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface Platform {}
+}

examples/sveltekit-1/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

examples/sveltekit-1/src/lib/images/github.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 30 30">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z"
+		fill="rgba(0,0,0,0.7)"
+		stroke="none"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z"
+		fill="rgba(0,0,0,0.7)"
+		stroke="none"
+	/>
+</svg>

examples/sveltekit-1/src/lib/images/svelte-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

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

@@ -0,0 +1,53 @@
+<script>
+	import Header from './Header.svelte';
+	import './styles.css';
+</script>
+
+<div class="app">
+	<Header />
+
+	<main>
+		<slot />
+	</main>
+
+	<footer>
+		<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+	</footer>
+</div>
+
+<style>
+	.app {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 1rem;
+		width: 100%;
+		max-width: 64rem;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+
+	footer {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 12px;
+	}
+
+	footer a {
+		font-weight: bold;
+	}
+
+	@media (min-width: 480px) {
+		footer {
+			padding: 12px 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,3 @@
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

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

@@ -0,0 +1,59 @@
+<script>
+	import Counter from './Counter.svelte';
+	import welcome from '$lib/images/svelte-welcome.webp';
+	import welcome_fallback from '$lib/images/svelte-welcome.png';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<section>
+	<h1>
+		<span class="welcome">
+			<picture>
+				<source srcset={welcome} type="image/webp" />
+				<img src={welcome_fallback} alt="Welcome" />
+			</picture>
+		</span>
+
+		to your new<br />SvelteKit app
+	</h1>
+
+	<h2>
+		try editing <strong>src/routes/+page.svelte</strong>
+	</h2>
+
+	<Counter />
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 0.6;
+	}
+
+	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-1/src/routes/Counter.svelte

@@ -0,0 +1,106 @@
+<script>
+	import { spring } from 'svelte/motion';
+
+	let count = 0;
+
+	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;
+	}
+</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>
+
+	<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>
+</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 button {
+		width: 2em;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background-color: transparent;
+		touch-action: manipulation;
+		font-size: 2rem;
+	}
+
+	.counter button:hover {
+		background-color: var(--color-bg-1);
+	}
+
+	svg {
+		width: 25%;
+		height: 25%;
+	}
+
+	path {
+		vector-effect: non-scaling-stroke;
+		stroke-width: 2px;
+		stroke: #444;
+	}
+
+	.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(--color-theme-1);
+		font-size: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.counter-digits {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+
+	.hidden {
+		top: -100%;
+		user-select: none;
+	}
+</style>

examples/sveltekit-1/src/routes/Header.svelte

@@ -0,0 +1,129 @@
+<script>
+	import { page } from '$app/stores';
+	import logo from '$lib/images/svelte-logo.svg';
+	import github from '$lib/images/github.svg';
+</script>
+
+<header>
+	<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 aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
+				<a href="/">Home</a>
+			</li>
+			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
+				<a href="/about">About</a>
+			</li>
+			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
+				<a href="/sverdle">Sverdle</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">
+		<a href="https://github.com/sveltejs/kit">
+			<img src={github} alt="GitHub" />
+		</a>
+	</div>
+</header>
+
+<style>
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
+
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.corner img {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
+
+	nav {
+		display: flex;
+		justify-content: center;
+		--background: rgba(255, 255, 255, 0.7);
+	}
+
+	svg {
+		width: 2em;
+		height: 3em;
+		display: block;
+	}
+
+	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;
+	}
+
+	li {
+		position: relative;
+		height: 100%;
+	}
+
+	li[aria-current='page']::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(--color-theme-1);
+	}
+
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 0.5rem;
+		color: var(--color-text);
+		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(--color-theme-1);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// 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 csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

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

@@ -0,0 +1,26 @@
+<svelte:head>
+	<title>About</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="text-column">
+	<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="/sverdle">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try
+		using it with JavaScript disabled!
+	</p>
+</div>

examples/sveltekit-1/src/routes/styles.css

@@ -0,0 +1,107 @@
+@import '@fontsource/fira-mono';
+
+:root {
+	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--color-bg-0: rgb(202, 216, 228);
+	--color-bg-1: hsl(209, 36%, 86%);
+	--color-bg-2: hsl(224, 44%, 95%);
+	--color-theme-1: #ff3e00;
+	--color-theme-2: #4075a6;
+	--color-text: rgba(0, 0, 0, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+	font-family: var(--font-body);
+	color: var(--color-text);
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-attachment: fixed;
+	background-color: var(--color-bg-1);
+	background-size: 100vw 100vh;
+	background-image: radial-gradient(
+			50% 50% at 50% 50%,
+			rgba(255, 255, 255, 0.75) 0%,
+			rgba(255, 255, 255, 0) 100%
+		),
+		linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--color-theme-1);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--color-text);
+}
+
+.text-column {
+	display: flex;
+	max-width: 48rem;
+	flex: 0.6;
+	flex-direction: column;
+	justify-content: center;
+	margin: 0 auto;
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}
+
+.visually-hidden {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: auto;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	white-space: nowrap;
+}

examples/sveltekit-1/src/routes/sverdle/+page.server.js

@@ -0,0 +1,70 @@
+import { fail } from '@sveltejs/kit';
+import { Game } from './game';
+
+/** @type {import('./$types').PageServerLoad} */
+export const load = ({ cookies }) => {
+	const game = new Game(cookies.get('sverdle'));
+
+	return {
+		/**
+		 * The player's guessed words so far
+		 */
+		guesses: game.guesses,
+
+		/**
+		 * An array of strings like '__x_c' corresponding to the guesses, where 'x' means
+		 * an exact match, and 'c' means a close match (right letter, wrong place)
+		 */
+		answers: game.answers,
+
+		/**
+		 * The correct answer, revealed if the game is over
+		 */
+		answer: game.answers.length >= 6 ? game.answer : null
+	};
+};
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+	/**
+	 * Modify game state in reaction to a keypress. If client-side JavaScript
+	 * is available, this will happen in the browser instead of here
+	 */
+	update: async ({ request, cookies }) => {
+		const game = new Game(cookies.get('sverdle'));
+
+		const data = await request.formData();
+		const key = data.get('key');
+
+		const i = game.answers.length;
+
+		if (key === 'backspace') {
+			game.guesses[i] = game.guesses[i].slice(0, -1);
+		} else {
+			game.guesses[i] += key;
+		}
+
+		cookies.set('sverdle', game.toString());
+	},
+
+	/**
+	 * Modify game state in reaction to a guessed word. This logic always runs on
+	 * the server, so that people can't cheat by peeking at the JavaScript
+	 */
+	enter: async ({ request, cookies }) => {
+		const game = new Game(cookies.get('sverdle'));
+
+		const data = await request.formData();
+		const guess = /** @type {string[]} */ (data.getAll('guess'));
+
+		if (!game.enter(guess)) {
+			return fail(400, { badGuess: true });
+		}
+
+		cookies.set('sverdle', game.toString());
+	},
+
+	restart: async ({ cookies }) => {
+		cookies.delete('sverdle');
+	}
+};

examples/sveltekit-1/src/routes/sverdle/+page.svelte

@@ -0,0 +1,410 @@
+<script>
+	import { confetti } from '@neoconfetti/svelte';
+	import { enhance } from '$app/forms';
+
+	import { reduced_motion } from './reduced-motion';
+
+	/** @type {import('./$types').PageData} */
+	export let data;
+
+	/** @type {import('./$types').ActionData} */
+	export let form;
+
+	/** Whether or not the user has won */
+	$: won = data.answers.at(-1) === 'xxxxx';
+
+	/** The index of the current guess */
+	$: i = won ? -1 : data.answers.length;
+
+	/** Whether the current guess can be submitted */
+	$: submittable = data.guesses[i]?.length === 5;
+
+	/**
+	 * A map of classnames for all letters that have been guessed,
+	 * used for styling the keyboard
+	 * @type {Record<string, 'exact' | 'close' | 'missing'>}
+	 */
+	let classnames;
+
+	/**
+	 * A map of descriptions for all letters that have been guessed,
+	 * used for adding text for assistive technology (e.g. screen readers)
+	 * @type {Record<string, string>}
+	 */
+	let description;
+
+	$: {
+		classnames = {};
+		description = {};
+
+		data.answers.forEach((answer, i) => {
+			const guess = data.guesses[i];
+
+			for (let i = 0; i < 5; i += 1) {
+				const letter = guess[i];
+
+				if (answer[i] === 'x') {
+					classnames[letter] = 'exact';
+					description[letter] = 'correct';
+				} else if (!classnames[letter]) {
+					classnames[letter] = answer[i] === 'c' ? 'close' : 'missing';
+					description[letter] = answer[i] === 'c' ? 'present' : 'absent';
+				}
+			}
+		});
+	}
+
+	/**
+	 * Modify the game state without making a trip to the server,
+	 * if client-side JavaScript is enabled
+	 * @param {MouseEvent} event
+	 */
+	function update(event) {
+		const guess = data.guesses[i];
+		const key = /** @type {HTMLButtonElement} */ (event.target).getAttribute('data-key');
+
+		if (key === 'backspace') {
+			data.guesses[i] = guess.slice(0, -1);
+			if (form?.badGuess) form.badGuess = false;
+		} else if (guess.length < 5) {
+			data.guesses[i] += key;
+		}
+	}
+
+	/**
+	 * Trigger form logic in response to a keydown event, so that
+	 * desktop users can use the keyboard to play the game
+	 * @param {KeyboardEvent} event
+	 */
+	function keydown(event) {
+		if (event.metaKey) return;
+
+		document
+			.querySelector(`[data-key="${event.key}" i]`)
+			?.dispatchEvent(new MouseEvent('click', { cancelable: true }));
+	}
+</script>
+
+<svelte:window on:keydown={keydown} />
+
+<svelte:head>
+	<title>Sverdle</title>
+	<meta name="description" content="A Wordle clone written in SvelteKit" />
+</svelte:head>
+
+<h1 class="visually-hidden">Sverdle</h1>
+
+<form
+	method="POST"
+	action="?/enter"
+	use:enhance={() => {
+		// prevent default callback from resetting the form
+		return ({ update }) => {
+			update({ reset: false });
+		};
+	}}
+>
+	<a class="how-to-play" href="/sverdle/how-to-play">How to play</a>
+
+	<div class="grid" class:playing={!won} class:bad-guess={form?.badGuess}>
+		{#each Array(6) as _, row}
+			{@const current = row === i}
+			<h2 class="visually-hidden">Row {row + 1}</h2>
+			<div class="row" class:current>
+				{#each Array(5) as _, column}
+					{@const answer = data.answers[row]?.[column]}
+					{@const value = data.guesses[row]?.[column] ?? ''}
+					{@const selected = current && column === data.guesses[row].length}
+					{@const exact = answer === 'x'}
+					{@const close = answer === 'c'}
+					{@const missing = answer === '_'}
+					<div class="letter" class:exact class:close class:missing class:selected>
+						{value}
+						<span class="visually-hidden">
+							{#if exact}
+								(correct)
+							{:else if close}
+								(present)
+							{:else if missing}
+								(absent)
+							{:else}
+								empty
+							{/if}
+						</span>
+						<input name="guess" disabled={!current} type="hidden" {value} />
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+
+	<div class="controls">
+		{#if won || data.answers.length >= 6}
+			{#if !won && data.answer}
+				<p>the answer was "{data.answer}"</p>
+			{/if}
+			<button data-key="enter" class="restart selected" formaction="?/restart">
+				{won ? 'you won :)' : `game over :(`} play again?
+			</button>
+		{:else}
+			<div class="keyboard">
+				<button data-key="enter" class:selected={submittable} disabled={!submittable}>enter</button>
+
+				<button
+					on:click|preventDefault={update}
+					data-key="backspace"
+					formaction="?/update"
+					name="key"
+					value="backspace"
+				>
+					back
+				</button>
+
+				{#each ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'] as row}
+					<div class="row">
+						{#each row as letter}
+							<button
+								on:click|preventDefault={update}
+								data-key={letter}
+								class={classnames[letter]}
+								disabled={data.guesses[i].length === 5}
+								formaction="?/update"
+								name="key"
+								value={letter}
+								aria-label="{letter} {description[letter] || ''}"
+							>
+								{letter}
+							</button>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</form>
+
+{#if won}
+	<div
+		style="position: absolute; left: 50%; top: 30%"
+		use:confetti={{
+			particleCount: $reduced_motion ? 0 : undefined,
+			force: 0.7,
+			stageWidth: window.innerWidth,
+			stageHeight: window.innerHeight,
+			colors: ['#ff3e00', '#40b3ff', '#676778']
+		}}
+	/>
+{/if}
+
+<style>
+	form {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 1rem;
+		flex: 1;
+	}
+
+	.how-to-play {
+		color: var(--color-text);
+	}
+
+	.how-to-play::before {
+		content: 'i';
+		display: inline-block;
+		font-size: 0.8em;
+		font-weight: 900;
+		width: 1em;
+		height: 1em;
+		padding: 0.2em;
+		line-height: 1;
+		border: 1.5px solid var(--color-text);
+		border-radius: 50%;
+		text-align: center;
+		margin: 0 0.5em 0 0;
+		position: relative;
+		top: -0.05em;
+	}
+
+	.grid {
+		--width: min(100vw, 40vh, 380px);
+		max-width: var(--width);
+		align-self: center;
+		justify-self: center;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+
+	.grid .row {
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 0.2rem;
+		margin: 0 0 0.2rem 0;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.grid.bad-guess .row.current {
+			animation: wiggle 0.5s;
+		}
+	}
+
+	.grid.playing .row.current {
+		filter: drop-shadow(3px 3px 10px var(--color-bg-0));
+	}
+
+	.letter {
+		aspect-ratio: 1;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		box-sizing: border-box;
+		text-transform: lowercase;
+		border: none;
+		font-size: calc(0.08 * var(--width));
+		border-radius: 2px;
+		background: white;
+		margin: 0;
+		color: rgba(0, 0, 0, 0.7);
+	}
+
+	.letter.missing {
+		background: rgba(255, 255, 255, 0.5);
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	.letter.exact {
+		background: var(--color-theme-2);
+		color: white;
+	}
+
+	.letter.close {
+		border: 2px solid var(--color-theme-2);
+	}
+
+	.selected {
+		outline: 2px solid var(--color-theme-1);
+	}
+
+	.controls {
+		text-align: center;
+		justify-content: center;
+		height: min(18vh, 10rem);
+	}
+
+	.keyboard {
+		--gap: 0.2rem;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap);
+		height: 100%;
+	}
+
+	.keyboard .row {
+		display: flex;
+		justify-content: center;
+		gap: 0.2rem;
+		flex: 1;
+	}
+
+	.keyboard button,
+	.keyboard button:disabled {
+		--size: min(8vw, 4vh, 40px);
+		background-color: white;
+		color: black;
+		width: var(--size);
+		border: none;
+		border-radius: 2px;
+		font-size: calc(var(--size) * 0.5);
+		margin: 0;
+	}
+
+	.keyboard button.exact {
+		background: var(--color-theme-2);
+		color: white;
+	}
+
+	.keyboard button.missing {
+		opacity: 0.5;
+	}
+
+	.keyboard button.close {
+		border: 2px solid var(--color-theme-2);
+	}
+
+	.keyboard button:focus {
+		background: var(--color-theme-1);
+		color: white;
+		outline: none;
+	}
+
+	.keyboard button[data-key='enter'],
+	.keyboard button[data-key='backspace'] {
+		position: absolute;
+		bottom: 0;
+		width: calc(1.5 * var(--size));
+		height: calc(1 / 3 * (100% - 2 * var(--gap)));
+		text-transform: uppercase;
+		font-size: calc(0.3 * var(--size));
+		padding-top: calc(0.15 * var(--size));
+	}
+
+	.keyboard button[data-key='enter'] {
+		right: calc(50% + 3.5 * var(--size) + 0.8rem);
+	}
+
+	.keyboard button[data-key='backspace'] {
+		left: calc(50% + 3.5 * var(--size) + 0.8rem);
+	}
+
+	.keyboard button[data-key='enter']:disabled {
+		opacity: 0.5;
+	}
+
+	.restart {
+		width: 100%;
+		padding: 1rem;
+		background: rgba(255, 255, 255, 0.5);
+		border-radius: 2px;
+		border: none;
+	}
+
+	.restart:focus,
+	.restart:hover {
+		background: var(--color-theme-1);
+		color: white;
+		outline: none;
+	}
+
+	@keyframes wiggle {
+		0% {
+			transform: translateX(0);
+		}
+		10% {
+			transform: translateX(-2px);
+		}
+		30% {
+			transform: translateX(4px);
+		}
+		50% {
+			transform: translateX(-6px);
+		}
+		70% {
+			transform: translateX(+4px);
+		}
+		90% {
+			transform: translateX(-2px);
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+</style>

examples/sveltekit-1/src/routes/sverdle/game.js

@@ -0,0 +1,72 @@
+import { words, allowed } from './words.server';
+
+export class Game {
+	/**
+	 * Create a game object from the player's cookie, or initialise a new game
+	 * @param {string | undefined} serialized
+	 */
+	constructor(serialized = undefined) {
+		if (serialized) {
+			const [index, guesses, answers] = serialized.split('-');
+
+			this.index = +index;
+			this.guesses = guesses ? guesses.split(' ') : [];
+			this.answers = answers ? answers.split(' ') : [];
+		} else {
+			this.index = Math.floor(Math.random() * words.length);
+			this.guesses = ['', '', '', '', '', ''];
+			this.answers = /** @type {string[]} */ ([]);
+		}
+
+		this.answer = words[this.index];
+	}
+
+	/**
+	 * Update game state based on a guess of a five-letter word. Returns
+	 * true if the guess was valid, false otherwise
+	 * @param {string[]} letters
+	 */
+	enter(letters) {
+		const word = letters.join('');
+		const valid = allowed.has(word);
+
+		if (!valid) return false;
+
+		this.guesses[this.answers.length] = word;
+
+		const available = Array.from(this.answer);
+		const answer = Array(5).fill('_');
+
+		// first, find exact matches
+		for (let i = 0; i < 5; i += 1) {
+			if (letters[i] === available[i]) {
+				answer[i] = 'x';
+				available[i] = ' ';
+			}
+		}
+
+		// then find close matches (this has to happen
+		// in a second step, otherwise an early close
+		// match can prevent a later exact match)
+		for (let i = 0; i < 5; i += 1) {
+			if (answer[i] === '_') {
+				const index = available.indexOf(letters[i]);
+				if (index !== -1) {
+					answer[i] = 'c';
+					available[index] = ' ';
+				}
+			}
+		}
+
+		this.answers.push(answer.join(''));
+
+		return true;
+	}
+
+	/**
+	 * Serialize game state so it can be set as a cookie
+	 */
+	toString() {
+		return `${this.index}-${this.guesses.join(' ')}-${this.answers.join(' ')}`;
+	}
+}

examples/sveltekit-1/src/routes/sverdle/game.test.js

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { Game } from './game';
+
+describe('game test', () => {
+	it('returns true when a valid word is entered', () => {
+		const game = new Game();
+		expect(game.enter('zorro'.split(''))).toBe(true);
+	});
+});

examples/sveltekit-1/src/routes/sverdle/how-to-play/+page.js

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// 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 csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

examples/sveltekit-1/src/routes/sverdle/how-to-play/+page.svelte

@@ -0,0 +1,95 @@
+<svelte:head>
+	<title>How to play Sverdle</title>
+	<meta name="description" content="How to play Sverdle" />
+</svelte:head>
+
+<div class="text-column">
+	<h1>How to play Sverdle</h1>
+
+	<p>
+		Sverdle is a clone of <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a>, the
+		word guessing game. To play, enter a five-letter English word. For example:
+	</p>
+
+	<div class="example">
+		<span class="close">r</span>
+		<span class="missing">i</span>
+		<span class="close">t</span>
+		<span class="missing">z</span>
+		<span class="exact">y</span>
+	</div>
+
+	<p>
+		The <span class="exact">y</span> is in the right place. <span class="close">r</span> and
+		<span class="close">t</span>
+		are the right letters, but in the wrong place. The other letters are wrong, and can be discarded.
+		Let's make another guess:
+	</p>
+
+	<div class="example">
+		<span class="exact">p</span>
+		<span class="exact">a</span>
+		<span class="exact">r</span>
+		<span class="exact">t</span>
+		<span class="exact">y</span>
+	</div>
+
+	<p>This time we guessed right! You have <strong>six</strong> guesses to get the word.</p>
+
+	<p>
+		Unlike the original Wordle, Sverdle runs on the server instead of in the browser, making it
+		impossible to cheat. It uses <code>&lt;form&gt;</code> and cookies to submit data, meaning you can
+		even play with JavaScript disabled!
+	</p>
+</div>
+
+<style>
+	span {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.8em;
+		width: 2.4em;
+		height: 2.4em;
+		background-color: white;
+		box-sizing: border-box;
+		border-radius: 2px;
+		border-width: 2px;
+		color: rgba(0, 0, 0, 0.7);
+	}
+
+	.missing {
+		background: rgba(255, 255, 255, 0.5);
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	.close {
+		border-style: solid;
+		border-color: var(--color-theme-2);
+	}
+
+	.exact {
+		background: var(--color-theme-2);
+		color: white;
+	}
+
+	.example {
+		display: flex;
+		justify-content: flex-start;
+		margin: 1rem 0;
+		gap: 0.2rem;
+	}
+
+	.example span {
+		font-size: 1.4rem;
+	}
+
+	p span {
+		position: relative;
+		border-width: 1px;
+		border-radius: 1px;
+		font-size: 0.4em;
+		transform: scale(2) translate(0, -10%);
+		margin: 0 1em;
+	}
+</style>

examples/sveltekit-1/src/routes/sverdle/reduced-motion.js

@@ -0,0 +1,26 @@
+import { readable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const reduced_motion_query = '(prefers-reduced-motion: reduce)';
+
+const get_initial_motion_preference = () => {
+	if (!browser) return false;
+	return window.matchMedia(reduced_motion_query).matches;
+};
+
+export const reduced_motion = readable(get_initial_motion_preference(), (set) => {
+	if (browser) {
+		/**
+		 * @param {MediaQueryListEvent} event
+		 */
+		const set_reduced_motion = (event) => {
+			set(event.matches);
+		};
+		const media_query_list = window.matchMedia(reduced_motion_query);
+		media_query_list.addEventListener('change', set_reduced_motion);
+
+		return () => {
+			media_query_list.removeEventListener('change', set_reduced_motion);
+		};
+	}
+});

examples/sveltekit-1/static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/sveltekit-1/svelte.config.js

@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-vercel';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

examples/sveltekit-1/tests/test.js

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('about page has expected h1', async ({ page }) => {
+	await page.goto('/about');
+	expect(await page.textContent('h1')).toBe('About this app');
+});

examples/sveltekit-1/vite.config.js

@@ -0,0 +1,11 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+};
+
+export default config;

package.json

@@ -23,6 +23,7 @@
     "@typescript-eslint/parser": "5.21.0",
     "async-retry": "1.2.3",
     "buffer-replace": "1.0.0",
+    "create-svelte": "2.0.1",
     "eslint": "8.14.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-jest": "26.1.5",
@@ -35,7 +36,7 @@
     "prettier": "2.6.2",
     "ts-eager": "2.0.2",
     "ts-jest": "28.0.5",
-    "turbo": "1.4.7"
+    "turbo": "1.7.0-canary.9"
   },
   "scripts": {
     "lerna": "lerna",
@@ -52,7 +53,7 @@
     "test-integration-cli": "node utils/gen.js && turbo run test-integration-cli",
     "test-integration-once": "node utils/gen.js && turbo run test-integration-once",
     "test-integration-dev": "node utils/gen.js && turbo run test-integration-dev",
-    "lint": "eslint . --ext .ts,.js",
+    "lint": "eslint . --cache --ext .ts,.js",
     "prepare": "husky install",
     "pack": "cd utils && node -r ts-eager/register ./pack.ts"
   },

packages/build-utils/package.json

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

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

@@ -25,7 +25,11 @@ export function cloneEnv(...envs: (Env | undefined)[]): Env {
       // 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;
+
+      if (obj.Path !== undefined) {
+        obj.PATH = obj.Path;
+      }
+
       delete obj.Path;
     }
 

packages/build-utils/src/fs/download.ts

@@ -9,8 +9,13 @@ export interface DownloadedFiles {
   [filePath: string]: FileFsRef;
 }
 
-const S_IFMT = 61440; /* 0170000 type of file */
+const S_IFDIR = 16384; /* 0040000 directory */
 const S_IFLNK = 40960; /* 0120000 symbolic link */
+const S_IFMT = 61440; /* 0170000 type of file */
+
+export function isDirectory(mode: number): boolean {
+  return (mode & S_IFMT) === S_IFDIR;
+}
 
 export function isSymbolicLink(mode: number): boolean {
   return (mode & S_IFMT) === S_IFLNK;

packages/build-utils/src/lambda.ts

@@ -3,7 +3,7 @@ import Sema from 'async-sema';
 import { ZipFile } from 'yazl';
 import minimatch from 'minimatch';
 import { readlink } from 'fs-extra';
-import { isSymbolicLink } from './fs/download';
+import { isSymbolicLink, isDirectory } from './fs/download';
 import streamToBuffer from './fs/stream-to-buffer';
 import type { Files, Config } from './types';
 
@@ -200,6 +200,8 @@ export async function createZip(files: Files): Promise<Buffer> {
       const symlinkTarget = symlinkTargets.get(name);
       if (typeof symlinkTarget === 'string') {
         zipFile.addBuffer(Buffer.from(symlinkTarget, 'utf8'), name, opts);
+      } else if (file.mode && isDirectory(file.mode)) {
+        zipFile.addEmptyDirectory(name, opts);
       } else {
         const stream = file.toStream();
         stream.on('error', reject);

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

@@ -36,6 +36,31 @@ it('should clone env with PATH', () => {
   });
 });
 
+it('should not overwrite PATH when path is undefined', () => {
+  expect(
+    cloneEnv(
+      {
+        PATH: 'baz',
+      },
+      new Proxy(
+        {
+          Path: undefined,
+        },
+        {
+          get(target: typeof process.env, prop: string) {
+            if (prop === 'PATH') {
+              return target.PATH ?? target.Path;
+            }
+            return target[prop];
+          },
+        }
+      )
+    )
+  ).toEqual({
+    PATH: 'baz',
+  });
+});
+
 it('should clone and merge multiple env objects', () => {
   // note: this also tests the last object doesn't overwrite `PATH` with
   // `undefined`

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

@@ -0,0 +1,97 @@
+import path from 'path';
+import { tmpdir } from 'os';
+import fs from 'fs-extra';
+import { createZip } from '../src/lambda';
+import { FileBlob, glob, spawnAsync } from '../src';
+
+const MODE_DIRECTORY = 16877; /* drwxr-xr-x */
+const MODE_FILE = 33188; /* -rw-r--r-- */
+
+describe('Lambda', () => {
+  it('should create zip file with symlinks', async () => {
+    if (process.platform === 'win32') {
+      console.log('Skipping test on windows');
+      return;
+    }
+    const files = await glob('**', path.join(__dirname, 'symlinks'));
+    expect(Object.keys(files)).toHaveLength(4);
+
+    const outFile = path.join(__dirname, 'symlinks.zip');
+    await fs.remove(outFile);
+
+    const outDir = path.join(__dirname, 'symlinks-out');
+    await fs.remove(outDir);
+    await fs.mkdirp(outDir);
+
+    await fs.writeFile(outFile, await createZip(files));
+    await spawnAsync('unzip', [outFile], { cwd: outDir });
+
+    const [linkStat, linkDirStat, aStat] = await Promise.all([
+      fs.lstat(path.join(outDir, 'link.txt')),
+      fs.lstat(path.join(outDir, 'link-dir')),
+      fs.lstat(path.join(outDir, 'a.txt')),
+    ]);
+    expect(linkStat.isSymbolicLink()).toEqual(true);
+    expect(linkDirStat.isSymbolicLink()).toEqual(true);
+    expect(aStat.isFile()).toEqual(true);
+  });
+
+  it('should create zip file with empty directory', async () => {
+    if (process.platform === 'win32') {
+      console.log('Skipping test on windows');
+      return;
+    }
+
+    const dir = await fs.mkdtemp(path.join(tmpdir(), 'create-zip-empty-dir'));
+    try {
+      const files = {
+        a: new FileBlob({
+          data: 'contents',
+          mode: MODE_FILE,
+        }),
+        empty: new FileBlob({
+          data: '',
+          mode: MODE_DIRECTORY,
+        }),
+        'b/a': new FileBlob({
+          data: 'inside dir b',
+          mode: MODE_FILE,
+        }),
+        c: new FileBlob({
+          data: '',
+          mode: MODE_DIRECTORY,
+        }),
+        'c/a': new FileBlob({
+          data: 'inside dir c',
+          mode: MODE_FILE,
+        }),
+      };
+
+      const outFile = path.join(dir, 'lambda.zip');
+
+      const outDir = path.join(dir, 'out');
+      await fs.mkdirp(outDir);
+
+      await fs.writeFile(outFile, await createZip(files));
+      await spawnAsync('unzip', [outFile], { cwd: outDir });
+
+      expect(fs.statSync(path.join(outDir, 'empty')).isDirectory()).toEqual(
+        true
+      );
+      expect(fs.statSync(path.join(outDir, 'b')).isDirectory()).toEqual(true);
+      expect(fs.statSync(path.join(outDir, 'c')).isDirectory()).toEqual(true);
+      expect(fs.readFileSync(path.join(outDir, 'a'), 'utf8')).toEqual(
+        'contents'
+      );
+      expect(fs.readFileSync(path.join(outDir, 'b/a'), 'utf8')).toEqual(
+        'inside dir b'
+      );
+      expect(fs.readFileSync(path.join(outDir, 'c/a'), 'utf8')).toEqual(
+        'inside dir c'
+      );
+      expect(fs.readdirSync(path.join(outDir, 'empty'))).toHaveLength(0);
+    } finally {
+      await fs.remove(dir);
+    }
+  });
+});

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

@@ -2,12 +2,10 @@ import ms from 'ms';
 import path from 'path';
 import fs, { readlink } from 'fs-extra';
 import { strict as assert, strictEqual } from 'assert';
-import { createZip } from '../src/lambda';
 import { getSupportedNodeVersion } from '../src/fs/node-version';
 import download from '../src/fs/download';
 import {
   glob,
-  spawnAsync,
   getNodeVersion,
   getLatestNodeVersion,
   getDiscontinuedNodeVersions,
@@ -141,34 +139,6 @@ it('should re-create FileBlob symlinks properly', async () => {
   strictEqual(linkTextContents, 'a.txt');
 });
 
-it('should create zip files with symlinks properly', async () => {
-  if (process.platform === 'win32') {
-    console.log('Skipping test on windows');
-    return;
-  }
-  const files = await glob('**', path.join(__dirname, 'symlinks'));
-  assert.equal(Object.keys(files).length, 4);
-
-  const outFile = path.join(__dirname, 'symlinks.zip');
-  await fs.remove(outFile);
-
-  const outDir = path.join(__dirname, 'symlinks-out');
-  await fs.remove(outDir);
-  await fs.mkdirp(outDir);
-
-  await fs.writeFile(outFile, await createZip(files));
-  await spawnAsync('unzip', [outFile], { cwd: outDir });
-
-  const [linkStat, linkDirStat, aStat] = await Promise.all([
-    fs.lstat(path.join(outDir, 'link.txt')),
-    fs.lstat(path.join(outDir, 'link-dir')),
-    fs.lstat(path.join(outDir, 'a.txt')),
-  ]);
-  assert(linkStat.isSymbolicLink());
-  assert(linkDirStat.isSymbolicLink());
-  assert(aStat.isFile());
-});
-
 it('should download symlinks even with incorrect file', async () => {
   if (process.platform === 'win32') {
     console.log('Skipping test on windows');

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vercel",
-  "version": "28.8.0",
+  "version": "28.11.1",
   "preferGlobal": true,
   "license": "Apache-2.0",
   "description": "The command-line interface for Vercel",
@@ -41,17 +41,16 @@
     "node": ">= 14"
   },
   "dependencies": {
-    "@vercel/build-utils": "5.7.0",
-    "@vercel/go": "2.2.19",
-    "@vercel/hydrogen": "0.0.33",
-    "@vercel/next": "3.3.2",
-    "@vercel/node": "2.8.0",
-    "@vercel/python": "3.1.29",
-    "@vercel/redwood": "1.0.39",
-    "@vercel/remix": "1.1.1",
-    "@vercel/ruby": "1.3.45",
-    "@vercel/static-build": "1.0.42",
-    "update-notifier": "5.1.0"
+    "@vercel/build-utils": "5.7.5",
+    "@vercel/go": "2.2.24",
+    "@vercel/hydrogen": "0.0.38",
+    "@vercel/next": "3.3.9",
+    "@vercel/node": "2.8.6",
+    "@vercel/python": "3.1.34",
+    "@vercel/redwood": "1.0.45",
+    "@vercel/remix": "1.1.7",
+    "@vercel/ruby": "1.3.50",
+    "@vercel/static-build": "1.1.1"
   },
   "devDependencies": {
     "@alex_neo/jest-expect-message": "1.0.5",
@@ -60,8 +59,6 @@
     "@sindresorhus/slugify": "0.11.0",
     "@swc/core": "1.2.218",
     "@tootallnate/once": "1.1.2",
-    "@types/ansi-escapes": "3.0.0",
-    "@types/ansi-regex": "4.0.0",
     "@types/async-retry": "1.2.1",
     "@types/bytes": "3.0.0",
     "@types/chance": "1.1.3",
@@ -95,17 +92,18 @@
     "@types/which": "1.3.2",
     "@types/write-json-file": "2.2.1",
     "@types/yauzl-promise": "2.1.0",
-    "@vercel/client": "12.2.21",
+    "@vercel/client": "12.2.26",
     "@vercel/error-utils": "1.0.3",
-    "@vercel/frameworks": "1.1.14",
-    "@vercel/fs-detectors": "3.5.4",
+    "@vercel/frameworks": "1.1.18",
+    "@vercel/fs-detectors": "3.6.2",
     "@vercel/fun": "1.0.4",
     "@vercel/ncc": "0.24.0",
+    "@vercel/routing-utils": "2.1.3",
     "@zeit/source-map-support": "0.6.2",
     "ajv": "6.12.2",
     "alpha-sort": "2.0.1",
-    "ansi-escapes": "3.0.0",
-    "ansi-regex": "3.0.0",
+    "ansi-escapes": "4.3.2",
+    "ansi-regex": "5.0.1",
     "arg": "5.0.0",
     "async-listen": "1.2.0",
     "async-retry": "1.1.3",
@@ -161,8 +159,9 @@
     "rimraf": "3.0.2",
     "semver": "5.5.0",
     "serve-handler": "6.1.1",
-    "strip-ansi": "5.2.0",
+    "strip-ansi": "6.0.1",
     "stripe": "5.1.0",
+    "supports-hyperlinks": "2.2.0",
     "tar-fs": "1.16.3",
     "test-listen": "1.1.0",
     "text-table": "0.2.0",

packages/cli/scripts/build.ts

@@ -1,7 +1,7 @@
 import cpy from 'cpy';
 import execa from 'execa';
 import { join } from 'path';
-import { remove, writeFile } from 'fs-extra';
+import { remove, readJSON, writeFile } from 'fs-extra';
 
 const dirRoot = join(__dirname, '..');
 const distRoot = join(dirRoot, 'dist');
@@ -43,15 +43,15 @@ async function main() {
     stdio: 'inherit',
   });
 
+  const pkg = await readJSON(join(dirRoot, 'package.json'));
+  const dependencies = Object.keys(pkg?.dependencies ?? {});
   // Do the initial `ncc` build
-  console.log();
-  const args = [
-    'ncc',
-    'build',
-    '--external',
-    'update-notifier',
-    'src/index.ts',
-  ];
+  console.log('Dependencies:', dependencies);
+  const externs = [];
+  for (const dep of dependencies) {
+    externs.push('--external', dep);
+  }
+  const args = ['ncc', 'build', 'src/index.ts', ...externs];
   await execa('yarn', args, { stdio: 'inherit', cwd: dirRoot });
 
   // `ncc` has some issues with `@vercel/fun`'s runtime files:
@@ -78,6 +78,10 @@ async function main() {
   // Band-aid to bundle stuff that `ncc` neglects to bundle
   await cpy(join(dirRoot, 'src/util/projects/VERCEL_DIR_README.txt'), distRoot);
   await cpy(join(dirRoot, 'src/util/dev/builder-worker.js'), distRoot);
+  await cpy(
+    join(dirRoot, 'src/util/get-latest-version/get-latest-worker.js'),
+    distRoot
+  );
 
   console.log('Finished building Vercel CLI');
 }

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

@@ -6,7 +6,7 @@ import { Output } from '../../util/output';
 import * as ERRORS from '../../util/errors-ts';
 import assignAlias from '../../util/alias/assign-alias';
 import Client from '../../util/client';
-import getDeploymentByIdOrHost from '../../util/deploy/get-deployment-by-id-or-host';
+import getDeployment from '../../util/get-deployment';
 import { getDeploymentForAlias } from '../../util/alias/get-deployment-by-alias';
 import getScope from '../../util/get-scope';
 import setupDomain from '../../util/domains/setup-domain';
@@ -136,36 +136,13 @@ export default async function set(
   const [deploymentIdOrHost, aliasTarget] = args;
   const deployment = handleCertError(
     output,
-    await getDeploymentByIdOrHost(client, contextName, deploymentIdOrHost)
+    await getDeployment(client, contextName, deploymentIdOrHost)
   );
 
   if (deployment === 1) {
     return deployment;
   }
 
-  if (deployment instanceof ERRORS.DeploymentNotFound) {
-    output.error(
-      `Failed to find deployment "${deployment.meta.id}" under ${chalk.bold(
-        contextName
-      )}`
-    );
-    return 1;
-  }
-
-  if (deployment instanceof ERRORS.DeploymentPermissionDenied) {
-    output.error(
-      `No permission to access deployment "${
-        deployment.meta.id
-      }" under ${chalk.bold(deployment.meta.context)}`
-    );
-    return 1;
-  }
-
-  if (deployment instanceof ERRORS.InvalidDeploymentId) {
-    output.error(deployment.message);
-    return 1;
-  }
-
   if (deployment === null) {
     output.error(
       `Couldn't find a deployment to alias. Please provide one as an argument.`

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

@@ -15,17 +15,11 @@ import Client from '../../util/client';
 import { getPkgName } from '../../util/pkg-name';
 import { Deployment, PaginationOptions } from '../../types';
 import { normalizeURL } from '../../util/bisect/normalize-url';
-
-interface DeploymentV6
-  extends Pick<
-    Deployment,
-    'url' | 'target' | 'projectId' | 'ownerId' | 'meta' | 'inspectorUrl'
-  > {
-  createdAt: number;
-}
+import getScope from '../../util/get-scope';
+import getDeployment from '../../util/get-deployment';
 
 interface Deployments {
-  deployments: DeploymentV6[];
+  deployments: Deployment[];
   pagination: PaginationOptions;
 }
 
@@ -63,6 +57,8 @@ const help = () => {
 
 export default async function main(client: Client): Promise<number> {
   const { output } = client;
+  const scope = await getScope(client);
+  const { contextName } = scope;
 
   const argv = getArgs(client.argv.slice(2), {
     '--bad': String,
@@ -145,7 +141,9 @@ export default async function main(client: Client): Promise<number> {
   output.spinner('Retrieving deployments…');
 
   // `getDeployment` cannot be parallelized because it might prompt for login
-  const badDeployment = await getDeployment(client, bad).catch(err => err);
+  const badDeployment = await getDeployment(client, contextName, bad).catch(
+    err => err
+  );
 
   if (badDeployment) {
     if (badDeployment instanceof Error) {
@@ -162,7 +160,9 @@ export default async function main(client: Client): Promise<number> {
   }
 
   // `getDeployment` cannot be parallelized because it might prompt for login
-  const goodDeployment = await getDeployment(client, good).catch(err => err);
+  const goodDeployment = await getDeployment(client, contextName, good).catch(
+    err => err
+  );
 
   if (goodDeployment) {
     if (goodDeployment instanceof Error) {
@@ -204,7 +204,7 @@ export default async function main(client: Client): Promise<number> {
   }
 
   // Fetch all the project's "READY" deployments with the pagination API
-  let deployments: DeploymentV6[] = [];
+  let deployments: Deployment[] = [];
   let next: number | undefined = badDeployment.createdAt + 1;
   do {
     const query = new URLSearchParams();
@@ -279,7 +279,7 @@ export default async function main(client: Client): Promise<number> {
     const commit = getCommit(deployment);
     if (commit) {
       const shortSha = commit.sha.substring(0, 7);
-      const firstLine = commit.message.split('\n')[0];
+      const firstLine = commit.message?.split('\n')[0];
       output.log(`${chalk.bold('Commit:')} [${shortSha}] ${firstLine}`);
     }
 
@@ -356,7 +356,7 @@ export default async function main(client: Client): Promise<number> {
   const commit = getCommit(lastBad);
   if (commit) {
     const shortSha = commit.sha.substring(0, 7);
-    const firstLine = commit.message.split('\n')[0];
+    const firstLine = commit.message?.split('\n')[0];
     result.push(` ${chalk.bold('Commit:')} [${shortSha}] ${firstLine}`);
   }
 
@@ -368,18 +368,7 @@ export default async function main(client: Client): Promise<number> {
   return 0;
 }
 
-function getDeployment(
-  client: Client,
-  hostname: string
-): Promise<DeploymentV6> {
-  const query = new URLSearchParams();
-  query.set('url', hostname);
-  query.set('resolve', '1');
-  query.set('noState', '1');
-  return client.fetch<DeploymentV6>(`/v10/deployments/get?${query}`);
-}
-
-function getCommit(deployment: DeploymentV6) {
+function getCommit(deployment: Deployment) {
   const sha =
     deployment.meta?.githubCommitSha ||
     deployment.meta?.gitlabCommitSha ||

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

@@ -19,15 +19,13 @@ import toHumanPath from '../../util/humanize-path';
 import Now from '../../util';
 import stamp from '../../util/output/stamp';
 import createDeploy from '../../util/deploy/create-deploy';
-import getDeploymentByIdOrHost from '../../util/deploy/get-deployment-by-id-or-host';
+import getDeployment from '../../util/get-deployment';
 import parseMeta from '../../util/parse-meta';
 import linkStyle from '../../util/output/link';
 import param from '../../util/output/param';
 import {
   BuildsRateLimited,
   DeploymentNotFound,
-  DeploymentPermissionDenied,
-  InvalidDeploymentId,
   DomainNotFound,
   DomainNotVerified,
   DomainPermissionDenied,
@@ -629,21 +627,8 @@ export default async (client: Client): Promise<number> => {
       return 1;
     }
 
-    const deploymentResponse = await getDeploymentByIdOrHost(
-      client,
-      contextName,
-      deployment.id,
-      'v10'
-    );
-
-    if (
-      deploymentResponse instanceof DeploymentNotFound ||
-      deploymentResponse instanceof DeploymentPermissionDenied ||
-      deploymentResponse instanceof InvalidDeploymentId
-    ) {
-      output.error(deploymentResponse.message);
-      return 1;
-    }
+    // get the deployment just to double check that it actually deployed
+    await getDeployment(client, contextName, deployment.id);
 
     if (deployment === null) {
       error('Uploading failed. Please try again.');

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

@@ -32,6 +32,7 @@ const help = () => {
 
     -h, --help                     Output usage information
     --environment                  Set the Environment (development, preview, production) when pulling Environment Variables
+    --git-branch                   Specify the Git branch to pull specific Environment Variables for
     -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
     'FILE'
   )}   Path to the local ${'`vercel.json`'} file
@@ -116,6 +117,7 @@ export default async function main(client: Client) {
       '--yes': Boolean,
       '-y': '--yes',
       '--environment': String,
+      '--git-branch': String,
     });
   } catch (error) {
     handleError(error);

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

@@ -25,6 +25,7 @@ const CONTENTS_PREFIX = '# Created by Vercel CLI\n';
 type Options = {
   '--debug': boolean;
   '--yes': boolean;
+  '--git-branch': string;
 };
 
 function readHeadSync(path: string, length: number) {
@@ -69,6 +70,7 @@ export default async function pull(
   const [filename = '.env'] = args;
   const fullPath = resolve(cwd, filename);
   const skipConfirmation = opts['--yes'];
+  const gitBranch = opts['--git-branch'];
 
   const head = tryReadHeadSync(fullPath, Buffer.byteLength(CONTENTS_PREFIX));
   const exists = typeof head !== 'undefined';
@@ -100,6 +102,7 @@ export default async function pull(
   const records = (
     await pullEnvRecords(output, client, project.id, source, {
       target: environment || ProjectEnvTarget.Development,
+      gitBranch,
     })
   ).env;
 

packages/cli/src/commands/inspect.ts

@@ -9,12 +9,10 @@ import { handleError } from '../util/error';
 import getScope from '../util/get-scope';
 import { getPkgName, getCommandName } from '../util/pkg-name';
 import Client from '../util/client';
-import { getDeployment } from '../util/get-deployment';
-import { Deployment } from '@vercel/client';
-import { Build } from '../types';
+import getDeployment from '../util/get-deployment';
+import { Build, Deployment } from '../types';
 import title from 'title';
 import { isErrnoException } from '@vercel/error-utils';
-import { isAPIError } from '../util/errors-ts';
 import { URL } from 'url';
 
 const help = () => {
@@ -49,7 +47,6 @@ const help = () => {
 };
 
 export default async function main(client: Client) {
-  let deployment;
   let argv;
 
   try {
@@ -101,30 +98,11 @@ export default async function main(client: Client) {
   );
 
   // resolve the deployment, since we might have been given an alias
-  try {
-    deployment = await getDeployment(client, deploymentIdOrHost);
-  } catch (err: unknown) {
-    if (isAPIError(err)) {
-      if (err.status === 404) {
-        error(
-          `Failed to find deployment "${deploymentIdOrHost}" in ${chalk.bold(
-            contextName
-          )}`
-        );
-        return 1;
-      }
-      if (err.status === 403) {
-        error(
-          `No permission to access deployment "${deploymentIdOrHost}" in ${chalk.bold(
-            contextName
-          )}`
-        );
-        return 1;
-      }
-    }
-    // unexpected
-    throw err;
-  }
+  const deployment = await getDeployment(
+    client,
+    contextName,
+    deploymentIdOrHost
+  );
 
   const {
     id,
@@ -138,11 +116,11 @@ export default async function main(client: Client) {
 
   const { builds } =
     deployment.version === 2
-      ? await client.fetch<{ builds: Build[] }>(`/v1/deployments/${id}/builds`)
+      ? await client.fetch<{ builds: Build[] }>(`/v11/deployments/${id}/builds`)
       : { builds: [] };
 
   log(
-    `Fetched deployment ${chalk.bold(url)} in ${chalk.bold(
+    `Fetched deployment "${chalk.bold(url)}" in ${chalk.bold(
       contextName
     )} ${elapsed(Date.now() - depFetchStart)}`
   );
@@ -163,7 +141,7 @@ export default async function main(client: Client) {
   }
   print('\n\n');
 
-  if (aliases.length > 0) {
+  if (aliases !== undefined && aliases.length > 0) {
     print(chalk.bold('  Aliases\n\n'));
     let aliasList = '';
     for (const alias of aliases) {
@@ -202,8 +180,6 @@ function stateString(s: Deployment['readyState']) {
   switch (s) {
     case 'INITIALIZING':
     case 'BUILDING':
-    case 'DEPLOYING':
-    case 'ANALYZING':
       return chalk.yellow(CIRCLE) + sTitle;
     case 'ERROR':
       return chalk.red(CIRCLE) + sTitle;

packages/cli/src/commands/logs.ts

@@ -7,8 +7,7 @@ import getScope from '../util/get-scope';
 import { getPkgName } from '../util/pkg-name';
 import getArgs from '../util/get-args';
 import Client from '../util/client';
-import { getDeployment } from '../util/get-deployment';
-import { isAPIError } from '../util/errors-ts';
+import getDeployment from '../util/get-deployment';
 
 const help = () => {
   console.log(`
@@ -125,28 +124,9 @@ export default async function main(client: Client) {
 
   let deployment;
   try {
-    deployment = await getDeployment(client, id);
-  } catch (err: unknown) {
+    deployment = await getDeployment(client, contextName, id);
+  } finally {
     output.stopSpinner();
-
-    if (isAPIError(err)) {
-      if (err.status === 404) {
-        output.error(
-          `Failed to find deployment "${id}" in ${chalk.bold(contextName)}`
-        );
-        return 1;
-      }
-      if (err.status === 403) {
-        output.error(
-          `No permission to access deployment "${id}" in ${chalk.bold(
-            contextName
-          )}`
-        );
-        return 1;
-      }
-    }
-    // unexpected
-    throw err;
   }
 
   output.log(

packages/cli/src/commands/pull.ts

@@ -60,6 +60,7 @@ function processArgs(client: Client) {
   return getArgs(client.argv.slice(2), {
     '--yes': Boolean,
     '--environment': String,
+    '--git-branch': String,
     '--debug': Boolean,
     '-d': '--debug',
     '-y': '--yes',

packages/cli/src/commands/remove.ts

@@ -11,7 +11,7 @@ import getScope from '../util/get-scope';
 import { isValidName } from '../util/is-valid-name';
 import removeProject from '../util/projects/remove-project';
 import getProjectByIdOrName from '../util/projects/get-project-by-id-or-name';
-import getDeploymentByIdOrHost from '../util/deploy/get-deployment-by-id-or-host';
+import getDeployment from '../util/get-deployment';
 import getDeploymentsByProjectId, {
   DeploymentPartial,
 } from '../util/deploy/get-deployments-by-project-id';
@@ -133,7 +133,7 @@ export default async function main(client: Client) {
         id =>
           d &&
           !(d instanceof NowError) &&
-          (d.uid === id || d.name === id || d.url === normalizeURL(id))
+          (d.id === id || d.name === id || d.url === normalizeURL(id))
       );
 
     const [deploymentList, projectList] = await Promise.all<any>([
@@ -142,7 +142,7 @@ export default async function main(client: Client) {
           if (!contextName) {
             throw new Error('Context name is not defined');
           }
-          return getDeploymentByIdOrHost(client, contextName, idOrHost);
+          return getDeployment(client, contextName, idOrHost).catch(err => err);
         })
       ),
       Promise.all(
@@ -180,7 +180,7 @@ export default async function main(client: Client) {
 
     aliases = await Promise.all(
       deployments.map(async depl => {
-        const { aliases } = await getAliases(client, depl.uid);
+        const { aliases } = await getAliases(client, depl.id);
         return aliases;
       })
     );
@@ -238,7 +238,7 @@ export default async function main(client: Client) {
   const start = Date.now();
 
   await Promise.all<any>([
-    ...deployments.map(depl => now.remove(depl.uid, { hard })),
+    ...deployments.map(depl => now.remove(depl.id, { hard })),
     ...projects.map(project => removeProject(client, project.id)),
   ]);
 
@@ -275,9 +275,9 @@ function readConfirmation(
 
       const deploymentTable = table(
         deployments.map(depl => {
-          const time = chalk.gray(`${ms(Date.now() - depl.created)} ago`);
+          const time = chalk.gray(`${ms(Date.now() - depl.createdAt)} ago`);
           const url = depl.url ? chalk.underline(`https://${depl.url}`) : '';
-          return [`  ${depl.uid}`, url, time];
+          return [`  ${depl.id}`, url, time];
         }),
         { align: ['l', 'r', 'l'], hsep: ' '.repeat(6) }
       );

packages/cli/src/index.ts

@@ -18,7 +18,7 @@ import sourceMap from '@zeit/source-map-support';
 import { mkdirp } from 'fs-extra';
 import chalk from 'chalk';
 import epipebomb from 'epipebomb';
-import updateNotifier from 'update-notifier';
+import getLatestVersion from './util/get-latest-version';
 import { URL } from 'url';
 import * as Sentry from '@sentry/node';
 import hp from './util/humanize-path';
@@ -55,13 +55,6 @@ import { VercelConfig } from '@vercel/client';
 
 const isCanary = pkg.version.includes('canary');
 
-// Checks for available update and returns an instance
-const notifier = updateNotifier({
-  pkg,
-  distTag: isCanary ? 'canary' : 'latest',
-  updateCheckInterval: 1000 * 60 * 60 * 24 * 7, // 1 week
-});
-
 const VERCEL_DIR = getGlobalPathConfig();
 const VERCEL_CONFIG_PATH = configFiles.getConfigFilePath();
 const VERCEL_AUTH_CONFIG_PATH = configFiles.getAuthConfigFilePath();
@@ -149,22 +142,26 @@ const main = async () => {
   }
 
   // Print update information, if available
-  if (notifier.update && notifier.update.latest !== pkg.version && isTTY) {
-    const { latest } = notifier.update;
-    console.log(
-      info(
+  if (isTTY && !process.env.NO_UPDATE_NOTIFIER) {
+    // Check if an update is available. If so, `latest` will contain a string
+    // of the latest version, otherwise `undefined`.
+    const latest = getLatestVersion({
+      distTag: isCanary ? 'canary' : 'latest',
+      output,
+      pkg,
+    });
+    if (latest) {
+      output.log(
         `${chalk.black.bgCyan('UPDATE AVAILABLE')} ` +
           `Run ${cmd(
             await getUpdateCommand()
           )} to install ${getTitleName()} CLI ${latest}`
-      )
-    );
+      );
 
-    console.log(
-      info(
-        `Changelog: https://github.com/vercel/vercel/releases/tag/vercel@${latest}`
-      )
-    );
+      output.log(
+        `Changelog: https://github.com/vercel/vercel/releases/tag/vercel@${latest}\n`
+      );
+    }
   }
 
   // The second argument to the command can be:

packages/cli/src/types.ts

@@ -1,4 +1,6 @@
+import type { BuilderFunctions } from '@vercel/build-utils';
 import type { Readable, Writable } from 'stream';
+import type { Route } from '@vercel/routing-utils';
 
 export type ProjectSettings = import('@vercel/build-utils').ProjectSettings;
 
@@ -116,32 +118,105 @@ export type Cert = {
   expiration: string;
 };
 
+type RouteOrMiddleware =
+  | Route
+  | {
+      src: string;
+      continue: boolean;
+      middleware: 0;
+    };
+
 export type Deployment = {
-  uid: string;
-  url: string;
+  alias?: string[];
+  aliasAssigned?: boolean | null | number;
+  aliasError?: null | { code: string; message: string };
+  aliasFinal?: string | null;
+  aliasWarning?: null | {
+    code: string;
+    message: string;
+    link?: string;
+    action?: string;
+  };
+  bootedAt?: number;
+  build?: { env: string[] };
+  builds?: { use: string; src?: string; config?: { [key: string]: any } };
+  buildErrorAt?: number;
+  buildingAt: number;
+  canceledAt?: number;
+  checksState?: 'completed' | 'registered' | 'running';
+  checksConclusion?: 'canceled' | 'failed' | 'skipped' | 'succeeded';
+  createdAt: number;
+  createdIn?: string;
+  creator: { uid: string; username?: string };
+  env?: string[];
+  errorCode?: string;
+  errorLink?: string;
+  errorMessage?: string | null;
+  errorStep?: string;
+  functions?: BuilderFunctions | null;
+  gitSource?: {
+    org?: string;
+    owner?: string;
+    prId?: number | null;
+    projectId: number;
+    ref?: string | null;
+    repoId?: number;
+    repoUuid: string;
+    sha?: string;
+    slug?: string;
+    type: string;
+    workspaceUuid: string;
+  };
+  id: string;
+  initReadyAt?: number;
+  inspectorUrl?: string | null;
+  lambdas?: Build[];
+  meta?: {
+    [key: string]: string | undefined;
+  };
+  monorepoManager?: string | null;
   name: string;
-  type: 'LAMBDAS';
-  state:
+  ownerId?: string;
+  plan?: 'enterprise' | 'hobby' | 'oss' | 'pro';
+  previewCommentsEnabled?: boolean;
+  projectId?: string;
+  projectSettings?: {
+    buildCommand?: string | null;
+    devCommand?: string | null;
+    framework?: string;
+    installCommand?: string | null;
+    outputDirectory?: string | null;
+  };
+  public: boolean;
+  ready?: number;
+  readyState:
     | 'BUILDING'
     | 'ERROR'
     | 'INITIALIZING'
     | 'QUEUED'
     | 'READY'
     | 'CANCELED';
-  version?: number;
-  created: number;
-  createdAt: number;
-  ready?: number;
-  buildingAt?: number;
-  creator: { uid: string; username: string };
-  target: string | null;
-  ownerId: string;
-  projectId: string;
-  inspectorUrl: string;
-  meta: {
-    [key: string]: any;
+  regions: string[];
+  routes?: RouteOrMiddleware[] | null;
+  source?: 'cli' | 'git' | 'import' | 'import/repo' | 'clone/repo';
+  status:
+    | 'BUILDING'
+    | 'ERROR'
+    | 'INITIALIZING'
+    | 'QUEUED'
+    | 'READY'
+    | 'CANCELED';
+  target?: 'staging' | 'production' | null;
+  team?: {
+    id: string;
+    name: string;
+    slug: string;
   };
-  alias?: string[];
+  ttyBuildLogs?: boolean;
+  type: 'LAMBDAS';
+  url: string;
+  userAliases?: string[];
+  version: 2;
 };
 
 export type Alias = {

packages/cli/src/util/alias/assign-alias.ts

@@ -1,4 +1,4 @@
-import { Deployment } from '../../types';
+import type { Deployment } from '../../types';
 import { Output } from '../output';
 import Client from '../client';
 import createAlias from './create-alias';

packages/cli/src/util/alias/create-alias.ts

@@ -1,4 +1,4 @@
-import { Deployment } from '../../types';
+import type { Deployment } from '../../types';
 import { Output } from '../output';
 import * as ERRORS from '../errors-ts';
 import Client from '../client';
@@ -62,7 +62,7 @@ async function performCreateAlias(
 ) {
   try {
     return await client.fetch<AliasRecord>(
-      `/now/deployments/${deployment.uid}/aliases`,
+      `/now/deployments/${deployment.id}/aliases`,
       {
         method: 'POST',
         body: { alias },
@@ -79,7 +79,7 @@ async function performCreateAlias(
       if (err.code === 'deployment_not_found') {
         return new ERRORS.DeploymentNotFound({
           context: contextName,
-          id: deployment.uid,
+          id: deployment.id,
         });
       }
       if (err.code === 'gone') {
@@ -88,6 +88,9 @@ async function performCreateAlias(
       if (err.code === 'invalid_alias') {
         return new ERRORS.InvalidAlias(alias);
       }
+      if (err.code === 'deployment_not_ready') {
+        return new ERRORS.DeploymentNotReady({ url: deployment.url });
+      }
       if (err.status === 403) {
         if (err.code === 'alias_in_use') {
           return new ERRORS.AliasInUse(alias);
@@ -96,9 +99,6 @@ async function performCreateAlias(
           return new ERRORS.DomainPermissionDenied(alias, contextName);
         }
       }
-      if (err.status === 400) {
-        return new ERRORS.DeploymentNotReady({ url: deployment.url });
-      }
     }
 
     throw err;

packages/cli/src/util/alias/get-deployment-by-alias.ts

@@ -5,7 +5,7 @@ import { Output } from '../output';
 import { User } from '../../types';
 import { VercelConfig } from '../dev/types';
 import getDeploymentsByAppName from '../deploy/get-deployments-by-appname';
-import getDeploymentByIdOrHost from '../deploy/get-deployment-by-id-or-host';
+import getDeployment from '../get-deployment';
 
 async function getAppLastDeployment(
   output: Output,
@@ -22,7 +22,7 @@ async function getAppLastDeployment(
 
   // Try to fetch deployment details
   if (deploymentItem) {
-    return getDeploymentByIdOrHost(client, contextName, deploymentItem.uid);
+    return await getDeployment(client, contextName, deploymentItem.uid);
   }
 
   return null;
@@ -42,13 +42,11 @@ export async function getDeploymentForAlias(
   // When there are no args at all we try to get the targets from the config
   if (args.length === 2) {
     const [deploymentId] = args;
-    const deployment = await getDeploymentByIdOrHost(
-      client,
-      contextName,
-      deploymentId
-    );
-    output.stopSpinner();
-    return deployment;
+    try {
+      return await getDeployment(client, contextName, deploymentId);
+    } finally {
+      output.stopSpinner();
+    }
   }
 
   const appName =
@@ -59,13 +57,15 @@ export async function getDeploymentForAlias(
     return null;
   }
 
-  const deployment = await getAppLastDeployment(
-    output,
-    client,
-    appName,
-    user,
-    contextName
-  );
-  output.stopSpinner();
-  return deployment;
+  try {
+    return await getAppLastDeployment(
+      output,
+      client,
+      appName,
+      user,
+      contextName
+    );
+  } finally {
+    output.stopSpinner();
+  }
 }

packages/cli/src/util/build/monorepo.ts

@@ -1,40 +1,28 @@
-import fs from 'fs-extra';
-import { join, relative, basename } from 'path';
+import { relative, basename } from 'path';
 import {
-  detectFramework,
-  monorepoManagers,
   LocalFileSystemDetector,
-  packageManagers,
+  getMonorepoDefaultSettings,
+  MissingBuildPipeline,
+  MissingBuildTarget,
 } from '@vercel/fs-detectors';
 import { ProjectLinkAndSettings } from '../projects/project-settings';
 import { Output } from '../output';
 import title from 'title';
-import JSON5 from 'json5';
+import { PartialProjectSettings } from '../input/edit-project-settings';
 
 export async function setMonorepoDefaultSettings(
   cwd: string,
   workPath: string,
-  projectSettings: ProjectLinkAndSettings['settings'],
+  projectSettings: ProjectLinkAndSettings['settings'] & PartialProjectSettings,
   output: Output
 ) {
   const localFileSystem = new LocalFileSystemDetector(cwd);
 
-  const [monorepoManager, packageManager] = await Promise.all([
-    detectFramework({
-      fs: localFileSystem,
-      frameworkList: monorepoManagers,
-    }),
-    detectFramework({
-      fs: localFileSystem,
-      frameworkList: packageManagers,
-    }),
-  ]);
-
   const projectName = basename(workPath);
   const relativeToRoot = relative(workPath, cwd);
 
   const setCommand = (
-    command: 'buildCommand' | 'installCommand',
+    command: 'buildCommand' | 'installCommand' | 'commandForIgnoringBuildStep',
     value: string
   ) => {
     if (projectSettings[command]) {
@@ -46,114 +34,43 @@ export async function setMonorepoDefaultSettings(
     }
   };
 
-  if (monorepoManager) {
-    output.log(
-      `Automatically detected ${title(
-        monorepoManager
-      )} monorepo manager. Attempting to assign default \`buildCommand\` and \`installCommand\` settings.`
+  try {
+    const result = await getMonorepoDefaultSettings(
+      projectName,
+      relative(cwd, workPath),
+      relativeToRoot,
+      localFileSystem
     );
-  }
 
-  if (monorepoManager === 'turbo') {
-    const [turboJSONBuf, packageJSONBuf] = await Promise.all([
-      fs.readFile(join(cwd, 'turbo.json')).catch(() => null),
-      fs.readFile(join(cwd, 'package.json')).catch(() => null),
-    ]);
-
-    let hasBuildPipeline = false;
-
-    if (turboJSONBuf !== null) {
-      const turboJSON = JSON5.parse(turboJSONBuf.toString('utf-8'));
-
-      if (turboJSON?.pipeline?.build) {
-        hasBuildPipeline = true;
-      }
-    } else if (packageJSONBuf !== null) {
-      const packageJSON = JSON.parse(packageJSONBuf.toString('utf-8'));
-
-      if (packageJSON?.turbo?.pipeline?.build) {
-        hasBuildPipeline = true;
-      }
-    }
-
-    if (!hasBuildPipeline) {
-      output.warn(
-        'Missing required `build` pipeline in turbo.json or package.json Turbo configuration. Skipping automatic setting assignment.'
-      );
+    if (result === null) {
       return;
     }
 
-    setCommand(
-      'buildCommand',
-      `cd ${relativeToRoot} && npx turbo run build --filter={./${relative(
-        cwd,
-        workPath
-      )}}...`
-    );
-    setCommand(
-      'installCommand',
-      `cd ${relativeToRoot} && ${packageManager} install`
-    );
-  } else if (monorepoManager === 'nx') {
-    // No ENOENT handling required here since conditional wouldn't be `true` unless `nx.json` was found.
-    const nxJSON = JSON5.parse(fs.readFileSync(join(cwd, 'nx.json'), 'utf-8'));
+    const { monorepoManager, ...commands } = result;
 
-    if (!nxJSON?.targetDefaults?.build) {
-      output.log(
-        'Missing default `build` target in nx.json. Checking for project level Nx configuration...'
+    output.log(
+      `Automatically detected ${title(
+        monorepoManager
+      )} monorepo manager. Attempting to assign default settings.`
+    );
+
+    setCommand('buildCommand', commands.buildCommand);
+    setCommand('installCommand', commands.installCommand);
+    if (commands.commandForIgnoringBuildStep) {
+      setCommand(
+        'commandForIgnoringBuildStep',
+        commands.commandForIgnoringBuildStep
       );
-
-      const [projectJSONBuf, packageJSONBuf] = await Promise.all([
-        fs.readFile(join(workPath, 'project.json')).catch(() => null),
-        fs.readFile(join(workPath, 'package.json')).catch(() => null),
-      ]);
-
-      let hasBuildTarget = false;
-
-      if (projectJSONBuf) {
-        output.log('Found project.json Nx configuration.');
-        const projectJSON = JSON5.parse(projectJSONBuf.toString('utf-8'));
-        if (projectJSON?.targets?.build) {
-          hasBuildTarget = true;
-        }
-      }
-
-      if (packageJSONBuf) {
-        const packageJSON = JSON5.parse(packageJSONBuf.toString('utf-8'));
-        if (packageJSON?.nx) {
-          output.log('Found package.json Nx configuration.');
-          if (packageJSON.nx.targets?.build) {
-            hasBuildTarget = true;
-          }
-        }
-      }
-
-      if (!hasBuildTarget) {
-        output.warn(
-          'Missing required `build` target in either project.json or package.json Nx configuration. Skipping automatic setting assignment.'
-        );
-        return;
-      }
+    }
+  } catch (error) {
+    if (
+      error instanceof MissingBuildPipeline ||
+      error instanceof MissingBuildTarget
+    ) {
+      output.warn(`${error.message} Skipping automatic setting assignment.`);
+      return;
     }
 
-    setCommand(
-      'buildCommand',
-      `cd ${relativeToRoot} && npx nx build ${projectName}`
-    );
-    setCommand(
-      'installCommand',
-      `cd ${relativeToRoot} && ${packageManager} install`
-    );
+    throw error;
   }
-  // TODO (@Ethan-Arrowood) - Revisit rush support when we can test it better
-  /* else if (monorepoManager === 'rush') {
-    setCommand(
-      'buildCommand',
-      `node ${relativeToRoot}/common/scripts/install-run-rush.js build --to ${projectName}`
-    );
-    setCommand(
-      'installCommand',
-      `node ${relativeToRoot}/common/scripts/install-run-rush.js install`
-    );
-  } */
 }

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

@@ -5,7 +5,7 @@ import git from 'git-last-commit';
 import { exec } from 'child_process';
 import { GitMetadata, Project } from '../types';
 import { Output } from './output';
-import { errorToString } from '@vercel/error-utils';
+import { errorToString, normalizeError } from '@vercel/error-utils';
 
 export async function createGitMeta(
   directory: string,
@@ -40,20 +40,28 @@ export async function createGitMeta(
     return;
   }
 
-  const [commit, dirty] = await Promise.all([
-    getLastCommit(directory).catch(err => {
-      output.debug(
-        `Failed to get last commit. The directory is likely not a Git repo, there are no latest commits, or it is corrupted.\n${err}`
-      );
-      return;
-    }),
-    isDirty(directory, output),
+  const [commitResult, dirtyResult] = await Promise.allSettled([
+    getLastCommit(directory),
+    isDirty(directory),
   ]);
 
-  if (!commit) {
+  if (commitResult.status === 'rejected') {
+    output.debug(
+      `Failed to get last commit. The directory is likely not a Git repo, there are no latest commits, or it is corrupted.\n${commitResult.reason}`
+    );
     return;
   }
 
+  if (dirtyResult.status === 'rejected') {
+    output.debug(
+      `Failed to determine if Git repo has been modified:\n${dirtyResult.reason}`
+    );
+    return;
+  }
+
+  const dirty = dirtyResult.value;
+  const commit = commitResult.value;
+
   return {
     remoteUrl,
     commitAuthorName: commit.author.name,
@@ -68,7 +76,10 @@ function getLastCommit(directory: string): Promise<git.Commit> {
   return new Promise((resolve, reject) => {
     git.getLastCommit(
       (err, commit) => {
-        if (err) return reject(err);
+        if (err) {
+          return reject(normalizeError(err));
+        }
+
         resolve(commit);
       },
       { dst: directory }
@@ -76,8 +87,8 @@ function getLastCommit(directory: string): Promise<git.Commit> {
   });
 }
 
-export function isDirty(directory: string, output: Output): Promise<boolean> {
-  return new Promise(resolve => {
+export function isDirty(directory: string): Promise<boolean> {
+  return new Promise((resolve, reject) => {
     // 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
@@ -85,14 +96,15 @@ export function isDirty(directory: string, output: Output): Promise<boolean> {
       'git --no-optional-locks status -s',
       { cwd: directory },
       function (err, stdout, stderr) {
-        let debugMessage = `Failed to determine if Git repo has been modified:`;
-        stderr = stderr && stderr.trim();
-        if (err || stderr) {
-          if (err) debugMessage += `\n${err}`;
-          if (stderr) debugMessage += `\n${stderr.trim()}`;
-          output.debug(debugMessage);
-          return resolve(false);
+        if (err) {
+          return reject(err);
         }
+        if (stderr !== undefined && stderr.trim().length > 0) {
+          return reject(new Error(stderr));
+        }
+
+        // Example output (when dirty):
+        //    M ../fs-detectors/src/index.ts
         resolve(stdout.trim().length > 0);
       }
     );

packages/cli/src/util/deploy/get-deployment-by-id-or-host.ts

@@ -1,78 +0,0 @@
-import type Client from '../client';
-import toHost from '../to-host';
-import { Deployment } from '../../types';
-import {
-  DeploymentNotFound,
-  DeploymentPermissionDenied,
-  InvalidDeploymentId,
-  isAPIError,
-} from '../errors-ts';
-import mapCertError from '../certs/map-cert-error';
-
-type APIVersion = 'v5' | 'v10';
-
-export default async function getDeploymentByIdOrHost(
-  client: Client,
-  contextName: string,
-  idOrHost: string,
-  apiVersion: APIVersion = 'v5'
-) {
-  try {
-    const { deployment } =
-      idOrHost.indexOf('.') !== -1
-        ? await getDeploymentByHost(
-            client,
-            toHost(idOrHost) as string,
-            apiVersion
-          )
-        : await getDeploymentById(client, idOrHost, apiVersion);
-    return deployment;
-  } catch (err: unknown) {
-    if (isAPIError(err)) {
-      if (err.status === 404) {
-        return new DeploymentNotFound({ id: idOrHost, context: contextName });
-      }
-      if (err.status === 403) {
-        return new DeploymentPermissionDenied(idOrHost, contextName);
-      }
-      if (err.status === 400 && err.message.includes('`id`')) {
-        return new InvalidDeploymentId(idOrHost);
-      }
-
-      const certError = mapCertError(err);
-      if (certError) {
-        return certError;
-      }
-    }
-
-    throw err;
-  }
-}
-
-async function getDeploymentById(
-  client: Client,
-  id: string,
-  apiVersion: APIVersion
-) {
-  const deployment = await client.fetch<Deployment>(
-    `/${apiVersion}/now/deployments/${encodeURIComponent(id)}`
-  );
-  return { deployment };
-}
-
-type Response = {
-  id: string;
-};
-
-async function getDeploymentByHost(
-  client: Client,
-  host: string,
-  apiVersion: APIVersion
-) {
-  const response = await client.fetch<Response>(
-    `/v10/now/deployments/get?url=${encodeURIComponent(
-      host
-    )}&resolve=1&noState=1`
-  );
-  return getDeploymentById(client, response.id, apiVersion);
-}

packages/cli/src/util/deploy/get-deployment-by-id-or-throw.ts

@@ -1,19 +0,0 @@
-import { NowError } from '../now-error';
-import Client from '../client';
-import getDeploymentByIdOrHost from './get-deployment-by-id-or-host';
-
-export default async function getDeploymentByIdOrThrow(
-  client: Client,
-  contextName: string,
-  idOrHost: string
-) {
-  const deployment = await getDeploymentByIdOrHost(
-    client,
-    contextName,
-    idOrHost
-  );
-  if (deployment instanceof NowError) {
-    throw deployment;
-  }
-  return deployment;
-}

packages/cli/src/util/deploy/get-deployments-by-project-id.ts

@@ -6,7 +6,7 @@ type Response = {
   deployments: DeploymentPartial[];
 };
 export interface DeploymentPartial {
-  uid: string;
+  id: string;
   name: string;
   url: string;
   created: number;

packages/cli/src/util/env/get-env-records.ts

@@ -2,7 +2,6 @@ import { Output } from '../output';
 import Client from '../client';
 import { ProjectEnvVariable, ProjectEnvTarget } from '../../types';
 import { URLSearchParams } from 'url';
-import * as path from 'path';
 
 /** The CLI command that was used that needs the environment variables. */
 export type EnvRecordsSource =
@@ -71,7 +70,10 @@ export async function pullEnvRecords(
   let url = `/v1/env/pull/${projectId}`;
 
   if (target) {
-    url = path.join(url, target, gitBranch ?? '');
+    url += `/${encodeURIComponent(target)}`;
+    if (gitBranch) {
+      url += `/${encodeURIComponent(gitBranch)}`;
+    }
   }
 
   if (source) {

packages/cli/src/util/events.ts

@@ -7,7 +7,8 @@ import jsonlines from 'jsonlines';
 import { eraseLines } from 'ansi-escapes';
 
 import Client from './client';
-import { getDeployment } from './get-deployment';
+import getDeployment from './get-deployment';
+import getScope from './get-scope';
 
 export interface FindOpts {
   direction: 'forward' | 'backward';
@@ -37,6 +38,7 @@ async function printEvents(
   { mode, onEvent, quiet, findOpts }: PrintEventsOptions
 ) {
   const { log, debug } = client.output;
+  const { contextName } = await getScope(client);
 
   // we keep track of how much we log in case we
   // drop the connection and have to start over
@@ -74,7 +76,11 @@ async function printEvents(
             poller = (function startPoller() {
               return setTimeout(async () => {
                 try {
-                  const json = await getDeployment(client, deploymentIdOrURL);
+                  const json = await getDeployment(
+                    client,
+                    contextName,
+                    deploymentIdOrURL
+                  );
                   if (json.readyState === 'READY') {
                     stream.end();
                     finish();

packages/cli/src/util/get-deployment.ts

@@ -1,27 +1,53 @@
-import { stringify } from 'querystring';
-import { Deployment } from '@vercel/client';
-import Client from './client';
+import type Client from './client';
+import {
+  DeploymentNotFound,
+  DeploymentPermissionDenied,
+  InvalidDeploymentId,
+  isAPIError,
+} from './errors-ts';
+import type { Deployment } from '../types';
+import mapCertError from './certs/map-cert-error';
+import toHost from './to-host';
 
-export async function getDeployment(
+/**
+ * Retrieves a v13 deployment.
+ *
+ * @param client - The Vercel CLI client instance.
+ * @param contextName - The scope context/team name.
+ * @param hostOrId - A deployment host or id.
+ * @returns The deployment information.
+ */
+export default async function getDeployment(
   client: Client,
+  contextName: string,
   hostOrId: string
 ): Promise<Deployment> {
-  let url = `/v13/deployments`;
-
   if (hostOrId.includes('.')) {
-    let host = hostOrId.replace(/^https:\/\//i, '');
-
-    if (host.slice(-1) === '/') {
-      host = host.slice(0, -1);
-    }
-
-    url += `/get?${stringify({
-      url: host,
-    })}`;
-  } else {
-    url += `/${encodeURIComponent(hostOrId)}`;
+    hostOrId = toHost(hostOrId);
   }
 
-  const deployment = await client.fetch<Deployment>(url);
-  return deployment;
+  try {
+    return await client.fetch<Deployment>(
+      `/v13/deployments/${encodeURIComponent(hostOrId)}`
+    );
+  } catch (err: unknown) {
+    if (isAPIError(err)) {
+      if (err.status === 404) {
+        throw new DeploymentNotFound({ id: hostOrId, context: contextName });
+      }
+      if (err.status === 403) {
+        throw new DeploymentPermissionDenied(hostOrId, contextName);
+      }
+      if (err.status === 400 && err.message.includes('`id`')) {
+        throw new InvalidDeploymentId(hostOrId);
+      }
+
+      const certError = mapCertError(err);
+      if (certError) {
+        throw certError;
+      }
+    }
+
+    throw err;
+  }
 }

packages/cli/src/util/get-latest-version/get-latest-worker.js

@@ -0,0 +1,223 @@
+/**
+ * This file is spawned in the background and checks npm for the latest version
+ * of the CLI, then writes the version to the cache file.
+ *
+ * NOTE: Since this file runs asynchronously in the background, it's possible
+ * for multiple instances of this file to be running at the same time leading
+ * to a race condition where the most recent instance will overwrite the
+ * previous cache file resetting the `notified` flag and cause the update
+ * notification to appear for multiple consequetive commands. Not the end of
+ * the world, but something to be aware of.
+ *
+ * IMPORTANT! This file must NOT depend on any 3rd party dependencies. This
+ * file is NOT bundled by `ncc` and thus any 3rd party dependencies will never
+ * be available.
+ */
+
+const https = require('https');
+const { mkdirSync, writeFileSync } = require('fs');
+const { access, mkdir, readFile, unlink, writeFile } = require('fs/promises');
+const path = require('path');
+const { format, inspect } = require('util');
+
+/**
+ * An simple output helper which accumulates error and debug log messages in
+ * memory for potential persistance to disk while immediately outputting errors
+ * and debug messages, when the `--debug` flag is set, to `stderr`.
+ */
+class WorkerOutput {
+  debugLog = [];
+  logFile = null;
+
+  constructor({ debug = true }) {
+    this.debugOutputEnabled = debug;
+  }
+
+  debug(...args) {
+    this.print('debug', args);
+  }
+
+  error(...args) {
+    this.print('error', args);
+  }
+
+  print(type, args) {
+    const str = format(
+      ...args.map(s => (typeof s === 'string' ? s : inspect(s)))
+    );
+    this.debugLog.push(`[${new Date().toISOString()}] [${type}] ${str}`);
+    if (type === 'debug' && this.debugOutputEnabled) {
+      console.error(`> '[debug] [${new Date().toISOString()}] ${str}`);
+    } else if (type === 'error') {
+      console.error(`Error: ${str}`);
+    }
+  }
+
+  setLogFile(file) {
+    // wire up the exit handler the first time the log file is set
+    if (this.logFile === null) {
+      process.on('exit', () => {
+        if (this.debugLog.length) {
+          mkdirSync(path.dirname(this.logFile), { recursive: true });
+          writeFileSync(this.logFile, this.debugLog.join('\n'));
+        }
+      });
+    }
+    this.logFile = file;
+  }
+}
+
+const output = new WorkerOutput({
+  // enable the debug logging if the `--debug` is set or if this worker script
+  // was directly executed
+  debug: process.argv.includes('--debug') || !process.connected,
+});
+
+process.on('unhandledRejection', err => {
+  output.error('Exiting worker due to unhandled rejection:', err);
+  process.exit(1);
+});
+
+// this timer will prevent this worker process from running longer than 10s
+const timer = setTimeout(() => {
+  output.error('Worker timed out after 10 seconds');
+  process.exit(1);
+}, 10000);
+
+// wait for the parent to give us the work payload
+process.once('message', async msg => {
+  output.debug('Received message from parent:', msg);
+
+  output.debug('Disconnecting from parent');
+  process.disconnect();
+
+  const { cacheFile, distTag, name, updateCheckInterval } = msg;
+  const cacheFileParsed = path.parse(cacheFile);
+  await mkdir(cacheFileParsed.dir, { recursive: true });
+
+  output.setLogFile(
+    path.join(cacheFileParsed.dir, `${cacheFileParsed.name}.log`)
+  );
+
+  const lockFile = path.join(
+    cacheFileParsed.dir,
+    `${cacheFileParsed.name}.lock`
+  );
+
+  try {
+    // check for a lock file and either bail if running or write our pid and continue
+    output.debug(`Checking lock file: ${lockFile}`);
+    if (await isRunning(lockFile)) {
+      output.debug('Worker already running, exiting');
+      process.exit(1);
+    }
+    output.debug(`Initializing lock file with pid ${process.pid}`);
+    await writeFile(lockFile, String(process.pid), 'utf-8');
+
+    // fetch the latest version from npm
+    const agent = new https.Agent({
+      keepAlive: true,
+      maxSockets: 15, // See: `npm config get maxsockets`
+    });
+    const headers = {
+      accept:
+        'application/vnd.npm.install-v1+json; q=1.0, application/json; q=0.8, */*',
+    };
+    const url = `https://registry.npmjs.org/-/package/${name}/dist-tags`;
+    output.debug(`Fetching ${url}`);
+
+    const tags = await new Promise((resolve, reject) => {
+      const req = https.get(
+        url,
+        {
+          agent,
+          headers,
+        },
+        res => {
+          let buf = '';
+          res.on('data', chunk => {
+            buf += chunk;
+          });
+          res.on('end', () => {
+            try {
+              resolve(JSON.parse(buf));
+            } catch (err) {
+              reject(err);
+            }
+          });
+        }
+      );
+
+      req.on('error', reject);
+      req.end();
+    });
+
+    const version = tags[distTag];
+
+    if (version) {
+      output.debug(`Found dist tag "${distTag}" with version "${version}"`);
+    } else {
+      output.error(`Dist tag "${distTag}" not found`);
+      output.debug('Available dist tags:', Object.keys(tags));
+    }
+
+    output.debug(`Writing cache file: ${cacheFile}`);
+    await writeFile(
+      cacheFile,
+      JSON.stringify({
+        expireAt: Date.now() + updateCheckInterval,
+        notified: false,
+        version,
+      })
+    );
+  } catch (err) {
+    output.error(`Failed to get package info:`, err);
+  } finally {
+    clearTimeout(timer);
+
+    if (await fileExists(lockFile)) {
+      output.debug(`Releasing lock file: ${lockFile}`);
+      await unlink(lockFile);
+    }
+
+    output.debug(`Worker finished successfully!`);
+
+    // force the worker to exit
+    process.exit(0);
+  }
+});
+
+// signal the parent process we're ready
+if (process.connected) {
+  output.debug("Notifying parent we're ready");
+  process.send({ type: 'ready' });
+} else {
+  console.error('No IPC bridge detected, exiting');
+  process.exit(1);
+}
+
+async function fileExists(file) {
+  return access(file)
+    .then(() => true)
+    .catch(() => false);
+}
+
+async function isRunning(lockFile) {
+  try {
+    const pid = parseInt(await readFile(lockFile, 'utf-8'));
+    output.debug(`Found lock file with pid: ${pid}`);
+
+    // checks for existence of a process; throws if not found
+    process.kill(pid, 0);
+
+    // process is still running
+    return true;
+  } catch (err) {
+    if (await fileExists(lockFile)) {
+      // lock file does not exist or process is not running and pid is stale
+      output.debug(`Resetting lock file: ${err.toString()}`);
+      await unlink(lockFile);
+    }
+    return false;
+  }
+}

packages/cli/src/util/get-latest-version/index.ts

@@ -0,0 +1,151 @@
+import semver from 'semver';
+import XDGAppPaths from 'xdg-app-paths';
+import { dirname, parse as parsePath, resolve as resolvePath } from 'path';
+import type { Output } from '../output';
+import { existsSync, outputJSONSync, readJSONSync } from 'fs-extra';
+import type { PackageJson } from '@vercel/build-utils';
+import { spawn } from 'child_process';
+
+interface GetLatestVersionOptions {
+  cacheDir?: string;
+  distTag?: string;
+  output?: Output;
+  pkg: PackageJson;
+  updateCheckInterval?: number;
+}
+
+interface PackageInfoCache {
+  version: string;
+  expireAt: number;
+  notified: boolean;
+}
+
+interface GetLatestWorkerPayload {
+  cacheFile?: string;
+  distTag?: string;
+  updateCheckInterval?: number;
+  name?: string;
+}
+
+/**
+ * Determines if it needs to check for a newer CLI version and returns the last
+ * detected version. The version could be stale, but still newer than the
+ * current version.
+ *
+ * @returns {String|undefined} If a newer version is found, then the lastest
+ * version, otherwise `undefined`.
+ */
+export default function getLatestVersion({
+  cacheDir = XDGAppPaths('com.vercel.cli').cache(),
+  distTag = 'latest',
+  output,
+  pkg,
+  updateCheckInterval = 1000 * 60 * 60 * 24 * 7, // 1 week
+}: GetLatestVersionOptions): string | undefined {
+  if (
+    !pkg ||
+    typeof pkg !== 'object' ||
+    !pkg.name ||
+    typeof pkg.name !== 'string'
+  ) {
+    throw new TypeError('Expected package to be an object with a package name');
+  }
+
+  const cacheFile = resolvePath(
+    cacheDir,
+    'package-updates',
+    `${pkg.name}-${distTag}.json`
+  );
+
+  let cache: PackageInfoCache | undefined;
+  try {
+    cache = readJSONSync(cacheFile);
+  } catch (err: any) {
+    // cache does not exist or malformed
+    if (err.code !== 'ENOENT') {
+      output?.debug(`Error reading latest package cache file: ${err}`);
+    }
+  }
+
+  if (!cache || cache.expireAt < Date.now()) {
+    spawnWorker(
+      {
+        cacheFile,
+        distTag,
+        updateCheckInterval,
+        name: pkg.name,
+      },
+      output
+    );
+  }
+
+  if (
+    cache &&
+    !cache.notified &&
+    pkg.version &&
+    semver.lt(pkg.version, cache.version)
+  ) {
+    cache.notified = true;
+    outputJSONSync(cacheFile, cache);
+    return cache.version;
+  }
+}
+
+/**
+ * Spawn the worker, wait for the worker to report it's ready, then signal the
+ * worker to fetch the latest version.
+ */
+function spawnWorker(
+  payload: GetLatestWorkerPayload,
+  output: Output | undefined
+) {
+  // we need to find the update worker script since the location is
+  // different based on production vs tests
+  let dir = dirname(__filename);
+  let script = resolvePath(dir, 'dist', 'get-latest-worker.js');
+  const { root } = parsePath(dir);
+  while (!existsSync(script)) {
+    dir = dirname(dir);
+    if (dir === root) {
+      // didn't find it, bail
+      output?.debug('Failed to find the get latest worker script!');
+      return;
+    }
+    script = resolvePath(dir, 'dist', 'get-latest-worker.js');
+  }
+
+  // spawn the worker with an IPC channel
+  output?.debug(`Spawning ${script}`);
+  const args = [script];
+  if (output?.debugEnabled) {
+    args.push('--debug');
+  }
+  const worker = spawn(process.execPath, args, {
+    stdio: ['inherit', 'inherit', 'inherit', 'ipc'],
+    windowsHide: true,
+  });
+
+  // we allow the child 2 seconds to let us know it's ready before we give up
+  const workerReadyTimer = setTimeout(() => worker.kill(), 2000);
+
+  // listen for an early on close error, but then we remove it when unref
+  const onClose = (code: number) => {
+    output?.debug(`Get latest worker exited (code ${code})`);
+  };
+  worker.on('close', onClose);
+
+  // generally, the parent won't be around long enough to handle a non-zero
+  // worker process exit code
+  worker.on('error', err => {
+    output?.log(`Failed to spawn get latest worker: ${err.stack}`);
+  });
+
+  // wait for the worker to start and notify us it is ready
+  worker.once('message', () => {
+    clearTimeout(workerReadyTimer);
+
+    worker.removeListener('close', onClose);
+    worker.send(payload);
+    worker.unref();
+  });
+}

packages/cli/src/util/output/create-output.ts

@@ -1,4 +1,6 @@
 import chalk from 'chalk';
+import * as ansiEscapes from 'ansi-escapes';
+import { supportsHyperlink as detectSupportsHyperlink } from 'supports-hyperlinks';
 import renderLink from './link';
 import wait, { StopSpinner } from './wait';
 import type { WritableTTY } from '../../types';
@@ -8,24 +10,34 @@ const IS_TEST = process.env.NODE_ENV === 'test';
 
 export interface OutputOptions {
   debug?: boolean;
+  supportsHyperlink?: boolean;
 }
 
 export interface LogOptions {
   color?: typeof chalk;
 }
 
+interface LinkOptions {
+  fallback?: false | (() => string);
+}
+
 export class Output {
   stream: WritableTTY;
   debugEnabled: boolean;
+  supportsHyperlink: boolean;
   private spinnerMessage: string;
   private _spinner: StopSpinner | null;
 
   constructor(
     stream: WritableTTY,
-    { debug: debugEnabled = false }: OutputOptions = {}
+    {
+      debug: debugEnabled = false,
+      supportsHyperlink = detectSupportsHyperlink(stream),
+    }: OutputOptions = {}
   ) {
     this.stream = stream;
     this.debugEnabled = debugEnabled;
+    this.supportsHyperlink = supportsHyperlink;
     this.spinnerMessage = '';
     this._spinner = null;
   }
@@ -167,4 +179,27 @@ export class Output {
 
     return promise;
   };
+
+  /**
+   * Returns an ANSI formatted hyperlink when support has been enabled.
+   */
+  link = (
+    text: string,
+    url: string,
+    { fallback }: LinkOptions = {}
+  ): string => {
+    // Based on https://github.com/sindresorhus/terminal-link (MIT license)
+    if (!this.supportsHyperlink) {
+      // If the fallback has been explicitly disabled, don't modify the text itself
+      if (fallback === false) {
+        return renderLink(text);
+      }
+
+      return typeof fallback === 'function'
+        ? fallback()
+        : `${text} (${renderLink(url)})`;
+    }
+
+    return ansiEscapes.link(chalk.cyan(text), url);
+  };
 }

packages/cli/src/util/rollback/get-deployment-info.ts

@@ -1,38 +0,0 @@
-import type Client from '../client';
-import type { Deployment } from '../../types';
-import getDeploymentByIdOrHost from '../deploy/get-deployment-by-id-or-host';
-import handleCertError from '../certs/handle-cert-error';
-
-/**
- * Attempts to find the deployment by name or id.
- * @param {Client} client - The Vercel client instance
- * @param {string} contextName - The scope name
- * @param {string} deployId - The deployment name or id to rollback
- * @returns {Promise<Deployment>} Resolves an exit code or deployment info
- */
-export default async function getDeploymentInfo(
-  client: Client,
-  contextName: string,
-  deployId: string
-): Promise<Deployment> {
-  const deployment = handleCertError(
-    client.output,
-    await getDeploymentByIdOrHost(client, contextName, deployId)
-  );
-
-  if (deployment === 1) {
-    throw new Error(
-      `Failed to get deployment "${deployId}" in scope "${contextName}"`
-    );
-  }
-
-  if (deployment instanceof Error) {
-    throw deployment;
-  }
-
-  if (!deployment) {
-    throw new Error(`Couldn't find the deployment "${deployId}"`);
-  }
-
-  return deployment;
-}

packages/cli/src/util/rollback/request-rollback.ts

@@ -1,11 +1,12 @@
 import chalk from 'chalk';
 import type Client from '../client';
+import type { Deployment, Project, Team } from '../../types';
 import { getCommandName } from '../pkg-name';
-import getDeploymentInfo from './get-deployment-info';
+import getDeployment from '../get-deployment';
 import getScope from '../get-scope';
+import getTeamById from '../teams/get-team-by-id';
 import { isValidName } from '../is-valid-name';
 import ms from 'ms';
-import type { Project } from '../../types';
 import rollbackStatus from './status';
 
 /**
@@ -27,7 +28,7 @@ export default async function requestRollback({
   project: Project;
   timeout?: string;
 }): Promise<number> {
-  const { output } = client;
+  const { config, output } = client;
   const { contextName } = await getScope(client);
 
   if (!isValidName(deployId)) {
@@ -37,27 +38,65 @@ export default async function requestRollback({
     return 1;
   }
 
-  output.spinner(
-    `Fetching deployment "${deployId}" in ${chalk.bold(contextName)}…`
-  );
+  let deployment: Deployment;
+  let team: Team | undefined;
 
-  let deployment;
   try {
-    deployment = await getDeploymentInfo(client, contextName, deployId);
-  } catch (err: any) {
-    output.error(err?.toString() || err);
-    return 1;
-  } finally {
-    output.stopSpinner();
+    output.spinner(
+      `Fetching deployment "${deployId}" in ${chalk.bold(contextName)}…`
+    );
+
+    const [teamResult, deploymentResult] = await Promise.allSettled([
+      config.currentTeam ? getTeamById(client, config.currentTeam) : undefined,
+      getDeployment(client, contextName, deployId),
+    ]);
+
+    if (teamResult.status === 'rejected') {
+      output.error(`Failed to retrieve team information: ${teamResult.reason}`);
+      return 1;
+    }
+
+    if (deploymentResult.status === 'rejected') {
+      output.error(deploymentResult.reason);
+      return 1;
+    }
+
+    team = teamResult.value;
+    deployment = deploymentResult.value;
+
     // re-render the spinner text because it goes so fast
     output.log(
       `Fetching deployment "${deployId}" in ${chalk.bold(contextName)}…`
     );
+  } finally {
+    output.stopSpinner();
+  }
+
+  if (deployment.team?.id) {
+    if (!team || deployment.team.id !== team.id) {
+      output.error(
+        team
+          ? `Deployment doesn't belong to current team ${chalk.bold(
+              contextName
+            )}`
+          : `Deployment belongs to a different team`
+      );
+      output.error(
+        `Use ${chalk.bold('vc switch')} to change your current team`
+      );
+      return 1;
+    }
+  } else if (team) {
+    output.error(
+      `Deployment doesn't belong to current team ${chalk.bold(contextName)}`
+    );
+    output.error(`Use ${chalk.bold('vc switch')} to change your current team`);
+    return 1;
   }
 
   // create the rollback
   await client.fetch<any>(
-    `/v9/projects/${project.id}/rollback/${deployment.uid}`,
+    `/v9/projects/${project.id}/rollback/${deployment.id}`,
     {
       body: {}, // required
       method: 'POST',
@@ -68,7 +107,7 @@ export default async function requestRollback({
     output.log(
       `Successfully requested rollback of ${chalk.bold(project.name)} to ${
         deployment.url
-      } (${deployment.uid})`
+      } (${deployment.id})`
     );
     output.log(`To check rollback status, run ${getCommandName('rollback')}.`);
     return 0;

packages/cli/src/util/rollback/status.ts

@@ -8,7 +8,7 @@ import type {
 } from '../../types';
 import elapsed from '../output/elapsed';
 import formatDate from '../format-date';
-import getDeploymentInfo from './get-deployment-info';
+import getDeployment from '../get-deployment';
 import getScope from '../get-scope';
 import ms from 'ms';
 import renderAliasStatus from './render-alias-status';
@@ -168,8 +168,7 @@ async function renderJobFailed({
 
   try {
     const name = (
-      deployment ||
-      (await getDeploymentInfo(client, contextName, toDeploymentId))
+      deployment || (await getDeployment(client, contextName, toDeploymentId))
     )?.url;
     output.error(
       `Failed to remap all aliases to the requested deployment ${name} (${toDeploymentId})`
@@ -228,13 +227,10 @@ async function renderJobSucceeded({
 }) {
   const { output } = client;
 
+  // attempt to get the new deployment url
   let deploymentInfo = '';
   try {
-    const deployment = await getDeploymentInfo(
-      client,
-      contextName,
-      toDeploymentId
-    );
+    const deployment = await getDeployment(client, contextName, toDeploymentId);
     deploymentInfo = `${chalk.bold(deployment.url)} (${toDeploymentId})`;
   } catch (err: any) {
     output.debug(