Publish Stable

- @vercel/build-utils@5.5.8
 - vercel@28.5.2
 - @vercel/client@12.2.18
 - @vercel/go@2.2.16
 - @vercel/hydrogen@0.0.30
 - @vercel/next@3.2.12
 - @vercel/node@2.6.3
 - @vercel/python@3.1.26
 - @vercel/redwood@1.0.36
 - @vercel/remix@1.0.36
 - @vercel/ruby@1.3.42
 - @vercel/static-build@1.0.37

.github/CODEOWNERS

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

.github/CONTRIBUTING.md

@@ -13,6 +13,7 @@ To get started, execute the following:
 ```
 git clone https://github.com/vercel/vercel
 cd vercel
+corepack enable
 yarn install
 yarn bootstrap
 yarn build

.github/workflows/cancel.yml

@@ -1,17 +0,0 @@
-name: Cancel
-on:
-  push:
-    branches:
-    - '**'
-    - '!main'
-
-jobs:
-  cancel:
-    name: 'Cancel Previous Runs'
-    runs-on: ubuntu-latest
-    timeout-minutes: 2
-    steps:
-      - uses: styfle/cancel-workflow-action@0.9.1
-        with:
-          workflow_id: test.yml, test-integration-cli.yml, test-unit.yml
-          access_token: ${{ github.token }}

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

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

.github/workflows/publish.yml

@@ -7,13 +7,20 @@ on:
     tags:
     - '!*'
 
+env:
+  TURBO_REMOTE_ONLY: 'true'
+  TURBO_TEAM: 'vercel'
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+
 jobs:
   publish:
     name: Publish
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v1
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
     - name: Check Release
       id: check-release
       run: |
@@ -26,14 +33,16 @@ jobs:
         fi
     - name: Setup Go
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
-      uses: actions/setup-go@v2
+      uses: actions/setup-go@v3
       with:
         go-version: '1.13.15'
     - name: Setup Node
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
+      timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
       with:
         node-version: 14
+        cache: 'yarn'
     - name: Install
       if: ${{ steps.check-release.outputs.IS_RELEASE == 'true' }}
       run: yarn install --check-files --frozen-lockfile --network-timeout 1000000

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

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

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

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

.github/workflows/test-unit.yml

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

.github/workflows/test.yml

@@ -10,6 +10,13 @@ on:
 
 env:
   NODE_VERSION: '14'
+  TURBO_REMOTE_ONLY: 'true'
+  TURBO_TEAM: 'vercel'
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
 
 jobs:
   setup:
@@ -19,14 +26,18 @@ jobs:
       tests: ${{ steps['set-tests'].outputs['tests'] }}
       dplUrl: ${{ steps.waitForTarball.outputs.url }}
     steps:
-      - uses: actions/checkout@v2
-      - run: git --version
-      - run: git fetch origin main
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+      - uses: actions/setup-go@v3
+        with:
+          go-version: '1.13.15'
+      - uses: actions/setup-node@v3
+        timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'yarn'
-      - run: yarn install --network-timeout 1000000
+      - run: yarn install --network-timeout 1000000 --frozen-lockfile
       - id: set-tests
         run: |
           TESTS_ARRAY=$(node utils/chunk-tests.js $SCRIPT_NAME)
@@ -52,19 +63,14 @@ jobs:
       matrix:
         include: ${{ fromJson(needs.setup.outputs['tests']) }}
     steps:
-      - name: Conditionally set remote env
-        if: github.event.pull_request.head.repo.full_name == github.repository
-        run: |
-            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
-            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
-            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 2
-      - uses: actions/setup-go@v2
+      - uses: actions/setup-go@v3
         with:
           go-version: '1.13.15'
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
+        timeout-minutes: 5 # See https://github.com/actions/cache/issues/810
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'yarn'
@@ -76,16 +82,16 @@ jobs:
       - run: yarn install --network-timeout 1000000
 
       - name: Build ${{matrix.packageName}} and all its dependencies
-        run: node_modules/.bin/turbo run build --cache-dir=".turbo" --scope=${{matrix.packageName}} --include-dependencies --no-deps
+        run: node utils/gen.js && node_modules/.bin/turbo run build --cache-dir=".turbo" --scope=${{matrix.packageName}} --include-dependencies --no-deps
         env:
           FORCE_COLOR: '1'
       - name: Test ${{matrix.packageName}}
-        run: node_modules/.bin/turbo run test --cache-dir=".turbo" --scope=${{matrix.packageName}} --no-deps -- ${{ join(matrix.testPaths, ' ') }}
+        run: node utils/gen.js && node_modules/.bin/turbo run test --cache-dir=".turbo" --scope=${{matrix.packageName}} --no-deps -- ${{ join(matrix.testPaths, ' ') }}
         shell: bash
         env:
           VERCEL_CLI_VERSION: ${{ needs.setup.outputs.dplUrl }}/tarballs/vercel.tgz
-          VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
-          VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}
+          VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
+          VERCEL_TEST_REGISTRATION_URL: ${{ secrets.VERCEL_TEST_REGISTRATION_URL }}
           FORCE_COLOR: '1'
 
   conclusion:

.gitignore

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

.kodiak.toml

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

DEVELOPING_A_RUNTIME.md

@@ -63,9 +63,6 @@ export async function build(options: BuildOptions) {
   const lambda = createLambda(/* … */);
   return {
     output: lambda,
-    watch: [
-      // Dependent files to trigger a rebuild in `vercel dev` go here…
-    ],
     routes: [
       // If your Runtime needs to define additional routing, define it here…
     ],
@@ -115,7 +112,8 @@ export async function shouldServe(options: ShouldServeOptions) {
 }
 ```
 
-If this function is not defined, Vercel CLI will use the [default implementation](https://github.com/vercel/vercel/blob/52994bfe26c5f4f179bdb49783ee57ce19334631/packages/now-build-utils/src/should-serve.ts).
+If this function is not defined, Vercel CLI will use the [default
+implementation](https://github.com/vercel/vercel/blob/52994bfe26c5f4f179bdb49783ee57ce19334631/packages/now-build-utils/src/should-serve.ts).
 
 ### `startDevServer()`
 
@@ -189,7 +187,8 @@ If you need to share state between those steps, use the filesystem.
 
 ### Directory and Cache Lifecycle
 
-When a new build is created, we pre-populate the `workPath` supplied to `analyze` with the results of the `prepareCache` step of the previous build.
+When a new build is created, we pre-populate the `workPath` supplied to `analyze` with the results of the `prepareCache` step of the
+previous build.
 
 The `analyze` step can modify that directory, and it will not be re-created when it's supplied to `build` and `prepareCache`.
 
@@ -197,6 +196,77 @@ The `analyze` step can modify that directory, and it will not be re-created when
 
 The env and secrets specified by the user as `build.env` are passed to the Runtime process. This means you can access user env via `process.env` in Node.js.
 
+### Supporting Large Environment
+
+We provide the ability to support more than 4KB of environment (up to 64KB) by way of
+a Lambda runtime wrapper that is added to every Lambda function we create. These are
+supported by many of the existing Lambda runtimes, but custom runtimes may require
+additional work.
+
+The following Lambda runtime families have built-in support for the runtime wrapper:
+
+- `nodejs`
+- `python` (>= 3.8)
+- `ruby`
+- `java11`
+- `java8.al2` (not `java8`)
+- `dotnetcore`
+
+If a custom runtime is based on one of these Lambda runtimes, large environment
+support will be available without further configuration. Custom runtimes based on
+other Lambda runtimes, including those that provide the runtime via `provided` and
+`provided.al2`, must implement runtime wrapper support and indicate it via the
+`supportsWrapper` flag when calling [`createLambda`](#createlambda()).
+
+To add support for runtime wrappers to a custom runtime, first check the value of the
+`AWS_LAMBDA_EXEC_WRAPPER` environment variable in the bootstrap script. Its value is
+the path to the wrapper executable.
+
+The wrapper must be passed the path to the runtime as well as any parameters that the
+runtime requires. This is most easily done in a small `bootstrap` script.
+
+In this simple `bash` example, the runtime is called directly if
+`AWS_LAMBDA_EXEC_WRAPPER` has no value, otherwise the wrapper is called with the
+runtime command as parameters.
+
+```bash
+#!/bin/bash
+
+exec $AWS_LAMBDA_EXEC_WRAPPER path/to/runtime param1 param2
+```
+
+If the `bootstrap` file is not a launcher script, but the entrypoint of the runtime
+itself, replace the bootstrap process with the wrapper. Pass the path and parameters
+of the executing file, ensuring the `AWS_LAMBDA_EXEC_WRAPPER` environment variable is
+set to blank.
+
+This `bash` example uses `exec` to replace the running bootstrap process with the
+wrapper, passing its own path and parameters.
+
+```bash
+#!/bin/bash
+
+if [[ -n $AWS_LAMBDA_EXEC_WRAPPER ]]
+  __WRAPPER=$AWS_LAMBDA_EXEC_WRAPPER
+  AWS_LAMBDA_EXEC_WRAPPER=""
+  exec $__WRAPPER "$0" "${@}"
+fi
+
+# start the actual runtime functionality
+```
+
+Note that unsetting the variable may not have the desired effect due to the way
+Lambda spawns runtime processes. It is better to explicitly set it to blank.
+
+The best way to replace the existing bootstrap process is with the
+[`execve`](https://www.man7.org/linux/man-pages/man2/execve.2.html) syscall.
+This is achieved by using `exec` in `bash` to replace the running process with the wrapper,
+maintaining the same PID and environment.
+
+Once support for runtime wrappers is included, ensure `supportsWrapper` is set to
+`true` in the call to [`createLambda`](#createlambda()). This will inform the build
+process to enable large environment support for this runtime.
+
 ### Utilities as peerDependencies
 
 When you publish your Runtime to npm, make sure to not specify `@vercel/build-utils` (as seen below in the API definitions) as a dependency, but rather as part of `peerDependencies`.
@@ -304,13 +374,14 @@ This is a [class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere
 - `handler: String` path to handler file and (optionally) a function name it exports
 - `runtime: LambdaRuntime` the name of the lambda runtime
 - `environment: Object` key-value map of handler-related (aside of those passed by user) environment variables
+- `supportsWrapper: Boolean` set to true to indicate that Lambda runtime wrappers are supported by this runtime
 
 ### `LambdaRuntime`
 
 This is an abstract enumeration type that is implemented by one of the following possible `String` values:
 
+- `nodejs16.x`
 - `nodejs14.x`
-- `nodejs12.x`
 - `go1.x`
 - `java11`
 - `python3.9`

README.md

@@ -19,11 +19,9 @@
 
 ## Vercel
 
-Vercel is a platform for **static sites and frontend frameworks**, built to integrate with your headless content, commerce, or database.
+Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.
 
-We provide a **frictionless developer experience** to take care of the hard things: deploy instantly, scale automatically, and serve personalized content around the globe.
-
-We make it easy for frontend teams to **develop, preview, and ship** delightful user experiences, where performance is the default.
+We enable teams to iterate quickly and develop, preview, and ship delightful user experiences. Vercel has zero-configuration support for 35+ frontend frameworks and integrates with your headless content, commerce, or database of choice.
 
 ## Deploy
 
@@ -35,6 +33,6 @@ For details on how to use Vercel, check out our [documentation](https://vercel.c
 
 ## Contributing
 
-- [Code of Conduct](https://github.com/vercel/vercel/blob/main/.github/CODE_OF_CONDUCT.md)
-- [Contributing Guidelines](https://github.com/vercel/vercel/blob/main/.github/CONTRIBUTING.md)
-- [MIT License](https://github.com/vercel/vercel/blob/main/LICENSE)
+- [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
+- [Contributing Guidelines](./.github/CONTRIBUTING.md)
+- [Apache 2.0 License](./LICENSE)

api/_lib/script/build.ts

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

api/frameworks.ts

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

api/package.json

@@ -16,7 +16,7 @@
     "unzip-stream": "0.3.0"
   },
   "devDependencies": {
-    "@types/node": "13.1.4",
+    "@types/node": "14.18.33",
     "@types/node-fetch": "2.5.4",
     "@vercel/node": "1.9.0",
     "typescript": "3.9.6"

errors/deployment-error.md

@@ -0,0 +1,13 @@
+# Deployment failed
+
+## Why This Error Occurred
+
+When deploying this project, there was not a successful deployment into the `READY` state.
+
+## How to Fix It
+
+This is a generic error to catch problems in the deployment. The error is likely to vary depending on the deployment and the conditions at the time.
+
+Try looking in the logs for information about the deployment and the failure, this could be done at (vercel.com)[https://vercel.com]. You can also use the `vc logs` command to display the build logs for the deployment.
+
+This might not be a permanent error and retrying the deployment might also resolve it.

examples/astro/.gitignore

@@ -18,3 +18,4 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+.vercel

examples/astro/.vercelignore

@@ -1 +0,0 @@
-README.md

examples/astro/README.md

@@ -1,10 +1,16 @@
-# Welcome to [Astro](https://astro.build)
+# Astro
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/starter)
+This directory is a brief example of an [Astro](https://astro.build/) site that can be deployed to Vercel with zero configuration.
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+## Deploy Your Own
 
-## 🚀 Project Structure
+Deploy your own Astro project with Vercel.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/astro&template=astro)
+
+_Live Example: https://astro-template.vercel.app_
+
+## Project Structure
 
 Inside of your Astro project, you'll see the following folders and files:
 
@@ -26,17 +32,15 @@ There's nothing special about `src/components/`, but that's where we like to put
 
 Any static assets, like images, can be placed in the `public/` directory.
 
-## 🧞 Commands
+## Commands
 
 All commands are run from the root of the project, from a terminal:
 
-| Command           | Action                                       |
-| :---------------- | :------------------------------------------- |
-| `npm install`     | Installs dependencies                        |
-| `npm run dev`     | Starts local dev server at `localhost:3000`  |
-| `npm run build`   | Build your production site to `./dist/`      |
-| `npm run preview` | Preview your build locally, before deploying |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).
+| Command                | Action                                             |
+| :--------------------- | :------------------------------------------------- |
+| `npm install`          | Installs dependencies                              |
+| `npm run dev`          | Starts local dev server at `localhost:3000`        |
+| `npm run build`        | Build your production site to `./dist/`            |
+| `npm run preview`      | Preview your build locally, before deploying       |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
+| `npm run astro --help` | Get help using the Astro CLI                       |

examples/astro/package.json

@@ -1,14 +1,14 @@
 {
-  "name": "@example/basics",
-  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
-    "preview": "astro preview"
+    "preview": "astro preview",
+    "astro": "astro"
   },
   "devDependencies": {
-    "astro": "^1.0.0-beta.20"
+    "astro": "^1.0.0-rc.8",
+    "web-vitals": "^3.0.0"
   }
 }

examples/astro/src/components/Card.astro

@@ -0,0 +1,76 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props as Props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	:root {
+		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
+	}
+
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-image: var(--link-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1em 1.3em;
+		border-radius: 0.35rem;
+		color: var(--text-color);
+		background-color: white;
+		opacity: 0.8;
+	}
+
+	h2 {
+		margin: 0;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	p {
+		margin-top: 0.75rem;
+		margin-bottom: 0;
+	}
+
+	h2 span {
+		display: inline-block;
+		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 {
+		color: #4f39fa;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 span {
+		will-change: transform;
+		transform: translateX(2px);
+	}
+</style>

examples/astro/src/components/Layout.astro

@@ -1,55 +0,0 @@
----
-export interface Props {
-	title: string;
-}
-
-const { title } = Astro.props as Props;
----
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width">
-  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-	<title>{title}</title>
-</head>
-<body>
-	<slot />
-</body>
-</html>
-
-<style>
-  :root {
-    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
-		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); 
-    --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
-
-    --color-text: hsl(12, 5%, 4%);
-    --color-bg: hsl(10, 21%, 95%);
-  }
-
-  html {
-    font-family: system-ui, sans-serif;
-    font-size: var(--font-size-base);
-    color: var(--color-text);
-    background-color: var(--color-bg);
-  }
-
-  body {
-    margin: 0;
-  }
-
-  :global(h1) {
-    font-size: var(--font-size-xl);
-  }
-
-  :global(h2) {
-    font-size: var(--font-size-lg);
-  }
-
-  :global(code) {
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
-  }
-</style>

examples/astro/src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+	readonly PUBLIC_VERCEL_ANALYTICS_ID: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

examples/astro/src/layouts/Layout.astro

@@ -0,0 +1,69 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+		<script>
+			import { webVitals } from "../lib/vitals";
+
+			let analyticsId = import.meta.env.PUBLIC_VERCEL_ANALYTICS_ID;
+
+			if (analyticsId) {
+				webVitals({
+					path: location.pathname,
+					params: location.search,
+					analyticsId,
+				});
+			}
+		</script>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style>
+	:root {
+		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
+		--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+
+		--color-text: hsl(12, 5%, 4%);
+		--color-bg: hsl(10, 21%, 95%);
+		--color-border: hsl(17, 24%, 90%);
+	}
+
+	html {
+		font-family: system-ui, sans-serif;
+		font-size: var(--font-size-base);
+		color: var(--color-text);
+		background-color: var(--color-bg);
+	}
+
+	body {
+		margin: 0;
+	}
+
+	:global(h1) {
+		font-size: var(--font-size-xl);
+	}
+
+	:global(h2) {
+		font-size: var(--font-size-lg);
+	}
+
+	:global(code) {
+		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+	}
+</style>

examples/astro/src/lib/vitals.js

@@ -0,0 +1,66 @@
+import { onCLS, onFCP, onFID, onLCP, onTTFB } from "web-vitals";
+
+const vitalsUrl = "https://vitals.vercel-analytics.com/v1/vitals";
+
+function getConnectionSpeed() {
+	return "connection" in navigator &&
+		navigator["connection"] &&
+		"effectiveType" in navigator["connection"]
+		? // @ts-ignore
+			navigator["connection"]["effectiveType"]
+		: "";
+}
+
+/**
+ * @param {import("web-vitals").Metric} metric
+ * @param {{ params: { [s: string]: any; } | ArrayLike<any>; path: string; analyticsId: string; debug: boolean; }} options
+ */
+export function sendToAnalytics(metric, options) {
+	const page = Object.entries(options.params).reduce(
+		(acc, [key, value]) => acc.replace(value, `[${key}]`),
+		options.path
+	);
+
+	const body = {
+		dsn: options.analyticsId,
+		id: metric.id,
+		page,
+		href: location.href,
+		event_name: metric.name,
+		value: metric.value.toString(),
+		speed: getConnectionSpeed(),
+	};
+
+	if (options.debug) {
+		console.log("[Analytics]", metric.name, JSON.stringify(body, null, 2));
+	}
+
+	const blob = new Blob([new URLSearchParams(body).toString()], {
+		// This content type is necessary for `sendBeacon`
+		type: "application/x-www-form-urlencoded",
+	});
+	if (navigator.sendBeacon) {
+		navigator.sendBeacon(vitalsUrl, blob);
+	} else
+		fetch(vitalsUrl, {
+			body: blob,
+			method: "POST",
+			credentials: "omit",
+			keepalive: true,
+		});
+}
+
+/**
+ * @param {any} options
+ */
+export function webVitals(options) {
+	try {
+		onFID((metric) => sendToAnalytics(metric, options));
+		onTTFB((metric) => sendToAnalytics(metric, options));
+		onLCP((metric) => sendToAnalytics(metric, options));
+		onCLS((metric) => sendToAnalytics(metric, options));
+		onFCP((metric) => sendToAnalytics(metric, options));
+	} catch (err) {
+		console.error("[Analytics]", err);
+	}
+}

examples/astro/src/pages/index.astro

@@ -1,81 +1,52 @@
 ---
-import Layout from '../components/Layout.astro';
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
 ---
 
 <Layout title="Welcome to Astro.">
 	<main>
 		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-		<p class="instructions"><strong>Your first mission:</strong> tweak this message to try our hot module reloading. Check the <code>src/pages</code> directory!</p>
+		<p class="instructions">
+			Check out the <code>src/pages</code> directory to get started.<br />
+			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+		</p>
 		<ul role="list" class="link-card-grid">
-			<li class="link-card">
-				<a href="https://astro.build/integrations/">
-					<h2>Integrations <span>&rarr;</span></h2>
-					<p>Add component frameworks, Tailwind, Partytown, and more!</p>
-				</a>
-			</li>
-			<li class="link-card">
-				<a href="https://astro.build/themes/">
-					<h2>Themes <span>&rarr;</span></h2>
-					<p>Explore a galaxy of community-built starters.</p>
-				</a>
-			</li>
-			<li class="link-card">
-				<a href="https://docs.astro.build/">
-					<h2>Docs <span>&rarr;</span></h2>
-					<p>Learn our complete feature set and explore the API.</p>
-				</a>
-			</li>
-			<li class="link-card">
-				<a href="https://astro.build/chat/">
-					<h2>Chat <span>&rarr;</span></h2>
-					<p>
-						Ask, contribute, and have fun on our community Discord
-						<svg
-							class="heart"
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 512 512"
-							width="16"
-							height="16"
-							fill="currentColor"
-						>
-							<title>heart</title>
-							<path d="M256 448l-30.164-27.211C118.718 322.442 48 258.61 48 179.095 48 114.221 97.918 64 162.4 64c36.399 0 70.717 16.742 93.6 43.947C278.882 80.742 313.199 64 349.6 64 414.082 64 464 114.221 464 179.095c0 79.516-70.719 143.348-177.836 241.694L256 448z" />
-						</svg>
-					</p>
-				</a>
-			</li>
+			<Card
+				href="https://docs.astro.build/"
+				title="Documentation"
+				body="Learn how Astro works and explore the official API docs."
+			/>
+			<Card
+				href="https://astro.build/integrations/"
+				title="Integrations"
+				body="Supercharge your project with new frameworks and libraries."
+			/>
+			<Card
+				href="https://astro.build/themes/"
+				title="Themes"
+				body="Explore a galaxy of community-built starter themes."
+			/>
+			<Card
+				href="https://astro.build/chat/"
+				title="Chat"
+				body="Come say hi to our amazing Discord community. ❤️"
+			/>
 		</ul>
 	</main>
 </Layout>
 
 <style>
 	:root {
-		--color-border: hsl(17, 24%, 90%);
-		--astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4);
-		--link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%);
-		--night-sky-gradient: linear-gradient(0deg, #392362 -33%, #431f69 10%, #30216b 50%, #1f1638 100%);
+		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
 	}
 
-	h2 {
-		margin: 0;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-
-	h2 span {
-		display: inline-block;
-		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-
-	code {
-		font-size: 0.875em;
-		border: 0.1em solid var(--color-border);
-		border-radius: 4px;
-		padding: 0.15em 0.25em;
+	h1 {
+		margin: 2rem 0;
 	}
 
 	main {
 		margin: auto;
-    padding: 1em;
+		padding: 1em;
 		max-width: 60ch;
 	}
 
@@ -83,7 +54,7 @@ import Layout from '../components/Layout.astro';
 		font-weight: 900;
 		background-image: var(--astro-gradient);
 		-webkit-background-clip: text;
-  	-webkit-text-fill-color: transparent;
+		-webkit-text-fill-color: transparent;
 		background-size: 100% 200%;
 		background-position-y: 100%;
 		border-radius: 0.4rem;
@@ -91,7 +62,8 @@ import Layout from '../components/Layout.astro';
 	}
 
 	@keyframes pulse {
-		0%, 100% {
+		0%,
+		100% {
 			background-position-y: 0%;
 		}
 		50% {
@@ -100,75 +72,25 @@ import Layout from '../components/Layout.astro';
 	}
 
 	.instructions {
-		line-height: 1.8;
-		margin-bottom: 2rem;
-		background-image: var(--night-sky-gradient);
-		padding: 1.5rem;
+		line-height: 1.6;
+		margin: 1rem 0;
+		background: #4f39fa;
+		padding: 1rem;
 		border-radius: 0.4rem;
 		color: var(--color-bg);
 	}
 
+	.instructions code {
+		font-size: 0.875em;
+		border: 0.1em solid var(--color-border);
+		border-radius: 4px;
+		padding: 0.15em 0.25em;
+	}
+
 	.link-card-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
 		gap: 1rem;
 		padding: 0;
 	}
-
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.15rem;
-		background-image: var(--link-gradient);
-		background-size: 400%;
-		border-radius: 0.5rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1em 1.3em;
-		border-radius: 0.35rem;
-		color: var(--text-color);
-		background-color: white;
-		opacity: 0.8;
-	}
-
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-	}
-
-	.link-card:is(:hover, :focus-within) h2 {
-		color: #4F39FA;
-	}
-
-	.link-card:is(:hover, :focus-within) h2 span {
-		transform: translateX(2px);
-	}
-
-	.heart {
-		display: inline-block;
-		color: #DA62C4;
-		animation: heartbeat 3s ease-in-out infinite;
-	}
-
-	@keyframes heartbeat {
-		0%,
-		50%,
-		100% {
-			transform: scale(1);
-		}
-		5% {
-			transform: scale(1.125);
-		}
-		10% {
-			transform: scale(1.05);
-		}
-		15% {
-			transform: scale(1.25);
-		}
-	}
 </style>

examples/astro/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    // Enable top-level await, and other modern ESM features.
-    "target": "ESNext",
-    "module": "ESNext",
-    // Enable node-style module resolution, for things like npm package imports.
-    "moduleResolution": "node",
-    // Enable JSON imports.
-    "resolveJsonModule": true,
-    // Enable stricter transpilation for better output.
-    "isolatedModules": true,
-    // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
-  }
-}

examples/nextjs/.gitignore

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

examples/nextjs/package.json

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

examples/nextjs/pages/index.js

@@ -42,6 +42,8 @@ export default function Home() {
 
           <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>

examples/nextjs/styles/Home.module.css

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

examples/nextjs/styles/globals.css

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

examples/remix/README.md

@@ -8,6 +8,13 @@ This directory is a brief example of a [Remix](https://remix.run/docs) site that
 
 _Live Example: https://remix-run-template.vercel.app_
 
+You can also deploy using the [Vercel CLI](https://vercel.com/cli):
+
+```sh
+npm i -g vercel
+vercel
+```
+
 ## Development
 
 To run your Remix app locally, make sure your project's local dependencies are installed:
@@ -23,5 +30,3 @@ npm run dev
 ```
 
 Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
-
-If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.

examples/remix/app/entry.client.tsx

@@ -1,4 +1,22 @@
 import { RemixBrowser } from "@remix-run/react";
-import { hydrate } from "react-dom";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
 
-hydrate(<RemixBrowser />, document);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+}
+
+if (window.requestIdleCallback) {
+  window.requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  window.setTimeout(hydrate, 1);
+}

examples/remix/app/entry.server.tsx

@@ -8,14 +8,14 @@ export default function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  let markup = renderToString(
+  const markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
 
   responseHeaders.set("Content-Type", "text/html");
 
   return new Response("<!DOCTYPE html>" + markup, {
-    status: responseStatusCode,
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }

examples/remix/app/root.tsx

@@ -1,182 +1,34 @@
-import type { LinksFunction, MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import {
-  Link,
   Links,
   LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-  useCatch,
 } from "@remix-run/react";
+import { Analytics } from '@vercel/analytics/react';
 
-import darkStylesUrl from "~/styles/dark.css";
-import globalStylesUrl from "~/styles/global.css";
-
-// https://remix.run/api/conventions#links
-export let links: LinksFunction = () => {
-  return [
-    { rel: "stylesheet", href: globalStylesUrl },
-    {
-      rel: "stylesheet",
-      href: darkStylesUrl,
-      media: "(prefers-color-scheme: dark)"
-    }
-  ];
-};
-
-// https://remix.run/api/conventions#meta
-export let meta: MetaFunction = () => ({
+export const meta: MetaFunction = () => ({
   charset: "utf-8",
+  title: "New Remix App",
   viewport: "width=device-width,initial-scale=1",
 });
 
-// https://remix.run/api/conventions#default-export
-// https://remix.run/api/conventions#route-filenames
 export default function App() {
-  return (
-    <Document>
-      <Layout>
-        <Outlet />
-      </Layout>
-    </Document>
-  );
-}
-
-// https://remix.run/api/conventions#errorboundary
-export function ErrorBoundary({ error }: { error: Error }) {
-  console.error(error);
-  return (
-    <Document title="Error!">
-      <Layout>
-        <div>
-          <h1>There was an error</h1>
-          <p>{error.message}</p>
-          <hr />
-          <p>
-            Hey, developer, you should replace this with what you want your
-            users to see.
-          </p>
-        </div>
-      </Layout>
-    </Document>
-  );
-}
-
-// https://remix.run/api/conventions#catchboundary
-export function CatchBoundary() {
-  let caught = useCatch();
-
-  let message;
-  switch (caught.status) {
-    case 401:
-      message = (
-        <p>
-          Oops! Looks like you tried to visit a page that you do not have access
-          to.
-        </p>
-      );
-      break;
-    case 404:
-      message = (
-        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
-      );
-      break;
-
-    default:
-      throw new Error(caught.data || caught.statusText);
-  }
-
-  return (
-    <Document title={`${caught.status} ${caught.statusText}`}>
-      <Layout>
-        <h1>
-          {caught.status}: {caught.statusText}
-        </h1>
-        {message}
-      </Layout>
-    </Document>
-  );
-}
-
-function Document({
-  children,
-  title
-}: {
-  children: React.ReactNode;
-  title?: string;
-}) {
   return (
     <html lang="en">
       <head>
-        {title ? <title>{title}</title> : null}
         <Meta />
         <Links />
       </head>
       <body>
-        {children}
+        <Outlet />
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
+        <Analytics />
       </body>
     </html>
   );
 }
-
-function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="remix-app">
-      <header className="remix-app__header">
-        <div className="container remix-app__header-content">
-          <Link to="/" title="Remix" className="remix-app__header-home-link">
-            <RemixLogo />
-          </Link>
-          <nav aria-label="Main navigation" className="remix-app__header-nav">
-            <ul>
-              <li>
-                <Link to="/">Home</Link>
-              </li>
-              <li>
-                <a href="https://remix.run/docs">Remix Docs</a>
-              </li>
-              <li>
-                <a href="https://github.com/remix-run/remix">GitHub</a>
-              </li>
-            </ul>
-          </nav>
-        </div>
-      </header>
-      <div className="remix-app__main">
-        <div className="container remix-app__main-content">{children}</div>
-      </div>
-      <footer className="remix-app__footer">
-        <div className="container remix-app__footer-content">
-          <p>&copy; You!</p>
-        </div>
-      </footer>
-    </div>
-  );
-}
-
-function RemixLogo() {
-  return (
-    <svg
-      viewBox="0 0 659 165"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      aria-labelledby="remix-run-logo-title"
-      role="img"
-      width="106"
-      height="30"
-      fill="currentColor"
-    >
-      <title id="remix-run-logo-title">Remix Logo</title>
-      <path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" />
-      <path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" />
-      <path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" />
-      <path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" />
-      <path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" />
-    </svg>
-  );
-}

examples/remix/app/routes/demos/about.tsx

@@ -1,44 +0,0 @@
-import type { MetaFunction, LinksFunction } from "@remix-run/node";
-import { Outlet } from "@remix-run/react";
-
-import stylesUrl from "~/styles/demos/about.css";
-
-export let meta: MetaFunction = () => {
-  return {
-    title: "About Remix"
-  };
-};
-
-export let links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: stylesUrl }];
-};
-
-export default function Index() {
-  return (
-    <div className="about">
-      <div className="about__intro">
-        <h2>About Us</h2>
-        <p>
-          Ok, so this page isn't really <em>about us</em>, but we did want to
-          show you a few more things Remix can do.
-        </p>
-        <p>
-          Did you notice that things look a little different on this page? The
-          CSS that we import in the route file and include in its{" "}
-          <code>links</code> export is only included on this route and its
-          children.
-        </p>
-        <p>
-          Wait a sec...<em>its children</em>? To understand what we mean by
-          this,{" "}
-          <a href="https://remix.run/docs/en/v1/guides/routing">
-            read all about nested routes in the docs
-          </a>
-          .
-        </p>
-        <hr />
-        <Outlet />
-      </div>
-    </div>
-  );
-}

examples/remix/app/routes/demos/about/index.tsx

@@ -1,17 +0,0 @@
-import { Link } from "@remix-run/react";
-
-export default function AboutIndex() {
-  return (
-    <div>
-      <p>
-        You are looking at the index route for the <code>/about</code> URL
-        segment, but there are nested routes as well!
-      </p>
-      <p>
-        <strong>
-          <Link to="whoa">Check out one of them here.</Link>
-        </strong>
-      </p>
-    </div>
-  );
-}

examples/remix/app/routes/demos/about/whoa.tsx

@@ -1,20 +0,0 @@
-import { Link } from "@remix-run/react";
-
-export default function AboutIndex() {
-  return (
-    <div>
-      <p>
-        Whoa, this is a nested route! We render the <code>/about</code> layout
-        route component, and its <code>Outlet</code> renders our route
-        component. 🤯
-      </p>
-      <p>
-        <strong>
-          <Link to="..">
-            Go back to the <code>/about</code> index.
-          </Link>
-        </strong>
-      </p>
-    </div>
-  );
-}

examples/remix/app/routes/demos/actions.tsx

@@ -1,102 +0,0 @@
-import type { ActionFunction } from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
-import { Form, useActionData } from "@remix-run/react";
-import { useEffect, useRef } from "react";
-
-export function meta() {
-  return { title: "Actions Demo" };
-}
-
-// When your form sends a POST, the action is called on the server.
-// - https://remix.run/api/conventions#action
-// - https://remix.run/guides/data-updates
-export let action: ActionFunction = async ({ request }) => {
-  let formData = await request.formData();
-  let answer = formData.get("answer");
-
-  // Typical action workflows start with validating the form data that just came
-  // over the network. Clientside validation is fine, but you definitely need it
-  // server side.  If there's a problem, return the the data and the component
-  // can render it.
-  if (typeof answer !== "string") {
-    return json("Come on, at least try!", { status: 400 });
-  }
-
-  if (answer !== "egg") {
-    return json(`Sorry, ${answer} is not right.`, { status: 400 });
-  }
-
-  // Finally, if the data is valid, you'll typically write to a database or send or
-  // email or log the user in, etc. It's recommended to redirect after a
-  // successful action, even if it's to the same place so that non-JavaScript workflows
-  // from the browser doesn't repost the data if the user clicks back.
-  return redirect("/demos/correct");
-};
-
-export default function ActionsDemo() {
-  // https://remix.run/api/remix#useactiondata
-  let actionMessage = useActionData<string>();
-  let answerRef = useRef<HTMLInputElement>(null);
-
-  // This form works without JavaScript, but when we have JavaScript we can make
-  // the experience better by selecting the input on wrong answers! Go ahead, disable
-  // JavaScript in your browser and see what happens.
-  useEffect(() => {
-    if (actionMessage && answerRef.current) {
-      answerRef.current.select();
-    }
-  }, [actionMessage]);
-
-  return (
-    <div className="remix__page">
-      <main>
-        <h2>Actions!</h2>
-        <p>
-          This form submission will send a post request that we handle in our
-          `action` export. Any route can export an action to handle data
-          mutations.
-        </p>
-        <Form method="post" className="remix__form">
-          <h3>Post an Action</h3>
-          <p>
-            <i>What is more useful when it is broken?</i>
-          </p>
-          <label>
-            <div>Answer:</div>
-            <input ref={answerRef} name="answer" type="text" />
-          </label>
-          <div>
-            <button>Answer!</button>
-          </div>
-          {actionMessage ? (
-            <p>
-              <b>{actionMessage}</b>
-            </p>
-          ) : null}
-        </Form>
-      </main>
-
-      <aside>
-        <h3>Additional Resources</h3>
-        <ul>
-          <li>
-            Guide:{" "}
-            <a href="https://remix.run/guides/data-writes">Data Writes</a>
-          </li>
-          <li>
-            API:{" "}
-            <a href="https://remix.run/api/conventions#action">
-              Route Action Export
-            </a>
-          </li>
-          <li>
-            API:{" "}
-            <a href="https://remix.run/api/remix#useactiondata">
-              <code>useActionData</code>
-            </a>
-          </li>
-        </ul>
-      </aside>
-    </div>
-  );
-}

examples/remix/app/routes/demos/correct.tsx

@@ -1,3 +0,0 @@
-export default function NiceWork() {
-  return <h1>You got it right!</h1>;
-}

examples/remix/app/routes/demos/params.tsx

@@ -1,43 +0,0 @@
-import type { MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { Link, Outlet, useCatch, useLoaderData } from "@remix-run/react";
-
-export let meta: MetaFunction = () => ({ title: "Boundaries Demo" });
-
-export default function Boundaries() {
-  return (
-    <div className="remix__page">
-      <main>
-        <Outlet />
-      </main>
-
-      <aside>
-        <h2>Click these Links</h2>
-        <ul>
-          <li>
-            <Link to=".">Start over</Link>
-          </li>
-          <li>
-            <Link to="one">
-              Param: <i>one</i>
-            </Link>
-          </li>
-          <li>
-            <Link to="two">
-              Param: <i>two</i>
-            </Link>
-          </li>
-          <li>
-            <Link to="this-record-does-not-exist">This will be a 404</Link>
-          </li>
-          <li>
-            <Link to="shh-its-a-secret">And this will be 401 Unauthorized</Link>
-          </li>
-          <li>
-            <Link to="kaboom">This one will throw an error</Link>
-          </li>
-        </ul>
-      </aside>
-    </div>
-  );
-}

examples/remix/app/routes/demos/params/$id.tsx

@@ -1,111 +0,0 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { Link, useCatch, useLoaderData } from "@remix-run/react";
-
-// The `$` in route filenames becomes a pattern that's parsed from the URL and
-// passed to your loaders so you can look up data.
-// - https://remix.run/api/conventions#loader-params
-export let loader: LoaderFunction = async ({ params }) => {
-  // pretend like we're using params.id to look something up in the db
-
-  if (params.id === "this-record-does-not-exist") {
-    // If the record doesn't exist we can't render the route normally, so
-    // instead we throw a 404 reponse to stop running code here and show the
-    // user the catch boundary.
-    throw new Response("Not Found", { status: 404 });
-  }
-
-  // now pretend like the record exists but the user just isn't authorized to
-  // see it.
-  if (params.id === "shh-its-a-secret") {
-    // Again, we can't render the component if the user isn't authorized. You
-    // can even put data in the response that might help the user rectify the
-    // issue! Like emailing the webmaster for access to the page. (Oh, right,
-    // `json` is just a Response helper that makes it easier to send JSON
-    // responses).
-    throw json({ webmasterEmail: "hello@remix.run" }, { status: 401 });
-  }
-
-  // Sometimes your code just blows up and you never anticipated it. Remix will
-  // automatically catch it and send the UI to the error boundary.
-  if (params.id === "kaboom") {
-    lol();
-  }
-
-  // but otherwise the record was found, user has access, so we can do whatever
-  // else we needed to in the loader and return the data. (This is boring, we're
-  // just gonna return the params.id).
-  return { param: params.id };
-};
-
-export default function ParamDemo() {
-  let data = useLoaderData();
-  return (
-    <h1>
-      The param is <i style={{ color: "red" }}>{data.param}</i>
-    </h1>
-  );
-}
-
-// https://remix.run/api/conventions#catchboundary
-// https://remix.run/api/remix#usecatch
-// https://remix.run/api/guides/not-found
-export function CatchBoundary() {
-  let caught = useCatch();
-
-  let message: React.ReactNode;
-  switch (caught.status) {
-    case 401:
-      message = (
-        <p>
-          Looks like you tried to visit a page that you do not have access to.
-          Maybe ask the webmaster ({caught.data.webmasterEmail}) for access.
-        </p>
-      );
-    case 404:
-      message = (
-        <p>Looks like you tried to visit a page that does not exist.</p>
-      );
-    default:
-      message = (
-        <p>
-          There was a problem with your request!
-          <br />
-          {caught.status} {caught.statusText}
-        </p>
-      );
-  }
-
-  return (
-    <>
-      <h2>Oops!</h2>
-      <p>{message}</p>
-      <p>
-        (Isn't it cool that the user gets to stay in context and try a different
-        link in the parts of the UI that didn't blow up?)
-      </p>
-    </>
-  );
-}
-
-// https://remix.run/api/conventions#errorboundary
-// https://remix.run/api/guides/not-found
-export function ErrorBoundary({ error }: { error: Error }) {
-  console.error(error);
-  return (
-    <>
-      <h2>Error!</h2>
-      <p>{error.message}</p>
-      <p>
-        (Isn't it cool that the user gets to stay in context and try a different
-        link in the parts of the UI that didn't blow up?)
-      </p>
-    </>
-  );
-}
-
-export let meta: MetaFunction = ({ data }) => {
-  return {
-    title: data ? `Param: ${data.param}` : "Oops...",
-  };
-};

examples/remix/app/routes/demos/params/index.tsx

@@ -1,41 +0,0 @@
-import type { LoaderFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { Link, Outlet, useCatch, useLoaderData } from "@remix-run/react";
-
-export default function Boundaries() {
-  return (
-    <>
-      <h2>Params</h2>
-      <p>
-        When you name a route segment with $ like{" "}
-        <code>routes/users/$userId.js</code>, the $ segment will be parsed from
-        the URL and sent to your loaders and actions by the same name.
-      </p>
-      <h2>Errors</h2>
-      <p>
-        When a route throws and error in it's action, loader, or component,
-        Remix automatically catches it, won't even try to render the component,
-        but it will render the route's ErrorBoundary instead. If the route
-        doesn't have one, it will bubble up to the routes above it until it hits
-        the root.
-      </p>
-      <p>So be as granular as you want with your error handling.</p>
-      <h2>Not Found</h2>
-      <p>
-        (and other{" "}
-        <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses">
-          client errors
-        </a>
-        )
-      </p>
-      <p>
-        Loaders and Actions can throw a <code>Response</code> instead of an
-        error and Remix will render the CatchBoundary instead of the component.
-        This is great when loading data from a database isn't found. As soon as
-        you know you can't render the component normally, throw a 404 response
-        and send your app into the catch boundary. Just like error boundaries,
-        catch boundaries bubble, too.
-      </p>
-    </>
-  );
-}

examples/remix/app/routes/index.tsx

@@ -1,101 +1,32 @@
-import type { MetaFunction, LoaderFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
-
-type IndexData = {
-  resources: Array<{ name: string; url: string }>;
-  demos: Array<{ name: string; to: string }>;
-};
-
-// Loaders provide data to components and are only ever called on the server, so
-// you can connect to a database or run any server side code you want right next
-// to the component that renders it.
-// https://remix.run/api/conventions#loader
-export let loader: LoaderFunction = () => {
-  let data: IndexData = {
-    resources: [
-      {
-        name: "Remix Docs",
-        url: "https://remix.run/docs"
-      },
-      {
-        name: "React Router Docs",
-        url: "https://reactrouter.com/docs"
-      },
-      {
-        name: "Remix Discord",
-        url: "https://discord.gg/VBePs6d"
-      }
-    ],
-    demos: [
-      {
-        to: "demos/actions",
-        name: "Actions"
-      },
-      {
-        to: "demos/about",
-        name: "Nested Routes, CSS loading/unloading"
-      },
-      {
-        to: "demos/params",
-        name: "URL Params and Error Boundaries"
-      }
-    ]
-  };
-
-  // https://remix.run/api/remix#json
-  return json(data);
-};
-
-// https://remix.run/api/conventions#meta
-export let meta: MetaFunction = () => {
-  return {
-    title: "Remix Starter",
-    description: "Welcome to remix!"
-  };
-};
-
-// https://remix.run/guides/routing#index-routes
 export default function Index() {
-  let data = useLoaderData<IndexData>();
-
   return (
-    <div className="remix__page">
-      <main>
-        <h2>Welcome to Remix!</h2>
-        <p>We're stoked that you're here. 🥳</p>
-        <p>
-          Feel free to take a look around the code to see how Remix does things,
-          it might be a bit different than what you’re used to. When you're
-          ready to dive deeper, we've got plenty of resources to get you
-          up-and-running quickly.
-        </p>
-        <p>
-          Check out all the demos in this starter, and then just delete the{" "}
-          <code>app/routes/demos</code> and <code>app/styles/demos</code>{" "}
-          folders when you're ready to turn this into your next project.
-        </p>
-      </main>
-      <aside>
-        <h2>Demos In This App</h2>
-        <ul>
-          {data.demos.map(demo => (
-            <li key={demo.to} className="remix__page__resource">
-              <Link to={demo.to} prefetch="intent">
-                {demo.name}
-              </Link>
-            </li>
-          ))}
-        </ul>
-        <h2>Resources</h2>
-        <ul>
-          {data.resources.map(resource => (
-            <li key={resource.url} className="remix__page__resource">
-              <a href={resource.url}>{resource.name}</a>
-            </li>
-          ))}
-        </ul>
-      </aside>
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+      <h1>Welcome to Remix</h1>
+      <ul>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/blog"
+            rel="noreferrer"
+          >
+            15m Quickstart Blog Tutorial
+          </a>
+        </li>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/jokes"
+            rel="noreferrer"
+          >
+            Deep Dive Jokes App Tutorial
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
+            Remix Docs
+          </a>
+        </li>
+      </ul>
     </div>
   );
 }

examples/remix/app/styles/dark.css

@@ -1,7 +0,0 @@
-:root {
-  --color-foreground: hsl(0, 0%, 100%);
-  --color-background: hsl(0, 0%, 7%);
-  --color-links: hsl(213, 100%, 73%);
-  --color-links-hover: hsl(213, 100%, 80%);
-  --color-border: hsl(0, 0%, 25%);
-}

examples/remix/app/styles/demos/about.css

@@ -1,26 +0,0 @@
-/*
- * Whoa whoa whoa, wait a sec...why are we overriding global CSS selectors?
- * Isn't that kind of scary? How do we know this won't have side effects?
- *
- * In Remix, CSS that is included in a route file will *only* show up on that
- * route (and for nested routes, its children). When the user navigates away
- * from that route the CSS files linked from those routes will be automatically
- * unloaded, making your styles much easier to predict and control.
- *
- * Read more about styling routes in the docs:
- * https://remix.run/guides/styling
- */
-
-:root {
-  --color-foreground: hsl(0, 0%, 7%);
-  --color-background: hsl(56, 100%, 50%);
-  --color-links: hsl(345, 56%, 39%);
-  --color-links-hover: hsl(345, 51%, 49%);
-  --color-border: rgb(184, 173, 20);
-  --font-body: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    Liberation Mono, Courier New, monospace;
-}
-
-.about__intro {
-  max-width: 500px;
-}

examples/remix/app/styles/global.css

@@ -1,216 +0,0 @@
-/*
- * You can just delete everything here or keep whatever you like, it's just a
- * quick baseline!
- */
-:root {
-  --color-foreground: hsl(0, 0%, 7%);
-  --color-background: hsl(0, 0%, 100%);
-  --color-links: hsl(213, 100%, 52%);
-  --color-links-hover: hsl(213, 100%, 43%);
-  --color-border: hsl(0, 0%, 82%);
-  --font-body: -apple-system, "Segoe UI", Helvetica Neue, Helvetica, Roboto,
-    Arial, sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji";
-}
-
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-:-moz-focusring {
-  outline: auto;
-}
-
-:focus {
-  outline: var(--color-links) solid 2px;
-  outline-offset: 2px;
-}
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-}
-
-body {
-  font-family: var(--font-body);
-  line-height: 1.5;
-}
-
-a {
-  color: var(--color-links);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--color-links-hover);
-  text-decoration: underline;
-}
-
-hr {
-  display: block;
-  height: 1px;
-  border: 0;
-  background-color: var(--color-border);
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-input:where([type="text"]),
-input:where([type="search"]) {
-  display: block;
-  border: 1px solid var(--color-border);
-  width: 100%;
-  font: inherit;
-  line-height: 1;
-  height: calc(1ch + 1.5em);
-  padding-right: 0.5em;
-  padding-left: 0.5em;
-  background-color: hsl(0 0% 100% / 20%);
-  color: var(--color-foreground);
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.container {
-  --gutter: 16px;
-  width: 1024px;
-  max-width: calc(100% - var(--gutter) * 2);
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.remix-app {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  min-height: calc(100vh - env(safe-area-inset-bottom));
-}
-
-.remix-app > * {
-  width: 100%;
-}
-
-.remix-app__header {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.remix-app__header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.remix-app__header-home-link {
-  width: 106px;
-  height: 30px;
-  color: var(--color-foreground);
-}
-
-.remix-app__header-nav ul {
-  list-style: none;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 1.5em;
-}
-
-.remix-app__header-nav li {
-  font-weight: bold;
-}
-
-.remix-app__main {
-  flex: 1 1 100%;
-}
-
-.remix-app__footer {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  border-top: 1px solid var(--color-border);
-}
-
-.remix-app__footer-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.remix__page {
-  --gap: 1rem;
-  --space: 2rem;
-  display: grid;
-  grid-auto-rows: min-content;
-  gap: var(--gap);
-  padding-top: var(--space);
-  padding-bottom: var(--space);
-}
-
-@media print, screen and (min-width: 640px) {
-  .remix__page {
-    --gap: 2rem;
-    grid-auto-rows: unset;
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .remix__page {
-    --gap: 4rem;
-  }
-}
-
-.remix__page > main > :first-child {
-  margin-top: 0;
-}
-
-.remix__page > main > :last-child {
-  margin-bottom: 0;
-}
-
-.remix__page > aside {
-  margin: 0;
-  padding: 1.5ch 2ch;
-  border: solid 1px var(--color-border);
-  border-radius: 0.5rem;
-}
-
-.remix__page > aside > :first-child {
-  margin-top: 0;
-}
-
-.remix__page > aside > :last-child {
-  margin-bottom: 0;
-}
-
-.remix__form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-}
-
-.remix__form > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}

examples/remix/package.json

@@ -6,21 +6,22 @@
     "dev": "remix dev"
   },
   "dependencies": {
-    "@remix-run/node": "^1.5.1",
-    "@remix-run/react": "^1.5.1",
-    "@remix-run/vercel": "^1.5.1",
-    "@vercel/node": "^2.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@remix-run/node": "^1.7.5",
+    "@remix-run/react": "^1.7.5",
+    "@remix-run/vercel": "^1.7.5",
+    "@vercel/analytics": "^0.1.3",
+    "@vercel/node": "^2.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.5.1",
-    "@remix-run/eslint-config": "^1.5.1",
-    "@remix-run/serve": "^1.5.1",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
-    "eslint": "^8.15.0",
-    "typescript": "^4.6.4"
+    "@remix-run/dev": "^1.7.5",
+    "@remix-run/eslint-config": "^1.7.5",
+    "@remix-run/serve": "^1.7.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "eslint": "^8.23.1",
+    "typescript": "^4.7.4"
   },
   "engines": {
     "node": ">=14"

examples/remix/remix.config.js

@@ -1,6 +1,4 @@
-/**
- * @type {import('@remix-run/dev').AppConfig}
- */
+/** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
   serverBuildTarget: "vercel",
   // When running locally in development mode, we use the built in remix

examples/remix/remix.env.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node/globals" />
+/// <reference types="@remix-run/node" />

examples/remix/server.js

@@ -1,4 +1,4 @@
-import * as build from "@remix-run/dev/server-build";
 import { createRequestHandler } from "@remix-run/vercel";
+import * as build from "@remix-run/dev/server-build";
 
 export default createRequestHandler({ build, mode: process.env.NODE_ENV });

examples/remix/tsconfig.json

@@ -2,12 +2,16 @@
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "target": "ES2019",
     "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },

examples/solidstart/package.json

@@ -7,12 +7,16 @@
   "type": "module",
   "private": true,
   "devDependencies": {
-    "solid-app-router": "^0.3.2",
-    "solid-js": "^1.3.15",
-    "solid-meta": "^0.27.3",
-    "solid-start": "next",
-    "solid-start-vercel": "next",
-    "vite": "^2.9.9"
+    "solid-start-vercel": "^0.2.0",
+    "typescript": "^4.8.3",
+    "vite": "^3.1.0"
+  },
+  "dependencies": {
+    "@solidjs/meta": "^0.28.2",
+    "@solidjs/router": "^0.5.0",
+    "solid-js": "^1.6.0",
+    "solid-start": "^0.2.0",
+    "undici": "^5.11.0"
   },
   "engines": {
     "node": "16.x"

examples/solidstart/src/entry-client.tsx

@@ -1,4 +1,3 @@
-import { hydrate } from "solid-js/web";
-import { StartClient } from "solid-start/entry-client";
+import { mount, StartClient } from 'solid-start/entry-client';
 
-hydrate(() => <StartClient />, document);
+mount(() => <StartClient />, document);

examples/solidstart/src/entry-server.tsx

@@ -1,7 +1,9 @@
-import { StartServer, createHandler, renderAsync } from "solid-start/entry-server";
-import { inlineServerModules } from "solid-start/server";
+import {
+  StartServer,
+  createHandler,
+  renderAsync,
+} from 'solid-start/entry-server';
 
 export default createHandler(
-  inlineServerModules,
-  renderAsync((context) => <StartServer context={context} />)
+  renderAsync(event => <StartServer event={event} />)
 );

examples/solidstart/src/root.tsx

@@ -1,25 +1,33 @@
 // @refresh reload
-import { Links, Meta, Routes, Scripts } from "solid-start/root";
-import { ErrorBoundary } from "solid-start/error-boundary";
-import { Suspense } from "solid-js";
+import {
+  Html,
+  Head,
+  Body,
+  Meta,
+  Routes,
+  FileRoutes,
+  Scripts,
+  ErrorBoundary,
+} from 'solid-start';
+import { Suspense } from 'solid-js';
 
 export default function Root() {
   return (
-    <html lang="en">
-      <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
+    <Html lang="en">
+      <Head>
+        <Meta charset="utf-8" />
+        <Meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <Body>
         <ErrorBoundary>
           <Suspense>
-            <Routes />
+            <Routes>
+              <FileRoutes />
+            </Routes>
           </Suspense>
         </ErrorBoundary>
         <Scripts />
-      </body>
-    </html>
+      </Body>
+    </Html>
   );
 }

examples/solidstart/src/routes/index.tsx

@@ -8,8 +8,8 @@ export default function Home() {
       <Counter />
       <p>
         Visit{" "}
-        <a href="https://solidjs.com" target="_blank">
-          solidjs.com
+        <a href="https://start.solidjs.com" target="_blank">
+          start.solidjs.com
         </a>{" "}
         to learn how to build Solid apps.
       </p>

examples/solidstart/vercel.json

@@ -1,7 +0,0 @@
-{
-  "build": {
-    "env": {
-      "ENABLE_VC_BUILD": "1"
-    }
-  }
-}

examples/solidstart/vite.config.js

@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import solid from "solid-start";
+import solid from "solid-start/vite";
 import vercel from "solid-start-vercel";
 
 export default defineConfig({

examples/sveltekit/README.md

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

examples/sveltekit/jsconfig.json

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

examples/sveltekit/package.json

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

examples/sveltekit/src/app.d.ts

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

examples/sveltekit/src/app.html

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

examples/sveltekit/src/lib/Counter.svelte

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

examples/sveltekit/src/lib/form.js

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

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

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

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

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

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

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

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

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

examples/sveltekit/src/routes/__layout.svelte

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

examples/sveltekit/src/routes/about.svelte

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

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

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

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

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

examples/sveltekit/src/routes/index.svelte

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

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

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

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

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

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

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

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

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

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

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

examples/sveltekit/svelte.config.js

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

examples/sveltekit/vite.config.js

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

package.json

@@ -3,12 +3,16 @@
   "version": "0.0.0",
   "private": true,
   "license": "Apache-2.0",
+  "packageManager": "yarn@1.22.19",
   "workspaces": {
     "packages": [
       "packages/*"
     ],
     "nohoist": [
-      "**/@types/**"
+      "**/@types/**",
+      "**/typedoc",
+      "**/typedoc-plugin-markdown",
+      "**/typedoc-plugin-mdn-links"
     ]
   },
   "dependencies": {
@@ -31,7 +35,7 @@
     "prettier": "2.6.2",
     "ts-eager": "2.0.2",
     "ts-jest": "28.0.5",
-    "turbo": "1.3.2-canary.1"
+    "turbo": "1.4.7"
   },
   "scripts": {
     "lerna": "lerna",
@@ -40,14 +44,14 @@
     "publish-canary": "git checkout main && git pull && lerna version prerelease --preid canary --message \"Publish Canary\" --exact",
     "publish-from-github": "./utils/publish.sh",
     "changelog": "node utils/changelog.js",
-    "build": "turbo run build",
+    "build": "node utils/gen.js && turbo run build",
     "vercel-build": "yarn build && yarn run pack && cd api && node -r ts-eager/register ./_lib/script/build.ts",
     "pre-commit": "lint-staged",
     "test": "jest --rootDir=\"test\" --testPathPattern=\"\\.test.js\"",
-    "test-unit": "yarn test && turbo run test-unit",
-    "test-integration-cli": "turbo run test-integration-cli",
-    "test-integration-once": "turbo run test-integration-once",
-    "test-integration-dev": "turbo run test-integration-dev",
+    "test-unit": "yarn test && node utils/gen.js && turbo run test-unit",
+    "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",
     "prepare": "husky install",
     "pack": "cd utils && node -r ts-eager/register ./pack.ts"
@@ -99,6 +103,7 @@
           "selector": "MemberExpression > Identifier[name='substr']"
         }
       ],
+      "no-dupe-keys": 2,
       "require-atomic-updates": 0,
       "@typescript-eslint/ban-ts-comment": 0,
       "@typescript-eslint/camelcase": 0,

packages/build-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/build-utils",
-  "version": "5.1.0",
+  "version": "5.5.8",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -14,8 +14,7 @@
     "build": "node build",
     "test": "jest --env node --verbose --runInBand --bail",
     "test-unit": "yarn test test/unit.*test.*",
-    "test-integration-once": "yarn test test/integration.test.ts",
-    "prepublishOnly": "node build"
+    "test-integration-once": "yarn test test/integration.test.ts"
   },
   "devDependencies": {
     "@iarna/toml": "2.2.3",

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

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

packages/build-utils/src/debug.ts

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

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

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

packages/build-utils/src/errors.ts

@@ -61,14 +61,14 @@ export function getPrettyError(obj: {
     }
 
     return new NowBuildError({
-      code: 'DEV_VALIDATE_CONFIG',
+      code: 'INVALID_VERCEL_CONFIG',
       message: message,
       link: prop ? `${docsUrl}#project/${prop.toLowerCase()}` : docsUrl,
       action: 'View Documentation',
     });
   } catch (e) {
     return new NowBuildError({
-      code: 'DEV_VALIDATE_CONFIG',
+      code: 'INVALID_VERCEL_CONFIG',
       message: `Failed to validate configuration.`,
       link: docsUrl,
       action: 'View Documentation',

packages/build-utils/src/file-fs-ref.ts

@@ -5,7 +5,13 @@ import path from 'path';
 import Sema from 'async-sema';
 import { FileBase } from './types';
 
-const semaToPreventEMFILE = new Sema(20);
+const DEFAULT_SEMA = 20;
+const semaToPreventEMFILE = new Sema(
+  parseInt(
+    process.env.VERCEL_INTERNAL_FILE_FS_REF_SEMA || String(DEFAULT_SEMA),
+    10
+  ) || DEFAULT_SEMA
+);
 
 interface FileFsRefOptions {
   mode?: number;

packages/build-utils/src/file-ref.ts

@@ -12,7 +12,13 @@ interface FileRefOptions {
   mutable?: boolean;
 }
 
-const semaToDownloadFromS3 = new Sema(5);
+const DEFAULT_SEMA = 5;
+const semaToDownloadFromS3 = new Sema(
+  parseInt(
+    process.env.VERCEL_INTERNAL_FILE_REF_SEMA || String(DEFAULT_SEMA),
+    10
+  ) || DEFAULT_SEMA
+);
 
 class BailableError extends Error {
   public bail: boolean;

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

@@ -8,17 +8,13 @@ import FileFsRef from '../file-fs-ref';
 
 export type GlobOptions = vanillaGlob_.IOptions;
 
-interface FsFiles {
-  [filePath: string]: FileFsRef;
-}
-
 const vanillaGlob = promisify(vanillaGlob_);
 
 export default async function glob(
   pattern: string,
   opts: GlobOptions | string,
   mountpoint?: string
-): Promise<FsFiles> {
+): Promise<Record<string, FileFsRef>> {
   let options: GlobOptions;
   if (typeof opts === 'string') {
     options = { cwd: opts };
@@ -36,10 +32,11 @@ export default async function glob(
     throw new Error(`basePath/cwd must be an absolute path (${options.cwd})`);
   }
 
-  const results: FsFiles = {};
+  const results: Record<string, FileFsRef> = {};
+  const statCache: Record<string, Stats> = {};
 
   options.symlinks = {};
-  options.statCache = {};
+  options.statCache = statCache;
   options.stat = true;
   options.dot = true;
 
@@ -47,7 +44,7 @@ export default async function glob(
 
   for (const relativePath of files) {
     const fsPath = normalizePath(path.join(options.cwd, relativePath));
-    let stat: Stats = options.statCache[fsPath] as Stats;
+    let stat = statCache[fsPath];
     assert(
       stat,
       `statCache does not contain value for ${relativePath} (resolved to ${fsPath})`

packages/build-utils/src/fs/node-version.ts

@@ -3,28 +3,37 @@ import { NodeVersion } from '../types';
 import { NowBuildError } from '../errors';
 import debug from '../debug';
 
-const allOptions = [
-  { major: 16, range: '16.x', runtime: 'nodejs16.x' },
-  { major: 14, range: '14.x', runtime: 'nodejs14.x' },
-  {
-    major: 12,
-    range: '12.x',
-    runtime: 'nodejs12.x',
-    discontinueDate: new Date('2022-08-09'),
-  },
-  {
-    major: 10,
-    range: '10.x',
-    runtime: 'nodejs10.x',
-    discontinueDate: new Date('2021-04-20'),
-  },
-  {
-    major: 8,
-    range: '8.10.x',
-    runtime: 'nodejs8.10',
-    discontinueDate: new Date('2020-01-06'),
-  },
-] as const;
+function getOptions() {
+  const options = [
+    { major: 16, range: '16.x', runtime: 'nodejs16.x' },
+    { major: 14, range: '14.x', runtime: 'nodejs14.x' },
+    {
+      major: 12,
+      range: '12.x',
+      runtime: 'nodejs12.x',
+      discontinueDate: new Date('2022-10-03'),
+    },
+    {
+      major: 10,
+      range: '10.x',
+      runtime: 'nodejs10.x',
+      discontinueDate: new Date('2021-04-20'),
+    },
+    {
+      major: 8,
+      range: '8.10.x',
+      runtime: 'nodejs8.10',
+      discontinueDate: new Date('2020-01-06'),
+    },
+  ] as const;
+  if (process.env.VERCEL_ALLOW_NODEJS18 === '1') {
+    return [
+      { major: 18, range: '18.x', runtime: 'nodejs18.x' },
+      ...options,
+    ] as const;
+  }
+  return options;
+}
 
 function getHint(isAuto = false) {
   const { major, range } = getLatestNodeVersion();
@@ -34,11 +43,11 @@ function getHint(isAuto = false) {
 }
 
 export function getLatestNodeVersion() {
-  return allOptions[0];
+  return getOptions()[0];
 }
 
 export function getDiscontinuedNodeVersions(): NodeVersion[] {
-  return allOptions.filter(isDiscontinued);
+  return getOptions().filter(isDiscontinued);
 }
 
 export async function getSupportedNodeVersion(
@@ -50,7 +59,7 @@ export async function getSupportedNodeVersion(
   if (engineRange) {
     const found =
       validRange(engineRange) &&
-      allOptions.some(o => {
+      getOptions().some(o => {
         // the array is already in order so return the first
         // match which will be the newest version of node
         selection = o;