diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ba8d46f3c26f97..12ae8a255406d4 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,4 +1,5 @@ // @ts-check +const { builtinModules } = require('node:module') const { defineConfig } = require('eslint-define-config') module.exports = defineConfig({ @@ -42,18 +43,6 @@ module.exports = defineConfig({ tryExtensions: ['.ts', '.js', '.jsx', '.tsx', '.d.ts'] } ], - 'node/no-restricted-require': [ - 'error', - Object.keys(require('./packages/vite/package.json').devDependencies).map( - (d) => ({ - name: d, - message: - `devDependencies can only be imported using ESM syntax so ` + - `that they are included in the rollup bundle. If you are trying to ` + - `lazy load a dependency, use (await import('dependency')).default instead.` - }) - ) - ], 'node/no-extraneous-import': [ 'error', { @@ -93,6 +82,10 @@ module.exports = defineConfig({ { prefer: 'type-imports' } ], + 'import/no-nodejs-modules': [ + 'error', + { allow: builtinModules.map((mod) => `node:${mod}`) } + ], 'import/no-duplicates': 'error', 'import/order': 'error', 'sort-imports': [ @@ -107,6 +100,30 @@ module.exports = defineConfig({ ] }, overrides: [ + { + files: ['packages/**'], + excludedFiles: '**/__tests__/**', + rules: { + 'no-restricted-globals': ['error', 'require', '__dirname', '__filename'] + } + }, + { + files: 'packages/vite/**/*.*', + rules: { + 'node/no-restricted-require': [ + 'error', + Object.keys( + require('./packages/vite/package.json').devDependencies + ).map((d) => ({ + name: d, + message: + `devDependencies can only be imported using ESM syntax so ` + + `that they are included in the rollup bundle. If you are trying to ` + + `lazy load a dependency, use (await import('dependency')).default instead.` + })) + ] + } + }, { files: ['packages/vite/src/node/**'], rules: { @@ -120,9 +137,11 @@ module.exports = defineConfig({ } }, { - files: ['packages/plugin-*/**/*'], + files: ['packages/create-vite/template-*/**', '**/build.config.ts'], rules: { - 'no-restricted-globals': ['error', 'require', '__dirname', '__filename'] + 'no-undef': 'off', + 'node/no-missing-import': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off' } }, { @@ -132,7 +151,6 @@ module.exports = defineConfig({ 'node/no-extraneous-require': 'off', 'node/no-missing-import': 'off', 'node/no-missing-require': 'off', - 'no-undef': 'off', // engine field doesn't exist in playgrounds 'node/no-unsupported-features/es-builtins': [ 'error', @@ -145,17 +163,22 @@ module.exports = defineConfig({ { version: '^14.18.0 || >=16.0.0' } - ] + ], + '@typescript-eslint/explicit-module-boundary-types': 'off' } }, { - files: ['packages/create-vite/template-*/**', '**/build.config.ts'], + files: ['playground/**'], + excludedFiles: '**/__tests__/**', rules: { - 'node/no-missing-import': 'off' + 'no-undef': 'off', + 'no-empty': 'off', + 'no-constant-condition': 'off', + '@typescript-eslint/no-empty-function': 'off' } }, { - files: ['playground/**', '*.js'], + files: ['*.js'], rules: { '@typescript-eslint/explicit-module-boundary-types': 'off' } @@ -165,12 +188,6 @@ module.exports = defineConfig({ rules: { '@typescript-eslint/triple-slash-reference': 'off' } - }, - { - files: 'packages/vite/**/*.*', - rules: { - 'no-restricted-globals': ['error', 'require', '__dirname', '__filename'] - } } ], reportUnusedDisableDirectives: true diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 973b78df00591d..db621689ef2639 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -6,6 +6,8 @@ env: NODE_OPTIONS: --max-old-space-size=6144 # install playwright binary manually (because pnpm only runs install script once) PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1" + # Vitest auto retry on flaky segfault + VITEST_SEGFAULT_RETRY: 3 on: push: diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 2f378826fa3cb4..3578621b2a0331 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -65,7 +65,8 @@ export default defineConfig({ ['meta', { property: 'og:url', content: ogUrl }], ['meta', { property: 'og:description', content: ogDescription }], ['meta', { name: 'twitter:card', content: 'summary_large_image' }], - ['meta', { name: 'twitter:site', content: '@vite_js' }] + ['meta', { name: 'twitter:site', content: '@vite_js' }], + ['meta', { name: 'theme-color', content: '#646cff' }] ], vue: { @@ -211,6 +212,10 @@ export default defineConfig({ text: 'Comparisons', link: '/guide/comparisons' }, + { + text: 'Troubleshooting', + link: '/guide/troubleshooting' + }, { text: 'Migration from v2', link: '/guide/migration' diff --git a/docs/_data/team.js b/docs/_data/team.js index 43b56ad5bf481b..fd386685af6bc1 100644 --- a/docs/_data/team.js +++ b/docs/_data/team.js @@ -5,7 +5,7 @@ export const core = [ title: 'Creator', org: 'Vue.js', orgLink: 'https://vuejs.org/', - desc: 'Husband, father of two, independent open source developer.', + desc: 'Independent open source developer, creator of Vue.js and Vite.', links: [ { icon: 'github', link: 'https://github.com/yyx990803' }, { icon: 'twitter', link: 'https://twitter.com/youyuxi' } diff --git a/docs/config/build-options.md b/docs/config/build-options.md index 586f84d6b24fd0..807b0f37640f4b 100644 --- a/docs/config/build-options.md +++ b/docs/config/build-options.md @@ -193,3 +193,10 @@ Limit for chunk size warnings (in kbs). - **Default:** `null` Set to `{}` to enable rollup watcher. This is mostly used in cases that involve build-only plugins or integrations processes. + +::: warning Using Vite on Windows Subsystem for Linux (WSL) 2 + +There are cases that file system watching does not work with WSL2. +See [`server.watch`](./server-options.md#server-watch) for more details. + +::: diff --git a/docs/config/preview-options.md b/docs/config/preview-options.md index 10ec82f38e3848..32589a5091d12b 100644 --- a/docs/config/preview-options.md +++ b/docs/config/preview-options.md @@ -65,7 +65,7 @@ Automatically open the app in the browser on server start. When the value is a s - **Type:** `Record` - **Default:** [`server.proxy`](./server-options#server-proxy) -Configure custom proxy rules for the dev server. Expects an object of `{ key: options }` pairs. If the key starts with `^`, it will be interpreted as a `RegExp`. The `configure` option can be used to access the proxy instance. +Configure custom proxy rules for the preview server. Expects an object of `{ key: options }` pairs. If the key starts with `^`, it will be interpreted as a `RegExp`. The `configure` option can be used to access the proxy instance. Uses [`http-proxy`](https://github.com/http-party/node-http-proxy). Full options [here](https://github.com/http-party/node-http-proxy#options). @@ -74,4 +74,4 @@ Uses [`http-proxy`](https://github.com/http-party/node-http-proxy). Full options - **Type:** `boolean | CorsOptions` - **Default:** [`server.cors`](./server-options#server-cors) -Configure CORS for the dev server. This is enabled by default and allows any origin. Pass an [options object](https://github.com/expressjs/cors) to fine tune the behavior or `false` to disable. +Configure CORS for the preview server. This is enabled by default and allows any origin. Pass an [options object](https://github.com/expressjs/cors) to fine tune the behavior or `false` to disable. diff --git a/docs/config/server-options.md b/docs/config/server-options.md index 33208bd4b04155..5092622e5d9f5e 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -145,6 +145,8 @@ Set `server.hmr.overlay` to `false` to disable the server error overlay. When `server.hmr.server` is defined, Vite will process the HMR connection requests through the provided server. If not in middleware mode, Vite will attempt to process HMR connection requests through the existing server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port. +Check out [`vite-setup-catalogue`](https://github.com/sapphi-red/vite-setup-catalogue) for some examples. + ::: tip NOTE With the default configuration, reverse proxies in front of Vite are expected to support proxying WebSocket. If the Vite HMR client fails to connect WebSocket, the client will fallback to connecting the WebSocket directly to the Vite HMR server bypassing the reverse proxies: @@ -167,8 +169,6 @@ The error that appears in the Browser when the fallback happens can be ignored. File system watcher options to pass on to [chokidar](https://github.com/paulmillr/chokidar#api). -When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to `{ usePolling: true }`. This is due to [a WSL2 limitation](https://github.com/microsoft/WSL/issues/4739) with the Windows filesystem. - The Vite server watcher skips `.git/` and `node_modules/` directories by default. If you want to watch a package inside `node_modules/`, you can pass a negated glob pattern to `server.watch.ignored`. That is: ```js @@ -186,6 +186,19 @@ export default defineConfig({ }) ``` +::: warning Using Vite on Windows Subsystem for Linux (WSL) 2 + +When running Vite on WSL2, file system watching does not work when a file is edited by Windows applications (non-WSL2 process). This is due to [a WSL2 limitation](https://github.com/microsoft/WSL/issues/4739). This also applies to running on Docker with a WSL2 backend. + +To fix it, you could either: + +- **Recommended**: Use WSL2 applications to edit your files. + - It is also recommended to move the project folder outside of a Windows filesystem. Accessing Windows filesystem from WSL2 is slow. Removing that overhead will improve performance. +- Set `{ usePolling: true }`. + - Note that [`usePolling` leads to high CPU utilization](https://github.com/paulmillr/chokidar#performance). + +::: + ## server.middlewareMode - **Type:** `boolean` diff --git a/docs/guide/build.md b/docs/guide/build.md index 72a4562a25ce2e..30dadbbb2473df 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -208,9 +208,9 @@ A user may choose to deploy in three different paths: A single static [base](#public-base-path) isn't enough in these scenarios. Vite provides experimental support for advanced base options during build, using `experimental.renderBuiltUrl`. -```js +```ts experimental: { - renderBuiltUrl: (filename: string, { hostType: 'js' | 'css' | 'html' }) => { + renderBuiltUrl(filename: string, { hostType }: { hostType: 'js' | 'css' | 'html' }) { if (hostType === 'js') { return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` } } else { @@ -220,15 +220,15 @@ experimental: { } ``` -If the hashed assets and public files aren't deployed together, options for each group can be defined independently using asset `type` included in the third `context` param given to the function. +If the hashed assets and public files aren't deployed together, options for each group can be defined independently using asset `type` included in the second `context` param given to the function. -```js +```ts experimental: { - renderBuiltUrl(filename: string, { hostType: 'js' | 'css' | 'html', type: 'public' | 'asset' }) { + renderBuiltUrl(filename: string, { hostId, hostType, type }: { hostId: string, hostType: 'js' | 'css' | 'html', type: 'public' | 'asset' }) { if (type === 'public') { return 'https://www.domain.com/' + filename } - else if (path.extname(importer) === '.js') { + else if (path.extname(hostId) === '.js') { return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` } } else { diff --git a/docs/guide/env-and-mode.md b/docs/guide/env-and-mode.md index c91a53dc6f1a2b..c69badcda5db2e 100644 --- a/docs/guide/env-and-mode.md +++ b/docs/guide/env-and-mode.md @@ -46,7 +46,7 @@ In addition, environment variables that already exist when Vite is executed have Loaded env variables are also exposed to your client source code via `import.meta.env` as strings. -To prevent accidentally leaking env variables to the client, only variables prefixed with `VITE_` are exposed to your Vite-processed code. e.g. the following file: +To prevent accidentally leaking env variables to the client, only variables prefixed with `VITE_` are exposed to your Vite-processed code. e.g. for the following env variables: ``` VITE_SOME_KEY=123 @@ -60,7 +60,7 @@ console.log(import.meta.env.VITE_SOME_KEY) // 123 console.log(import.meta.env.DB_PASSWORD) // undefined ``` -If you want to customize env variables prefix, see [envPrefix](/config/shared-options.html#envprefix) option. +If you want to customize the env variables prefix, see the [envPrefix](/config/shared-options.html#envprefix) option. :::warning SECURITY NOTES @@ -71,9 +71,9 @@ If you want to customize env variables prefix, see [envPrefix](/config/shared-op ### IntelliSense for TypeScript -By default, Vite provides type definition for `import.meta.env` in [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts). While you can define more custom env variables in `.env.[mode]` files, you may want to get TypeScript IntelliSense for user-defined env variables which prefixed with `VITE_`. +By default, Vite provides type definitions for `import.meta.env` in [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts). While you can define more custom env variables in `.env.[mode]` files, you may want to get TypeScript IntelliSense for user-defined env variables that are prefixed with `VITE_`. -To achieve, you can create an `env.d.ts` in `src` directory, then augment `ImportMetaEnv` like this: +To achieve this, you can create an `env.d.ts` in `src` directory, then augment `ImportMetaEnv` like this: ```typescript /// @@ -98,7 +98,7 @@ If your code relies on types from browser environments such as [DOM](https://git ## Modes -By default, the dev server (`dev` command) runs in `development` mode and the `build` command run in `production` mode. +By default, the dev server (`dev` command) runs in `development` mode and the `build` command runs in `production` mode. This means when running `vite build`, it will load the env variables from `.env.production` if there is one: diff --git a/docs/guide/features.md b/docs/guide/features.md index db1f45b4ddeb99..0f69035a71dea5 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -102,14 +102,28 @@ This will provide the following type shims: - Types for the Vite-injected [env variables](./env-and-mode#env-variables) on `import.meta.env` - Types for the [HMR API](./api-hmr) on `import.meta.hot` +::: tip +To override the default typing, declare it before the triple-slash reference. For example, to make the default import of `*.svg` a React component: + +```ts +declare module '*.svg' { + const content: React.FC> + export default content +} + +/// +``` + +::: + ## Vue Vite provides first-class Vue support: - Vue 3 SFC support via [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) - Vue 3 JSX support via [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) -- Vue 2.7 support via [vitejs/vite-plugin-vue2](https://github.com/vitejs/vite-plugin-vue2) -- Vue <2.7 support via [underfin/vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2) +- Vue 2.7 support via [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2) +- Vue <2.7 support via [vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2) ## JSX diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md index 3ff4337aaf4b9f..5bf81fb2b28342 100644 --- a/docs/guide/ssr.md +++ b/docs/guide/ssr.md @@ -211,7 +211,9 @@ If the routes and the data needed for certain routes are known ahead of time, we Dependencies are "externalized" from Vite's SSR transform module system by default when running SSR. This speeds up both dev and build. -If a dependency needs to be transformed by Vite's pipeline, for example, because Vite features are used untranspiled in them, they can be added to [`ssr.noExternal`](../config/ssr-options.md#ssrnoexternal). +If a dependency needs to be transformed by Vite's pipeline, for example, because Vite features are used untranspiled in them, they can be added to [`ssr.noExternal`](../config/ssr-options.md#ssr-noexternal). + +For linked dependencies, they are not externalized by default to take advantage of Vite's HMR. If this isn't desired, for example, to test dependencies as if they aren't linked, you can add it to [`ssr.external`](../config/ssr-options.md#ssr-external). :::warning Working with Aliases If you have configured aliases that redirects one package to another, you may want to alias the actual `node_modules` packages instead to make it work for SSR externalized dependencies. Both [Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) and [pnpm](https://pnpm.js.org/en/aliases) support aliasing via the `npm:` prefix. @@ -267,4 +269,4 @@ Use a post hook so that your SSR middleware runs _after_ Vite's middlewares. ## SSR Format -By default, Vite generates the SSR bundle in ESM. There is experimental support for configuring `ssr.format`, but it isn't recommended. Future efforts around SSR development will be based on ESM, and commonjs remain available for backward compatibility. If using ESM for SSR isn't possible in your project, you can set `legacy.buildSsrCjsExternalHeuristics: true` to generate a CJS bundle using the same [externalization heuristics of Vite v2](https://v2.vitejs.dev/guide/ssr.html#ssr-externals). +By default, Vite generates the SSR bundle in ESM. There is experimental support for configuring `ssr.format`, but it isn't recommended. Future efforts around SSR development will be based on ESM, and CommonJS remain available for backward compatibility. If using ESM for SSR isn't possible in your project, you can set `legacy.buildSsrCjsExternalHeuristics: true` to generate a CJS bundle using the same [externalization heuristics of Vite v2](https://v2.vitejs.dev/guide/ssr.html#ssr-externals). diff --git a/docs/guide/static-deploy.md b/docs/guide/static-deploy.md index 534e77639c5f29..138a58b0319dec 100644 --- a/docs/guide/static-deploy.md +++ b/docs/guide/static-deploy.md @@ -131,6 +131,8 @@ You can also run the above script in your CI setup to enable automatic deploymen ## Netlify +### Netlify CLI + 1. Install the [Netlify CLI](https://cli.netlify.com/). 2. Create a new site using `ntl init`. 3. Deploy using `ntl deploy`. @@ -153,6 +155,16 @@ The Netlify CLI will share with you a preview URL to inspect. When you are ready $ ntl deploy --prod ``` +### Netlify with Git + +1. Push your code to a git repository (GitHub, GitLab, BitBucket, Azure DevOps). +2. [Import the project](https://app.netlify.com/start) to Netlify. +3. Choose the branch, output directory, and set up environment variables if applicable. +4. Click on **Deploy**. +5. Your Vite app is deployed! + +After your project has been imported and deployed, all subsequent pushes to branches other than the production branch along with pull requests will generate [Preview Deployments](https://docs.netlify.com/site-deploys/deploy-previews/), and all changes made to the Production Branch (commonly “main”) will result in a [Production Deployment](https://docs.netlify.com/site-deploys/overview/#definitions). + ## Vercel ### Vercel CLI @@ -331,3 +343,26 @@ Install the extension in VS Code and navigate to your app root. Open the Static Follow the wizard started by the extension to give your app a name, choose a framework preset, and designate the app root (usually `/`) and built file location `/dist`. The wizard will run and will create a GitHub action in your repo in a `.github` folder. The action will work to deploy your app (watch its progress in your repo's Actions tab) and, when successfully completed, you can view your app in the address provided in the extension's progress window by clicking the 'Browse Website' button that appears when the GitHub action has run. + +## Render + +You can deploy your Vite app as a Static Site on [Render](https://render.com/). + +1. Create a [Render account](https://dashboard.render.com/register). + +2. In the [Dashboard](https://dashboard.render.com/), click the **New** button and select **Static Site**. + +3. Connect your GitHub/GitLab account or use a public repository. + +4. Specify a project name and branch. + + - **Build Command**: `npm run build` + - **Publish Directory**: `dist` + +5. Click **Create Static Site**. + + Your app should be deployed at `https://.onrender.com/`. + +By default, any new commit pushed to the specified branch will automatically trigger a new deploy. [Auto-Deploy](https://render.com/docs/deploys#toggling-auto-deploy-for-a-service) can be configured in the project settings. + +You can also add a [custom domain](https://render.com/docs/custom-domains) to your project. diff --git a/docs/guide/troubleshooting.md b/docs/guide/troubleshooting.md new file mode 100644 index 00000000000000..4fb826a3ee85b9 --- /dev/null +++ b/docs/guide/troubleshooting.md @@ -0,0 +1,91 @@ +# Troubleshooting + +See [Rollup's troubleshooting guide](https://rollupjs.org/guide/en/#troubleshooting) for more information too. + +If the suggestions here don't work, please try posting questions on [GitHub Discussions](https://github.com/vitejs/vite/discussions) or in the `#help` channel of [Vite Land Discord](https://chat.vitejs.dev). + +## CLI + +### `Error: Cannot find module 'C:\foo\bar&baz\vite\bin\vite.js'` + +The path to your project folder may include `&`, which doesn't work with `npm` on Windows ([npm/cmd-shim#45](https://github.com/npm/cmd-shim/issues/45)). + +You will need to either: + +- Switch to another package manager (e.g. `pnpm`, `yarn`) +- Remove `&` from the path to your project + +## Dev Server + +### Requests are stalled forever + +If you are using Linux, file descriptor limits and inotify limits may be causing the issue. As Vite does not bundle most of the files, browsers may request many files which require many file descriptors, going over the limit. + +To solve this: + +- Increase file descriptor limit by `ulimit` + + ```shell + # Check current limit + $ ulimit -Sn + # Change limit (temporary) + $ ulimit -Sn 10000 # You might need to change the hard limit too + # Restart your browser + ``` + +- Increase the following inotify related limits by `sysctl` + + ```shell + # Check current limits + $ sysctl fs.inotify + # Change limits (temporary) + $ sudo sysctl fs.inotify.max_queued_events=16384 + $ sudo sysctl fs.inotify.max_user_instances=8192 + $ sudo sysctl fs.inotify.max_user_watches=524288 + ``` + +### 431 Request Header Fields Too Large + +When the server / WebSocket server receives a large HTTP header, the request will be dropped and the following warning will be shown. + +> Server responded with status code 431. See https://vitejs.dev/guide/troubleshooting.html#_431-request-header-fields-too-large. + +This is because Node.js limits request header size to mitigate [CVE-2018-12121](https://www.cve.org/CVERecord?id=CVE-2018-12121). + +To avoid this, try to reduce your request header size. For example, if the cookie is long, delete it. Or you can use [`--max-http-header-size`](https://nodejs.org/api/cli.html#--max-http-header-sizesize) to change max header size. + +## HMR + +### Vite detects a file change but the HMR is not working + +You may be importing a file with a different case. For example, `src/foo.js` exists and `src/bar.js` contains: + +```js +import './Foo.js' // should be './foo.js' +``` + +Related issue: [#964](https://github.com/vitejs/vite/issues/964) + +### Vite does not detect a file change + +If you are running Vite with WSL2, Vite cannot watch file changes in some conditions. See [`server.watch` option](/config/server-options.md#server-watch). + +### A full reload happens instead of HMR + +If HMR is not handled by Vite or a plugin, a full reload will happen. + +Also if there is a dependency loop, a full reload will happen. To solve this, try removing the loop. + +## Others + +### Syntax Error / Type Error happens + +Vite cannot handle and does not support code that only runs on non-strict mode (sloppy mode). This is because Vite uses ESM and it is always [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) inside ESM. + +For example, you might see these errors. + +> [ERROR] With statements cannot be used with the "esm" output format due to strict mode + +> TypeError: Cannot create property 'foo' on boolean 'false' + +If these code are used inside dependencies, you could use [`patch-package`](https://github.com/ds300/patch-package) (or [`yarn patch`](https://yarnpkg.com/cli/patch) or [`pnpm patch`](https://pnpm.io/cli/patch)) for an escape hatch. diff --git a/docs/public/cypress.svg b/docs/public/cypress.svg deleted file mode 100644 index 9bb6b2f647b6ce..00000000000000 --- a/docs/public/cypress.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/public/divriots.png b/docs/public/divriots.png deleted file mode 100644 index b021d0aa965f49..00000000000000 Binary files a/docs/public/divriots.png and /dev/null differ diff --git a/docs/public/mux.svg b/docs/public/mux.svg deleted file mode 100644 index 2e1ad4be40b061..00000000000000 --- a/docs/public/mux.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/public/plaid.svg b/docs/public/plaid.svg deleted file mode 100644 index 78354f007caf10..00000000000000 --- a/docs/public/plaid.svg +++ /dev/null @@ -1 +0,0 @@ -plaid_yoko \ No newline at end of file diff --git a/docs/public/stackblitz.svg b/docs/public/stackblitz.svg deleted file mode 100644 index 2c356bdfb0038a..00000000000000 --- a/docs/public/stackblitz.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/public/tailwind-labs.svg b/docs/public/tailwind-labs.svg deleted file mode 100644 index 300411468cbb5f..00000000000000 --- a/docs/public/tailwind-labs.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/docs/public/vuejobs.png b/docs/public/vuejobs.png deleted file mode 100644 index 2d6a52f6f4d373..00000000000000 Binary files a/docs/public/vuejobs.png and /dev/null differ diff --git a/netlify.toml b/netlify.toml index f618d808000f61..10bc161218e1cc 100644 --- a/netlify.toml +++ b/netlify.toml @@ -4,4 +4,4 @@ [build] publish = "docs/.vitepress/dist" command = "npx pnpm i --store=node_modules/.pnpm-store --frozen-lockfile && npm run ci-docs" - ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF docs package.json pnpm-lock.yaml netlify.toml" \ No newline at end of file + ignore = "./scripts/docs-check.sh" diff --git a/package.json b/package.json index db125589ab225f..487e722ffcbed7 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "preinstall": "npx only-allow pnpm", "postinstall": "simple-git-hooks", "format": "prettier --write --cache .", - "lint": "eslint --cache packages/*/{src,types,__tests__}/** playground/**/__tests__/**/*.ts scripts/**", + "lint": "eslint --cache .", "typecheck": "tsc -p scripts --noEmit && tsc -p playground --noEmit", "test": "run-s test-unit test-serve test-build", "test-serve": "vitest run -c vitest.config.e2e.ts", @@ -36,9 +36,9 @@ "ci-docs": "run-s build docs-build" }, "devDependencies": { - "@babel/types": "^7.18.9", - "@microsoft/api-extractor": "^7.28.6", - "@rollup/plugin-typescript": "^8.3.3", + "@babel/types": "^7.18.10", + "@microsoft/api-extractor": "^7.29.2", + "@rollup/plugin-typescript": "^8.3.4", "@types/babel__core": "^7.1.19", "@types/babel__standalone": "^7.1.4", "@types/convert-source-map": "^1.5.2", @@ -47,51 +47,46 @@ "@types/estree": "^1.0.0", "@types/etag": "^1.8.1", "@types/fs-extra": "^9.0.13", - "@types/hash-sum": "^1.0.0", "@types/less": "^3.0.3", "@types/micromatch": "^4.0.2", - "@types/mime": "^2.0.3", "@types/minimist": "^1.2.2", "@types/node": "^17.0.42", "@types/prompts": "^2.4.0", "@types/resolve": "^1.20.2", "@types/sass": "~1.43.1", - "@types/semver": "^7.3.10", + "@types/semver": "^7.3.12", "@types/stylus": "^0.48.38", "@types/ws": "^8.5.3", - "@typescript-eslint/eslint-plugin": "^5.30.7", - "@typescript-eslint/parser": "^5.30.7", + "@typescript-eslint/eslint-plugin": "^5.33.1", + "@typescript-eslint/parser": "^5.33.1", "conventional-changelog-cli": "^2.2.2", "cross-env": "^7.0.3", "esbuild": "^0.14.47", - "eslint": "^8.20.0", - "eslint-define-config": "^1.5.1", + "eslint": "^8.22.0", + "eslint-define-config": "^1.6.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-node": "^11.1.0", "execa": "^6.1.0", "fs-extra": "^10.1.0", - "kill-port": "^1.6.1", "lint-staged": "^13.0.3", "minimist": "^1.2.6", - "node-fetch": "^3.2.9", "npm-run-all": "^4.1.5", "picocolors": "^1.0.0", - "playwright-chromium": "^1.24.0", - "pnpm": "^7.6.0", + "playwright-chromium": "^1.25.0", + "pnpm": "^7.9.0", "prettier": "2.7.1", "prompts": "^2.4.2", "rimraf": "^3.0.2", - "rollup": "^2.75.6", + "rollup": ">=2.75.6 <2.77.0 || ~2.77.0", "semver": "^7.3.7", "simple-git-hooks": "^2.8.0", - "sirv": "^2.0.2", "tslib": "^2.4.0", - "tsx": "^3.8.0", + "tsx": "^3.8.2", "typescript": "^4.6.4", - "unbuild": "^0.7.6", + "unbuild": "^0.8.8", "vite": "workspace:*", - "vitepress": "^1.0.0-alpha.4", - "vitest": "^0.19.0", + "vitepress": "^1.0.0-alpha.5", + "vitest": "^0.22.0", "vue": "^3.2.37" }, "simple-git-hooks": { @@ -112,7 +107,7 @@ "eslint --cache --fix" ] }, - "packageManager": "pnpm@7.6.0", + "packageManager": "pnpm@7.9.0", "pnpm": { "overrides": { "vite": "workspace:*", diff --git a/packages/create-vite/CHANGELOG.md b/packages/create-vite/CHANGELOG.md index be26f7b3cce15a..65eb850352c223 100644 --- a/packages/create-vite/CHANGELOG.md +++ b/packages/create-vite/CHANGELOG.md @@ -1,3 +1,21 @@ +## 3.0.2 (2022-08-12) + + + + +## 3.0.1 (2022-08-11) + +* fix: mention that Node.js 13/15 support is dropped (fixes #9113) (#9116) ([2826303](https://github.com/vitejs/vite/commit/2826303)), closes [#9113](https://github.com/vitejs/vite/issues/9113) [#9116](https://github.com/vitejs/vite/issues/9116) +* fix(create-vite): update vanilla-ts brand color (#9254) ([bff3abb](https://github.com/vitejs/vite/commit/bff3abb)), closes [#9254](https://github.com/vitejs/vite/issues/9254) +* fix(deps): update all non-major dependencies (#9176) ([31d3b70](https://github.com/vitejs/vite/commit/31d3b70)), closes [#9176](https://github.com/vitejs/vite/issues/9176) +* fix(deps): update all non-major dependencies (#9575) ([8071325](https://github.com/vitejs/vite/commit/8071325)), closes [#9575](https://github.com/vitejs/vite/issues/9575) +* chore: remove unused `favicon.svg` (#9181) ([33b5b0d](https://github.com/vitejs/vite/commit/33b5b0d)), closes [#9181](https://github.com/vitejs/vite/issues/9181) +* chore: tidy up eslint config (#9468) ([f4addcf](https://github.com/vitejs/vite/commit/f4addcf)), closes [#9468](https://github.com/vitejs/vite/issues/9468) +* chore(deps): update all non-major dependencies (#9347) ([2fcb027](https://github.com/vitejs/vite/commit/2fcb027)), closes [#9347](https://github.com/vitejs/vite/issues/9347) +* chore(deps): update all non-major dependencies (#9478) ([c530d16](https://github.com/vitejs/vite/commit/c530d16)), closes [#9478](https://github.com/vitejs/vite/issues/9478) + + + ## 3.0.0 (2022-07-13) * chore: bump minors and rebuild lock (#8074) ([aeb5b74](https://github.com/vitejs/vite/commit/aeb5b74)), closes [#8074](https://github.com/vitejs/vite/issues/8074) diff --git a/packages/create-vite/index.js b/packages/create-vite/index.js index 40d0aa583124d3..6ba1214a1829bb 100755 --- a/packages/create-vite/index.js +++ b/packages/create-vite/index.js @@ -355,6 +355,9 @@ function emptyDir(dir) { return } for (const file of fs.readdirSync(dir)) { + if (file === '.git') { + continue + } fs.rmSync(path.resolve(dir, file), { recursive: true, force: true }) } } diff --git a/packages/create-vite/package.json b/packages/create-vite/package.json index 77ae57a92c60fd..7c47e2601ab124 100644 --- a/packages/create-vite/package.json +++ b/packages/create-vite/package.json @@ -1,6 +1,6 @@ { "name": "create-vite", - "version": "3.0.0", + "version": "3.0.2", "type": "module", "license": "MIT", "author": "Evan You", diff --git a/packages/create-vite/template-lit-ts/package.json b/packages/create-vite/template-lit-ts/package.json index ad26e218ecde13..020f7f70b4df6e 100644 --- a/packages/create-vite/template-lit-ts/package.json +++ b/packages/create-vite/template-lit-ts/package.json @@ -17,10 +17,10 @@ "build": "tsc && vite build" }, "dependencies": { - "lit": "^2.2.8" + "lit": "^2.3.0" }, "devDependencies": { "typescript": "^4.6.4", - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-lit-ts/src/my-element.ts b/packages/create-vite/template-lit-ts/src/my-element.ts index da680eb1d0f19c..dde5d8cd50de89 100644 --- a/packages/create-vite/template-lit-ts/src/my-element.ts +++ b/packages/create-vite/template-lit-ts/src/my-element.ts @@ -1,4 +1,4 @@ -import { html, css, LitElement } from 'lit' +import { LitElement, css, html } from 'lit' import { customElement, property } from 'lit/decorators.js' import litLogo from './assets/lit.svg' diff --git a/packages/create-vite/template-lit/package.json b/packages/create-vite/template-lit/package.json index 125f1a4c00f527..1503519a2a9d41 100644 --- a/packages/create-vite/template-lit/package.json +++ b/packages/create-vite/template-lit/package.json @@ -15,9 +15,9 @@ "build": "vite build" }, "dependencies": { - "lit": "^2.2.8" + "lit": "^2.3.0" }, "devDependencies": { - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-lit/src/my-element.js b/packages/create-vite/template-lit/src/my-element.js index 411701454b89de..7c0c0426e49116 100644 --- a/packages/create-vite/template-lit/src/my-element.js +++ b/packages/create-vite/template-lit/src/my-element.js @@ -1,4 +1,4 @@ -import { html, css, LitElement } from 'lit' +import { LitElement, css, html } from 'lit' import litLogo from './assets/lit.svg' /** diff --git a/packages/create-vite/template-preact-ts/package.json b/packages/create-vite/template-preact-ts/package.json index 08cc2ee8862a30..2aefe702a28e7d 100644 --- a/packages/create-vite/template-preact-ts/package.json +++ b/packages/create-vite/template-preact-ts/package.json @@ -9,11 +9,11 @@ "preview": "vite preview" }, "dependencies": { - "preact": "^10.10.0" + "preact": "^10.10.3" }, "devDependencies": { "@preact/preset-vite": "^2.3.0", "typescript": "^4.6.4", - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-preact/package.json b/packages/create-vite/template-preact/package.json index 305161e05cd1de..bd44628e058723 100644 --- a/packages/create-vite/template-preact/package.json +++ b/packages/create-vite/template-preact/package.json @@ -9,10 +9,10 @@ "preview": "vite preview" }, "dependencies": { - "preact": "^10.10.0" + "preact": "^10.10.3" }, "devDependencies": { "@preact/preset-vite": "^2.3.0", - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-react-ts/package.json b/packages/create-vite/template-react-ts/package.json index 5f5431e58c7150..1f23457e867afe 100644 --- a/packages/create-vite/template-react-ts/package.json +++ b/packages/create-vite/template-react-ts/package.json @@ -13,10 +13,10 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@types/react": "^18.0.15", + "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", - "@vitejs/plugin-react": "^2.0.0", + "@vitejs/plugin-react": "^2.0.1", "typescript": "^4.6.4", - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-react/package.json b/packages/create-vite/template-react/package.json index 06f85bc71db5e5..b163c19f3a82e4 100644 --- a/packages/create-vite/template-react/package.json +++ b/packages/create-vite/template-react/package.json @@ -13,9 +13,9 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@types/react": "^18.0.15", + "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", - "@vitejs/plugin-react": "^2.0.0", - "vite": "^3.0.2" + "@vitejs/plugin-react": "^2.0.1", + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-svelte-ts/package.json b/packages/create-vite/template-svelte-ts/package.json index cdb7ed7c39f0ae..f107b19a49fea6 100644 --- a/packages/create-vite/template-svelte-ts/package.json +++ b/packages/create-vite/template-svelte-ts/package.json @@ -17,6 +17,6 @@ "svelte-preprocess": "^4.10.7", "tslib": "^2.4.0", "typescript": "^4.6.4", - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-svelte/package.json b/packages/create-vite/template-svelte/package.json index 3e401fc3cd673d..3eaa9fdbed6beb 100644 --- a/packages/create-vite/template-svelte/package.json +++ b/packages/create-vite/template-svelte/package.json @@ -11,6 +11,6 @@ "devDependencies": { "@sveltejs/vite-plugin-svelte": "^1.0.1", "svelte": "^3.49.0", - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-vanilla-ts/package.json b/packages/create-vite/template-vanilla-ts/package.json index 89881abdc58079..23014e5b402be9 100644 --- a/packages/create-vite/template-vanilla-ts/package.json +++ b/packages/create-vite/template-vanilla-ts/package.json @@ -10,6 +10,6 @@ }, "devDependencies": { "typescript": "^4.6.4", - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-vanilla/package.json b/packages/create-vite/template-vanilla/package.json index e3053d7fe79533..2bde1c3bfd2ca0 100644 --- a/packages/create-vite/template-vanilla/package.json +++ b/packages/create-vite/template-vanilla/package.json @@ -9,6 +9,6 @@ "preview": "vite preview" }, "devDependencies": { - "vite": "^3.0.2" + "vite": "^3.0.8" } } diff --git a/packages/create-vite/template-vue-ts/package.json b/packages/create-vite/template-vue-ts/package.json index 35526e650e6bc3..fc1bf650245be4 100644 --- a/packages/create-vite/template-vue-ts/package.json +++ b/packages/create-vite/template-vue-ts/package.json @@ -12,9 +12,9 @@ "vue": "^3.2.37" }, "devDependencies": { - "@vitejs/plugin-vue": "^3.0.1", + "@vitejs/plugin-vue": "^3.0.3", "typescript": "^4.6.4", - "vite": "^3.0.2", - "vue-tsc": "^0.39.0" + "vite": "^3.0.8", + "vue-tsc": "^0.40.1" } } diff --git a/packages/create-vite/template-vue/package.json b/packages/create-vite/template-vue/package.json index 5bf8423ad99da6..e073986193cce9 100644 --- a/packages/create-vite/template-vue/package.json +++ b/packages/create-vite/template-vue/package.json @@ -12,7 +12,7 @@ "vue": "^3.2.37" }, "devDependencies": { - "@vitejs/plugin-vue": "^3.0.1", - "vite": "^3.0.2" + "@vitejs/plugin-vue": "^3.0.3", + "vite": "^3.0.8" } } diff --git a/packages/plugin-legacy/CHANGELOG.md b/packages/plugin-legacy/CHANGELOG.md index 11783e3f959c44..7d38d423c5c3a6 100644 --- a/packages/plugin-legacy/CHANGELOG.md +++ b/packages/plugin-legacy/CHANGELOG.md @@ -1,3 +1,15 @@ +## 2.0.1 (2022-08-11) + +* fix: mention that Node.js 13/15 support is dropped (fixes #9113) (#9116) ([2826303](https://github.com/vitejs/vite/commit/2826303)), closes [#9113](https://github.com/vitejs/vite/issues/9113) [#9116](https://github.com/vitejs/vite/issues/9116) +* fix(deps): update all non-major dependencies (#9176) ([31d3b70](https://github.com/vitejs/vite/commit/31d3b70)), closes [#9176](https://github.com/vitejs/vite/issues/9176) +* fix(deps): update all non-major dependencies (#9575) ([8071325](https://github.com/vitejs/vite/commit/8071325)), closes [#9575](https://github.com/vitejs/vite/issues/9575) +* fix(legacy): skip esbuild transform for systemjs (#9635) ([ac16abd](https://github.com/vitejs/vite/commit/ac16abd)), closes [#9635](https://github.com/vitejs/vite/issues/9635) +* chore: fix code typos (#9033) ([ed02861](https://github.com/vitejs/vite/commit/ed02861)), closes [#9033](https://github.com/vitejs/vite/issues/9033) +* chore(deps): update all non-major dependencies (#9347) ([2fcb027](https://github.com/vitejs/vite/commit/2fcb027)), closes [#9347](https://github.com/vitejs/vite/issues/9347) +* chore(deps): update all non-major dependencies (#9478) ([c530d16](https://github.com/vitejs/vite/commit/c530d16)), closes [#9478](https://github.com/vitejs/vite/issues/9478) + + + ## 2.0.0 (2022-07-13) * chore: 3.0 release notes and bump peer deps (#9072) ([427ba26](https://github.com/vitejs/vite/commit/427ba26)), closes [#9072](https://github.com/vitejs/vite/issues/9072) diff --git a/packages/plugin-legacy/package.json b/packages/plugin-legacy/package.json index 6d416fe5e96474..356c525d04b883 100644 --- a/packages/plugin-legacy/package.json +++ b/packages/plugin-legacy/package.json @@ -1,6 +1,6 @@ { "name": "@vitejs/plugin-legacy", - "version": "2.0.0", + "version": "2.0.1", "license": "MIT", "author": "Evan You", "files": [ @@ -35,18 +35,18 @@ }, "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#readme", "dependencies": { - "@babel/standalone": "^7.18.9", - "core-js": "^3.24.0", + "@babel/standalone": "^7.18.12", + "core-js": "^3.24.1", "magic-string": "^0.26.2", "regenerator-runtime": "^0.13.9", - "systemjs": "^6.12.1" + "systemjs": "^6.12.2" }, "peerDependencies": { "terser": "^5.4.0", "vite": "^3.0.0" }, "devDependencies": { - "@babel/core": "^7.18.9", + "@babel/core": "^7.18.10", "vite": "workspace:*" } } diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts index ca79a56f160146..2d3711fd8289c6 100644 --- a/packages/plugin-legacy/src/index.ts +++ b/packages/plugin-legacy/src/index.ts @@ -159,19 +159,29 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] { const legacyConfigPlugin: Plugin = { name: 'vite:legacy-config', - apply: 'build', - config(config) { - if (!config.build) { - config.build = {} + config(config, env) { + if (env.command === 'build') { + if (!config.build) { + config.build = {} + } + + if (!config.build.cssTarget) { + // Hint for esbuild that we are targeting legacy browsers when minifying CSS. + // Full CSS compat table available at https://github.com/evanw/esbuild/blob/78e04680228cf989bdd7d471e02bbc2c8d345dc9/internal/compat/css_table.go + // But note that only the `HexRGBA` feature affects the minify outcome. + // HSL & rebeccapurple values will be minified away regardless the target. + // So targeting `chrome61` suffices to fix the compatibility issue. + config.build.cssTarget = 'chrome61' + } } - if (!config.build.cssTarget) { - // Hint for esbuild that we are targeting legacy browsers when minifying CSS. - // Full CSS compat table available at https://github.com/evanw/esbuild/blob/78e04680228cf989bdd7d471e02bbc2c8d345dc9/internal/compat/css_table.go - // But note that only the `HexRGBA` feature affects the minify outcome. - // HSL & rebeccapurple values will be minified away regardless the target. - // So targeting `chrome61` suffices to fix the compatibility issue. - config.build.cssTarget = 'chrome61' + return { + define: { + 'import.meta.env.LEGACY': + env.command === 'serve' || config.build?.ssr + ? false + : legacyEnvVarMarker + } } } } @@ -547,41 +557,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] { } } - let envInjectionFailed = false - const legacyEnvPlugin: Plugin = { - name: 'vite:legacy-env', - - config(config, env) { - if (env) { - return { - define: { - 'import.meta.env.LEGACY': - env.command === 'serve' || config.build?.ssr - ? false - : legacyEnvVarMarker - } - } - } else { - envInjectionFailed = true - } - }, - - configResolved(config) { - if (envInjectionFailed) { - config.logger.warn( - `[@vitejs/plugin-legacy] import.meta.env.LEGACY was not injected due ` + - `to incompatible vite version (requires vite@^2.0.0-beta.69).` - ) - } - } - } - - return [ - legacyConfigPlugin, - legacyGenerateBundlePlugin, - legacyPostPlugin, - legacyEnvPlugin - ] + return [legacyConfigPlugin, legacyGenerateBundlePlugin, legacyPostPlugin] } export async function detectPolyfills( @@ -657,8 +633,6 @@ async function buildPolyfillChunk( plugins: [polyfillsPlugin(imports, excludeSystemJS)], build: { write: false, - // if a value above 'es5' is set, esbuild injects helper functions which uses es2015 features - target: 'es5', minify, assetsDir, rollupOptions: { @@ -667,10 +641,21 @@ async function buildPolyfillChunk( }, output: { format, - entryFileNames: rollupOutputOptions.entryFileNames, - manualChunks: undefined + entryFileNames: rollupOutputOptions.entryFileNames } } + }, + // Don't run esbuild for transpilation or minification + // because we don't want to transpile code. + esbuild: false, + optimizeDeps: { + esbuildOptions: { + // If a value above 'es5' is set, esbuild injects helper functions which uses es2015 features. + // This limits the input code not to include es2015+ codes. + // But core-js is the only dependency which includes commonjs code + // and core-js doesn't include es2015+ codes. + target: 'es5' + } } }) const _polyfillChunk = Array.isArray(res) ? res[0] : res diff --git a/packages/plugin-react/CHANGELOG.md b/packages/plugin-react/CHANGELOG.md index 78b6de12fea5f0..8df2a245c5f296 100644 --- a/packages/plugin-react/CHANGELOG.md +++ b/packages/plugin-react/CHANGELOG.md @@ -1,3 +1,14 @@ +## 2.0.1 (2022-08-11) + +* fix: don't count class declarations as react fast refresh boundry (fixes #3675) (#8887) ([5a18284](https://github.com/vitejs/vite/commit/5a18284)), closes [#3675](https://github.com/vitejs/vite/issues/3675) [#8887](https://github.com/vitejs/vite/issues/8887) +* fix: mention that Node.js 13/15 support is dropped (fixes #9113) (#9116) ([2826303](https://github.com/vitejs/vite/commit/2826303)), closes [#9113](https://github.com/vitejs/vite/issues/9113) [#9116](https://github.com/vitejs/vite/issues/9116) +* fix(deps): update all non-major dependencies (#9176) ([31d3b70](https://github.com/vitejs/vite/commit/31d3b70)), closes [#9176](https://github.com/vitejs/vite/issues/9176) +* fix(deps): update all non-major dependencies (#9575) ([8071325](https://github.com/vitejs/vite/commit/8071325)), closes [#9575](https://github.com/vitejs/vite/issues/9575) +* fix(plugin-react): wrong substitution causes `React is not defined` (#9386) ([8a5b575](https://github.com/vitejs/vite/commit/8a5b575)), closes [#9386](https://github.com/vitejs/vite/issues/9386) +* docs: fix server options link (#9242) ([29db3ea](https://github.com/vitejs/vite/commit/29db3ea)), closes [#9242](https://github.com/vitejs/vite/issues/9242) + + + ## 2.0.0 (2022-07-13) * chore: 3.0 release notes and bump peer deps (#9072) ([427ba26](https://github.com/vitejs/vite/commit/427ba26)), closes [#9072](https://github.com/vitejs/vite/issues/9072) diff --git a/packages/plugin-react/package.json b/packages/plugin-react/package.json index 47a97b5ef612a9..7b13e17ac9217b 100644 --- a/packages/plugin-react/package.json +++ b/packages/plugin-react/package.json @@ -1,6 +1,6 @@ { "name": "@vitejs/plugin-react", - "version": "2.0.0", + "version": "2.0.1", "license": "MIT", "author": "Evan You", "contributors": [ @@ -39,8 +39,8 @@ }, "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme", "dependencies": { - "@babel/core": "^7.18.9", - "@babel/plugin-transform-react-jsx": "^7.18.6", + "@babel/core": "^7.18.10", + "@babel/plugin-transform-react-jsx": "^7.18.10", "@babel/plugin-transform-react-jsx-development": "^7.18.6", "@babel/plugin-transform-react-jsx-self": "^7.18.6", "@babel/plugin-transform-react-jsx-source": "^7.18.6", diff --git a/packages/plugin-react/src/fast-refresh.ts b/packages/plugin-react/src/fast-refresh.ts index 6e5019d1e059df..b3b095a65cf2ae 100644 --- a/packages/plugin-react/src/fast-refresh.ts +++ b/packages/plugin-react/src/fast-refresh.ts @@ -92,6 +92,7 @@ export function isRefreshBoundary(ast: t.File): boolean { } const { declaration, specifiers } = node if (declaration) { + if (declaration.type === 'ClassDeclaration') return false if (declaration.type === 'VariableDeclaration') { return declaration.declarations.every((variable) => isComponentLikeIdentifier(variable.id) diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts index f1adf81510bcef..5a82b0a2a6cd0e 100644 --- a/packages/plugin-react/src/index.ts +++ b/packages/plugin-react/src/index.ts @@ -406,7 +406,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] { config() { return { optimizeDeps: { - include: [reactJsxRuntimeId, reactJsxDevRuntimeId] + // We can't add `react-dom` because the dependency is `react-dom/client` + // for React 18 while it's `react-dom` for React 17. We'd need to detect + // what React version the user has installed. + include: [reactJsxRuntimeId, reactJsxDevRuntimeId, 'react'] } } }, diff --git a/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts b/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts index 669a0aeeced207..91b4db5411bf26 100644 --- a/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts +++ b/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts @@ -4,6 +4,10 @@ */ import type * as babel from '@babel/core' +interface PluginOptions { + reactAlias: string +} + /** * Visitor factory for babel, converting React.createElement(...) to ... * @@ -17,7 +21,10 @@ import type * as babel from '@babel/core' * * Any of those arguments might also be missing (undefined) and/or invalid. */ -export default function ({ types: t }: typeof babel): babel.PluginObj { +export default function ( + { types: t }: typeof babel, + { reactAlias = 'React' }: PluginOptions +): babel.PluginObj { /** * Get a `JSXElement` from a `CallExpression`. * Returns `null` if this impossible. @@ -48,7 +55,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj { if ( t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && - name.object.name === 'React' && + name.object.name === reactAlias && name.property.name === 'Fragment' ) { return t.jsxFragment( @@ -182,7 +189,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj { const isReactCreateElement = (node: any) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && - t.isIdentifier(node.callee.object, { name: 'React' }) && + t.isIdentifier(node.callee.object, { name: reactAlias }) && t.isIdentifier(node.callee.property, { name: 'createElement' }) && !node.callee.computed diff --git a/packages/plugin-react/src/jsx-runtime/restore-jsx.spec.ts b/packages/plugin-react/src/jsx-runtime/restore-jsx.spec.ts index 7d5b14bfc9cfd4..00ea39673ec415 100644 --- a/packages/plugin-react/src/jsx-runtime/restore-jsx.spec.ts +++ b/packages/plugin-react/src/jsx-runtime/restore-jsx.spec.ts @@ -81,7 +81,10 @@ describe('restore-jsx', () => { expect( await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react'; React__default.createElement(foo)`) - ).toBeNull() + ).toMatchInlineSnapshot(` + "import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react'; + React__default.createElement(foo);" + `) expect( await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react'; React__default.createElement("h1")`) @@ -104,7 +107,12 @@ describe('restore-jsx', () => { expect( await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react'; React__default.createElement(foo, {hi: there})`) - ).toBeNull() + ).toMatchInlineSnapshot(` + "import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react'; + React__default.createElement(foo, { + hi: there + });" + `) expect( await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react'; React__default.createElement("h1", {hi: there})`) @@ -114,4 +122,26 @@ describe('restore-jsx', () => { React__default.createElement(Foo, {hi: there})`) ).toMatch(`;`) }) + + it('should handle Fragment', async () => { + expect( + await jsx(`import R, { Fragment } from 'react'; + R.createElement(Fragment) + `) + ).toMatchInlineSnapshot(` + "import R, { Fragment } from 'react'; + ;" + `) + }) + + it('should handle Fragment alias', async () => { + expect( + await jsx(`import RA, { Fragment as F } from 'react'; + RA.createElement(F, null, RA.createElement(RA.Fragment)) + `) + ).toMatchInlineSnapshot(` + "import RA, { Fragment as F } from 'react'; + <>;" + `) + }) }) diff --git a/packages/plugin-react/src/jsx-runtime/restore-jsx.ts b/packages/plugin-react/src/jsx-runtime/restore-jsx.ts index d67a54e8f08aad..ddc3c1530e0d9f 100644 --- a/packages/plugin-react/src/jsx-runtime/restore-jsx.ts +++ b/packages/plugin-react/src/jsx-runtime/restore-jsx.ts @@ -33,34 +33,12 @@ export async function restoreJSX( return jsxNotFound } - let hasCompiledJsx = false - - const fragmentPattern = `\\b${reactAlias}\\.Fragment\\b` - const createElementPattern = `\\b${reactAlias}\\.createElement\\(\\s*([A-Z"'][\\w$.]*["']?)` - - // Replace the alias with "React" so JSX can be reverse compiled. - code = code - .replace(new RegExp(fragmentPattern, 'g'), () => { - hasCompiledJsx = true - return 'React.Fragment' - }) - .replace(new RegExp(createElementPattern, 'g'), (original, component) => { - if (/^[a-z][\w$]*$/.test(component)) { - // Take care not to replace the alias for `createElement` calls whose - // component is a lowercased variable, since the `restoreJSX` Babel - // plugin leaves them untouched. - return original - } - hasCompiledJsx = true - return ( - 'React.createElement(' + - // Assume `Fragment` is equivalent to `React.Fragment` so modules - // that use `import {Fragment} from 'react'` are reverse compiled. - (component === 'Fragment' ? 'React.Fragment' : component) - ) - }) + const reactJsxRE = new RegExp( + `\\b${reactAlias}\\.(createElement|Fragment)\\b`, + 'g' + ) - if (!hasCompiledJsx) { + if (!reactJsxRE.test(code)) { return jsxNotFound } @@ -73,7 +51,7 @@ export async function restoreJSX( parserOpts: { plugins: ['jsx'] }, - plugins: [await getBabelRestoreJSX()] + plugins: [[await getBabelRestoreJSX(), { reactAlias }]] }) return [result?.ast, isCommonJS] diff --git a/packages/plugin-vue-jsx/package.json b/packages/plugin-vue-jsx/package.json index aadc2f5aa25e7c..39eba505c6d54e 100644 --- a/packages/plugin-vue-jsx/package.json +++ b/packages/plugin-vue-jsx/package.json @@ -35,9 +35,9 @@ }, "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx#readme", "dependencies": { - "@babel/core": "^7.18.9", + "@babel/core": "^7.18.10", "@babel/plugin-syntax-import-meta": "^7.10.4", - "@babel/plugin-transform-typescript": "^7.18.8", + "@babel/plugin-transform-typescript": "^7.18.12", "@vue/babel-plugin-jsx": "^1.1.1" }, "devDependencies": { diff --git a/packages/plugin-vue-jsx/src/index.ts b/packages/plugin-vue-jsx/src/index.ts index 803c7fd7fd1a97..e5454980ed4d8e 100644 --- a/packages/plugin-vue-jsx/src/index.ts +++ b/packages/plugin-vue-jsx/src/index.ts @@ -38,6 +38,9 @@ function vueJsxPlugin(options: Options = {}): Plugin { let needHmr = false let needSourceMap = true + const { include, exclude, babelPlugins = [], ...babelPluginOptions } = options + const filter = createFilter(include || /\.[jt]sx$/, exclude) + return { name: 'vite:vue-jsx', @@ -75,14 +78,6 @@ function vueJsxPlugin(options: Options = {}): Plugin { async transform(code, id, opt) { const ssr = opt?.ssr === true - const { - include, - exclude, - babelPlugins = [], - ...babelPluginOptions - } = options - - const filter = createFilter(include || /\.[jt]sx$/, exclude) const [filepath] = id.split('?') // use id for script blocks in Vue SFCs (e.g. `App.vue?vue&type=script&lang.jsx`) diff --git a/packages/plugin-vue/CHANGELOG.md b/packages/plugin-vue/CHANGELOG.md index 2bc0752d6fc351..130c3787d17a0e 100644 --- a/packages/plugin-vue/CHANGELOG.md +++ b/packages/plugin-vue/CHANGELOG.md @@ -1,3 +1,15 @@ +## 3.0.3 (2022-08-12) + + + + +## 3.0.2 (2022-08-11) + +* chore: fix code typos (#9033) ([ed02861](https://github.com/vitejs/vite/commit/ed02861)), closes [#9033](https://github.com/vitejs/vite/issues/9033) +* chore: narrow down rollup version (#9637) ([fcf4d98](https://github.com/vitejs/vite/commit/fcf4d98)), closes [#9637](https://github.com/vitejs/vite/issues/9637) + + + ## 3.0.1 (2022-07-18) * fix: mention that Node.js 13/15 support is dropped (fixes #9113) (#9116) ([2826303](https://github.com/vitejs/vite/commit/2826303)), closes [#9113](https://github.com/vitejs/vite/issues/9113) [#9116](https://github.com/vitejs/vite/issues/9116) diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json index 255e1936174e30..6d639acd8495f8 100644 --- a/packages/plugin-vue/package.json +++ b/packages/plugin-vue/package.json @@ -1,6 +1,6 @@ { "name": "@vitejs/plugin-vue", - "version": "3.0.1", + "version": "3.0.3", "license": "MIT", "author": "Evan You", "files": [ @@ -40,9 +40,9 @@ }, "devDependencies": { "@jridgewell/gen-mapping": "^0.3.2", - "@jridgewell/trace-mapping": "^0.3.14", + "@jridgewell/trace-mapping": "^0.3.15", "debug": "^4.3.4", - "rollup": "^2.75.6", + "rollup": ">=2.75.6 <2.77.0 || ~2.77.0", "slash": "^4.0.0", "source-map": "^0.6.1", "vite": "workspace:*", diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts index 5a7a6947929be4..e8763443d032c0 100644 --- a/packages/plugin-vue/src/index.ts +++ b/packages/plugin-vue/src/index.ts @@ -54,11 +54,11 @@ export interface Options { /** * Enable Vue reactivity transform (experimental). - * https://github.com/vuejs/core/tree/master/packages/reactivity-transform + * https://vuejs.org/guide/extras/reactivity-transform.html * - `true`: transform will be enabled for all vue,js(x),ts(x) files except * those inside node_modules * - `string | RegExp`: apply to vue + only matched files (will include - * node_modules, so specify directories in necessary) + * node_modules, so specify directories if necessary) * - `false`: disable in all cases * * @default false @@ -186,7 +186,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { const descriptor = getDescriptor(filename, options)! let block: SFCBlock | null | undefined if (query.type === 'script') { - // handle + + +

test elements below should show circles and their url

+
+
diff --git a/playground/assets-sanitize/index.js b/playground/assets-sanitize/index.js new file mode 100644 index 00000000000000..bac3b3b83e6b1d --- /dev/null +++ b/playground/assets-sanitize/index.js @@ -0,0 +1,9 @@ +import plusCircle from './+circle.svg' +import underscoreCircle from './_circle.svg' +function setData(classname, file) { + const el = document.body.querySelector(classname) + el.style.backgroundImage = `url(${file})` + el.textContent = file +} +setData('.plus-circle', plusCircle) +setData('.underscore-circle', underscoreCircle) diff --git a/playground/assets-sanitize/package.json b/playground/assets-sanitize/package.json new file mode 100644 index 00000000000000..3ade78a2bd33fe --- /dev/null +++ b/playground/assets-sanitize/package.json @@ -0,0 +1,11 @@ +{ + "name": "test-assets-sanitize", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "debug": "node --inspect-brk ../../packages/vite/bin/vite", + "preview": "vite preview" + } +} diff --git a/playground/assets-sanitize/vite.config.js b/playground/assets-sanitize/vite.config.js new file mode 100644 index 00000000000000..0e365a95383833 --- /dev/null +++ b/playground/assets-sanitize/vite.config.js @@ -0,0 +1,11 @@ +const { defineConfig } = require('vite') + +module.exports = defineConfig({ + build: { + //speed up build + minify: false, + target: 'esnext', + assetsInlineLimit: 0, + manifest: true + } +}) diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts index 5b265578e98751..ceb259102d4031 100644 --- a/playground/assets/__tests__/assets.spec.ts +++ b/playground/assets/__tests__/assets.spec.ts @@ -288,6 +288,9 @@ test('new URL(`${dynamic}`, import.meta.url)', async () => { expect(await page.textContent('.dynamic-import-meta-url-2')).toMatch( assetMatch ) + expect(await page.textContent('.dynamic-import-meta-url-js')).toMatch( + isBuild ? 'data:application/javascript;base64' : '/foo/nested/test.js' + ) }) test('new URL(`non-existent`, import.meta.url)', async () => { @@ -364,3 +367,14 @@ test('relative path in html asset', async () => { expect(await page.textContent('.relative-js')).toMatch('hello') expect(await getColor('.relative-css')).toMatch('red') }) + +test('url() contains file in publicDir, in +

+ inline style +

+

use style class

@import

diff --git a/playground/vue-legacy/__tests__/vue-legacy.spec.ts b/playground/vue-legacy/__tests__/vue-legacy.spec.ts new file mode 100644 index 00000000000000..908e04567ca35b --- /dev/null +++ b/playground/vue-legacy/__tests__/vue-legacy.spec.ts @@ -0,0 +1,10 @@ +import { test } from 'vitest' +import { getBg, untilUpdated } from '~utils' + +test('vue legacy assets', async () => { + await untilUpdated(() => getBg('.main'), 'assets/asset', true) +}) + +test('async vue legacy assets', async () => { + await untilUpdated(() => getBg('.module'), 'assets/asset', true) +}) diff --git a/playground/vue-legacy/assets/asset.png b/playground/vue-legacy/assets/asset.png new file mode 100644 index 00000000000000..1b3356a746b8bb Binary files /dev/null and b/playground/vue-legacy/assets/asset.png differ diff --git a/playground/vue-legacy/env.d.ts b/playground/vue-legacy/env.d.ts new file mode 100644 index 00000000000000..31dca6bb40c906 --- /dev/null +++ b/playground/vue-legacy/env.d.ts @@ -0,0 +1 @@ +declare module '*.png' diff --git a/playground/vue-legacy/index.html b/playground/vue-legacy/index.html new file mode 100644 index 00000000000000..0f7b79435ed47d --- /dev/null +++ b/playground/vue-legacy/index.html @@ -0,0 +1,7 @@ +
+ diff --git a/playground/vue-legacy/inline.css b/playground/vue-legacy/inline.css new file mode 100644 index 00000000000000..2207a25763ca6d --- /dev/null +++ b/playground/vue-legacy/inline.css @@ -0,0 +1,3 @@ +.inline-css { + color: #0088ff; +} diff --git a/playground/vue-legacy/module.vue b/playground/vue-legacy/module.vue new file mode 100644 index 00000000000000..10c7b42e4c4215 --- /dev/null +++ b/playground/vue-legacy/module.vue @@ -0,0 +1,13 @@ + + diff --git a/playground/vue-legacy/package.json b/playground/vue-legacy/package.json new file mode 100644 index 00000000000000..201a5ae47bb293 --- /dev/null +++ b/playground/vue-legacy/package.json @@ -0,0 +1,18 @@ +{ + "name": "test-vue-legacy", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "debug": "node --inspect-brk ../../packages/vite/bin/vite", + "preview": "vite preview" + }, + "dependencies": { + "vue": "^3.2.37" + }, + "devDependencies": { + "@vitejs/plugin-vue": "workspace:*", + "@vitejs/plugin-legacy": "workspace:*" + } +} diff --git a/playground/vue-legacy/vite.config.ts b/playground/vue-legacy/vite.config.ts new file mode 100644 index 00000000000000..5bb2f0efa06f53 --- /dev/null +++ b/playground/vue-legacy/vite.config.ts @@ -0,0 +1,35 @@ +import path from 'node:path' +import fs from 'node:fs' +import { defineConfig } from 'vite' +import vuePlugin from '@vitejs/plugin-vue' +import legacyPlugin from '@vitejs/plugin-legacy' + +export default defineConfig({ + base: '', + resolve: { + alias: { + '@': __dirname + } + }, + plugins: [ + legacyPlugin({ + targets: ['defaults', 'not IE 11', 'chrome > 48'] + }), + vuePlugin() + ], + build: { + minify: false + }, + // special test only hook + // for tests, remove `