Merge branch 'main' into pr/9033

vitejs · Jul 22, 2022 · 1afc1a4 · 1afc1a4
2 parents 8d1c6ee + ea27701
commit 1afc1a4
Show file tree

Hide file tree

Showing 207 changed files with 3,820 additions and 2,302 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -137,13 +137,13 @@ module.exports = defineConfig({
         'node/no-unsupported-features/es-builtins': [
           'error',
           {
-            version: '>=14.18.0'
+            version: '^14.18.0 || >=16.0.0'
           }
         ],
         'node/no-unsupported-features/node-builtins': [
           'error',
           {
-            version: '>=14.18.0'
+            version: '^14.18.0 || >=16.0.0'
           }
         ]
       }

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@
 - 🔩 Universal Plugin Interface
 - 🔑 Fully Typed APIs
 
-Vite (French word for "quick", pronounced [`/vit/`](https://cdn.jsdelivr.net/gh/vitejs/vite@main/docs/public/vite.mp3), like "veet") is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:
+Vite (French word for "quick", pronounced [`/vit/`](https://cdn.jsdelivr.net/gh/vitejs/vite@main/docs/public/vite.mp3), like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts:
 
 - A dev server that serves your source files over [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), with [rich built-in features](https://vitejs.dev/guide/features.html) and astonishingly fast [Hot Module Replacement (HMR)](https://vitejs.dev/guide/features.html#hot-module-replacement).
 
@@ -33,17 +33,6 @@ In addition, Vite is highly extensible via its [Plugin API](https://vitejs.dev/g
 
 [Read the Docs to Learn More](https://vitejs.dev).
 
-## v3.0
-
-Current Status: **Alpha** (for internal testing, not recommended for production)
-
-The `main` branch is now for v3.0, if you are looking for current stable releases, check the [`v2` branch](https://github.com/vitejs/vite/tree/v2) branch instead.
-
-We will start drafting release notes and migration guide for v3.0 when we enter the beta stage. Before that you can check:
-
-- [v3.0 Milestone](https://github.com/vitejs/vite/milestone/5)
-- [Breaking Change List](https://github.com/vitejs/vite/issues?q=label%3A%22breaking+change%22+is%3Aclosed+milestone%3A3.0)
-
 ## Packages
 
 | Package                                           | Version (click for changelogs)                                                                                                       |

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,12 +1,60 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig, DefaultTheme } from 'vitepress'
 
 const ogDescription = 'Next Generation Frontend Tooling'
-const ogImage = 'https://main.vitejs.dev/og-image.png'
+const ogImage = 'https://vitejs.dev/og-image.png'
 const ogTitle = 'Vite'
-const ogUrl = 'https://main.vitejs.dev'
+const ogUrl = 'https://vitejs.dev'
+
+// netlify envs
+const deployURL = process.env.DEPLOY_PRIME_URL || ''
+const commitRef = process.env.COMMIT_REF?.slice(0, 8) || 'dev'
+
+const deployType = (() => {
+  switch (deployURL) {
+    case 'https://main--vite-docs-main.netlify.app':
+      return 'main'
+    case '':
+      return 'local'
+    default:
+      return 'release'
+  }
+})()
+const additionalTitle = ((): string => {
+  switch (deployType) {
+    case 'main':
+      return ' (main branch)'
+    case 'local':
+      return ' (local)'
+    case 'release':
+      return ''
+  }
+})()
+const versionLinks = ((): DefaultTheme.NavItemWithLink[] => {
+  switch (deployType) {
+    case 'main':
+    case 'local':
+      return [
+        {
+          text: 'Vite 3 Docs (release)',
+          link: 'https://vitejs.dev'
+        },
+        {
+          text: 'Vite 2 Docs',
+          link: 'https://v2.vitejs.dev'
+        }
+      ]
+    case 'release':
+      return [
+        {
+          text: 'Vite 2 Docs',
+          link: 'https://v2.vitejs.dev'
+        }
+      ]
+  }
+})()
 
 export default defineConfig({
-  title: 'Vite',
+  title: `Vite${additionalTitle}`,
   description: 'Next Generation Frontend Tooling',
 
   head: [
@@ -15,11 +63,9 @@ export default defineConfig({
     ['meta', { property: 'og:title', content: ogTitle }],
     ['meta', { property: 'og:image', content: ogImage }],
     ['meta', { property: 'og:url', content: ogUrl }],
-    ['meta', { property: 'twitter:description', content: ogDescription }],
-    ['meta', { property: 'twitter:title', content: ogTitle }],
-    ['meta', { property: 'twitter:card', content: 'summary_large_image' }],
-    ['meta', { property: 'twitter:image', content: ogImage }],
-    ['meta', { property: 'twitter:url', content: ogUrl }]
+    ['meta', { property: 'og:description', content: ogDescription }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:site', content: '@vite_js' }]
   ],
 
   vue: {
@@ -41,6 +87,7 @@ export default defineConfig({
     ],
 
     algolia: {
+      appId: 'BH4D9OD16A',
       apiKey: 'b573aa848fd57fb47d693b531297403c',
       indexName: 'vitejs',
       searchParameters: {
@@ -63,7 +110,7 @@ export default defineConfig({
     },
 
     footer: {
-      message: 'Released under the MIT License.',
+      message: `Released under the MIT License. (${commitRef})`,
       copyright: 'Copyright © 2019-present Evan You & Vite Contributors'
     },
 
@@ -72,42 +119,42 @@ export default defineConfig({
       { text: 'Config', link: '/config/', activeMatch: '/config/' },
       { text: 'Plugins', link: '/plugins/', activeMatch: '/plugins/' },
       {
-        text: 'Links',
+        text: 'Resources',
         items: [
+          { text: 'Team', link: '/team' },
           {
-            text: 'Twitter',
-            link: 'https://twitter.com/vite_js'
-          },
-          {
-            text: 'Discord Chat',
-            link: 'https://chat.vitejs.dev'
-          },
-          {
-            text: 'Awesome Vite',
-            link: 'https://github.com/vitejs/awesome-vite'
-          },
-          {
-            text: 'DEV Community',
-            link: 'https://dev.to/t/vite'
-          },
-          {
-            text: 'Rollup Plugins Compat',
-            link: 'https://vite-rollup-plugins.patak.dev/'
-          },
-          {
-            text: 'Changelog',
-            link: 'https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md'
+            items: [
+              {
+                text: 'Twitter',
+                link: 'https://twitter.com/vite_js'
+              },
+              {
+                text: 'Discord Chat',
+                link: 'https://chat.vitejs.dev'
+              },
+              {
+                text: 'Awesome Vite',
+                link: 'https://github.com/vitejs/awesome-vite'
+              },
+              {
+                text: 'DEV Community',
+                link: 'https://dev.to/t/vite'
+              },
+              {
+                text: 'Rollup Plugins Compat',
+                link: 'https://vite-rollup-plugins.patak.dev/'
+              },
+              {
+                text: 'Changelog',
+                link: 'https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md'
+              }
+            ]
           }
         ]
       },
       {
-        text: 'v3 (next)',
-        items: [
-          {
-            text: 'v2.x (stable)',
-            link: 'https://v2.vitejs.dev'
-          }
-        ]
+        text: 'Version',
+        items: versionLinks
       }
     ],
 

diff --git a/docs/.vitepress/theme/components/SvgImage.vue b/docs/.vitepress/theme/components/SvgImage.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ svg: string }>()
+</script>
+
+<template>
+  <figure class="svg-image-root" v-html="svg" />
+</template>
+
+<style>
+.svg-image-root {
+  background-color: #eee;
+  border-radius: 8px;
+  padding: 1ch;
+  margin: 1ch 0;
+}
+html.dark .svg-image-root {
+  background-color: #313641;
+}
+.svg-image-root svg text {
+  font-family: var(--vp-font-family-base);
+}
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import Theme from 'vitepress/theme'
 import './styles/vars.css'
 import HomeSponsors from './components/HomeSponsors.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
+import SvgImage from './components/SvgImage.vue'
 
 export default {
   ...Theme,
@@ -11,5 +12,8 @@ export default {
       'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors)
     })
+  },
+  enhanceApp({ app }) {
+    app.component('SvgImage', SvgImage)
   }
 }
diff --git a/docs/.vitepress/theme/styles/vars.css b/docs/.vitepress/theme/styles/vars.css
@@ -6,6 +6,7 @@
   --vp-c-brand: #646cff;
   --vp-c-brand-light: #747bff;
   --vp-c-brand-lighter: #9499ff;
+  --vp-c-brand-lightest: #bcc0ff;
   --vp-c-brand-dark: #535bf2;
   --vp-c-brand-darker: #454ce1;
   --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
@@ -71,7 +72,7 @@
 
 .dark {
   --vp-custom-block-tip-border: var(--vp-c-brand);
-  --vp-custom-block-tip-text: var(--vp-c-brand-lighter);
+  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
   --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
 }
 
@@ -82,3 +83,34 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand) !important;
 }
+
+/**
+ * VitePress: Custom fix
+ * -------------------------------------------------------------------------- */
+
+/*
+  Use lighter colors for links in dark mode for a11y.
+  Also specify some classes twice to have higher specificity
+  over scoped class data attribute.
+*/
+.dark .vp-doc a,
+.dark .vp-doc a > code,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
+.dark .link.link:hover,
+.dark .link.link.active,
+.dark .edit-link-button.edit-link-button,
+.dark .pager-link .title {
+  color: var(--vp-c-brand-lighter);
+}
+
+.dark .vp-doc a:hover,
+.dark .vp-doc a > code:hover {
+  color: var(--vp-c-brand-lightest);
+  opacity: 1;
+}
+
+/* Transition by color instead of opacity */
+.dark .vp-doc .custom-block a {
+  transition: color 0.25s;
+}