diff --git a/.gitignore b/.gitignore index 70ff0097e53624..1331ef600dd98c 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ explorations *.local /packages/vite/LICENSE *.cpuprofile +.vscode/ \ No newline at end of file diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index fe24e2d8a30f02..dbedcdb2549900 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -44,6 +44,10 @@ module.exports = { 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/' diff --git a/docs/blog/announcing-vite2.md b/docs/blog/announcing-vite2.md new file mode 100644 index 00000000000000..4158de4ba24f8f --- /dev/null +++ b/docs/blog/announcing-vite2.md @@ -0,0 +1,65 @@ +--- +sidebar: false +--- + +# Announcing Vite 2.0 + +

+ +

+ +Today we are excited to announce the official release of Vite 2.0! + +Vite (French word for "fast", pronounced `/vit/`) is a new kind of build tool for frontend web development. Think a pre-configured dev server + bundler combo, but leaner and faster. It leverages browser's [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) support and tools written in compile-to-native languages like [esbuild](https://esbuild.github.io/) to deliver a snappy and modern development experience. + +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://vitejs.dev/guide/why.html). If you are interested in how Vite differs from other similar tools, check out the [comparisons](https://vitejs.dev/guide/comparisons.html). + +## What's New in 2.0 + +Since we decided to completely refactor the internals before 1.0 got out of RC, this is in fact the first stable release of Vite. That said, Vite 2.0 brings about many big improvements over its previous incarnation: + +### Framework Agnostic Core + +The original idea of Vite started as a [hacky prototype that serves Vue single-file components over native ESM](https://github.com/vuejs/vue-dev-server). Vite 1 was a continuation of that idea with HMR implemented on top. + +Vite 2.0 takes what we learned along the way and is redesigned from scratch with a more robust internal architecture. It is now completely framework agnostic, and all framework-specific support is delegated to plugins. There are now [official templates for Vue, React, Preact, Lit Element](https://github.com/vitejs/vite/tree/main/packages/create-app), and ongoing community efforts for Svelte integration. + +### New Plugin Format and API + +Inspired by [WMR](https://github.com/preactjs/wmr), the new plugin system extends Rollup's plugin interface and is [compatible with many Rollup plugins](https://vite-rollup-plugins.patak.dev/) out of the box. Plugins can use Rollup-compatible hooks, with additional Vite-specific hooks and properties to adjust Vite-only behavior (e.g. differentiating dev vs. build or custom handling of HMR). + +The [programmatic API](https://vitejs.dev/guide/api-javascript.html) has also been greatly improved to facilitate higher level tools / frameworks built on top of Vite. + +### esbuild Powered Dep Pre-Bundling + +Since Vite is a native ESM dev server, it pre-bundles dependencies to reduce the number browser requests and handle CommonJS to ESM conversion. Previously Vite did this using Rollup, and in 2.0 it now uses `esbuild` which results in 10-100x faster dependency pre-bundling. As a reference, cold-booting a test app with heavy dependencies like React Meterial UI previously took 28 seconds on an M1-powered Macbook Pro and now takes ~1.5 seconds. Expect similar improvements if you are switching from a traditional bundler based setup. + +### First-class CSS Support + +Vite treats CSS as a first-class citizen of the module graph and supports the following out of the box: + +- **Resolver enhancement**: `@import` and `url()` paths in CSS are enhanced with Vite's resolver to respect aliases and npm dependencies. +- **URL rebasing**: `url()` paths are automatically rebased regardless of where the file is imported from. +- **CSS code splitting**: a code-split JS chunk also emits a corresponding CSS file, which is automatically loaded in parallel with the JS chunk when requested. + +### Server-Side Rendering (SSR) Support + +Vite 2.0 ships with [experimental SSR support](https://vitejs.dev/guide/ssr.html). Vite provides APIs to to efficiently load and update ESM-based source code in Node.js during development (almost like server-side HMR), and automatically externalizes CommonJS-compatible dependencies to improve development and SSR build speed. The production server can be completely decoupled from Vite, and the same setup can be easily adapted to perform pre-rendering / SSG. + +Vite SSR is provided as a low-level feature and we are expecting to see higher level frameworks leveraging it under the hood. + +### Opt-in Legacy Browser Support + +Vite targets modern browsers with native ESM support by default, but you can also opt-in to support legacy browers via the official [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy). The plugin automatically generates dual modern/legacy bundles, and delivers the right bundle based on browser feature detection, ensuring more efficient code in modern browsers that support them. + +## Give it a Try! + +That was a lot of features, but getting started with Vite is simple! You can spin up a Vite-powered app literally in a minute, starting with the following command (make sure you have Node.js >=12): + +```bash +npm init @vitejs/app +``` + +Then, check out [the guide](https://vitejs.dev/guide/) to see what Vite provides out of the box. You can also check out the source code on [GitHub](https://github.com/vitejs/vite), follow updates on [Twitter](https://twitter.com/vite_js), or join discussions with other Vite users on our [Discord chat server](http://chat.vitejs.dev/). diff --git a/docs/guide/api-plugin.md b/docs/guide/api-plugin.md index 386601484938be..0a312bb31e1129 100644 --- a/docs/guide/api-plugin.md +++ b/docs/guide/api-plugin.md @@ -189,7 +189,7 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo const myPlugin = () => ({ name: 'configure-server', configureServer(server) { - server.app.use((req, res, next) => { + server.middlewares.use((req, res, next) => { // custom handle request... }) } @@ -207,7 +207,7 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo // return a post hook that is called after internal middlewares are // installed return () => { - server.app.use((req, res, next) => { + server.middlewares.use((req, res, next) => { // custom handle request... }) } diff --git a/docs/guide/backend-integration.md b/docs/guide/backend-integration.md index ef03a293812ffa..45558f607acefb 100644 --- a/docs/guide/backend-integration.md +++ b/docs/guide/backend-integration.md @@ -40,7 +40,8 @@ If you want to serve the HTML using a traditional backend (e.g. Rails, Laravel) ```html diff --git a/docs/guide/why.md b/docs/guide/why.md index 2e7fdbcd70bc5e..d59b5a653f792b 100644 --- a/docs/guide/why.md +++ b/docs/guide/why.md @@ -32,9 +32,9 @@ Vite improves the dev server start time by first dividing the modules in an appl When a file is edited in a bundler-based build setup, it is inefficient to rebuild the whole bundle for obvious reasons: the update speed will degrade linearly with the size of the app. -Some bundler dev server runs the bundling in memory so that it only needs to invalidate part of its module graph when a file changes, but it still needs to re-construct the entire bundle and reload the web page. Reconstructing the bundle can be expensive, and reloading the page blows away the current state of the application. This is why some bundlers support Hot Module Replacment (HMR): allowing a module to "hot replace" itself without affecting the rest of the page. This greatly improves DX - however, in practice we've found that even HMR update speed deteriorates significantly as the size of the application grows. +Some bundler dev server runs the bundling in memory so that it only needs to invalidate part of its module graph when a file changes, but it still needs to re-construct the entire bundle and reload the web page. Reconstructing the bundle can be expensive, and reloading the page blows away the current state of the application. This is why some bundlers support Hot Module Replacement (HMR): allowing a module to "hot replace" itself without affecting the rest of the page. This greatly improves DX - however, in practice we've found that even HMR update speed deteriorates significantly as the size of the application grows. -In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closesest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application. +In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application. Vite also leverages HTTP headers to speed up full page reloads (again, let the browser do more work for us): source code module requests are made conditional via `304 Not Modified`, and dependency module requests are strongly cached via `Cache-Control: max-age=31536000,immutable` so they don't hit the server again once cached. diff --git a/docs/index.md b/docs/index.md index d4d9835154149e..6f9404222df8a0 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,7 +5,7 @@ actionText: Get Started actionLink: /guide/ altActionText: Learn More -altActionLink: /guide/introduction +altActionLink: /guide/why features: - title: 💡 Instant Server Start diff --git a/package.json b/package.json index 72305721e8e571..970c3e97595569 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "slash": "^3.0.0", "ts-jest": "^26.4.4", "typescript": "^4.1.2", - "vitepress": "^0.11.4", + "vitepress": "^0.12.2", "yorkie": "^2.0.0" }, "gitHooks": { diff --git a/packages/create-app/CHANGELOG.md b/packages/create-app/CHANGELOG.md index 083b8ddec9a9bd..b2f269f7aec3b2 100644 --- a/packages/create-app/CHANGELOG.md +++ b/packages/create-app/CHANGELOG.md @@ -1,3 +1,13 @@ +## [2.0.1](https://github.com/vitejs/vite/compare/create-app@2.0.0...create-app@2.0.1) (2021-02-20) + + +### Bug Fixes + +* **create-app:** prompt the user on supplying an invalid template ([#2072](https://github.com/vitejs/vite/issues/2072)) ([ea31690](https://github.com/vitejs/vite/commit/ea31690580d4966b60e2aa8e14ae78dee955935f)) +* **create-app:** update prompt message based on user input ([#2103](https://github.com/vitejs/vite/issues/2103)) ([038f786](https://github.com/vitejs/vite/commit/038f78660042454935ef343bce240a5220328760)) + + + # [2.0.0](https://github.com/vitejs/vite/compare/create-app@1.8.0...create-app@2.0.0) (2021-02-16) diff --git a/packages/create-app/index.js b/packages/create-app/index.js index e46e9058aaf70f..489c7f02ace65b 100755 --- a/packages/create-app/index.js +++ b/packages/create-app/index.js @@ -76,14 +76,24 @@ async function init() { // determine template let template = argv.t || argv.template - if (!template) { + let message = 'Select a template:' + let isValidTemplate = false + + // --template expects a value + if (typeof template === 'string') { + const availableTemplates = TEMPLATES.map(stripColors) + isValidTemplate = availableTemplates.includes(template) + message = `${template} isn't a valid template. Please choose from below:` + } + + if (!template || !isValidTemplate) { /** * @type {{ t: string }} */ const { t } = await prompt({ type: 'select', name: 't', - message: `Select a template:`, + message, choices: TEMPLATES }) template = stripColors(t) diff --git a/packages/create-app/package.json b/packages/create-app/package.json index f3c156a9e42d25..5ea38fe5841655 100644 --- a/packages/create-app/package.json +++ b/packages/create-app/package.json @@ -1,6 +1,6 @@ { "name": "@vitejs/create-app", - "version": "2.0.0", + "version": "2.0.1", "license": "MIT", "author": "Evan You", "bin": { diff --git a/packages/create-app/template-lit-element-ts/package.json b/packages/create-app/template-lit-element-ts/package.json index 001f93a943bc82..3545dbd45681dd 100644 --- a/packages/create-app/template-lit-element-ts/package.json +++ b/packages/create-app/template-lit-element-ts/package.json @@ -18,7 +18,7 @@ "lit-element": "^2.4.0" }, "devDependencies": { - "vite": "^2.0.0", + "vite": "^2.0.1", "typescript": "^4.1.3" } } \ No newline at end of file diff --git a/packages/create-app/template-lit-element/package.json b/packages/create-app/template-lit-element/package.json index 2e213c1fe0f016..9a19fc0f130247 100644 --- a/packages/create-app/template-lit-element/package.json +++ b/packages/create-app/template-lit-element/package.json @@ -16,6 +16,6 @@ "lit-element": "^2.4.0" }, "devDependencies": { - "vite": "^2.0.0" + "vite": "^2.0.1" } } \ No newline at end of file diff --git a/packages/create-app/template-preact-ts/package.json b/packages/create-app/template-preact-ts/package.json index 902c4e0d0a8e4d..59dfaab4e908d9 100644 --- a/packages/create-app/template-preact-ts/package.json +++ b/packages/create-app/template-preact-ts/package.json @@ -12,6 +12,6 @@ "devDependencies": { "@prefresh/vite": "^2.0.0", "typescript": "^4.1.3", - "vite": "^2.0.0" + "vite": "^2.0.1" } } \ No newline at end of file diff --git a/packages/create-app/template-preact/package.json b/packages/create-app/template-preact/package.json index a23cb11a6dc419..024a0662512f24 100644 --- a/packages/create-app/template-preact/package.json +++ b/packages/create-app/template-preact/package.json @@ -11,6 +11,6 @@ }, "devDependencies": { "@prefresh/vite": "^2.0.0", - "vite": "^2.0.0" + "vite": "^2.0.1" } } \ No newline at end of file diff --git a/packages/create-app/template-react-ts/package.json b/packages/create-app/template-react-ts/package.json index 1b8d43af6d5bbe..795b79b0cab010 100644 --- a/packages/create-app/template-react-ts/package.json +++ b/packages/create-app/template-react-ts/package.json @@ -15,6 +15,6 @@ "@types/react-dom": "^17.0.0", "@vitejs/plugin-react-refresh": "^1.1.0", "typescript": "^4.1.2", - "vite": "^2.0.0" + "vite": "^2.0.1" } } \ No newline at end of file diff --git a/packages/create-app/template-react/package.json b/packages/create-app/template-react/package.json index d6ffdacf78cf66..a4f10d2e682922 100644 --- a/packages/create-app/template-react/package.json +++ b/packages/create-app/template-react/package.json @@ -12,6 +12,6 @@ }, "devDependencies": { "@vitejs/plugin-react-refresh": "^1.1.0", - "vite": "^2.0.0" + "vite": "^2.0.1" } } \ No newline at end of file diff --git a/packages/create-app/template-vanilla/package.json b/packages/create-app/template-vanilla/package.json index 3691959de11a60..ec046e8ab59219 100644 --- a/packages/create-app/template-vanilla/package.json +++ b/packages/create-app/template-vanilla/package.json @@ -7,6 +7,6 @@ "serve": "vite preview" }, "devDependencies": { - "vite": "^2.0.0" + "vite": "^2.0.1" } } \ No newline at end of file diff --git a/packages/create-app/template-vue-ts/README.md b/packages/create-app/template-vue-ts/README.md new file mode 100644 index 00000000000000..51292957920b51 --- /dev/null +++ b/packages/create-app/template-vue-ts/README.md @@ -0,0 +1,26 @@ +# Vue 3 + Typescript + Vite + +This template should help get you started developing with Vue 3 and Typescript in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings! + +### If Using ` diff --git a/packages/create-app/template-vue/package.json b/packages/create-app/template-vue/package.json index 34e4c34365dfee..f56db479ac9a73 100644 --- a/packages/create-app/template-vue/package.json +++ b/packages/create-app/template-vue/package.json @@ -12,6 +12,6 @@ "devDependencies": { "@vitejs/plugin-vue": "^1.1.4", "@vue/compiler-sfc": "^3.0.5", - "vite": "^2.0.0" + "vite": "^2.0.1" } } \ No newline at end of file diff --git a/packages/playground/define/__tests__/define.spec.ts b/packages/playground/define/__tests__/define.spec.ts index 5bf73a07073eea..ef8ac0b2de61b4 100644 --- a/packages/playground/define/__tests__/define.spec.ts +++ b/packages/playground/define/__tests__/define.spec.ts @@ -8,4 +8,7 @@ test('string', async () => { expect(await page.textContent('.object')).toBe( JSON.stringify(defines.__OBJ__, null, 2) ) + expect(await page.textContent('.env-var')).toBe( + JSON.parse(defines['process.env.SOMEVAR']) + ) }) diff --git a/packages/playground/define/index.html b/packages/playground/define/index.html index 4972b0a56d801a..d948e7687e805d 100644 --- a/packages/playground/define/index.html +++ b/packages/playground/define/index.html @@ -5,6 +5,7 @@

Define

Number

Boolean

Object

+

Env Var