Version Packages (#10400)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/CODEOWNERS

@@ -5,12 +5,12 @@
 *                                        @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @trek
 /.github/workflows                       @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @trek @ijjk
 /packages/fs-detectors                   @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @trek @agadzik @chloetedder
-/packages/next                           @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @trek @ijjk
+/packages/next                           @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @trek @ijjk @ztanner
 /packages/routing-utils                  @TooTallNate @EndangeredMassa @styfle @cb1kenobi @Ethan-Arrowood @trek @ijjk
 /packages/edge                           @vercel/compute
 /examples                                @leerob
 /examples/create-react-app               @Timer
-/examples/nextjs                         @timneutkens @ijjk @styfle
+/examples/nextjs                         @timneutkens @ijjk @styfle @ztanner
 /examples/hugo                           @styfle
 /examples/jekyll                         @styfle
 /examples/zola                           @styfle

.github/workflows/test.yml

@@ -47,7 +47,6 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           max_timeout: 360
           check_interval: 5
-
   test:
     timeout-minutes: 120
     runs-on: ${{ matrix.runner }}
@@ -75,7 +74,6 @@ jobs:
         run: npm i -g pnpm@8.3.1
 
       - run: pnpm install
-
       - name: fetch ssl certificate before build (linux, os x)
         if: matrix.runner != 'windows-latest'
         run: echo | openssl s_client -showcerts -servername 'api.vercel.com' -connect 76.76.21.21:443
@@ -88,6 +86,7 @@ jobs:
         run: node utils/gen.js && node_modules/.bin/turbo run test --cache-dir=".turbo" --log-order=stream --scope=${{matrix.packageName}} --no-deps -- ${{ join(matrix.testPaths, ' ') }}
         shell: bash
         env:
+          JEST_JUNIT_OUTPUT_FILE: ${{github.workspace}}/.junit-reports/${{matrix.scriptName}}-${{matrix.packageName}}-${{matrix.chunkNumber}}-${{ matrix.runner }}.xml
           VERCEL_CLI_VERSION: ${{ needs.setup.outputs.dplUrl }}/tarballs/vercel.tgz
           VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
           VERCEL_TEST_REGISTRATION_URL: ${{ secrets.VERCEL_TEST_REGISTRATION_URL }}
@@ -97,6 +96,13 @@ jobs:
         if: matrix.runner != 'windows-latest'
         run: echo | openssl s_client -showcerts -servername 'api.vercel.com' -connect 76.76.21.21:443
 
+      - name: 'Upload Test Report to Datadog'
+        if: always()
+        run: 'npx @datadog/datadog-ci@2.18.1 junit upload --service vercel-cli .junit-reports'
+        env:
+          DATADOG_API_KEY: ${{secrets.DATADOG_API_KEY_CLI}}
+          DD_ENV: ci
+
   summary:
     name: Summary
     runs-on: ubuntu-latest

.gitignore

@@ -31,3 +31,4 @@ __pycache__
 .turbo
 .eslintcache
 turbo-cache-key.json
+junit.xml

DEVELOPING_A_RUNTIME.md

@@ -387,7 +387,6 @@ This is an abstract enumeration type that is implemented by one of the following
 
 - `nodejs18.x`
 - `nodejs16.x`
-- `nodejs14.x`
 - `go1.x`
 - `java11`
 - `python3.9`

api/CHANGELOG.md

@@ -0,0 +1,7 @@
+# api
+
+## 0.0.1
+
+### Patch Changes
+
+- fix RSC matching behavior & 404 status code on `fallback: false` ([#10388](https://github.com/vercel/vercel/pull/10388))

api/package.json

@@ -1,7 +1,7 @@
 {
   "name": "api",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "API for the vercel/vercel repo",
   "main": "index.js",
   "scripts": {},

api/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2021",
     "skipLibCheck": true,
     "strict": false,
     "forceConsistentCasingInFileNames": true,

examples/CHANGELOG.md

@@ -0,0 +1,7 @@
+# examples
+
+## null
+
+### Patch Changes
+
+- update examples to use at least node@16 ([#10395](https://github.com/vercel/vercel/pull/10395))

examples/ember/.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

examples/ember/.ember-cli

@@ -5,5 +5,11 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false
+  "disableAnalytics": false,
+
+  /**
+    Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+    rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+  */
+  "isTypeScriptProject": false
 }

examples/ember/.eslintignore

@@ -1,20 +1,13 @@
 # unconventional js
 /blueprints/*/files/
-/vendor/
 
 # compiled output
 /dist/
-/tmp/
-
-# dependencies
-/bower_components/
-/node_modules/
 
 # misc
 /coverage/
 !.*
+.*/
 
 # ember-try
 /.node_modules.ember-try/
-/bower.json.ember-try
-/package.json.ember-try

examples/ember/.eslintrc.js

@@ -1,11 +1,24 @@
+'use strict';
+
 module.exports = {
   root: true,
+  parser: '@babel/eslint-parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 'latest',
     sourceType: 'module',
+    requireConfigFile: false,
+    babelOptions: {
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+      ],
+    },
   },
   plugins: ['ember'],
-  extends: ['eslint:recommended', 'plugin:ember/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended',
+    'plugin:prettier/recommended',
+  ],
   env: {
     browser: true,
   },
@@ -14,14 +27,16 @@ module.exports = {
     // node files
     {
       files: [
-        '.eslintrc.js',
-        '.template-lintrc.js',
-        'ember-cli-build.js',
-        'testem.js',
-        'blueprints/*/index.js',
-        'config/**/*.js',
-        'lib/*/index.js',
-        'server/**/*.js',
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.stylelintrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './lib/*/index.js',
+        './server/**/*.js',
       ],
       parserOptions: {
         sourceType: 'script',
@@ -30,18 +45,12 @@ module.exports = {
         browser: false,
         node: true,
       },
-      plugins: ['node'],
-      rules: Object.assign(
-        {},
-        require('eslint-plugin-node').configs.recommended.rules,
-        {
-          // add your custom rules and overrides for node files here
-
-          // this can be removed once the following is fixed
-          // https://github.com/mysticatea/eslint-plugin-node/issues/77
-          'node/no-unpublished-require': 'off',
-        }
-      ),
+      extends: ['plugin:n/recommended'],
+    },
+    {
+      // test files
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
     },
   ],
 };

examples/ember/.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request: {}
+
+concurrency:
+  group: ci-${{ github.head_ref || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    name: "Lint"
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install Dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run lint
+
+  test:
+    name: "Test"
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install Dependencies
+        run: npm ci
+      - name: Run Tests
+        run: npm test

examples/ember/.gitignore

@@ -1,32 +1,32 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 # compiled output
 /dist/
-/tmp/
 
 # dependencies
-/bower_components/
 /node_modules/
 
 # misc
 /.env*
 /.pnp*
-/.sass-cache
-/connect.lock
+/.eslintcache
 /coverage/
-/libpeerconnection.log
 /npm-debug.log*
 /testem.log
 /yarn-error.log
 
 # ember-try
 /.node_modules.ember-try/
-/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+# broccoli-debug
+/DEBUG/
 
 # Environment Variables
 .env
 .env.build
+.env.local
 
 # Vercel
 .vercel

examples/ember/.prettierignore

@@ -0,0 +1,13 @@
+# unconventional js
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# misc
+/coverage/
+!.*
+.*/
+
+# ember-try
+/.node_modules.ember-try/

examples/ember/.prettierrc.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  overrides: [
+    {
+      files: '*.{js,ts}',
+      options: {
+        singleQuote: true,
+      },
+    },
+  ],
+};

examples/ember/.stylelintignore

@@ -0,0 +1,8 @@
+# unconventional files
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# addons
+/.node_modules.ember-try/

examples/ember/.stylelintrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+};

examples/ember/.travis.yml

@@ -1,24 +0,0 @@
----
-language: node_js
-node_js:
-  - "8"
-
-sudo: false
-dist: trusty
-
-addons:
-  chrome: stable
-
-cache:
-  directories:
-    - $HOME/.npm
-
-env:
-  global:
-    # See https://github.com/ember-cli/ember-cli/blob/master/docs/build-concurrency.md
-    - JOBS=1
-
-script:
-  - npm run lint:hbs
-  - npm run lint:js
-  - npm test

examples/ember/.watchmanconfig

@@ -1,3 +1,3 @@
 {
-  "ignore_dirs": ["tmp", "dist"]
+  "ignore_dirs": ["dist"]
 }

examples/ember/README.md

@@ -14,7 +14,7 @@ _Live Example: https://ember-template.vercel.app_
 
 ### How We Created This Example
 
-To get started with Ember for deployment with Vercel, you can use the [Ember CLI](https://ember-cli.com/) to initialize the project:
+To get started with Ember for deployment with Vercel, you can use the [Ember CLI](https://cli.emberjs.com) to initialize the project:
 
 ```shell
 $ npx ember-cli new ember-project

examples/ember/app/app.js

@@ -1,14 +1,12 @@
 import Application from '@ember/application';
-import Resolver from './resolver';
+import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from './config/environment';
+import config from 'ember-quickstart/config/environment';
 
-const App = Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver,
-});
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;

examples/ember/app/index.html

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>HelloWorld</title>
+    <title>EmberQuickstart</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     {{content-for "head"}}
 
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/hello-world.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-quickstart.css">
 
     {{content-for "head-footer"}}
   </head>
@@ -18,7 +17,7 @@
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/hello-world.js"></script>
+    <script src="{{rootURL}}assets/ember-quickstart.js"></script>
 
     {{content-for "body-footer"}}
   </body>

examples/ember/app/resolver.js

@@ -1,3 +0,0 @@
-import Resolver from 'ember-resolver';
-
-export default Resolver;

examples/ember/app/router.js

@@ -1,11 +1,9 @@
 import EmberRouter from '@ember/routing/router';
-import config from './config/environment';
+import config from 'ember-quickstart/config/environment';
 
-const Router = EmberRouter.extend({
-  location: config.locationType,
-  rootURL: config.rootURL,
-});
+export default class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
 
-Router.map(function() {});
-
-export default Router;
+Router.map(function () {});

examples/ember/app/styles/app.css

@@ -0,0 +1 @@
+/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */

examples/ember/app/templates/application.hbs

@@ -1,5 +1,7 @@
-{{!-- The following component displays Ember's default welcome message. --}}
+{{page-title "EmberQuickstart"}}
+
+{{! The following component displays Ember's default welcome message. }}
 <WelcomePage />
-{{!-- Feel free to remove this! --}}
+{{! Feel free to remove this! }}
 
 {{outlet}}

examples/ember/config/ember-cli-update.json

@@ -0,0 +1,20 @@
+{
+  "schemaVersion": "1.0.0",
+  "packages": [
+    {
+      "name": "ember-cli",
+      "version": "5.1.0",
+      "blueprints": [
+        {
+          "name": "app",
+          "outputRepo": "https://github.com/ember-cli/ember-new-output",
+          "codemodsSource": "ember-app-codemods-manifest@1",
+          "isBaseBlueprint": true,
+          "options": [
+            "--ci-provider=github"
+          ]
+        }
+      ]
+    }
+  ]
+}

examples/ember/config/environment.js

@@ -1,20 +1,17 @@
 'use strict';
 
-module.exports = function(environment) {
-  let ENV = {
-    modulePrefix: 'hello-world',
+module.exports = function (environment) {
+  const ENV = {
+    modulePrefix: 'ember-quickstart',
     environment,
     rootURL: '/',
-    locationType: 'auto',
+    locationType: 'history',
     EmberENV: {
+      EXTEND_PROTOTYPES: false,
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
         // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
       },
-      EXTEND_PROTOTYPES: {
-        // Prevent Ember Data from overriding Date.parse.
-        Date: false,
-      },
     },
 
     APP: {

examples/ember/config/optional-features.json

@@ -1,3 +1,6 @@
 {
-  "jquery-integration": true
+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": false,
+  "template-only-glimmer-components": true
 }

examples/ember/config/targets.js

@@ -6,13 +6,6 @@ const browsers = [
   'last 1 Safari versions',
 ];
 
-const isCI = !!process.env.CI;
-const isProduction = process.env.EMBER_ENV === 'production';
-
-if (isCI || isProduction) {
-  browsers.push('ie 11');
-}
-
 module.exports = {
   browsers,
 };

examples/ember/ember-cli-build.js

@@ -2,23 +2,13 @@
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-module.exports = function(defaults) {
-  let app = new EmberApp(defaults, {
+module.exports = function (defaults) {
+  const app = new EmberApp(defaults, {
     // Add options here
+    'ember-welcome-page': {
+      enabled: true
+    }
   });
 
-  // Use `app.import` to add additional libraries to the generated
-  // output files.
-  //
-  // If you need to use different assets in different
-  // environments, specify an object as the first parameter. That
-  // object's keys should be the environment name and the values
-  // should be the asset to use in that environment.
-  //
-  // If the library that you are including contains AMD or ES6
-  // modules that you would like to import into your application
-  // please specify an object with the list of modules as keys
-  // along with the exports of each module as its value.
-
   return app.toTree();
 };

examples/ember/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "hello-world",
+  "name": "ember-quickstart",
   "version": "0.0.0",
   "private": true,
-  "description": "Small description for hello-world goes here",
+  "description": "Small description for ember-quickstart goes here",
   "repository": "",
   "license": "MIT",
   "author": "",
@@ -11,43 +11,66 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "ember build",
+    "build": "ember build --environment=production",
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:css": "stylelint \"**/*.css\"",
+    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
+    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
-    "dev": "ember serve --port $PORT",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "ember test"
+    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
+    "test:ember": "ember test"
   },
   "devDependencies": {
-    "@ember/jquery": "^0.6.0",
-    "@ember/optional-features": "^0.7.0",
+    "@babel/eslint-parser": "^7.22.5",
+    "@babel/plugin-proposal-decorators": "^7.22.5",
+    "@ember/optional-features": "^2.0.0",
+    "@ember/string": "^3.1.1",
+    "@ember/test-helpers": "^3.1.0",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-ajax": "^5.0.0",
-    "ember-cli": "~3.11.0",
-    "ember-cli-app-version": "^3.2.0",
-    "ember-cli-babel": "^7.7.3",
-    "ember-cli-dependency-checker": "^3.1.0",
-    "ember-cli-eslint": "^5.1.0",
-    "ember-cli-htmlbars": "^3.0.1",
-    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
-    "ember-cli-inject-live-reload": "^1.8.2",
+    "concurrently": "^8.2.0",
+    "ember-auto-import": "^2.6.3",
+    "ember-cli": "~5.1.0",
+    "ember-cli-app-version": "^6.0.1",
+    "ember-cli-babel": "^7.26.11",
+    "ember-cli-clean-css": "^2.0.0",
+    "ember-cli-dependency-checker": "^3.3.2",
+    "ember-cli-htmlbars": "^6.2.0",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-template-lint": "^1.0.0-beta.1",
-    "ember-cli-uglify": "^2.1.0",
-    "ember-data": "~3.11.0",
-    "ember-export-application-global": "^2.0.0",
-    "ember-load-initializers": "^2.0.0",
-    "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.4.1",
-    "ember-resolver": "^5.0.1",
-    "ember-source": "~3.11.1",
-    "ember-welcome-page": "^4.0.0",
-    "eslint-plugin-ember": "^6.2.0",
-    "eslint-plugin-node": "^9.0.1",
+    "ember-cli-terser": "^4.0.2",
+    "ember-data": "~5.1.0",
+    "ember-fetch": "^8.1.2",
+    "ember-load-initializers": "^2.1.2",
+    "ember-modifier": "^4.1.0",
+    "ember-page-title": "^7.0.0",
+    "ember-qunit": "^7.0.0",
+    "ember-resolver": "^10.1.1",
+    "ember-source": "~5.1.1",
+    "ember-template-lint": "^5.11.0",
+    "ember-welcome-page": "^7.0.2",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-ember": "^11.9.0",
+    "eslint-plugin-n": "^16.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-qunit": "^8.0.0",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^0.8.4"
+    "prettier": "^2.8.8",
+    "qunit": "^2.19.4",
+    "qunit-dom": "^2.0.0",
+    "stylelint": "^15.9.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-prettier": "^3.0.0",
+    "tracked-built-ins": "^3.1.1",
+    "webpack": "^5.88.1"
   },
-  "engines": {
-    "node": "14.x"
+  "ember": {
+    "edition": "octane"
   }
 }

examples/ember/testem.js

@@ -1,15 +1,17 @@
+'use strict';
+
 module.exports = {
   test_page: 'tests/index.html?hidepassed',
   disable_watching: true,
   launch_in_ci: ['Chrome'],
   launch_in_dev: ['Chrome'],
+  browser_start_timeout: 120,
   browser_args: {
     Chrome: {
       ci: [
         // --no-sandbox is needed when running Chrome inside a container
         process.env.CI ? '--no-sandbox' : null,
         '--headless',
-        '--disable-gpu',
         '--disable-dev-shm-usage',
         '--disable-software-rasterizer',
         '--mute-audio',

examples/ember/tests/helpers/index.js

@@ -0,0 +1,42 @@
+import {
+  setupApplicationTest as upstreamSetupApplicationTest,
+  setupRenderingTest as upstreamSetupRenderingTest,
+  setupTest as upstreamSetupTest,
+} from 'ember-qunit';
+
+// This file exists to provide wrappers around ember-qunit's / ember-mocha's
+// test setup functions. This way, you can easily extend the setup that is
+// needed per test type.
+
+function setupApplicationTest(hooks, options) {
+  upstreamSetupApplicationTest(hooks, options);
+
+  // Additional setup for application tests can be done here.
+  //
+  // For example, if you need an authenticated session for each
+  // application test, you could do:
+  //
+  // hooks.beforeEach(async function () {
+  //   await authenticateSession(); // ember-simple-auth
+  // });
+  //
+  // This is also a good place to call test setup functions coming
+  // from other addons:
+  //
+  // setupIntl(hooks); // ember-intl
+  // setupMirage(hooks); // ember-cli-mirage
+}
+
+function setupRenderingTest(hooks, options) {
+  upstreamSetupRenderingTest(hooks, options);
+
+  // Additional setup for rendering tests can be done here.
+}
+
+function setupTest(hooks, options) {
+  upstreamSetupTest(hooks, options);
+
+  // Additional setup for unit tests can be done here.
+}
+
+export { setupApplicationTest, setupRenderingTest, setupTest };

examples/ember/tests/index.html

@@ -2,8 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>HelloWorld Tests</title>
+    <title>EmberQuickstart Tests</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -11,7 +10,7 @@
     {{content-for "test-head"}}
 
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/hello-world.css">
+    <link rel="stylesheet" href="{{rootURL}}assets/ember-quickstart.css">
     <link rel="stylesheet" href="{{rootURL}}assets/test-support.css">
 
     {{content-for "head-footer"}}
@@ -21,10 +20,17 @@
     {{content-for "body"}}
     {{content-for "test-body"}}
 
-    <script src="/testem.js" integrity=""></script>
+    <div id="qunit"></div>
+    <div id="qunit-fixture">
+      <div id="ember-testing-container">
+        <div id="ember-testing"></div>
+      </div>
+    </div>
+
+    <script src="/testem.js" integrity="" data-embroider-ignore></script>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/test-support.js"></script>
-    <script src="{{rootURL}}assets/hello-world.js"></script>
+    <script src="{{rootURL}}assets/ember-quickstart.js"></script>
     <script src="{{rootURL}}assets/tests.js"></script>
 
     {{content-for "body-footer"}}

examples/ember/tests/test-helper.js

@@ -1,8 +1,12 @@
-import Application from '../app';
-import config from '../config/environment';
+import Application from 'ember-quickstart/app';
+import config from 'ember-quickstart/config/environment';
+import * as QUnit from 'qunit';
 import { setApplication } from '@ember/test-helpers';
+import { setup } from 'qunit-dom';
 import { start } from 'ember-qunit';
 
 setApplication(Application.create(config.APP));
 
+setup(QUnit.assert);
+
 start();

examples/hydrogen-2/README.md

@@ -34,10 +34,15 @@ Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dov
 
 ## Environment Variables
 
-Using Hydrogen requires a few environment variables to be set in order to properly connect to Shopify. For this template, the minimal set of environment variables are defined in the `vercel.json` file, which will be applied to the deployment when deployed to Vercel. However, you should migrate these default environment variables to your Project's Environment Variables configuration in the Vercel dashboard (or using the `vc env` commands), and update them according to your needs (also change the `SESSION_SECRET` to your own value).
+Using Hydrogen requires a few [environment variables](https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables) to be set in order to properly connect to Shopify. For this template, the minimal set of environment variables are defined in the `vercel.json` file, which will be applied to the deployment when deployed to Vercel. However, you should migrate these default environment variables to your Project's Environment Variables configuration in the Vercel dashboard (or using the `vc env` commands), and update them according to your needs (also change the `SESSION_SECRET` to your own value). Once that is done, delete the `vercel.json` file from your project to prevent the environment variables defined there from taking precedence.
 
 ## Local development
 
+Rename the `.env.example` file to `.env` in order for the Shopify dev server to use those environment variables during local development. If you defined/modified additional environment variables based on the section above, be sure to apply those changes in your `.env` file as well.
+
+Then run the following commands:
+
 ```bash
+npm install
 npm run dev
 ```

examples/hydrogen/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es2020",
+    "target": "es2021",
     "module": "esnext",
     "moduleResolution": "node16",
-    "lib": ["dom", "dom.iterable", "scripthost", "es2020"],
+    "lib": ["dom", "dom.iterable", "scripthost", "es2021"],
     "jsx": "react-jsx",
     "types": ["vite/client", "vitest/globals"],
     "strict": true,

examples/nextjs/README.md

@@ -14,7 +14,7 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 

examples/nextjs/app/globals.css

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

examples/nextjs/app/layout.tsx

@@ -1,14 +1,19 @@
 import './globals.css'
+import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 
 const inter = Inter({ subsets: ['latin'] })
 
-export const metadata = {
+export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 }
 
-export default function RootLayout({ children }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>

examples/nextjs/app/page.js

@@ -1,95 +0,0 @@
-import Image from 'next/image'
-import styles from './page.module.css'
-
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.js</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}

examples/nextjs/app/page.module.css

@@ -1,229 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}

examples/nextjs/app/page.tsx

@@ -0,0 +1,113 @@
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+          Get started by editing&nbsp;
+          <code className="font-mono font-bold">app/page.tsx</code>
+        </p>
+        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+          <a
+            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className="dark:invert"
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+        <Image
+          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Docs{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Templates{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Explore the Next.js 13 playground.
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Deploy{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  )
+}

examples/nextjs/jsconfig.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"]
-    }
-  }
-}

examples/nextjs/package.json

@@ -9,10 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "eslint": "8.46.0",
-    "eslint-config-next": "13.4.13",
-    "next": "13.4.13",
+    "@types/node": "20.5.1",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
+    "autoprefixer": "10.4.15",
+    "eslint": "8.47.0",
+    "eslint-config-next": "13.4.19",
+    "next": "13.4.19",
+    "postcss": "8.4.28",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.1.6"
   }
 }

examples/nextjs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/nextjs/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+}
+export default config

examples/nextjs/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/package.json

@@ -5,10 +5,11 @@
   "scripts": {
     "test-unit": "pnpm test __tests__/unit/",
     "test-e2e": "pnpm test __tests__/integration/",
-    "test": "jest --env node --verbose --runInBand --bail"
+    "test": "jest --reporters=default --reporters=jest-junit --env node --verbose --runInBand --bail"
   },
   "devDependencies": {
     "@types/jest": "27.4.1",
-    "@vercel/frameworks": "1.5.1"
-  }
+    "@vercel/frameworks": "2.0.1"
+  },
+  "version": null
 }

examples/polymer/package.json

@@ -30,6 +30,6 @@
     "wct-browser-legacy": "^1.0.0"
   },
   "engines": {
-    "node": ">=8.0"
+    "node": ">=16.0"
   }
 }

examples/redwoodjs/package.json

@@ -14,7 +14,7 @@
     "extends": "@redwoodjs/eslint-config"
   },
   "engines": {
-    "node": ">=12",
+    "node": "16.x",
     "yarn": ">=1.15"
   }
 }

examples/remix/package.json

@@ -27,6 +27,6 @@
     "typescript": "^5.1.3"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   }
 }

examples/umijs/package.json

@@ -46,6 +46,6 @@
     ]
   },
   "engines": {
-    "node": ">=8.0.0 <17"
+    "node": "16.x"
   }
 }

examples/vuepress/package.json

@@ -5,7 +5,7 @@
     "build": "vuepress build src"
   },
   "engines": {
-    "node": ">=14.0.0 <18.0.0"
+    "node": ">=16.0.0 <18.0.0"
   },
   "devDependencies": {
     "vuepress": "1.9.7"

internals/constants/package.json

@@ -4,6 +4,9 @@
   "version": "1.0.4",
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.json"
   },

internals/get-package-json/package.json

@@ -5,11 +5,11 @@
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
   "files": [
-    "dist/*"
+    "dist"
   ],
   "scripts": {
-    "build": "tsc",
-    "test": "jest --env node --verbose --runInBand --bail",
+    "build": "node ../../utils/build.mjs",
+    "test": "jest --reporters=default --reporters=jest-junit --env node --verbose --runInBand --bail",
     "test-unit": "pnpm test tests/unit"
   },
   "devDependencies": {

internals/get-package-json/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "@vercel-internals/tsconfig",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "declaration": true,
+    "emitDeclarationOnly": true
   },
   "include": ["src/**/*"]
 }

internals/tsconfig/tsconfig.json

@@ -4,9 +4,9 @@
     "declaration": true,
     "allowJs": true,
     "moduleResolution": "node",
-    "target": "ES2020",
+    "target": "ES2021",
     "module": "commonjs",
-    "lib": ["ES2020"],
+    "lib": ["ES2021"],
     "resolveJsonModule": true,
     "sourceMap": true
   }

internals/types/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @vercel-internals/types
 
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies [[`5609a1187`](https://github.com/vercel/vercel/commit/5609a1187be9d6cf8d5f16825690c5ea72f17dc5), [`1b4de4a98`](https://github.com/vercel/vercel/commit/1b4de4a986f7a612aac834ebae3ec7bb9e9b8cf8)]:
+  - @vercel/build-utils@7.1.1
+
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies [[`9e3827c78`](https://github.com/vercel/vercel/commit/9e3827c785e1bc45f2bed421132167381481770f)]:
+  - @vercel/build-utils@7.1.0
+
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`37f5c6270`](https://github.com/vercel/vercel/commit/37f5c6270058336072ca733673ea72dd6c56bd6a)]:
+  - @vercel/build-utils@7.0.0
+  - @vercel/routing-utils@3.0.0
+
 ## 1.0.6
 
 ### Patch Changes

internals/types/package.json

@@ -1,14 +1,17 @@
 {
   "private": true,
   "name": "@vercel-internals/types",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "types": "index.d.ts",
   "main": "index.d.ts",
+  "files": [
+    "*.d.ts"
+  ],
   "dependencies": {
     "@types/node": "14.14.31",
     "@vercel-internals/constants": "1.0.4",
-    "@vercel/build-utils": "6.8.3",
-    "@vercel/routing-utils": "2.2.1"
+    "@vercel/build-utils": "7.1.1",
+    "@vercel/routing-utils": "3.0.0"
   },
   "devDependencies": {
     "@vercel-internals/tsconfig": "1.0.0",

package.json

@@ -16,6 +16,7 @@
     "buffer-replace": "1.0.0",
     "create-svelte": "2.0.1",
     "dot": "1.1.3",
+    "esbuild": "0.19.2",
     "eslint": "8.14.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-jest": "26.1.5",
@@ -32,7 +33,7 @@
     "source-map-support": "0.5.12",
     "ts-eager": "2.0.2",
     "ts-jest": "29.1.0",
-    "turbo": "1.10.12",
+    "turbo": "1.10.13",
     "typescript": "4.9.5"
   },
   "scripts": {
@@ -49,7 +50,7 @@
     "prepare": "husky install",
     "pack": "cd utils && node -r ts-eager/register ./pack.ts",
     "ci:version": "changeset version && pnpm install --no-frozen-lockfile",
-    "ci:publish": "pnpm publish -r && changeset tag"
+    "ci:publish": "pnpm publish -r && node utils/update-canary-tags.mjs && changeset tag"
   },
   "lint-staged": {
     "./{*,{api,packages,test,utils}/**/*}.{js,ts}": [

packages/build-utils/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @vercel/build-utils
 
+## 7.1.1
+
+### Patch Changes
+
+- add descriptions to NodeVersion properties ([#10403](https://github.com/vercel/vercel/pull/10403))
+
+- Updated semver dependency ([#10411](https://github.com/vercel/vercel/pull/10411))
+
+## 7.1.0
+
+### Minor Changes
+
+- Support serverless function architecture ([#10392](https://github.com/vercel/vercel/pull/10392))
+
+## 7.0.0
+
+### Major Changes
+
+- BREAKING CHANGE: Drop Node.js 14, bump minimum to Node.js 16 ([#10369](https://github.com/vercel/vercel/pull/10369))
+
 ## 6.8.3
 
 ### Patch Changes

packages/build-utils/build.js

@@ -1,30 +0,0 @@
-#!/usr/bin/env node
-const fs = require('fs-extra');
-const execa = require('execa');
-const { join } = require('path');
-
-async function main() {
-  const outDir = join(__dirname, 'dist');
-
-  // Start fresh
-  await fs.remove(outDir);
-
-  // Compile TypeScript
-  await execa('tsc', [], { stdio: 'inherit' });
-
-  // Run `ncc`
-  const mainDir = join(outDir, 'main');
-  await execa('ncc', ['build', 'src/index.ts', '-o', mainDir], {
-    stdio: 'inherit',
-  });
-  // Move compiled ncc file to out dir
-  await fs.rename(join(mainDir, 'index.js'), join(outDir, 'index.js'));
-
-  // Delete leftover "main" dir
-  await fs.remove(mainDir);
-}
-
-main().catch(err => {
-  console.error(err);
-  process.exit(1);
-});

packages/build-utils/build.mjs

@@ -0,0 +1,3 @@
+import { tsc, esbuild } from '../../utils/build.mjs';
+
+await Promise.all([tsc(), esbuild().then(() => esbuild({ bundle: true }))]);

packages/build-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/build-utils",
-  "version": "6.8.3",
+  "version": "7.1.1",
   "license": "Apache-2.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -11,8 +11,8 @@
     "directory": "packages/now-build-utils"
   },
   "scripts": {
-    "build": "node build",
-    "test": "jest --env node --verbose --runInBand --bail",
+    "build": "node build.mjs",
+    "test": "jest --reporters=default --reporters=jest-junit --env node --verbose --runInBand --bail",
     "test-unit": "pnpm test test/unit.*test.*",
     "test-e2e": "pnpm test test/integration.test.ts"
   },
@@ -32,7 +32,7 @@
     "@types/node-fetch": "^2.1.6",
     "@types/semver": "6.0.0",
     "@types/yazl": "2.4.2",
-    "@vercel/error-utils": "1.0.10",
+    "@vercel/error-utils": "2.0.1",
     "@vercel/ncc": "0.24.0",
     "aggregate-error": "3.0.1",
     "async-retry": "1.2.3",
@@ -44,11 +44,12 @@
     "glob": "8.0.3",
     "ignore": "4.0.6",
     "into-stream": "5.0.0",
+    "jest-junit": "16.0.0",
     "js-yaml": "3.13.1",
     "minimatch": "3.1.2",
     "multistream": "2.1.1",
     "node-fetch": "2.6.7",
-    "semver": "6.1.1",
+    "semver": "6.3.1",
     "typescript": "4.9.5",
     "yazl": "2.5.1"
   }

packages/build-utils/src/lambda.ts

@@ -13,9 +13,12 @@ interface Environment {
 
 export type LambdaOptions = LambdaOptionsWithFiles | LambdaOptionsWithZipBuffer;
 
+export type LambdaArchitecture = 'x86_64' | 'arm64';
+
 export interface LambdaOptionsBase {
   handler: string;
   runtime: string;
+  architecture?: LambdaArchitecture;
   memory?: number;
   maxDuration?: number;
   environment?: Environment;
@@ -62,6 +65,7 @@ export class Lambda {
   files?: Files;
   handler: string;
   runtime: string;
+  architecture?: LambdaArchitecture;
   memory?: number;
   maxDuration?: number;
   environment: Environment;
@@ -81,6 +85,7 @@ export class Lambda {
       handler,
       runtime,
       maxDuration,
+      architecture,
       memory,
       environment = {},
       allowQuery,
@@ -102,6 +107,13 @@ export class Lambda {
     assert(typeof runtime === 'string', '"runtime" is not a string');
     assert(typeof environment === 'object', '"environment" is not an object');
 
+    if (architecture !== undefined) {
+      assert(
+        architecture === 'x86_64' || architecture === 'arm64',
+        '"architecture" must be either "x86_64" or "arm64"'
+      );
+    }
+
     if (memory !== undefined) {
       assert(typeof memory === 'number', '"memory" is not a number');
     }
@@ -159,6 +171,7 @@ export class Lambda {
     this.files = 'files' in opts ? opts.files : undefined;
     this.handler = handler;
     this.runtime = runtime;
+    this.architecture = architecture;
     this.memory = memory;
     this.maxDuration = maxDuration;
     this.environment = environment;

packages/build-utils/src/types.ts

@@ -300,9 +300,13 @@ export interface PackageJson {
 }
 
 export interface NodeVersion {
+  /** major version number: 18 */
   major: number;
+  /** major version range: "18.x" */
   range: string;
+  /** runtime descriptor: "nodejs18.x" */
   runtime: string;
+  /** date beyond which this version is discontinued: 2023-08-17T19:05:45.951Z */
   discontinueDate?: Date;
 }
 

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

@@ -50,14 +50,14 @@ afterEach(() => {
 });
 
 it('should only match supported node versions, otherwise throw an error', async () => {
-  expect(await getSupportedNodeVersion('14.x', false)).toHaveProperty(
-    'major',
-    14
-  );
   expect(await getSupportedNodeVersion('16.x', false)).toHaveProperty(
     'major',
     16
   );
+  expect(await getSupportedNodeVersion('18.x', false)).toHaveProperty(
+    'major',
+    18
+  );
 
   const autoMessage =
     'Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.';
@@ -70,14 +70,14 @@ it('should only match supported node versions, otherwise throw an error', async
   await expectBuilderError(getSupportedNodeVersion('foo', true), autoMessage);
   await expectBuilderError(getSupportedNodeVersion('=> 10', true), autoMessage);
 
-  expect(await getSupportedNodeVersion('14.x', true)).toHaveProperty(
-    'major',
-    14
-  );
   expect(await getSupportedNodeVersion('16.x', true)).toHaveProperty(
     'major',
     16
   );
+  expect(await getSupportedNodeVersion('18.x', true)).toHaveProperty(
+    'major',
+    18
+  );
 
   const foundMessage =
     'Please set "engines": { "node": "18.x" } in your `package.json` file to use Node.js 18.';
@@ -99,23 +99,23 @@ it('should only match supported node versions, otherwise throw an error', async
 
 it('should match all semver ranges', async () => {
   // See https://docs.npmjs.com/files/package.json#engines
-  expect(await getSupportedNodeVersion('14.0.0')).toHaveProperty('major', 14);
-  expect(await getSupportedNodeVersion('14.x')).toHaveProperty('major', 14);
+  expect(await getSupportedNodeVersion('16.0.0')).toHaveProperty('major', 16);
+  expect(await getSupportedNodeVersion('16.x')).toHaveProperty('major', 16);
   expect(await getSupportedNodeVersion('>=10')).toHaveProperty('major', 18);
   expect(await getSupportedNodeVersion('>=10.3.0')).toHaveProperty('major', 18);
   expect(await getSupportedNodeVersion('16.5.0 - 16.9.0')).toHaveProperty(
     'major',
     16
   );
-  expect(await getSupportedNodeVersion('>=9.5.0 <=14.5.0')).toHaveProperty(
+  expect(await getSupportedNodeVersion('>=9.5.0 <=16.5.0')).toHaveProperty(
     'major',
-    14
+    16
   );
-  expect(await getSupportedNodeVersion('~14.5.0')).toHaveProperty('major', 14);
-  expect(await getSupportedNodeVersion('^14.5.0')).toHaveProperty('major', 14);
-  expect(await getSupportedNodeVersion('14.5.0 - 14.20.0')).toHaveProperty(
+  expect(await getSupportedNodeVersion('~16.5.0')).toHaveProperty('major', 16);
+  expect(await getSupportedNodeVersion('^16.5.0')).toHaveProperty('major', 16);
+  expect(await getSupportedNodeVersion('16.5.0 - 16.20.0')).toHaveProperty(
     'major',
-    14
+    16
   );
 });
 

packages/build-utils/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "declaration": true,
+    "emitDeclarationOnly": true,
     "esModuleInterop": true,
-    "lib": ["ES2020"],
+    "lib": ["ES2021"],
     "module": "commonjs",
     "moduleResolution": "node",
     "noEmitOnError": true,
@@ -13,7 +14,7 @@
     "outDir": "./dist",
     "types": ["node", "jest"],
     "strict": true,
-    "target": "ES2020"
+    "target": "ES2021"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules"]

packages/cli/CHANGELOG.md

@@ -1,5 +1,136 @@
 # vercel
 
+## 32.2.0
+
+### Minor Changes
+
+- show instant preview url on deploy ([#10458](https://github.com/vercel/vercel/pull/10458))
+
+### Patch Changes
+
+- N, not n. ([#10460](https://github.com/vercel/vercel/pull/10460))
+
+- Fix team URL on `vercel help switch` ([#10466](https://github.com/vercel/vercel/pull/10466))
+
+- Migrates the vc env command to the command data structure for use in the help output. ([#10429](https://github.com/vercel/vercel/pull/10429))
+
+- Update domains command to new structure ([#10427](https://github.com/vercel/vercel/pull/10427))
+
+- Updated semver dependency ([#10411](https://github.com/vercel/vercel/pull/10411))
+
+- migrate `rollback` command structure for help output ([#10426](https://github.com/vercel/vercel/pull/10426))
+
+- migrate `inti` command structure for help output ([#10428](https://github.com/vercel/vercel/pull/10428))
+
+- Remove mri workaround ([#10452](https://github.com/vercel/vercel/pull/10452))
+
+- migrate dev command structure for help output ([#10433](https://github.com/vercel/vercel/pull/10433))
+
+- Update secrets to more recent structure ([#10461](https://github.com/vercel/vercel/pull/10461))
+
+- Migrate `vc secrets` to new help command structure ([#10435](https://github.com/vercel/vercel/pull/10435))
+
+- migrate `promote` command structure for help output ([#10425](https://github.com/vercel/vercel/pull/10425))
+
+- migrate `git` command structure for help output ([#10431](https://github.com/vercel/vercel/pull/10431))
+
+- Update project command to new data structure ([#10432](https://github.com/vercel/vercel/pull/10432))
+
+- migrate teams command ([#10434](https://github.com/vercel/vercel/pull/10434))
+
+- Updated dependencies [[`5609a1187`](https://github.com/vercel/vercel/commit/5609a1187be9d6cf8d5f16825690c5ea72f17dc5), [`caaba0d68`](https://github.com/vercel/vercel/commit/caaba0d6855eff4350b6a04acc3ea502025bff8f), [`1b4de4a98`](https://github.com/vercel/vercel/commit/1b4de4a986f7a612aac834ebae3ec7bb9e9b8cf8), [`c3c54d6e6`](https://github.com/vercel/vercel/commit/c3c54d6e695ec078777c4b1f4f23acbeee3c3b09), [`6aa0aa4e6`](https://github.com/vercel/vercel/commit/6aa0aa4e65b81903f4fce677a198dcfaebee744b), [`e43191b18`](https://github.com/vercel/vercel/commit/e43191b1866da70a3dab3815a3f2176942240ef3), [`fc1e13c09`](https://github.com/vercel/vercel/commit/fc1e13c09928c654410b373fc1775c2b63c6ef4a)]:
+  - @vercel/build-utils@7.1.1
+  - @vercel/next@4.0.2
+  - @vercel/static-build@2.0.4
+  - @vercel/redwood@2.0.1
+  - @vercel/remix-builder@2.0.3
+  - @vercel/ruby@2.0.1
+  - @vercel/node@3.0.4
+
+## 32.1.0
+
+### Minor Changes
+
+- Improve error messages for JSON parse failures ([#10396](https://github.com/vercel/vercel/pull/10396))
+
+### Patch Changes
+
+- Updated dependencies [[`9e3827c78`](https://github.com/vercel/vercel/commit/9e3827c785e1bc45f2bed421132167381481770f)]:
+  - @vercel/build-utils@7.1.0
+  - @vercel/node@3.0.3
+  - @vercel/remix-builder@2.0.2
+  - @vercel/static-build@2.0.3
+
+## 32.0.2
+
+### Patch Changes
+
+- Remove use of mri preferring use of arg package ([#10389](https://github.com/vercel/vercel/pull/10389))
+
+- upgrade edge-runtime ([#10385](https://github.com/vercel/vercel/pull/10385))
+
+- Update dns commands to new structure ([#10379](https://github.com/vercel/vercel/pull/10379))
+
+- Updated dependencies [[`09446a8fe`](https://github.com/vercel/vercel/commit/09446a8fe8b8201dbe3ead3ca645ef0aa1833b6b), [`597a8a817`](https://github.com/vercel/vercel/commit/597a8a81764c39e70c65b98e78bf4c3827a779a7), [`442232686`](https://github.com/vercel/vercel/commit/44223268651f1bbd5c6f2b0b315239685dd5716e), [`3f6d99470`](https://github.com/vercel/vercel/commit/3f6d99470db86681e006d66507f32afcea086b41), [`37e93a91a`](https://github.com/vercel/vercel/commit/37e93a91a8659934eac7f5cd441b310511bf5646)]:
+  - @vercel/next@4.0.1
+  - @vercel/node@3.0.2
+  - @vercel/remix-builder@2.0.1
+  - @vercel/static-build@2.0.2
+
+## 32.0.1
+
+### Patch Changes
+
+- Add `--git-branch` to pull command help output ([#10382](https://github.com/vercel/vercel/pull/10382))
+
+- Update new help structure to support subcommands ([#10372](https://github.com/vercel/vercel/pull/10372))
+
+- Migrate certs command to new structure ([#10377](https://github.com/vercel/vercel/pull/10377))
+
+- Updated dependencies []:
+  - @vercel/static-build@2.0.1
+  - @vercel/node@3.0.1
+
+## 32.0.0
+
+### Major Changes
+
+- BREAKING CHANGE: Drop Node.js 14, bump minimum to Node.js 16 ([#10369](https://github.com/vercel/vercel/pull/10369))
+
+### Patch Changes
+
+- text wrap help output description ([#10370](https://github.com/vercel/vercel/pull/10370))
+
+- Updated dependencies [[`37f5c6270`](https://github.com/vercel/vercel/commit/37f5c6270058336072ca733673ea72dd6c56bd6a), [`09174df6c`](https://github.com/vercel/vercel/commit/09174df6cfbe697ea13e75468b9cd3c6ec7ad01c)]:
+  - @vercel/build-utils@7.0.0
+  - @vercel/go@3.0.0
+  - @vercel/hydrogen@1.0.0
+  - @vercel/next@4.0.0
+  - @vercel/node@3.0.0
+  - @vercel/python@4.0.0
+  - @vercel/redwood@2.0.0
+  - @vercel/remix-builder@2.0.0
+  - @vercel/ruby@2.0.0
+  - @vercel/static-build@2.0.0
+
+## 31.4.0
+
+### Minor Changes
+
+- Force-publish ([#10358](https://github.com/vercel/vercel/pull/10358))
+
+### Patch Changes
+
+- Updated dependencies [[`6e44757ff`](https://github.com/vercel/vercel/commit/6e44757ff5d7d80ba6db2ab5ea65213392ecf1cd)]:
+  - @vercel/static-build@1.4.0
+
+## 31.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`844fb6e88`](https://github.com/vercel/vercel/commit/844fb6e880a980f26945f15a7437b4d67bcb5394)]:
+  - @vercel/remix-builder@1.10.1
+
 ## 31.3.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vercel",
-  "version": "31.3.0",
+  "version": "32.2.0",
   "preferGlobal": true,
   "license": "Apache-2.0",
   "description": "The command-line interface for Vercel",
@@ -11,7 +11,7 @@
     "directory": "packages/cli"
   },
   "scripts": {
-    "test": "jest --env node --verbose --bail",
+    "test": "jest --reporters=default --reporters=jest-junit --env node --verbose --bail",
     "test-unit": "pnpm test test/unit/",
     "test-e2e": "rimraf test/fixtures/integration && pnpm test test/integration-1.test.ts test/integration-2.test.ts test/integration-3.test.ts",
     "test-dev": "pnpm test test/dev/",
@@ -28,23 +28,23 @@
     "scripts/preinstall.js"
   ],
   "engines": {
-    "node": ">= 14"
+    "node": ">= 16"
   },
   "dependencies": {
-    "@vercel/build-utils": "6.8.3",
-    "@vercel/go": "2.5.1",
-    "@vercel/hydrogen": "0.0.64",
-    "@vercel/next": "3.9.4",
-    "@vercel/node": "2.15.10",
-    "@vercel/python": "3.1.60",
-    "@vercel/redwood": "1.1.15",
-    "@vercel/remix-builder": "1.10.0",
-    "@vercel/ruby": "1.3.76",
-    "@vercel/static-build": "1.3.46"
+    "@vercel/build-utils": "7.1.1",
+    "@vercel/go": "3.0.0",
+    "@vercel/hydrogen": "1.0.0",
+    "@vercel/next": "4.0.2",
+    "@vercel/node": "3.0.4",
+    "@vercel/python": "4.0.0",
+    "@vercel/redwood": "2.0.1",
+    "@vercel/remix-builder": "2.0.3",
+    "@vercel/ruby": "2.0.1",
+    "@vercel/static-build": "2.0.4"
   },
   "devDependencies": {
     "@alex_neo/jest-expect-message": "1.0.5",
-    "@edge-runtime/node-utils": "2.1.0",
+    "@edge-runtime/node-utils": "2.2.0",
     "@next/env": "11.1.2",
     "@sentry/node": "5.5.0",
     "@sindresorhus/slugify": "0.11.0",
@@ -64,10 +64,10 @@
     "@types/inquirer": "7.3.1",
     "@types/jest": "27.4.1",
     "@types/jest-expect-message": "1.0.3",
+    "@types/json-parse-better-errors": "1.0.0",
     "@types/load-json-file": "2.0.7",
     "@types/mime-types": "2.1.0",
     "@types/minimatch": "3.0.3",
-    "@types/mri": "1.1.0",
     "@types/ms": "0.7.30",
     "@types/node": "14.18.33",
     "@types/node-fetch": "2.5.10",
@@ -86,14 +86,14 @@
     "@types/yauzl-promise": "2.1.0",
     "@vercel-internals/constants": "1.0.4",
     "@vercel-internals/get-package-json": "1.0.0",
-    "@vercel-internals/types": "1.0.6",
-    "@vercel/client": "12.6.6",
-    "@vercel/error-utils": "1.0.10",
-    "@vercel/frameworks": "1.5.1",
-    "@vercel/fs-detectors": "4.1.2",
+    "@vercel-internals/types": "1.0.9",
+    "@vercel/client": "13.0.2",
+    "@vercel/error-utils": "2.0.1",
+    "@vercel/frameworks": "2.0.1",
+    "@vercel/fs-detectors": "5.0.2",
     "@vercel/fun": "1.0.4",
     "@vercel/ncc": "0.24.0",
-    "@vercel/routing-utils": "2.2.1",
+    "@vercel/routing-utils": "3.0.0",
     "@zeit/source-map-support": "0.6.2",
     "ajv": "6.12.2",
     "alpha-sort": "2.0.1",
@@ -134,13 +134,14 @@
     "is-port-reachable": "3.1.0",
     "is-url": "1.2.2",
     "jaro-winkler": "0.2.8",
+    "jest-junit": "16.0.0",
     "jest-matcher-utils": "29.3.1",
+    "json-parse-better-errors": "1.0.2",
     "jsonlines": "0.1.1",
     "line-async-iterator": "3.0.0",
     "load-json-file": "3.0.0",
     "mime-types": "2.1.24",
     "minimatch": "3.1.2",
-    "mri": "1.1.5",
     "ms": "2.1.2",
     "node-fetch": "2.6.7",
     "npm-package-arg": "6.1.0",
@@ -155,7 +156,7 @@
     "qr-image": "3.2.0",
     "raw-body": "2.4.1",
     "rimraf": "3.0.2",
-    "semver": "5.5.0",
+    "semver": "5.7.2",
     "serve-handler": "6.1.1",
     "strip-ansi": "6.0.1",
     "supports-hyperlinks": "3.0.0",

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

@@ -0,0 +1,93 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const aliasCommand: Command = {
+  name: 'alias',
+  description: 'Interact with deployment aliases.',
+  arguments: [
+    {
+      name: 'command',
+      required: false,
+    },
+  ],
+  subcommands: [
+    {
+      name: 'ls',
+      description: 'Show all aliases.',
+      arguments: [],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'set',
+      description: 'Create a new alias',
+      arguments: [
+        {
+          name: 'deployment',
+          required: true,
+        },
+        {
+          name: 'alias',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'rm',
+      description: 'Remove an alias using its hostname.',
+      arguments: [
+        {
+          name: 'alias',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+  ],
+  options: [
+    {
+      name: 'next',
+      description: 'Show next page of results',
+      argument: 'MS',
+      shorthand: 'n',
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'yes',
+      description: 'Skip the confirmation prompt when removing an alias',
+      shorthand: 'y',
+      type: 'boolean',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'limit',
+      shorthand: 'n',
+      description:
+        'Number of results to return per page (default: 20, max: 100)',
+      argument: 'NUMBER',
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: 'Add a new alias to `my-api.vercel.app`',
+      value: `${packageName} alias set api-ownv3nc9f8.vercel.app my-api.vercel.app`,
+    },
+    {
+      name: 'Custom domains work as alias targets',
+      value: `${packageName} alias set api-ownv3nc9f8.vercel.app my-api.com`,
+    },
+    {
+      name: 'The subcommand `set` is the default and can be skipped. Protocols in the URLs are unneeded and ignored',
+      value: `${packageName} alias api-ownv3nc9f8.vercel.app my-api.com`,
+    },
+  ],
+};

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

@@ -1,73 +1,12 @@
-import chalk from 'chalk';
-
 import { handleError } from '../../util/error';
-
 import Client from '../../util/client';
 import getArgs from '../../util/get-args';
 import getSubcommand from '../../util/get-subcommand';
-import { packageName, logo } from '../../util/pkg-name';
-
+import { help } from '../help';
 import ls from './ls';
 import rm from './rm';
 import set from './set';
-
-const help = () => {
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} alias`)} [options] <command>
-
-  ${chalk.dim('Commands:')}
-
-    ls                           Show all aliases
-    set   <deployment> <alias>   Create a new alias
-    rm    <alias>                Remove an alias using its hostname
-
-  ${chalk.dim('Options:')}
-
-    -h, --help                          Output usage information
-    -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
-    'FILE'
-  )}        Path to the local ${'`vercel.json`'} file
-    -Q ${chalk.bold.underline('DIR')}, --global-config=${chalk.bold.underline(
-    'DIR'
-  )}         Path to the global ${'`.vercel`'} directory
-    -d, --debug                         Debug mode [off]
-    --no-color                          No color mode [off]
-    -t ${chalk.bold.underline('TOKEN')}, --token=${chalk.bold.underline(
-    'TOKEN'
-  )}             Login token
-    -S, --scope                         Set a custom scope
-    -N, --next                          Show next page of results
-    -y, --yes                           Skip the confirmation prompt when removing an alias
-    --limit=${chalk.bold.underline(
-      'VALUE'
-    )}                       Number of results to return per page (default: 20, max: 100)
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray('–')} Add a new alias to ${chalk.underline('my-api.vercel.app')}
-
-      ${chalk.cyan(
-        `$ ${packageName} alias set ${chalk.underline(
-          'api-ownv3nc9f8.vercel.app'
-        )} ${chalk.underline('my-api.vercel.app')}`
-      )}
-
-      Custom domains work as alias targets
-
-      ${chalk.cyan(
-        `$ ${packageName} alias set ${chalk.underline(
-          'api-ownv3nc9f8.vercel.app'
-        )} ${chalk.underline('my-api.com')}`
-      )}
-
-      ${chalk.dim('–')} The subcommand ${chalk.dim(
-    '`set`'
-  )} is the default and can be skipped.
-      ${chalk.dim('–')} ${chalk.dim(
-    'Protocols'
-  )} in the URLs are unneeded and ignored.
-`);
-};
+import { aliasCommand } from './command';
 
 const COMMAND_CONFIG = {
   default: ['set'],
@@ -76,7 +15,7 @@ const COMMAND_CONFIG = {
   set: ['set'],
 };
 
-export default async function main(client: Client) {
+export default async function alias(client: Client) {
   let argv;
 
   try {
@@ -94,7 +33,7 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(help(aliasCommand, { columns: client.stderr.columns }));
     return 2;
   }
 

packages/cli/src/commands/certs/command.ts

@@ -0,0 +1,116 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const certsCommand: Command = {
+  name: 'certs',
+  description:
+    'Interact with SSL certificates. This command is intended for advanced use only. By default, Vercel manages your certificates automatically.',
+  arguments: [
+    {
+      name: 'command',
+      required: false,
+    },
+  ],
+  subcommands: [
+    {
+      name: 'ls',
+      description: 'Show all available certificates',
+      arguments: [],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'issue',
+      description: ' Issue a new certificate for a domain',
+      arguments: [
+        {
+          name: 'cn',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'rm',
+      description: 'Remove a certificate by id',
+      arguments: [
+        {
+          name: 'id',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+  ],
+  options: [
+    {
+      name: 'challenge-only',
+      description: 'Only show challenges needed to issue a cert',
+      shorthand: null,
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'crt',
+      description: 'Certificate file',
+      argument: 'FILE',
+      shorthand: null,
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'key',
+      description: 'Certificate key file',
+      argument: 'FILE',
+      shorthand: null,
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'ca',
+      description: 'CA certificate chain file',
+      argument: 'FILE',
+      shorthand: null,
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'limit',
+      description:
+        'Number of results to return per page (default: 20, max: 100)',
+      argument: 'VALUE',
+      shorthand: null,
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'next',
+      description: 'Show next page of results',
+      shorthand: 'n',
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: 'Generate a certificate with the cnames "acme.com" and "www.acme.com"`',
+      value: `${packageName} certs issue acme.com www.acme.com`,
+    },
+    {
+      name: 'Remove a certificate',
+      value: `${packageName} certs rm id`,
+    },
+    {
+      name: 'Paginate results, where `1584722256178` is the time in milliseconds since the UNIX epoch.',
+      value: `${packageName} certs ls --next 1584722256178`,
+    },
+  ],
+};

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

@@ -1,5 +1,3 @@
-import chalk from 'chalk';
-
 // @ts-ignore
 import { handleError } from '../../util/error';
 
@@ -10,69 +8,9 @@ import add from './add';
 import issue from './issue';
 import ls from './ls';
 import rm from './rm';
+import { certsCommand } from './command';
+import { help } from '../help';
 import Client from '../../util/client';
-import { packageName, logo } from '../../util/pkg-name';
-
-const help = () => {
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} certs`)} [options] <command>
-
-  ${chalk.yellow('NOTE:')} This command is intended for advanced use only.
-  By default, Vercel manages your certificates automatically.
-
-  ${chalk.dim('Commands:')}
-
-    ls                        Show all available certificates
-    issue      <cn> [<cn>]    Issue a new certificate for a domain
-    rm         <id>           Remove a certificate by id
-
-  ${chalk.dim('Options:')}
-
-    -h, --help                     Output usage information
-    -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
-    'FILE'
-  )}   Path to the local ${'`vercel.json`'} file
-    -Q ${chalk.bold.underline('DIR')}, --global-config=${chalk.bold.underline(
-    'DIR'
-  )}    Path to the global ${'`.vercel`'} directory
-    -d, --debug                    Debug mode [off]
-    --no-color                     No color mode [off]
-    -t ${chalk.bold.underline('TOKEN')}, --token=${chalk.bold.underline(
-    'TOKEN'
-  )}        Login token
-    -S, --scope                    Set a custom scope
-    --challenge-only               Only show challenges needed to issue a cert
-    --crt ${chalk.bold.underline('FILE')}                     Certificate file
-    --key ${chalk.bold.underline(
-      'FILE'
-    )}                     Certificate key file
-    --ca ${chalk.bold.underline(
-      'FILE'
-    )}                      CA certificate chain file
-    -N, --next                     Show next page of results
-    --limit=${chalk.bold.underline(
-      'VALUE'
-    )}                  Number of results to return per page (default: 20, max: 100)
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray(
-    '–'
-  )} Generate a certificate with the cnames "acme.com" and "www.acme.com"
-
-      ${chalk.cyan(`$ ${packageName} certs issue acme.com www.acme.com`)}
-
-  ${chalk.gray('–')} Remove a certificate
-
-      ${chalk.cyan(`$ ${packageName} certs rm id`)}
-
-  ${chalk.gray('–')} Paginate results, where ${chalk.dim(
-    '`1584722256178`'
-  )} is the time in milliseconds since the UNIX epoch.
-
-      ${chalk.cyan(`$ ${packageName} certs ls --next 1584722256178`)}
-  `);
-};
 
 const COMMAND_CONFIG = {
   add: ['add'],
@@ -103,7 +41,7 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(help(certsCommand, { columns: client.stderr.columns }));
     return 2;
   }
 
@@ -123,7 +61,9 @@ export default async function main(client: Client) {
       return 1;
     default:
       output.error('Please specify a valid subcommand: ls | issue | rm');
-      help();
+      client.output.print(
+        help(certsCommand, { columns: client.stderr.columns })
+      );
       return 2;
   }
 }

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

@@ -0,0 +1,34 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const devCommand: Command = {
+  name: 'dev',
+  description: `Starts the \`${packageName} dev\` server.`,
+  arguments: [
+    {
+      name: 'dir',
+      required: false,
+    },
+  ],
+  options: [
+    {
+      name: 'listen',
+      description: 'Specify a URI endpoint on which to listen [0.0.0.0:3000]',
+      argument: 'uri',
+      shorthand: null,
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: `Start the \`${packageName} dev\` server on port 8080`,
+      value: `${packageName} dev --listen 8080`,
+    },
+    {
+      name: 'Make the `vercel dev` server bind to localhost on port 5000',
+      value: `${packageName} dev --listen 127.0.0.1:5000 `,
+    },
+  ],
+};

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

@@ -12,43 +12,16 @@ import highlight from '../../util/output/highlight';
 import dev from './dev';
 import readConfig from '../../util/config/read-config';
 import readJSONFile from '../../util/read-json-file';
-import { packageName, getCommandName, logo } from '../../util/pkg-name';
+import { packageName, getCommandName } from '../../util/pkg-name';
 import { CantParseJSONFile } from '../../util/errors-ts';
 import { isErrnoException } from '@vercel/error-utils';
+import { help } from '../help';
+import { devCommand } from './command';
 
 const COMMAND_CONFIG = {
   dev: ['dev'],
 };
 
-const help = () => {
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} dev`)} [options] <dir>
-
-  Starts the \`${packageName} dev\` server.
-
-  ${chalk.dim('Options:')}
-
-    -h, --help             Output usage information
-    -d, --debug            Debug mode [off]
-    --no-color             No color mode [off]
-    -l, --listen  [uri]    Specify a URI endpoint on which to listen [0.0.0.0:3000]
-    -t, --token   [token]  Specify an Authorization Token
-    -y, --yes              Skip questions when setting up new project using default scope and settings
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray('–')} Start the \`${packageName} dev\` server on port 8080
-
-      ${chalk.cyan(`$ ${packageName} dev --listen 8080`)}
-
-  ${chalk.gray(
-    '–'
-  )} Make the \`vercel dev\` server bind to localhost on port 5000
-
-      ${chalk.cyan(`$ ${packageName} dev --listen 127.0.0.1:5000`)}
-  `);
-};
-
 export default async function main(client: Client) {
   if (process.env.__VERCEL_DEV_RUNNING) {
     client.output.error(
@@ -100,7 +73,7 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(help(devCommand, { columns: client.stderr.columns }));
     return 2;
   }
 
@@ -118,7 +91,7 @@ export default async function main(client: Client) {
     const pkg = await readJSONFile<PackageJson>(path.join(dir, 'package.json'));
 
     if (pkg instanceof CantParseJSONFile) {
-      client.output.error('Could not parse package.json');
+      client.output.error(pkg.message);
       return 1;
     }
 

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

@@ -0,0 +1,136 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const dnsCommand: Command = {
+  name: 'dns',
+  description: 'Interact with DNS entries for a project.',
+  arguments: [
+    {
+      name: 'command',
+      required: true,
+    },
+  ],
+  subcommands: [
+    {
+      name: 'import',
+      description: 'Import a DNS zone file (see below for examples)',
+      arguments: [
+        {
+          name: 'domain',
+          required: true,
+        },
+        {
+          name: 'zonefile',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'ls',
+      description: 'List all DNS entries for a domain',
+      arguments: [
+        {
+          name: 'domain',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'add',
+      description: 'Add a new DNS entry (see below for examples)',
+      arguments: [
+        {
+          name: 'details',
+          required: true,
+        },
+        {
+          name: 'alias',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'rm',
+      description: 'Remove a DNS entry using its ID',
+      arguments: [
+        {
+          name: 'id',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+  ],
+  options: [
+    {
+      name: 'next',
+      description: 'Show next page of results',
+      argument: 'MS',
+      shorthand: 'n',
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'limit',
+      shorthand: 'n',
+      description:
+        'Number of results to return per page (default: 20, max: 100)',
+      argument: 'NUMBER',
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: 'Add an A record for a subdomain',
+      value: [
+        `${packageName} dns add <DOMAIN> <SUBDOMAIN> <A | AAAA | ALIAS | CNAME | TXT>  <VALUE>`,
+        `${packageName} dns add zeit.rocks api A 198.51.100.100`,
+      ],
+    },
+    {
+      name: 'Add an MX record (@ as a name refers to the domain)',
+      value: [
+        `${packageName} dns add <DOMAIN> '@' MX <RECORD VALUE> <PRIORITY>`,
+        `${packageName} dns add zeit.rocks '@' MX mail.zeit.rocks 10`,
+      ],
+    },
+    {
+      name: 'Add an SRV record',
+      value: [
+        `${packageName} dns add <DOMAIN> <NAME> SRV <PRIORITY> <WEIGHT> <PORT> <TARGET>`,
+        `${packageName} dns add zeit.rocks '@' SRV 10 0 389 zeit.party`,
+      ],
+    },
+    {
+      name: 'Add a CAA record',
+      value: [
+        `${packageName} dns add <DOMAIN> <NAME> CAA '<FLAGS> <TAG> "<VALUE>"'`,
+        `${packageName} dns add zeit.rocks '@' CAA '0 issue "example.com"'`,
+      ],
+    },
+    {
+      name: 'Import a Zone file',
+      value: [
+        `${packageName} dns import <DOMAIN> <FILE>`,
+        `${packageName} dns import zeit.rocks ./zonefile.txt`,
+      ],
+    },
+    {
+      name: 'Paginate results, where `1584722256178` is the time in milliseconds since the UNIX epoch.',
+      value: [
+        `${packageName} dns ls --next 1584722256178`,
+        `${packageName} dns ls zeit.rocks --next 1584722256178`,
+      ],
+    },
+  ],
+};

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

@@ -1,96 +1,14 @@
-import chalk from 'chalk';
-
 import Client from '../../util/client';
 import getArgs from '../../util/get-args';
 import getSubcommand from '../../util/get-subcommand';
 import handleError from '../../util/handle-error';
-import { packageName, logo } from '../../util/pkg-name';
 
 import add from './add';
 import importZone from './import';
 import ls from './ls';
 import rm from './rm';
-
-const help = () => {
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} dns`)} [options] <command>
-
-  ${chalk.dim('Commands:')}
-
-    add     [details]             Add a new DNS entry (see below for examples)
-    import  [domain] [zonefile]   Import a DNS zone file (see below for examples)
-    rm      [id]                  Remove a DNS entry using its ID
-    ls      [domain]              List all DNS entries for a domain
-
-  ${chalk.dim('Options:')}
-
-    -h, --help                     Output usage information
-    -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
-    'FILE'
-  )}   Path to the local ${'`vercel.json`'} file
-    -Q ${chalk.bold.underline('DIR')}, --global-config=${chalk.bold.underline(
-    'DIR'
-  )}    Path to the global ${'`.vercel`'} directory
-    -d, --debug                    Debug mode [off]
-    --no-color                     No color mode [off]
-    -t ${chalk.bold.underline('TOKEN')}, --token=${chalk.bold.underline(
-    'TOKEN'
-  )}        Login token
-    -S, --scope                    Set a custom scope
-    -N, --next                     Show next page of results
-    --limit=${chalk.bold.underline(
-      'VALUE'
-    )}                  Number of results to return per page (default: 20, max: 100)
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray('–')} Add an A record for a subdomain
-
-      ${chalk.cyan(
-        `$ ${packageName} dns add <DOMAIN> <SUBDOMAIN> <A | AAAA | ALIAS | CNAME | TXT>  <VALUE>`
-      )}
-      ${chalk.cyan(`$ ${packageName} dns add zeit.rocks api A 198.51.100.100`)}
-
-  ${chalk.gray('–')} Add an MX record (@ as a name refers to the domain)
-
-      ${chalk.cyan(
-        `$ ${packageName} dns add <DOMAIN> '@' MX <RECORD VALUE> <PRIORITY>`
-      )}
-      ${chalk.cyan(
-        `$ ${packageName} dns add zeit.rocks '@' MX mail.zeit.rocks 10`
-      )}
-
-  ${chalk.gray('–')} Add an SRV record
-
-      ${chalk.cyan(
-        `$ ${packageName} dns add <DOMAIN> <NAME> SRV <PRIORITY> <WEIGHT> <PORT> <TARGET>`
-      )}
-      ${chalk.cyan(
-        `$ ${packageName} dns add zeit.rocks '@' SRV 10 0 389 zeit.party`
-      )}
-
-  ${chalk.gray('–')} Add a CAA record
-
-      ${chalk.cyan(
-        `$ ${packageName} dns add <DOMAIN> <NAME> CAA '<FLAGS> <TAG> "<VALUE>"'`
-      )}
-      ${chalk.cyan(
-        `$ ${packageName} dns add zeit.rocks '@' CAA '0 issue "example.com"'`
-      )}
-
-  ${chalk.gray('–')} Import a Zone file
-
-      ${chalk.cyan(`$ ${packageName} dns import <DOMAIN> <FILE>`)}
-      ${chalk.cyan(`$ ${packageName} dns import zeit.rocks ./zonefile.txt`)}
-
-  ${chalk.gray('–')} Paginate results, where ${chalk.dim(
-    '`1584722256178`'
-  )} is the time in milliseconds since the UNIX epoch.
-
-      ${chalk.cyan(`$ ${packageName} dns ls --next 1584722256178`)}
-      ${chalk.cyan(`$ ${packageName} dns ls zeit.rocks --next 1584722256178`)}
-`);
-};
+import { dnsCommand } from './command';
+import { help } from '../help';
 
 const COMMAND_CONFIG = {
   add: ['add'],
@@ -99,7 +17,7 @@ const COMMAND_CONFIG = {
   rm: ['rm', 'remove'],
 };
 
-export default async function main(client: Client) {
+export default async function dns(client: Client) {
   let argv;
 
   try {
@@ -114,7 +32,7 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(help(dnsCommand, { columns: client.stderr.columns }));
     return 2;
   }
 

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

@@ -0,0 +1,153 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const domainsCommand: Command = {
+  name: 'domains',
+  description: 'Manage domains',
+  arguments: [
+    {
+      name: 'command',
+      required: true,
+    },
+  ],
+  subcommands: [
+    {
+      name: 'ls',
+      description: 'Show all domains in a list',
+      arguments: [],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'inspect',
+      description: 'Displays information related to a domain',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'add',
+      description: 'Add a new domain that you already own',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+        {
+          name: 'project',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'rm',
+      description: 'Remove a domain',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'buy',
+      description: "Buy a domain that you don't yet own",
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'move',
+      description: 'Move a domain to another user or team',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+        {
+          name: 'destination',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'transfer-in',
+      description: 'Transfer in a domain to Vercel',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+  ],
+  options: [
+    {
+      name: 'next',
+      description: 'Show next page of results',
+      shorthand: 'N',
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'yes',
+      description: 'Skip the confirmation prompt when removing a domain',
+      shorthand: 'y',
+      type: 'boolean',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'limit',
+      shorthand: 'n',
+      description:
+        'Number of results to return per page (default: 20, max: 100)',
+      argument: 'NUMBER',
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'force',
+      shorthand: 'f',
+      type: 'boolean',
+      deprecated: false,
+      description:
+        'Force a domain on a project and remove it from an existing one',
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: 'Add a domain that you already own',
+      value: [
+        `${packageName} domains add domain-name.com`,
+        "Make sure the domain's DNS nameservers are at least 2 of the ones listed on https://vercel.com/edge-network",
+        `NOTE: Running ${packageName} alias will automatically register your domain if it's configured with these nameservers (no need to 'domains add')`,
+      ],
+    },
+    {
+      name: 'Paginate results, where `1584722256178` is the time in milliseconds since the UNIX epoch',
+      value: `${packageName} domains ls--next 1584722256178`,
+    },
+  ],
+};

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

@@ -1,5 +1,3 @@
-import chalk from 'chalk';
-
 import Client from '../../util/client';
 import getArgs from '../../util/get-args';
 import getSubcommand from '../../util/get-subcommand';
@@ -11,69 +9,8 @@ import inspect from './inspect';
 import ls from './ls';
 import rm from './rm';
 import move from './move';
-import { packageName, logo } from '../../util/pkg-name';
-
-const help = () => {
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} domains`)} [options] <command>
-
-  ${chalk.dim('Commands:')}
-
-    ls                                  Show all domains in a list
-    inspect      [name]                 Displays information related to a domain
-    add          [name] [project]       Add a new domain that you already own
-    rm           [name]                 Remove a domain
-    buy          [name]                 Buy a domain that you don't yet own
-    move         [name] [destination]   Move a domain to another user or team.
-    transfer-in  [name]                 Transfer in a domain to Vercel
-
-  ${chalk.dim('Options:')}
-
-    -h, --help                     Output usage information
-    -d, --debug                    Debug mode [off]
-    --no-color                     No color mode [off]
-    -f, --force                    Force a domain on a project and remove it from an existing one
-    -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
-    'FILE'
-  )}   Path to the local ${'`vercel.json`'} file
-    -Q ${chalk.bold.underline('DIR')}, --global-config=${chalk.bold.underline(
-    'DIR'
-  )}    Path to the global ${'`.vercel`'} directory
-    -t ${chalk.bold.underline('TOKEN')}, --token=${chalk.bold.underline(
-    'TOKEN'
-  )}        Login token
-    -S, --scope                    Set a custom scope
-    -N, --next                     Show next page of results
-    --limit=${chalk.bold.underline(
-      'VALUE'
-    )}                  Number of results to return per page (default: 20, max: 100)
-    -y, --yes                      Skip the confirmation prompt when removing a domain
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray('–')} Add a domain that you already own
-
-      ${chalk.cyan(
-        `$ ${packageName} domains add ${chalk.underline('domain-name.com')}`
-      )}
-
-      Make sure the domain's DNS nameservers are at least 2 of the
-      ones listed on ${chalk.underline('https://vercel.com/edge-network')}.
-
-      ${chalk.yellow('NOTE:')} Running ${chalk.dim(
-    `${packageName} alias`
-  )} will automatically register your domain
-      if it's configured with these nameservers (no need to ${chalk.dim(
-        '`domain add`'
-      )}).
-
-  ${chalk.gray('–')} Paginate results, where ${chalk.dim(
-    '`1584722256178`'
-  )} is the time in milliseconds since the UNIX epoch.
-
-      ${chalk.cyan(`$ ${packageName} domains ls --next 1584722256178`)}
-`);
-};
+import { domainsCommand } from './command';
+import { help } from '../help';
 
 const COMMAND_CONFIG = {
   add: ['add'],
@@ -104,7 +41,9 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(
+      help(domainsCommand, { columns: client.stderr.columns })
+    );
     return 2;
   }
 

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

@@ -0,0 +1,157 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+import { getEnvTargetPlaceholder } from '../../util/env/env-target';
+
+const targetPlaceholder = getEnvTargetPlaceholder();
+
+export const envCommand: Command = {
+  name: 'env',
+  description: 'Interact with environment variables.',
+  arguments: [
+    {
+      name: 'command',
+      required: false,
+    },
+  ],
+  subcommands: [
+    {
+      name: 'ls',
+      description: 'List all variables for the specified Environment',
+      arguments: [],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'add',
+      description: 'Add an Environment Variable (see examples below)',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+        {
+          name: 'environment',
+          required: false,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'rm',
+      description: 'Remove an Environment Variable (see examples below)',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+        {
+          name: 'environment',
+          required: false,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'pull',
+      description:
+        'Pull all Development Environment Variables from the cloud and write to a file [.env.local]',
+      arguments: [
+        {
+          name: 'filename',
+          required: false,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+  ],
+  options: [
+    {
+      name: 'environment',
+      description:
+        'Set the Environment (development, preview, production) when pulling Environment Variables',
+      shorthand: null,
+      type: 'boolean',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'git-branch',
+      description:
+        'Specify the Git branch to pull specific Environment Variables for',
+      shorthand: null,
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+    {
+      name: 'yes',
+      description: 'Skip the confirmation prompt when removing an alias',
+      shorthand: 'y',
+      type: 'boolean',
+      deprecated: false,
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: 'Pull all Development Environment Variables down from the cloud',
+      value: [
+        `${packageName} env pull <file>`,
+        `${packageName} env pull .env.development.local`,
+      ],
+    },
+    {
+      name: 'Add a new variable to multiple Environments',
+      value: [
+        `${packageName} env add <name>`,
+        `${packageName} env add API_TOKEN`,
+      ],
+    },
+    {
+      name: 'Add a new variable for a specific Environment',
+      value: [
+        `${packageName} env add <name> ${targetPlaceholder}`,
+        `${packageName} env add DB_PASS production`,
+      ],
+    },
+    {
+      name: 'Add a new variable for a specific Environment and Git Branch',
+      value: [
+        `${packageName} env add <name> ${targetPlaceholder} <gitbranch>`,
+        `${packageName} env add DB_PASS preview feat1`,
+      ],
+    },
+    {
+      name: 'Add a new Environment Variable from stdin',
+      value: [
+        `cat <file> | ${packageName} env add <name> ${targetPlaceholder}`,
+        `cat ~/.npmrc | ${packageName} env add NPM_RC preview`,
+        `${packageName} env add API_URL production < url.txt`,
+      ],
+    },
+    {
+      name: 'Remove a variable from multiple Environments',
+      value: [
+        `${packageName} env rm <name>`,
+        `${packageName} env rm API_TOKEN`,
+      ],
+    },
+    {
+      name: 'Remove a variable from a specific Environment',
+      value: [
+        `${packageName} env rm <name> ${targetPlaceholder}`,
+        `${packageName} env rm NPM_RC preview`,
+      ],
+    },
+    {
+      name: 'Remove a variable from a specific Environment and Git Branch',
+      value: [
+        `${packageName} env rm <name> ${targetPlaceholder} <gitbranch>`,
+        `${packageName} env rm NPM_RC preview feat1`,
+      ],
+    },
+  ],
+};

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

@@ -8,99 +8,15 @@ import getArgs from '../../util/get-args';
 import getInvalidSubcommand from '../../util/get-invalid-subcommand';
 import getSubcommand from '../../util/get-subcommand';
 import handleError from '../../util/handle-error';
-import { getCommandName, packageName, logo } from '../../util/pkg-name';
+import { help } from '../help';
+import { getCommandName } from '../../util/pkg-name';
 import { getLinkedProject } from '../../util/projects/link';
+
 import add from './add';
 import ls from './ls';
 import pull from './pull';
 import rm from './rm';
-
-const help = () => {
-  const targetPlaceholder = getEnvTargetPlaceholder();
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} env`)} [options] <command>
-
-  ${chalk.dim('Commands:')}
-
-    ls      [environment] [gitbranch]         List all variables for the specified Environment
-    add     [name] [environment] [gitbranch]  Add an Environment Variable (see examples below)
-    rm      [name] [environment] [gitbranch]  Remove an Environment Variable (see examples below)
-    pull    [filename]                        Pull all Development Environment Variables from the cloud and write to a file [.env.local]
-
-  ${chalk.dim('Options:')}
-
-    -h, --help                     Output usage information
-    --environment                  Set the Environment (development, preview, production) when pulling Environment Variables
-    --git-branch                   Specify the Git branch to pull specific Environment Variables for
-    -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
-    'FILE'
-  )}   Path to the local ${'`vercel.json`'} file
-    -Q ${chalk.bold.underline('DIR')}, --global-config=${chalk.bold.underline(
-    'DIR'
-  )}    Path to the global ${'`.vercel`'} directory
-    -d, --debug                    Debug mode [off]
-    --no-color                     No color mode [off]
-    -t ${chalk.bold.underline('TOKEN')}, --token=${chalk.bold.underline(
-    'TOKEN'
-  )}        Login token
-    -y, --yes                      Skip the confirmation prompt when overwriting env file on pull or removing an env variable
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray(
-    '–'
-  )} Pull all Development Environment Variables down from the cloud
-
-      ${chalk.cyan(`$ ${packageName} env pull <file>`)}
-      ${chalk.cyan(`$ ${packageName} env pull .env.development.local`)}
-
-  ${chalk.gray('–')} Add a new variable to multiple Environments
-
-      ${chalk.cyan(`$ ${packageName} env add <name>`)}
-      ${chalk.cyan(`$ ${packageName} env add API_TOKEN`)}
-
-  ${chalk.gray('–')} Add a new variable for a specific Environment
-
-      ${chalk.cyan(`$ ${packageName} env add <name> ${targetPlaceholder}`)}
-      ${chalk.cyan(`$ ${packageName} env add DB_PASS production`)}
-
-  ${chalk.gray(
-    '–'
-  )} Add a new variable for a specific Environment and Git Branch
-
-      ${chalk.cyan(
-        `$ ${packageName} env add <name> ${targetPlaceholder} <gitbranch>`
-      )}
-      ${chalk.cyan(`$ ${packageName} env add DB_PASS preview feat1`)}
-
-  ${chalk.gray('–')} Add a new Environment Variable from stdin
-
-      ${chalk.cyan(
-        `$ cat <file> | ${packageName} env add <name> ${targetPlaceholder}`
-      )}
-      ${chalk.cyan(`$ cat ~/.npmrc | ${packageName} env add NPM_RC preview`)}
-      ${chalk.cyan(`$ ${packageName} env add API_URL production < url.txt`)}
-
-  ${chalk.gray('–')} Remove a variable from multiple Environments
-
-      ${chalk.cyan(`$ ${packageName} env rm <name>`)}
-      ${chalk.cyan(`$ ${packageName} env rm API_TOKEN`)}
-
-  ${chalk.gray('–')} Remove a variable from a specific Environment
-
-      ${chalk.cyan(`$ ${packageName} env rm <name> ${targetPlaceholder}`)}
-      ${chalk.cyan(`$ ${packageName} env rm NPM_RC preview`)}
-
-  ${chalk.gray(
-    '–'
-  )} Remove a variable from a specific Environment and Git Branch
-
-      ${chalk.cyan(
-        `$ ${packageName} env rm <name> ${targetPlaceholder} <gitbranch>`
-      )}
-      ${chalk.cyan(`$ ${packageName} env rm NPM_RC preview feat1`)}
-`);
-};
+import { envCommand } from './command';
 
 const COMMAND_CONFIG = {
   ls: ['ls', 'list'],
@@ -125,7 +41,7 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(help(envCommand, { columns: client.stderr.columns }));
     return 2;
   }
 
@@ -177,7 +93,9 @@ export default async function main(client: Client) {
         );
       default:
         output.error(getInvalidSubcommand(COMMAND_CONFIG));
-        help();
+        client.output.print(
+          help(envCommand, { columns: client.stderr.columns })
+        );
         return 2;
     }
   }

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

@@ -24,6 +24,7 @@ import {
 } from '../../util/env/diff-env-files';
 import { isErrnoException } from '@vercel/error-utils';
 import { addToGitIgnore } from '../../util/link/add-to-gitignore';
+import JSONparse from 'json-parse-better-errors';
 
 const CONTENTS_PREFIX = '# Created by Vercel CLI\n';
 
@@ -121,7 +122,7 @@ export default async function pull(
       // We need this because double quotes are stripped from the local .env file,
       // but `records` is already in the form of a JSON object that doesn't filter
       // double quotes.
-      const newEnv = JSON.parse(JSON.stringify(records).replace(/\\"/g, ''));
+      const newEnv = JSONparse(JSON.stringify(records).replace(/\\"/g, ''));
       deltaString = buildDeltaString(oldEnv, newEnv);
     }
   }

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

@@ -0,0 +1,50 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const gitCommand: Command = {
+  name: 'git',
+  description: 'Manage your Git provider connections.',
+  arguments: [
+    {
+      name: 'command',
+      required: true,
+    },
+  ],
+  subcommands: [
+    {
+      name: 'connect',
+      description:
+        'Connect your Vercel Project to your Git repository or provide the remote URL to your Git repository',
+      arguments: [
+        {
+          name: 'git url',
+          required: false,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'disconnect',
+      description: 'Disconnect the Git provider repository from your project',
+      arguments: [],
+      options: [],
+      examples: [],
+    },
+  ],
+  options: [],
+  examples: [
+    {
+      name: 'Connect your Vercel Project to your Git repository defined in your local .git config',
+      value: `${packageName} git connect`,
+    },
+    {
+      name: 'Connect your Vercel Project to a Git repository using the remote URL',
+      value: `${packageName} git connect https://github.com/user/repo.git`,
+    },
+    {
+      name: 'Disconnect the Git provider repository',
+      value: `${packageName} git disconnect`,
+    },
+  ],
+};

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

@@ -1,51 +1,12 @@
-import chalk from 'chalk';
 import Client from '../../util/client';
 import { ensureLink } from '../../util/link/ensure-link';
 import getArgs from '../../util/get-args';
 import getInvalidSubcommand from '../../util/get-invalid-subcommand';
 import handleError from '../../util/handle-error';
-import { packageName, logo } from '../../util/pkg-name';
 import connect from './connect';
 import disconnect from './disconnect';
-
-const help = () => {
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} git`)} <command>
-
-  ${chalk.dim('Commands:')}
-
-    connect [url]             Connect your Vercel Project to your Git repository or provide the remote URL to your Git repository
-    disconnect                Disconnect the Git provider repository from your project
-
-  ${chalk.dim('Options:')}
-
-    -h, --help                Output usage information
-    -t ${chalk.bold.underline('TOKEN')}, --token=${chalk.bold.underline(
-    'TOKEN'
-  )}   Login token
-    -y, --yes                 Skip confirmation when connecting a Git provider
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray(
-    '–'
-  )} Connect your Vercel Project to your Git repository defined in your local .git config
-
-    ${chalk.cyan(`$ ${packageName} git connect`)}
-
-  ${chalk.gray(
-    '–'
-  )} Connect your Vercel Project to a Git repository using the remote URL
-
-    ${chalk.cyan(
-      `$ ${packageName} git connect https://github.com/user/repo.git`
-    )}
-
-  ${chalk.gray('–')} Disconnect the Git provider repository
-
-    ${chalk.cyan(`$ ${packageName} git disconnect`)}
-`);
-};
+import { help } from '../help';
+import { gitCommand } from './command';
 
 const COMMAND_CONFIG = {
   connect: ['connect'],
@@ -71,7 +32,7 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(help(gitCommand, { columns: client.stderr.columns }));
     return 2;
   }
 
@@ -96,7 +57,7 @@ export default async function main(client: Client) {
       return await disconnect(client, args, project, org);
     default:
       output.error(getInvalidSubcommand(COMMAND_CONFIG));
-      help();
+      client.output.print(help(gitCommand, { columns: client.stderr.columns }));
       return 2;
   }
 }

packages/cli/src/commands/help.ts

@@ -12,6 +12,7 @@ export interface CommandOption {
   argument?: string;
   deprecated: boolean;
   description?: string;
+  /** supports multiple entries */
   multi: boolean;
 }
 export interface CommandArgument {
@@ -26,6 +27,7 @@ export interface Command {
   name: string;
   description: string;
   arguments: CommandArgument[];
+  subcommands?: Command[];
   options: CommandOption[];
   examples: CommandExample[];
 }
@@ -36,6 +38,30 @@ type _CellOptions = CellOptions & {
   wordWrap?: boolean;
 };
 
+const tableOptions = {
+  chars: {
+    top: '',
+    'top-mid': '',
+    'top-left': '',
+    'top-right': '',
+    bottom: '',
+    'bottom-mid': '',
+    'bottom-left': '',
+    'bottom-right': '',
+    left: '',
+    'left-mid': '',
+    mid: '',
+    'mid-mid': '',
+    right: '',
+    'right-mid': '',
+    middle: '',
+  },
+  style: {
+    'padding-left': 0,
+    'padding-right': 0,
+  },
+};
+
 const globalCommandOptions: CommandOption[] = [
   {
     name: 'help',
@@ -116,6 +142,28 @@ const globalCommandOptions: CommandOption[] = [
   },
 ];
 
+// Use the word wrapping ability of cli-table3
+// by creating a one row, one cell, one column table.
+// This allows us to avoid pulling in the word-wrap
+// package which ironically seems to do a worse job.
+function wordWrap(text: string, maxWidth: number) {
+  const _tableOptions = Object.assign({}, tableOptions, {
+    colWidths: [maxWidth],
+    style: {
+      'padding-left': INDENT.length,
+    },
+  });
+  const table = new Table(_tableOptions);
+  table.push([
+    {
+      content: text,
+      wordWrap: true,
+    } as _CellOptions,
+  ]);
+
+  return table.toString();
+}
+
 // Insert spaces in between non-whitespace items only
 export function lineToString(line: string[]) {
   let string = '';
@@ -183,8 +231,8 @@ export function buildCommandOptionLines(
   );
 
   // word wrapping requires the wrapped cell to have a fixed width.
-  // We need to track cell sizes to make the final column of cells is
-  // equal to  the remaindner of unused horizontal space.
+  // We need to track cell sizes to ensure the final column of cells is
+  // equal to the remainder of unused horizontal space.
   let maxWidthOfUnwrappedColumns = 0;
   const rows: (string | undefined | _CellOptions)[][] = [];
   for (const option of commandOptions) {
@@ -217,30 +265,11 @@ export function buildCommandOptionLines(
 
   const finalColumnWidth = options.columns - maxWidthOfUnwrappedColumns;
 
-  const table = new Table({
-    chars: {
-      top: '',
-      'top-mid': '',
-      'top-left': '',
-      'top-right': '',
-      bottom: '',
-      'bottom-mid': '',
-      'bottom-left': '',
-      'bottom-right': '',
-      left: '',
-      'left-mid': '',
-      mid: '',
-      'mid-mid': '',
-      right: '',
-      'right-mid': '',
-      middle: '',
-    },
-    style: {
-      'padding-left': 0,
-      'padding-right': 0,
-    },
-    colWidths: [null, null, finalColumnWidth],
-  });
+  const table = new Table(
+    Object.assign({}, tableOptions, {
+      colWidths: [null, null, finalColumnWidth],
+    })
+  );
 
   table.push(...rows);
   return [
@@ -253,6 +282,69 @@ export function buildCommandOptionLines(
   ].join('');
 }
 
+export function buildSubcommandLines(
+  subcommands: Command[] | undefined,
+  options: BuildHelpOutputOptions
+) {
+  if (!subcommands) {
+    return null;
+  }
+
+  // word wrapping requires the wrapped cell to have a fixed width.
+  // We need to track cell sizes to ensure the final column of cells is
+  // equal to the remainder of unused horizontal space.
+  let maxWidthOfUnwrappedColumns = 0;
+  const rows: (string | undefined | _CellOptions)[][] = [];
+  for (const command of subcommands) {
+    const nameCell = `${INDENT}${command.name}`;
+    let argsCell = INDENT;
+
+    argsCell += command.arguments
+      .map(arg => {
+        return arg.required ? arg.name : `[${arg.name}]`;
+      })
+      .join(' ');
+
+    argsCell += INDENT;
+
+    const widthOfUnwrappedColumns = nameCell.length + argsCell.length;
+    maxWidthOfUnwrappedColumns = Math.max(
+      widthOfUnwrappedColumns,
+      maxWidthOfUnwrappedColumns
+    );
+
+    rows.push([
+      nameCell,
+      argsCell,
+      {
+        content: command.description,
+        wordWrap: true,
+      },
+    ]);
+  }
+
+  // Really long descriptions go RIGHT up to the edge, which looks unpleasant.
+  const rightMargin = INDENT.repeat(4).length;
+  const finalColumnWidth =
+    options.columns - maxWidthOfUnwrappedColumns - rightMargin;
+
+  const table = new Table(
+    Object.assign({}, tableOptions, {
+      colWidths: [null, null, finalColumnWidth],
+    })
+  );
+
+  table.push(...rows);
+  return [
+    `${INDENT}${chalk.dim('Commands')}:`,
+    NEWLINE,
+    NEWLINE,
+    table.toString(),
+    NEWLINE,
+    NEWLINE,
+  ].join('');
+}
+
 export function buildCommandExampleLines(command: Command) {
   const outputArray: string[] = [`${INDENT}${chalk.dim('Examples:')}`, ''];
   for (const example of command.examples) {
@@ -277,9 +369,12 @@ export function buildCommandExampleLines(command: Command) {
   return outputArrayToString(outputArray);
 }
 
-function buildDescriptionLine(command: Command) {
-  const line: string[] = [INDENT, command.description, NEWLINE];
-  return lineToString(line);
+function buildDescriptionLine(
+  command: Command,
+  options: BuildHelpOutputOptions
+) {
+  let wrapingText = wordWrap(command.description, options.columns);
+  return `${wrapingText}${NEWLINE}`;
 }
 
 interface BuildHelpOutputOptions {
@@ -293,7 +388,8 @@ export function buildHelpOutput(
   const outputArray: (string | null)[] = [
     '',
     buildCommandSynopsisLine(command),
-    buildDescriptionLine(command),
+    buildDescriptionLine(command, options),
+    buildSubcommandLines(command.subcommands, options),
     buildCommandOptionLines(command.options, options, 'Options'),
     buildCommandOptionLines(globalCommandOptions, options, 'Global Options'),
     buildCommandExampleLines(command),

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

@@ -0,0 +1,47 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const initCommand: Command = {
+  name: 'init',
+  description: 'Initialize example Vercel Projects',
+  arguments: [
+    {
+      name: 'example',
+      required: false,
+    },
+    {
+      name: 'dir',
+      required: false,
+    },
+  ],
+  subcommands: undefined,
+  options: [
+    {
+      name: 'force',
+      description: 'Overwrite destination directory if exists [off]',
+      argument: undefined,
+      shorthand: 'f',
+      type: 'boolean',
+      deprecated: false,
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: 'Choose from all available examples',
+      value: `${packageName} init`,
+    },
+    {
+      name: 'Initialize example project into a new directory',
+      value: `${packageName} init <example>`,
+    },
+    {
+      name: 'Initialize example project into specified directory',
+      value: `${packageName} <example> <dir>`,
+    },
+    {
+      name: 'Initialize example project without checking',
+      value: `${packageName} init <example> --force`,
+    },
+  ],
+};

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

@@ -1,48 +1,16 @@
-import chalk from 'chalk';
-
 import getArgs from '../../util/get-args';
 import getSubcommand from '../../util/get-subcommand';
 import Client from '../../util/client';
 import handleError from '../../util/handle-error';
 import init from './init';
-import { packageName, logo } from '../../util/pkg-name';
 import { isError } from '@vercel/error-utils';
+import { help } from '../help';
+import { initCommand } from './command';
 
 const COMMAND_CONFIG = {
   init: ['init'],
 };
 
-const help = () => {
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} init`)} [example] [dir] [-f | --force]
-
-  ${chalk.dim('Options:')}
-
-    -h, --help        Output usage information
-    -d, --debug       Debug mode [off]
-    --no-color        No color mode [off]
-    -f, --force       Overwrite destination directory if exists [off]
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray('–')}  Choose from all available examples
-
-      ${chalk.cyan(`$ ${packageName} init`)}
-
-  ${chalk.gray('–')}  Initialize example project into a new directory
-
-      ${chalk.cyan(`$ ${packageName} init <example>`)}
-
-  ${chalk.gray('–')}  Initialize example project into specified directory
-
-      ${chalk.cyan(`$ ${packageName} init <example> <dir>`)}
-
-  ${chalk.gray('–')}  Initialize example project without checking
-
-      ${chalk.cyan(`$ ${packageName} init <example> --force`)}
-  `);
-};
-
 export default async function main(client: Client) {
   const { output } = client;
   let argv;
@@ -60,7 +28,7 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(help(initCommand, { columns: client.stderr.columns }));
     return 2;
   }
 

packages/cli/src/commands/project/command.ts

@@ -0,0 +1,67 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const projectCommand: Command = {
+  name: 'project',
+  description: 'Manage your Vercel Projects.',
+  arguments: [
+    {
+      name: 'command',
+      required: true,
+    },
+  ],
+  subcommands: [
+    {
+      name: 'ls',
+      description: 'Show all projects in the selected team/user',
+      arguments: [],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'add',
+      description: 'Add a new project',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+    {
+      name: 'rm',
+      description: 'Remove a project',
+      arguments: [
+        {
+          name: 'name',
+          required: true,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+  ],
+  options: [
+    {
+      name: 'next',
+      description: 'Show next page of results',
+      argument: 'MS',
+      shorthand: 'N',
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: 'Add a new project',
+      value: `${packageName} project add my-project`,
+    },
+    {
+      name: 'Paginate projects, where `1584722256178` is the time in milliseconds since the UNIX epoch',
+      value: `${packageName} project ls --next 1584722256178`,
+    },
+  ],
+};

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

@@ -1,46 +1,13 @@
-import chalk from 'chalk';
 import Client from '../../util/client';
 import getArgs from '../../util/get-args';
 import getInvalidSubcommand from '../../util/get-invalid-subcommand';
 import getScope from '../../util/get-scope';
 import handleError from '../../util/handle-error';
-import { packageName, logo } from '../../util/pkg-name';
+import { help } from '../help';
 import add from './add';
 import list from './list';
 import rm from './rm';
-
-const help = () => {
-  console.log(`
-  ${chalk.bold(`${logo} ${packageName} project`)} [options] <command>
-
-  ${chalk.dim('Commands:')}
-
-    ls                               Show all projects in the selected team/user
-    add      [name]                  Add a new project
-    rm       [name]                  Remove a project
-
-  ${chalk.dim('Options:')}
-
-    -h, --help                     Output usage information
-    -t ${chalk.bold.underline('TOKEN')}, --token=${chalk.bold.underline(
-    'TOKEN'
-  )}        Login token
-    -S, --scope                    Set a custom scope
-    -N, --next                     Show next page of results
-
-  ${chalk.dim('Examples:')}
-
-  ${chalk.gray('–')} Add a new project
-
-    ${chalk.cyan(`$ ${packageName} project add my-project`)}
-
-  ${chalk.gray('–')} Paginate projects, where ${chalk.dim(
-    '`1584722256178`'
-  )} is the time in milliseconds since the UNIX epoch.
-
-    ${chalk.cyan(`$ ${packageName} project ls --next 1584722256178`)}
-`);
-};
+import { projectCommand } from './command';
 
 const COMMAND_CONFIG = {
   ls: ['ls', 'list'],
@@ -63,7 +30,9 @@ export default async function main(client: Client) {
   }
 
   if (argv['--help']) {
-    help();
+    client.output.print(
+      help(projectCommand, { columns: client.stderr.columns })
+    );
     return 2;
   }
 
@@ -84,7 +53,9 @@ export default async function main(client: Client) {
       return await rm(client, args);
     default:
       output.error(getInvalidSubcommand(COMMAND_CONFIG));
-      help();
+      client.output.print(
+        help(projectCommand, { columns: client.stderr.columns })
+      );
       return 2;
   }
 }

packages/cli/src/commands/promote/command.ts

@@ -0,0 +1,53 @@
+import { Command } from '../help';
+import { packageName } from '../../util/pkg-name';
+
+export const promoteCommand: Command = {
+  name: 'promote',
+  description: 'Promote an existing deployment to current.',
+  arguments: [
+    {
+      name: 'deployment id/url',
+      required: true,
+    },
+  ],
+  subcommands: [
+    {
+      name: 'status',
+      description: 'Show the status of any current pending promotions',
+      arguments: [
+        {
+          name: 'project',
+          required: false,
+        },
+      ],
+      options: [],
+      examples: [],
+    },
+  ],
+  options: [
+    {
+      name: 'timeout',
+      description: 'Time to wait for promotion completion [3m]',
+      argument: 'timeout',
+      shorthand: null,
+      type: 'string',
+      deprecated: false,
+      multi: false,
+    },
+  ],
+  examples: [
+    {
+      name: 'Show the status of any current pending promotions',
+      value: [
+        `${packageName} promote`,
+        `${packageName} promote status`,
+        `${packageName} promote status <project>`,
+        `${packageName} promote status --timeout 30s`,
+      ],
+    },
+    {
+      name: 'Promote a deployment using id or url',
+      value: `${packageName} promote <deployment id/url>`,
+    },
+  ],
+};