Publish Stable

- @vercel/build-utils@5.7.3
 - vercel@28.10.2
 - @vercel/client@12.2.24
 - @vercel/fs-detectors@3.5.7
 - @vercel/go@2.2.22
 - @vercel/hydrogen@0.0.36
 - @vercel/next@3.3.6
 - @vercel/node@2.8.3
 - @vercel/python@3.1.32
 - @vercel/redwood@1.0.42
 - @vercel/remix@1.1.4
 - @vercel/ruby@1.3.48
 - @vercel/static-build@1.0.45

.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

@@ -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,7 +36,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 }}
       - run: yarn install --network-timeout 1000000 --frozen-lockfile
       - id: set-tests
         run: |
@@ -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

@@ -28,4 +28,5 @@ test/lib/deployment/failed-page.txt
 __pycache__
 .vercel
 .turbo
+.eslintcache
 turbo-cache-key.json

.prettierignore

@@ -3,3 +3,4 @@
 # 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

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>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
+        <div className={styles.description}>
+          <p>
+            Get started by editing&nbsp;
             <code className={styles.code}>pages/index.js</code>
           </p>
-
-        <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>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            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.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
+          <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"
             >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
+              By{' '}
+              <Image
+                src="/vercel.svg"
+                alt="Vercel Logo"
+                className={styles.vercelLogo}
+                width={100}
+                height={24}
+                priority
+              />
             </a>
-      </footer>
           </div>
+        </div>
+
+        <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?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://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 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"
+          >
+            <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>
+    </>
   )
 }

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",
@@ -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.3",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vercel",
-  "version": "28.8.0",
+  "version": "28.10.2",
   "preferGlobal": true,
   "license": "Apache-2.0",
   "description": "The command-line interface for Vercel",
@@ -41,16 +41,16 @@
     "node": ">= 14"
   },
   "dependencies": {
-    "@vercel/build-utils": "5.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",
+    "@vercel/build-utils": "5.7.3",
+    "@vercel/go": "2.2.22",
+    "@vercel/hydrogen": "0.0.36",
+    "@vercel/next": "3.3.6",
+    "@vercel/node": "2.8.3",
+    "@vercel/python": "3.1.32",
+    "@vercel/redwood": "1.0.42",
+    "@vercel/remix": "1.1.4",
+    "@vercel/ruby": "1.3.48",
+    "@vercel/static-build": "1.0.45",
     "update-notifier": "5.1.0"
   },
   "devDependencies": {
@@ -60,8 +60,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 +93,17 @@
     "@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.24",
     "@vercel/error-utils": "1.0.3",
-    "@vercel/frameworks": "1.1.14",
-    "@vercel/fs-detectors": "3.5.4",
+    "@vercel/frameworks": "1.1.16",
+    "@vercel/fs-detectors": "3.5.7",
     "@vercel/fun": "1.0.4",
     "@vercel/ncc": "0.24.0",
     "@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/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/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/util/alias/create-alias.ts

@@ -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/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/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/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/test/mocks/project.ts

@@ -21,6 +21,17 @@ const envs: ProjectEnvVariable[] = [
     updatedAt: 1557241361455,
     createdAt: 1557241361455,
   },
+  {
+    type: ProjectEnvType.Encrypted,
+    id: '781dt89g8r2h789g',
+    key: 'BRANCH_ENV_VAR',
+    value: 'env var for a specific branch',
+    target: [ProjectEnvTarget.Preview],
+    gitBranch: 'feat/awesome-thing',
+    configurationId: null,
+    updatedAt: 1557241361455,
+    createdAt: 1557241361455,
+  },
   {
     type: ProjectEnvType.Encrypted,
     id: 'r124t6frtu25df16',
@@ -217,20 +228,23 @@ export function useProject(project: Partial<Project> = defaultProject) {
   client.scenario.get(
     `/v1/env/pull/${project.id}/:target?/:gitBranch?`,
     (req, res) => {
-      const target: ProjectEnvTarget | undefined =
+      const target =
         typeof req.params.target === 'string'
           ? parseEnvironment(req.params.target)
           : undefined;
       let projectEnvs = envs;
       if (target) {
         projectEnvs = projectEnvs.filter(env => {
-          if (typeof env.target === 'string') {
-            return env.target === target;
-          }
-          if (Array.isArray(env.target)) {
-            return env.target.includes(target);
-          }
-          return false;
+          if (!env.target) return false;
+
+          // Ensure `target` matches
+          const targets = Array.isArray(env.target) ? env.target : [env.target];
+          const matchingTarget = targets.includes(target);
+          if (!matchingTarget) return false;
+
+          // Ensure `gitBranch` matches
+          if (!env.gitBranch) return true;
+          return req.params.gitBranch === env.gitBranch;
         });
       }
       const allEnvs = Object.entries(

packages/cli/test/unit/commands/env.test.ts

@@ -3,6 +3,7 @@ import path from 'path';
 import env from '../../../src/commands/env';
 import { setupFixture } from '../../helpers/setup-fixture';
 import { client } from '../../mocks/client';
+import { ProjectEnvTarget, ProjectEnvType } from '../../../src/types';
 import { defaultProject, useProject } from '../../mocks/project';
 import { useTeams } from '../../mocks/team';
 import { useUser } from '../../mocks/user';
@@ -33,6 +34,78 @@ describe('env', () => {
       expect(devFileHasDevEnv).toBeTruthy();
     });
 
+    it('should handle pulling from Preview env vars', async () => {
+      const cwd = setupFixture('vercel-env-pull');
+      useUser();
+      useTeams('team_dummy');
+      useProject({
+        ...defaultProject,
+        id: 'vercel-env-pull',
+        name: 'vercel-env-pull',
+      });
+      client.setArgv(
+        'env',
+        'pull',
+        '--yes',
+        '--cwd',
+        cwd,
+        '--environment',
+        'preview'
+      );
+      const exitCodePromise = env(client);
+      await expect(client.stderr).toOutput(
+        'Downloading `preview` Environment Variables for Project vercel-env-pull'
+      );
+      await expect(client.stderr).toOutput('Created .env file');
+      await expect(exitCodePromise).resolves.toEqual(0);
+
+      // check for Preview env vars
+      const rawDevEnv = await fs.readFile(path.join(cwd, '.env'), 'utf8');
+      expect(rawDevEnv).toContain(
+        'REDIS_CONNECTION_STRING="redis://abc123@redis.example.com:6379"'
+      );
+      expect(rawDevEnv).not.toContain(
+        'BRANCH_ENV_VAR="env var for a specific branch"'
+      );
+    });
+
+    it('should handle pulling from specific Git branch', async () => {
+      const cwd = setupFixture('vercel-env-pull');
+      useUser();
+      useTeams('team_dummy');
+      useProject({
+        ...defaultProject,
+        id: 'vercel-env-pull',
+        name: 'vercel-env-pull',
+      });
+      client.setArgv(
+        'env',
+        'pull',
+        '--yes',
+        '--cwd',
+        cwd,
+        '--environment',
+        'preview',
+        '--git-branch',
+        'feat/awesome-thing'
+      );
+      const exitCodePromise = env(client);
+      await expect(client.stderr).toOutput(
+        'Downloading `preview` Environment Variables for Project vercel-env-pull'
+      );
+      await expect(client.stderr).toOutput('Created .env file');
+      await expect(exitCodePromise).resolves.toEqual(0);
+
+      // check for Preview env vars
+      const rawDevEnv = await fs.readFile(path.join(cwd, '.env'), 'utf8');
+      expect(rawDevEnv).toContain(
+        'REDIS_CONNECTION_STRING="redis://abc123@redis.example.com:6379"'
+      );
+      expect(rawDevEnv).toContain(
+        'BRANCH_ENV_VAR="env var for a specific branch"'
+      );
+    });
+
     it('should handle alternate filename', async () => {
       const cwd = setupFixture('vercel-env-pull');
       useUser();
@@ -229,12 +302,11 @@ describe('env', () => {
         useUser();
         useTeams('team_dummy');
         defaultProject.env.push({
-          type: 'encrypted',
+          type: ProjectEnvType.Encrypted,
           id: '781dt89g8r2h789g',
           key: 'NEW_VAR',
           value: '"testvalue"',
-          target: ['development'],
-          gitBranch: null,
+          target: [ProjectEnvTarget.Development],
           configurationId: null,
           updatedAt: 1557241361455,
           createdAt: 1557241361455,
@@ -267,12 +339,11 @@ describe('env', () => {
         useUser();
         useTeams('team_dummy');
         defaultProject.env.push({
-          type: 'encrypted',
+          type: ProjectEnvType.Encrypted,
           id: '781dt89g8r2h789g',
           key: 'NEW_VAR',
           value: 'testvalue',
-          target: ['development'],
-          gitBranch: null,
+          target: [ProjectEnvTarget.Development],
           configurationId: null,
           updatedAt: 1557241361455,
           createdAt: 1557241361455,

packages/cli/test/unit/util/deploy/create-git-meta.test.ts

@@ -174,7 +174,7 @@ describe('createGitMeta', () => {
     const directory = fixture('dirty');
     try {
       await fs.rename(join(directory, 'git'), join(directory, '.git'));
-      const dirty = await isDirty(directory, client.output);
+      const dirty = await isDirty(directory);
       expect(dirty).toBeTruthy();
     } finally {
       await fs.rename(join(directory, '.git'), join(directory, 'git'));
@@ -184,7 +184,7 @@ describe('createGitMeta', () => {
     const directory = fixture('not-dirty');
     try {
       await fs.rename(join(directory, 'git'), join(directory, '.git'));
-      const dirty = await isDirty(directory, client.output);
+      const dirty = await isDirty(directory);
       expect(dirty).toBeFalsy();
     } finally {
       await fs.rename(join(directory, '.git'), join(directory, 'git'));
@@ -277,13 +277,6 @@ describe('createGitMeta', () => {
         `Failed to get last commit. The directory is likely not a Git repo, there are no latest commits, or it is corrupted.`
       );
 
-      // skip next line
-      await lines.next();
-
-      line = await lines.next();
-      expect(line.value).toContain(
-        `Failed to determine if Git repo has been modified:`
-      );
       expect(data).toBeUndefined();
     } finally {
       await fs.remove(tmpDir);

packages/cli/test/unit/util/output/create-output.test.ts

@@ -0,0 +1,37 @@
+import stripAnsi from 'strip-ansi';
+import { client } from '../../../mocks/client';
+
+describe('Output', () => {
+  describe('link()', () => {
+    it('should return hyperlink ANSI codes when `supportsHyperlink=true`', () => {
+      client.output.supportsHyperlink = true;
+      const val = client.output.link('Click Here', 'https://example.com');
+      expect(val).toEqual(
+        '\x1B]8;;https://example.com\x07Click Here\x1B]8;;\x07'
+      );
+      expect(stripAnsi(val)).toEqual('Click Here');
+    });
+
+    it('should return default fallback when `supportsHyperlink=false`', () => {
+      client.output.supportsHyperlink = false;
+      const val = client.output.link('Click Here', 'https://example.com');
+      expect(val).toEqual('Click Here (https://example.com)');
+    });
+
+    it('should return text fallback when `supportsHyperlink=false` with `fallback: false`', () => {
+      client.output.supportsHyperlink = false;
+      const val = client.output.link('Click Here', 'https://example.com', {
+        fallback: false,
+      });
+      expect(val).toEqual('Click Here');
+    });
+
+    it('should return fallback when `supportsHyperlink=false` with `fallback` function', () => {
+      client.output.supportsHyperlink = false;
+      const val = client.output.link('Click Here', 'https://example.com', {
+        fallback: () => 'other',
+      });
+      expect(val).toEqual('other');
+    });
+  });
+});

packages/cli/types/supports-hyperlinks/index.d.ts

@@ -0,0 +1,4 @@
+declare module 'supports-hyperlinks' {
+  import { Writable } from 'stream';
+  export function supportsHyperlink(stream: Writable): boolean;
+}

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/client",
-  "version": "12.2.21",
+  "version": "12.2.24",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "homepage": "https://vercel.com",
@@ -43,7 +43,7 @@
     ]
   },
   "dependencies": {
-    "@vercel/build-utils": "5.7.0",
+    "@vercel/build-utils": "5.7.3",
     "@vercel/routing-utils": "2.1.3",
     "@zeit/fetch": "5.2.0",
     "async-retry": "1.2.3",

packages/edge/docs/README.md

@@ -22,6 +22,7 @@
 
 - [geolocation](README.md#geolocation)
 - [ipAddress](README.md#ipaddress)
+- [json](README.md#json)
 - [next](README.md#next)
 - [rewrite](README.md#rewrite)
 
@@ -169,6 +170,49 @@ Returns the IP address of the request from the headers.
 
 ---
 
+### json
+
+▸ **json**(`data`, `init?`): `Response`
+
+Builds a response object from a serializable JavaScript object:
+
+- sets the 'Content-Type' response header to 'application/json'
+- sets the response body from provided data
+
+**`See`**
+
+[https://fetch.spec.whatwg.org/#dom-response-json](https://fetch.spec.whatwg.org/#dom-response-json)
+
+**`Example`**
+
+<caption>Building a JSON response</caption>
+
+```ts
+import { json } from '@vercel/edge';
+
+const response = json(
+  { notification: { success: true, content: 'worked' } },
+  { headers: { 'x-custom': '1' } }
+);
+```
+
+#### Parameters
+
+| Name    | Type           | Description                                             |
+| :------ | :------------- | :------------------------------------------------------ |
+| `data`  | `any`          | serialized data                                         |
+| `init?` | `ResponseInit` | optional custom response status, statusText and headers |
+
+#### Returns
+
+`Response`
+
+#### Defined in
+
+[src/response.ts:19](https://github.com/vercel/vercel/blob/main/packages/edge/src/response.ts#L19)
+
+---
+
 ### next
 
 ▸ **next**(`init?`): `Response`

packages/edge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/edge",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

packages/edge/src/index.ts

@@ -3,3 +3,6 @@ export * from './middleware-helpers';
 
 export type { Geo } from './edge-headers';
 export * from './edge-headers';
+export * from './response';
+
+import './published-types.d.ts';

packages/edge/src/published-types.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable no-var */
+
+declare global {
+  // must be `var` to work
+  var process: {
+    env: Record<string, string>;
+  };
+}

packages/edge/src/response.ts

@@ -0,0 +1,22 @@
+/**
+ * Builds a response object from a serializable JavaScript object:
+ * - sets the 'Content-Type' response header to 'application/json'
+ * - sets the response body from provided data
+ *
+ * @see {@link https://fetch.spec.whatwg.org/#dom-response-json}
+ * @param data serialized data
+ * @param init optional custom response status, statusText and headers
+ *
+ * @example
+ * <caption>Building a JSON response</caption>
+ *
+ * ```ts
+ * import { json } from '@vercel/edge';
+ *
+ * const response = json({ notification: { success: true, content: 'worked' } }, { headers: {'x-custom': '1' }})
+ * ```
+ */
+export function json(data: any, init?: ResponseInit): Response {
+  // @ts-expect-error This is not in lib/dom right now, and we can't augment it.
+  return Response.json(data, init);
+}

packages/edge/test/response.test.ts

@@ -0,0 +1,34 @@
+/**
+ * @jest-environment @edge-runtime/jest-environment
+ */
+
+import { json } from '../src/response';
+
+describe('json', () => {
+  it('returns a response with JSON content', async () => {
+    const content = { foo: 'bar' };
+    const response = json(content);
+    expect(response.headers.get('content-type')).toEqual('application/json');
+    expect(await response.json()).toEqual(content);
+  });
+
+  it('can set response init', async () => {
+    const content = { bar: 'baz' };
+    const status = 201;
+    const statusText = 'it is in';
+    const customHeader = 'x-custom';
+    const customHeaderValue = '1';
+    const response = json(content, {
+      status,
+      statusText,
+      headers: { [customHeader]: customHeaderValue },
+    });
+    expect(response).toMatchObject({
+      status,
+      statusText,
+    });
+    expect(response.headers.get('content-type')).toEqual('application/json');
+    expect(response.headers.get(customHeader)).toEqual(customHeaderValue);
+    expect(await response.json()).toEqual(content);
+  });
+});

packages/frameworks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/frameworks",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "main": "./dist/frameworks.js",
   "types": "./dist/frameworks.d.ts",
   "files": [

packages/frameworks/src/frameworks.ts

@@ -989,7 +989,7 @@ export const frameworks = [
     ],
   },
   {
-    name: 'SvelteKit',
+    name: 'SvelteKit (Legacy Beta)',
     slug: 'sveltekit',
     demo: 'https://sveltekit-template.vercel.app',
     logo: 'https://api-frameworks.vercel.sh/framework-logos/svelte.svg',
@@ -997,15 +997,16 @@ export const frameworks = [
       'https://assets.vercel.com/image/upload/v1647366075/front/import/sveltekit.png',
     tagline:
       'SvelteKit is a framework for building web applications of all sizes.',
-    description: 'A SvelteKit app optimized Edge-first.',
+    description: 'A SvelteKit legacy app optimized Edge-first.',
     website: 'https://kit.svelte.dev',
+    sort: 99,
     envPrefix: 'VITE_',
     detectors: {
       every: [
         {
           path: 'package.json',
           matchContent:
-            '"(dev)?(d|D)ependencies":\\s*{[^}]*"@sveltejs\\/kit":\\s*".+?"[^}]*}',
+            '"(dev)?(d|D)ependencies":\\s*{[^}]*"@sveltejs\\/kit":\\s*"1\\.0\\.0-next\\.(\\d+)"[^}]*}',
         },
       ],
     },
@@ -1027,6 +1028,44 @@ export const frameworks = [
     },
     getOutputDirName: async () => 'public',
   },
+  {
+    name: 'SvelteKit',
+    slug: 'sveltekit-1',
+    demo: 'https://sveltekit-1-template.vercel.app',
+    logo: 'https://api-frameworks.vercel.sh/framework-logos/svelte.svg',
+    screenshot:
+      'https://assets.vercel.com/image/upload/v1647366075/front/import/sveltekit.png',
+    tagline:
+      'SvelteKit is a framework for building web applications of all sizes.',
+    description: 'A SvelteKit app optimized Edge-first.',
+    website: 'https://kit.svelte.dev',
+    detectors: {
+      every: [
+        {
+          path: 'package.json',
+          matchContent:
+            '"(dev)?(d|D)ependencies":\\s*{[^}]*"@sveltejs\\/kit":\\s*".+?"[^}]*}',
+        },
+      ],
+    },
+    settings: {
+      installCommand: {
+        placeholder: '`yarn install`, `pnpm install`, or `npm install`',
+      },
+      buildCommand: {
+        placeholder: 'vite build',
+        value: 'vite build',
+      },
+      devCommand: {
+        placeholder: 'vite dev',
+        value: 'vite dev --port $PORT',
+      },
+      outputDirectory: {
+        value: 'public',
+      },
+    },
+    getOutputDirName: async () => 'public',
+  },
   {
     name: 'Ionic React',
     slug: 'ionic-react',
@@ -1732,7 +1771,7 @@ export const frameworks = [
         {
           path: 'package.json',
           matchContent:
-            '"(dev)?(d|D)ependencies":\\s*{[^}]*vitepress:\\s*".+?"[^}]*}',
+            '"(dev)?(d|D)ependencies":\\s*{[^}]*"vitepress":\\s*".+?"[^}]*}',
         },
       ],
     },
@@ -1751,7 +1790,7 @@ export const frameworks = [
         value: 'docs/.vitepress/dist',
       },
     },
-    getOutputDirName: async () => '.vitepress/dist',
+    getOutputDirName: async () => 'docs/.vitepress/dist',
   },
   {
     name: 'VuePress',

packages/fs-detectors/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/fs-detectors",
-  "version": "3.5.4",
+  "version": "3.5.7",
   "description": "Vercel filesystem detectors",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@vercel/error-utils": "1.0.3",
-    "@vercel/frameworks": "1.1.14",
+    "@vercel/frameworks": "1.1.16",
     "@vercel/routing-utils": "2.1.3",
     "glob": "8.0.3",
     "js-yaml": "4.1.0",
@@ -35,7 +35,7 @@
     "@types/minimatch": "3.0.5",
     "@types/node": "14.18.33",
     "@types/semver": "7.3.10",
-    "@vercel/build-utils": "4.2.0",
+    "@vercel/build-utils": "5.7.3",
     "typescript": "4.3.4"
   }
 }

packages/go/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/go",
-  "version": "2.2.19",
+  "version": "2.2.22",
   "license": "MIT",
   "main": "./dist/index",
   "homepage": "https://vercel.com/docs/runtimes#official-runtimes/go",
@@ -35,7 +35,7 @@
     "@types/jest": "28.1.6",
     "@types/node-fetch": "^2.3.0",
     "@types/tar": "^4.0.0",
-    "@vercel/build-utils": "5.7.0",
+    "@vercel/build-utils": "5.7.3",
     "@vercel/ncc": "0.24.0",
     "async-retry": "1.3.1",
     "execa": "^1.0.0",

packages/hydrogen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/hydrogen",
-  "version": "0.0.33",
+  "version": "0.0.36",
   "license": "MIT",
   "main": "./dist/index.js",
   "homepage": "https://vercel.com/docs",
@@ -21,7 +21,7 @@
   "devDependencies": {
     "@types/jest": "27.5.1",
     "@types/node": "14.18.33",
-    "@vercel/build-utils": "5.7.0",
+    "@vercel/build-utils": "5.7.3",
     "@vercel/static-config": "2.0.6",
     "typescript": "4.6.4"
   }

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/next",
-  "version": "3.3.2",
+  "version": "3.3.6",
   "license": "MIT",
   "main": "./dist/index",
   "homepage": "https://vercel.com/docs/runtimes#official-runtimes/next-js",
@@ -45,7 +45,7 @@
     "@types/semver": "6.0.0",
     "@types/text-table": "0.2.1",
     "@types/webpack-sources": "3.2.0",
-    "@vercel/build-utils": "5.7.0",
+    "@vercel/build-utils": "5.7.3",
     "@vercel/nft": "0.22.1",
     "@vercel/routing-utils": "2.1.3",
     "async-sema": "3.0.1",
@@ -61,7 +61,6 @@
     "get-port": "5.0.0",
     "nanoid": "3.3.4",
     "ndjson": "2.0.0",
-    "pretty-bytes": "5.6.0",
     "resolve-from": "5.0.0",
     "semver": "6.1.1",
     "set-cookie-parser": "2.4.6",

packages/next/src/edge-function-source/constants.ts

@@ -1,5 +1,4 @@
-const KIB = 1024;
-const MIB = 1024 * KIB;
+import { MIB } from '../utils';
 
 /**
  * The maximum size of a *compressed* edge function.

packages/next/src/index.ts

@@ -24,6 +24,7 @@ import {
   PrepareCache,
   NodejsLambda,
   BuildResultV2Typical as BuildResult,
+  BuildResultBuildOutput,
 } from '@vercel/build-utils';
 import { Route, RouteWithHandle, RouteWithSrc } from '@vercel/routing-utils';
 import {
@@ -53,6 +54,7 @@ import createServerlessConfig from './create-serverless-config';
 import nextLegacyVersions from './legacy-versions';
 import { serverBuild } from './server-build';
 import {
+  MIB,
   collectTracedFiles,
   createLambdaFromPseudoLayers,
   createPseudoLayer,
@@ -64,6 +66,7 @@ import {
   getExportIntent,
   getExportStatus,
   getFilesMapFromReasons,
+  getImagesConfig,
   getImagesManifest,
   getMiddlewareManifest,
   getNextConfig,
@@ -201,7 +204,7 @@ export const build: BuildV2 = async ({
 
   // Limit for max size each lambda can be, 50 MB if no custom limit
   const lambdaCompressedByteLimit = (config.maxLambdaSize ||
-    50 * 1000 * 1000) as number;
+    50 * MIB) as number;
 
   let entryDirectory = path.dirname(entrypoint);
   let entryPath = path.join(workPath, entryDirectory);
@@ -452,6 +455,24 @@ export const build: BuildV2 = async ({
   }
   debug('build command exited');
 
+  let buildOutputVersion: undefined | number;
+
+  try {
+    const data = await readJSON(
+      path.join(outputDirectory, 'output/config.json')
+    );
+    buildOutputVersion = data.version;
+  } catch (_) {
+    // tolerate for older versions
+  }
+
+  if (buildOutputVersion) {
+    return {
+      buildOutputPath: path.join(outputDirectory, 'output'),
+      buildOutputVersion,
+    } as BuildResultBuildOutput;
+  }
+
   let appMountPrefixNoTrailingSlash = path.posix
     .join('/', entryDirectory)
     .replace(/\/+$/, '');
@@ -801,18 +822,7 @@ export const build: BuildV2 = async ({
 
     return {
       output,
-      images:
-        imagesManifest?.images?.loader === 'default'
-          ? {
-              domains: imagesManifest.images.domains,
-              sizes: imagesManifest.images.sizes,
-              remotePatterns: imagesManifest.images.remotePatterns,
-              minimumCacheTTL: imagesManifest.images.minimumCacheTTL,
-              dangerouslyAllowSVG: imagesManifest.images.dangerouslyAllowSVG,
-              contentSecurityPolicy:
-                imagesManifest.images.contentSecurityPolicy,
-            }
-          : undefined,
+      images: getImagesConfig(imagesManifest),
       routes: [
         ...privateOutputs.routes,
 
@@ -2169,17 +2179,7 @@ export const build: BuildV2 = async ({
       ...privateOutputs.files,
     },
     wildcard: wildcardConfig,
-    images:
-      imagesManifest?.images?.loader === 'default'
-        ? {
-            domains: imagesManifest.images.domains,
-            sizes: imagesManifest.images.sizes,
-            remotePatterns: imagesManifest.images.remotePatterns,
-            minimumCacheTTL: imagesManifest.images.minimumCacheTTL,
-            dangerouslyAllowSVG: imagesManifest.images.dangerouslyAllowSVG,
-            contentSecurityPolicy: imagesManifest.images.contentSecurityPolicy,
-          }
-        : undefined,
+    images: getImagesConfig(imagesManifest),
     /*
       Desired routes order
       - Runtime headers

packages/next/src/server-build.ts

@@ -38,6 +38,7 @@ import {
   outputFunctionFileSizeInfo,
   MAX_UNCOMPRESSED_LAMBDA_SIZE,
   normalizeIndexOutput,
+  getImagesConfig,
   getNextServerPath,
   getMiddlewareBundle,
   getFilesMapFromReasons,
@@ -1158,18 +1159,7 @@ export async function serverBuild({
 
   return {
     wildcard: wildcardConfig,
-    images:
-      imagesManifest?.images?.loader === 'default'
-        ? {
-            domains: imagesManifest.images.domains,
-            sizes: imagesManifest.images.sizes,
-            remotePatterns: imagesManifest.images.remotePatterns,
-            minimumCacheTTL: imagesManifest.images.minimumCacheTTL,
-            formats: imagesManifest.images.formats,
-            dangerouslyAllowSVG: imagesManifest.images.dangerouslyAllowSVG,
-            contentSecurityPolicy: imagesManifest.images.contentSecurityPolicy,
-          }
-        : undefined,
+    images: getImagesConfig(imagesManifest),
     output: {
       ...publicDirectoryFiles,
       ...lambdas,

packages/next/src/utils.ts

@@ -14,6 +14,7 @@ import {
   isSymbolicLink,
   NodejsLambda,
   EdgeFunction,
+  Images,
 } from '@vercel/build-utils';
 import { NodeFileTraceReasons } from '@vercel/nft';
 import type {
@@ -34,7 +35,6 @@ import url from 'url';
 import escapeStringRegexp from 'escape-string-regexp';
 import { htmlContentType } from '.';
 import textTable from 'text-table';
-import prettyBytes from 'pretty-bytes';
 import { getNextjsEdgeFunctionSource } from './edge-function-source/get-edge-function-source';
 import type { LambdaOptionsWithFiles } from '@vercel/build-utils/dist/lambda';
 import { stringifySourceMap } from './sourcemapped';
@@ -43,8 +43,10 @@ import bytes from 'bytes';
 
 type stringMap = { [key: string]: string };
 
-const _prettyBytes = (n: number) => bytes(n, { unitSeparator: ' ' });
-export { _prettyBytes as prettyBytes }
+export const KIB = 1024;
+export const MIB = 1024 * KIB;
+
+export const prettyBytes = (n: number) => bytes(n, { unitSeparator: ' ' });
 
 // Identify /[param]/ in route string
 // eslint-disable-next-line no-useless-escape
@@ -154,6 +156,23 @@ async function getNextConfig(workPath: string, entryPath: string) {
   return null;
 }
 
+function getImagesConfig(
+  imagesManifest: NextImagesManifest | undefined
+): Images | undefined {
+  return imagesManifest?.images?.loader === 'default' &&
+    imagesManifest.images?.unoptimized !== true
+    ? {
+        domains: imagesManifest.images.domains,
+        sizes: imagesManifest.images.sizes,
+        remotePatterns: imagesManifest.images.remotePatterns,
+        minimumCacheTTL: imagesManifest.images.minimumCacheTTL,
+        formats: imagesManifest.images.formats,
+        dangerouslyAllowSVG: imagesManifest.images.dangerouslyAllowSVG,
+        contentSecurityPolicy: imagesManifest.images.contentSecurityPolicy,
+      }
+    : undefined;
+}
+
 function normalizePage(page: string): string {
   // Resolve on anything that doesn't start with `/`
   if (!page.startsWith('/')) {
@@ -498,6 +517,7 @@ export type NextImagesManifest = {
     remotePatterns: RemotePattern[];
     minimumCacheTTL?: number;
     formats?: ImageFormat[];
+    unoptimized?: boolean;
     dangerouslyAllowSVG?: boolean;
     contentSecurityPolicy?: string;
   };
@@ -1296,9 +1316,9 @@ export type LambdaGroup = {
   pseudoLayerUncompressedBytes: number;
 };
 
-export const MAX_UNCOMPRESSED_LAMBDA_SIZE = 250 * 1000 * 1000; // 250MB
-const LAMBDA_RESERVED_UNCOMPRESSED_SIZE = 2.5 * 1000 * 1000; // 2.5MB
-const LAMBDA_RESERVED_COMPRESSED_SIZE = 250 * 1000; // 250KB
+export const MAX_UNCOMPRESSED_LAMBDA_SIZE = 250 * MIB;
+const LAMBDA_RESERVED_UNCOMPRESSED_SIZE = 2.5 * MIB;
+const LAMBDA_RESERVED_COMPRESSED_SIZE = 250 * KIB;
 
 export async function getPageLambdaGroups({
   entryPath,
@@ -1501,7 +1521,7 @@ export const outputFunctionFileSizeInfo = (
     .forEach(depKey => {
       const dep = dependencies[depKey];
 
-      if (dep.compressed < 100 * 1000 && dep.uncompressed < 500 * 1000) {
+      if (dep.compressed < 100 * KIB && dep.uncompressed < 500 * KIB) {
         // ignore smaller dependencies to reduce noise
         return;
       }
@@ -1541,9 +1561,8 @@ export const detectLambdaLimitExceeding = async (
   }
 ) => {
   // show debug info if within 5 MB of exceeding the limit
-  const COMPRESSED_SIZE_LIMIT_CLOSE = compressedSizeLimit - 5 * 1000 * 1000;
-  const UNCOMPRESSED_SIZE_LIMIT_CLOSE =
-    MAX_UNCOMPRESSED_LAMBDA_SIZE - 5 * 1000 * 1000;
+  const COMPRESSED_SIZE_LIMIT_CLOSE = compressedSizeLimit - 5 * MIB;
+  const UNCOMPRESSED_SIZE_LIMIT_CLOSE = MAX_UNCOMPRESSED_LAMBDA_SIZE - 5 * MIB;
 
   let numExceededLimit = 0;
   let numCloseToLimit = 0;
@@ -2244,6 +2263,7 @@ export {
   validateEntrypoint,
   normalizePackageJson,
   getNextConfig,
+  getImagesConfig,
   stringMap,
   normalizePage,
   isDynamicRoute,

packages/next/test/integration/index.test.js

@@ -716,7 +716,7 @@ it('Should not exceed function limit for large dependencies (server build)', asy
       lambdas.add(output[filePath]);
     }
   });
-  expect(lambdas.size).toBe(12);
+  expect(lambdas.size).toBe(3);
 
   // this assertion is unstable as `next-server`'s size can change up and down
   // on canary so skipping to prevent random failures.

packages/next/test/integration/test-limit-exceeded-404-static-files/pages/404.js

@@ -13,7 +13,7 @@ export function getStaticProps({ locale }) {
       locale,
       // 1MB string which is duplicated in HTML totalling 2MB
       // this will be generated for each locale as well
-      largeData: new Array(1 * 1000 * 1000).fill('a').join(''),
+      largeData: new Array(1 * 1024 * 1024).fill('a').join(''),
     },
   };
 }

packages/next/test/unit/utils.test.js

@@ -3,6 +3,7 @@ const {
   excludeFiles,
   validateEntrypoint,
   normalizePackageJson,
+  getImagesConfig,
   getNextConfig,
 } = require('../../dist/utils');
 const { FileRef } = require('@vercel/build-utils');
@@ -27,6 +28,86 @@ describe('getNextConfig', () => {
   });
 });
 
+describe('getImagesConfig', () => {
+  it('should return undefined when undefined config', async () => {
+    const result = await getImagesConfig(undefined);
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined when null config', async () => {
+    const result = await getImagesConfig(null);
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined when empty object config', async () => {
+    const result = await getImagesConfig({ images: {} });
+    expect(result).toBeUndefined();
+  });
+
+  it('should return pass-through props when loader is default and unoptimized undefined', async () => {
+    const images = {
+      loader: 'default',
+      domains: ['example.com'],
+      sizes: [512, 1024],
+      remotePatterns: undefined,
+      formats: ['image/webp'],
+      minimumCacheTTL: 60,
+      dangerouslyAllowSVG: false,
+      contentSecurityPolicy: undefined,
+    };
+    const result = await getImagesConfig({ images });
+    expect(result).toEqual({
+      domains: ['example.com'],
+      sizes: [512, 1024],
+      remotePatterns: undefined,
+      formats: ['image/webp'],
+      minimumCacheTTL: 60,
+      dangerouslyAllowSVG: false,
+      contentSecurityPolicy: undefined,
+    });
+  });
+
+  it('should return pass-through props when loader is default and unoptimized false', async () => {
+    const images = {
+      unoptimized: false,
+      loader: 'default',
+      domains: ['example.com'],
+      sizes: [512, 1024],
+      remotePatterns: undefined,
+      formats: ['image/webp'],
+      minimumCacheTTL: 60,
+      dangerouslyAllowSVG: false,
+      contentSecurityPolicy: undefined,
+    };
+    const result = await getImagesConfig({ images });
+    expect(result).toEqual({
+      domains: ['example.com'],
+      sizes: [512, 1024],
+      remotePatterns: undefined,
+      formats: ['image/webp'],
+      minimumCacheTTL: 60,
+      dangerouslyAllowSVG: false,
+      contentSecurityPolicy: undefined,
+    });
+  });
+
+  it('return return undefined when loader is default and unoptimized true', async () => {
+    const images = {
+      unoptimized: true,
+      loader: 'default',
+      domains: ['example.com'],
+      sizes: [512, 1024],
+      remotePatterns: undefined,
+      formats: ['image/webp'],
+      minimumCacheTTL: 60,
+      dangerouslyAllowSVG: false,
+      contentSecurityPolicy: undefined,
+    };
+    const result = await getImagesConfig({ images });
+    expect(result).toBeUndefined();
+  });
+});
+
 describe('excludeFiles', () => {
   it('should exclude files', () => {
     const files = {

packages/node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/node",
-  "version": "2.8.0",
+  "version": "2.8.3",
   "license": "MIT",
   "main": "./dist/index",
   "homepage": "https://vercel.com/docs/runtimes#official-runtimes/node-js",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@edge-runtime/vm": "2.0.0",
     "@types/node": "14.18.33",
-    "@vercel/build-utils": "5.7.0",
+    "@vercel/build-utils": "5.7.3",
     "@vercel/node-bridge": "3.1.2",
     "@vercel/static-config": "2.0.6",
     "edge-runtime": "2.0.0",

packages/python/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/python",
-  "version": "3.1.29",
+  "version": "3.1.32",
   "main": "./dist/index.js",
   "license": "MIT",
   "homepage": "https://vercel.com/docs/runtimes#official-runtimes/python",
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@types/execa": "^0.9.0",
     "@types/jest": "27.4.1",
-    "@vercel/build-utils": "5.7.0",
+    "@vercel/build-utils": "5.7.3",
     "@vercel/ncc": "0.24.0",
     "execa": "^1.0.0",
     "typescript": "4.3.4"

packages/redwood/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/redwood",
-  "version": "1.0.39",
+  "version": "1.0.42",
   "main": "./dist/index.js",
   "license": "MIT",
   "homepage": "https://vercel.com/docs",
@@ -27,6 +27,6 @@
     "@types/aws-lambda": "8.10.19",
     "@types/node": "14.18.33",
     "@types/semver": "6.0.0",
-    "@vercel/build-utils": "5.7.0"
+    "@vercel/build-utils": "5.7.3"
   }
 }

packages/remix/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/remix",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "license": "MIT",
   "main": "./dist/index.js",
   "homepage": "https://vercel.com/docs",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@types/jest": "27.5.1",
     "@types/node": "14.18.33",
-    "@vercel/build-utils": "5.7.0",
+    "@vercel/build-utils": "5.7.3",
     "typescript": "4.6.4"
   }
 }