From 40a482e6d575a966e570aac3a395b3a523ce1d72 Mon Sep 17 00:00:00 2001 From: Brenton Simpson Date: Wed, 12 Feb 2025 22:55:04 -0500 Subject: [PATCH 01/13] docs: add warning about overriding tsconfig types (#14861) Co-authored-by: patak <583075+patak-dev@users.noreply.github.com> Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com> --- guide/features.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/guide/features.md b/guide/features.md index fc2fe823..0a6d0013 100644 --- a/guide/features.md +++ b/guide/features.md @@ -129,12 +129,18 @@ Alternatively, you can add `vite/client` to `compilerOptions.types` inside `tsco ```json [tsconfig.json] { "compilerOptions": { - "types": ["vite/client"] + "types": ["vite/client", "some-other-global-lib"] } } ``` -This will provide the following type shims: +::: warning + +If [`compilerOptions.types`](https://www.typescriptlang.org/tsconfig#types) is specified, only these packages will be included in the global scope (instead of all visible ”@types” packages). + +::: + +`vite/client` provides the following type shims: - Asset imports (e.g. importing an `.svg` file) - Types for the Vite-injected [constant variables](./env-and-mode#env-variables) on `import.meta.env` From f470bae4330e182a5caa02e40ed998cc696904bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Thu, 13 Feb 2025 16:31:15 +0900 Subject: [PATCH 02/13] docs: cleanup features page (#19415) --- guide/features.md | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/guide/features.md b/guide/features.md index 0a6d0013..5f466c80 100644 --- a/guide/features.md +++ b/guide/features.md @@ -71,18 +71,13 @@ If a dependency doesn't work well with `"isolatedModules": true`. You can use `" - [TypeScript documentation](https://www.typescriptlang.org/tsconfig#useDefineForClassFields) -Starting from Vite 2.5.0, the default value will be `true` if the TypeScript target is `ESNext` or `ES2022` or newer. It is consistent with the [behavior of `tsc` 4.3.2 and later](https://github.com/microsoft/TypeScript/pull/42663). It is also the standard ECMAScript runtime behavior. - +The default value will be `true` if the TypeScript target is `ES2022` or newer including `ESNext`. It is consistent with the [behavior of TypeScript 4.3.2+](https://github.com/microsoft/TypeScript/pull/42663). Other TypeScript targets will default to `false`. -But it may be counter-intuitive for those coming from other programming languages or older versions of TypeScript. -You can read more about the transition in the [TypeScript 3.7 release notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier). +`true` is the standard ECMAScript runtime behavior. If you are using a library that heavily relies on class fields, please be careful about the library's intended usage of it. - -Most libraries expect `"useDefineForClassFields": true`, such as [MobX](https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties). - -But a few libraries haven't transitioned to this new default yet, including [`lit-element`](https://github.com/lit/lit-element/issues/1030). Please explicitly set `useDefineForClassFields` to `false` in these cases. +While most libraries expect `"useDefineForClassFields": true`, you can explicitly set `useDefineForClassFields` to `false` if your library doesn't support it. #### `target` @@ -124,6 +119,8 @@ Vite's default types are for its Node.js API. To shim the environment of client /// ``` +::: details Using `compilerOptions.types` + Alternatively, you can add `vite/client` to `compilerOptions.types` inside `tsconfig.json`: ```json [tsconfig.json] @@ -134,9 +131,7 @@ Alternatively, you can add `vite/client` to `compilerOptions.types` inside `tsco } ``` -::: warning - -If [`compilerOptions.types`](https://www.typescriptlang.org/tsconfig#types) is specified, only these packages will be included in the global scope (instead of all visible ”@types” packages). +Note that if [`compilerOptions.types`](https://www.typescriptlang.org/tsconfig#types) is specified, only these packages will be included in the global scope (instead of all visible ”@types” packages). ::: @@ -216,8 +211,6 @@ Vite provides first-class Vue support: - Vue 3 SFC support via [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) - Vue 3 JSX support via [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx) -- Vue 2.7 SFC support via [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2) -- Vue 2.7 JSX support via [@vitejs/plugin-vue2-jsx](https://github.com/vitejs/vite-plugin-vue2-jsx) ## JSX From 83fd9a3e16385d234cf03bbb5dd81c26fce7e3ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Thu, 13 Feb 2025 16:54:53 +0900 Subject: [PATCH 03/13] docs: extract introduction section (#19413) --- .vitepress/config.ts | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 83b2c750..ee41d71b 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -232,16 +232,25 @@ export default defineConfig({ sidebar: { '/guide/': [ { - text: 'Guide', + text: 'Introduction', items: [ - { - text: 'Why Vite', - link: '/guide/why', - }, { text: 'Getting Started', link: '/guide/', }, + { + text: 'Philosophy', + link: '/guide/philosophy', + }, + { + text: 'Why Vite', + link: '/guide/why', + }, + ], + }, + { + text: 'Guide', + items: [ { text: 'Features', link: '/guide/features', @@ -294,10 +303,6 @@ export default defineConfig({ text: 'Performance', link: '/guide/performance', }, - { - text: 'Philosophy', - link: '/guide/philosophy', - }, { text: 'Migration from v5', link: '/guide/migration', From 20687603079f06c706309d56b2f2d5923254dc12 Mon Sep 17 00:00:00 2001 From: patak <583075+patak-dev@users.noreply.github.com> Date: Thu, 13 Feb 2025 08:56:18 +0100 Subject: [PATCH 04/13] docs: sunset comparisons page (#19404) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 翠 / green --- .vitepress/config.ts | 4 ---- blog/announcing-vite2.md | 2 +- guide/comparisons.md | 21 --------------------- guide/why.md | 8 ++++++-- public/_redirects | 2 ++ 5 files changed, 9 insertions(+), 28 deletions(-) delete mode 100644 guide/comparisons.md diff --git a/.vitepress/config.ts b/.vitepress/config.ts index ee41d71b..8957174f 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -291,10 +291,6 @@ export default defineConfig({ text: 'Backend Integration', link: '/guide/backend-integration', }, - { - text: 'Comparisons', - link: '/guide/comparisons', - }, { text: 'Troubleshooting', link: '/guide/troubleshooting', diff --git a/blog/announcing-vite2.md b/blog/announcing-vite2.md index e966c791..47ee96d5 100644 --- a/blog/announcing-vite2.md +++ b/blog/announcing-vite2.md @@ -33,7 +33,7 @@ Vite (French word for "fast", pronounced `/vit/`) is a new kind of build tool fo To get a sense of how fast Vite is, check out [this video comparison](https://twitter.com/amasad/status/1355379680275128321) of booting up a React application on Repl.it using Vite vs. `create-react-app` (CRA). -If you've never heard of Vite before and would love to learn more about it, check out [the rationale behind the project](https://vite.dev/guide/why.html). If you are interested in how Vite differs from other similar tools, check out the [comparisons](https://vite.dev/guide/comparisons.html). +If you've never heard of Vite before and would love to learn more about it, check out [the rationale behind the project](https://vite.dev/guide/why.html). If you are interested in how Vite differs from other similar tools, check out the [comparisons](https://v5.vite.dev/guide/comparisons.html). ## What's New in 2.0 diff --git a/guide/comparisons.md b/guide/comparisons.md deleted file mode 100644 index 7d308d17..00000000 --- a/guide/comparisons.md +++ /dev/null @@ -1,21 +0,0 @@ -# Comparisons - -## WMR - -[WMR](https://github.com/preactjs/wmr) by the Preact team looked to provide a similar feature set. Vite's universal Rollup plugin API for dev and build was inspired by it. - -WMR is no longer maintained. The Preact team now recommends Vite with [@preactjs/preset-vite](https://github.com/preactjs/preset-vite). - -## @web/dev-server - -[@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) (previously `es-dev-server`) is a great project and Vite 1.0's Koa-based server setup was inspired by it. - -`@web/dev-server` is a bit lower-level in terms of scope. It does not provide official framework integrations, and requires manually setting up a Rollup configuration for the production build. - -Overall, Vite is a more opinionated / higher-level tool that aims to provide a more out-of-the-box workflow. That said, the `@web` umbrella project contains many other excellent tools that may benefit Vite users as well. - -## Snowpack - -[Snowpack](https://www.snowpack.dev/) was also a no-bundle native ESM dev server, very similar in scope to Vite. The project is no longer being maintained. The Snowpack team is now working on [Astro](https://astro.build/), a static site builder powered by Vite. The Astro team is now an active player in the ecosystem, and they are helping to improve Vite. - -Aside from different implementation details, the two projects shared a lot in terms of technical advantages over traditional tooling. Vite's dependency pre-bundling is also inspired by Snowpack v1 (now [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)). Some of the main differences between the two projects are listed in [the v2 Comparisons Guide](https://v2.vite.dev/guide/comparisons). diff --git a/guide/why.md b/guide/why.md index 4c5972fd..f5026850 100644 --- a/guide/why.md +++ b/guide/why.md @@ -57,6 +57,10 @@ Vite's current plugin API isn't compatible with using `esbuild` as a bundler. In Rollup has also been working on performance improvements, [switching its parser to SWC in v4](https://github.com/rollup/rollup/pull/5073). And there is an ongoing effort to build a Rust-port of Rollup called Rolldown. Once Rolldown is ready, it could replace both Rollup and esbuild in Vite, improving build performance significantly and removing inconsistencies between development and build. You can watch [Evan You's ViteConf 2023 keynote for more details](https://youtu.be/hrdwQHoAp0M). -## How is Vite Different from X? +## How Vite Relates to Other Unbundled Build Tools? -You can check out the [Comparisons](./comparisons.md) section for more details on how Vite differs from other similar tools. +[WMR](https://github.com/preactjs/wmr) by the Preact team looked to provide a similar feature set. Vite's universal Rollup plugin API for dev and build was inspired by it. WMR is no longer maintained. The Preact team now recommends Vite with [@preactjs/preset-vite](https://github.com/preactjs/preset-vite). + +[Snowpack](https://www.snowpack.dev/) was also a no-bundle native ESM dev server, very similar in scope to Vite. Vite's dependency pre-bundling is also inspired by Snowpack v1 (now [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)). Snowpack is no longer being maintained. The Snowpack team is now working on [Astro](https://astro.build/), a static site builder powered by Vite. + +[@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) (previously `es-dev-server`) is a great project and Vite 1.0's Koa-based server setup was inspired by it. The `@web` umbrella project is actively maintained and contains many other excellent tools that may benefit Vite users as well. diff --git a/public/_redirects b/public/_redirects index 4dc8a830..8603c5bf 100644 --- a/public/_redirects +++ b/public/_redirects @@ -5,3 +5,5 @@ https://vitejs.dev/* https://vite.dev/:splat 301! /guide/api-vite-runtime.html /guide/api-environment 302 /guide/api-vite-environment /guide/api-environment 302 /guide/api-vite-environment.html /guide/api-environment 302 +/guide/comparisons /guide/why#how-vite-relates-to-other-unbundled-build-tools 302 +/guide/comparisons.html /guide/why#how-vite-relates-to-other-unbundled-build-tools 302 From eb0ff8f33c8449e7b3b33fa604767d4b17e0e532 Mon Sep 17 00:00:00 2001 From: TAKAHASHI Shuuji Date: Thu, 13 Feb 2025 18:45:59 +0900 Subject: [PATCH 05/13] docs: use "constants" instead of "constant variables" (#19417) --- guide/features.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/features.md b/guide/features.md index 5f466c80..10dfe290 100644 --- a/guide/features.md +++ b/guide/features.md @@ -138,7 +138,7 @@ Note that if [`compilerOptions.types`](https://www.typescriptlang.org/tsconfig#t `vite/client` provides the following type shims: - Asset imports (e.g. importing an `.svg` file) -- Types for the Vite-injected [constant variables](./env-and-mode#env-variables) on `import.meta.env` +- Types for the Vite-injected [constants](./env-and-mode#env-variables) on `import.meta.env` - Types for the [HMR API](./api-hmr) on `import.meta.hot` ::: tip From 2b648d26ad5acd1a5713c031c21ff82f404d709e Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 14 Feb 2025 10:36:24 +0900 Subject: [PATCH 06/13] fix(deps): update all non-major dependencies (#19392) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com> --- .../landing/1. hero-section/HeroDiagram.vue | 15 ++++++++++----- .../FeatureInstantServerStart.vue | 3 ++- .vitepress/theme/styles/landing.css | 6 ++++-- package.json | 2 +- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue b/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue index f76e7092..b192bc19 100644 --- a/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue +++ b/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue @@ -520,7 +520,8 @@ onMounted(() => { bottom: 0; transform: translate3d(0, 0, 0) scale(1); transition: transform 0.3s ease-in-out; - background: linear-gradient( + background: + linear-gradient( 130deg, rgba(61, 61, 61, 0.3) 0%, rgba(61, 61, 61, 0) 40% @@ -713,7 +714,8 @@ onMounted(() => { opacity: 0.1; } - background: url('/noise.png'), + background: + url('/noise.png'), radial-gradient( circle at right center, rgb(86, 50, 119) 0%, @@ -729,7 +731,8 @@ onMounted(() => { ); @media (min-width: 1024px) { - background: url('/noise.png'), + background: + url('/noise.png'), radial-gradient( circle at right center, rgba(75, 41, 105, 0.5) 0%, @@ -747,7 +750,8 @@ onMounted(() => { } @media (min-width: 1500px) { - background: url('/noise.png'), + background: + url('/noise.png'), radial-gradient( circle at right center, rgba(75, 41, 105, 0.5) 0%, @@ -765,7 +769,8 @@ onMounted(() => { } @media (min-width: 1800px) { - background: url('/noise.png'), + background: + url('/noise.png'), radial-gradient( circle at right center, rgba(75, 41, 105, 0.5) 0%, diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue index 5e44b3bb..6b12c1c4 100644 --- a/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue +++ b/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue @@ -342,7 +342,8 @@ onUnmounted(() => { bottom: 0; height: 100%; border-radius: 12px 0 0 12px; - background: url('/noise.png'), + background: + url('/noise.png'), radial-gradient( ellipse 140% 80% at 96% bottom, #13b351 0%, diff --git a/.vitepress/theme/styles/landing.css b/.vitepress/theme/styles/landing.css index 18897f48..1e919af1 100644 --- a/.vitepress/theme/styles/landing.css +++ b/.vitepress/theme/styles/landing.css @@ -176,7 +176,8 @@ html:has(.landing) { &.btn--primary { position: relative; - background: radial-gradient( + background: + radial-gradient( 141.42% 141.42% at 100% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100% @@ -194,7 +195,8 @@ html:has(.landing) { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.75) inset; &:hover { - background: radial-gradient( + background: + radial-gradient( 141.42% 141.42% at 100% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100% diff --git a/package.json b/package.json index 5b0ffcf1..d297a6ac 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "docs-serve": "vitepress serve" }, "devDependencies": { - "@shikijs/vitepress-twoslash": "^2.2.0", + "@shikijs/vitepress-twoslash": "^2.3.2", "@types/express": "^4.17.21", "feed": "^4.2.2", "vitepress": "^1.6.3", From 85222d18a689d8c88996dff6aa164fc2928dab06 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Fri, 14 Feb 2025 16:55:56 +0800 Subject: [PATCH 07/13] docs: mention pkg.pr.new for unreleased commits (#19424) --- guide/index.md | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/guide/index.md b/guide/index.md index a9232b6c..42288452 100644 --- a/guide/index.md +++ b/guide/index.md @@ -202,7 +202,31 @@ Learn more about the [Command Line Interface](./cli.md) ## Using Unreleased Commits -If you can't wait for a new release to test the latest features, you will need to clone the [vite repo](https://github.com/vitejs/vite) to your local machine and then build and link it yourself ([pnpm](https://pnpm.io/) is required): +If you can't wait for a new release to test the latest features, you can install a specific commit of Vite with https://pkg.pr.new: + +::: code-group + +```bash [npm] +$ npm install -D https://pkg.pr.new/vite@SHA +``` + +```bash [Yarn] +$ yarn add -D https://pkg.pr.new/vite@SHA +``` + +```bash [pnpm] +$ pnpm add -D https://pkg.pr.new/vite@SHA +``` + +```bash [Bun] +$ bun add -D https://pkg.pr.new/vite@SHA +``` + +::: + +Replace `SHA` with any of [Vite's commit SHAs](https://github.com/vitejs/vite/commits/main/). Note that only commits within the last month will work, as older commit releases are purged. + +Alternatively, you can also clone the [vite repo](https://github.com/vitejs/vite) to your local machine and then build and link it yourself ([pnpm](https://pnpm.io/) is required): ```bash git clone https://github.com/vitejs/vite.git @@ -215,6 +239,10 @@ pnpm link --global # use your preferred package manager for this step Then go to your Vite based project and run `pnpm link --global vite` (or the package manager that you used to link `vite` globally). Now restart the development server to ride on the bleeding edge! +::: tip Dependencies using Vite +To replace the Vite version used by dependencies transitively, you should use [npm overrides](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#overrides) or [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides). +::: + ## Community If you have questions or need help, reach out to the community at [Discord](https://chat.vite.dev) and [GitHub Discussions](https://github.com/vitejs/vite/discussions). From a017d35fa7004b7d901ea603c32d6b7df88528cb Mon Sep 17 00:00:00 2001 From: patak <583075+patak-dev@users.noreply.github.com> Date: Fri, 14 Feb 2025 10:30:20 +0100 Subject: [PATCH 08/13] docs: framework agnostic features guide (#19421) --- guide/features.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/guide/features.md b/guide/features.md index 10dfe290..6f5c24f8 100644 --- a/guide/features.md +++ b/guide/features.md @@ -205,20 +205,24 @@ Assets referenced by HTML elements such as `