From b08e973da0477481970cdf6d49532bb6129aaa24 Mon Sep 17 00:00:00 2001 From: Eirik Sletteberg Date: Wed, 31 Mar 2021 21:17:13 +0200 Subject: [PATCH 01/46] fix: serve .js, .jsx, .ts, .tsx as application/javascript, fix #2642 (#2769) --- .../vite/src/node/server/middlewares/static.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts index 2ccf85e0bced8c..30173bb8b6ea24 100644 --- a/packages/vite/src/node/server/middlewares/static.ts +++ b/packages/vite/src/node/server/middlewares/static.ts @@ -1,12 +1,26 @@ import os from 'os' import path from 'path' -import sirv from 'sirv' +import sirv, { Options } from 'sirv' import { Connect } from 'types/connect' import { ResolvedConfig } from '../..' import { FS_PREFIX } from '../../constants' import { cleanUrl, isImportRequest } from '../../utils' -const sirvOptions = { dev: true, etag: true, extensions: [] } +const sirvOptions: Options = { + dev: true, + etag: true, + extensions: [], + setHeaders(res, pathname) { + // Matches js, jsx, ts, tsx. + // The reason this is done, is that the .ts file extension is reserved + // for the MIME type video/mp2t. In almost all cases, we can expect + // these files to be TypeScript files, and for Vite to serve them with + // this Content-Type. + if (/\.[tj]sx?$/.test(pathname)) { + res.setHeader('Content-Type', 'application/javascript') + } + } +} export function servePublicMiddleware(dir: string): Connect.NextHandleFunction { const serve = sirv(dir, sirvOptions) From aee8b3770cd081632fefb327b38ab704b97aa860 Mon Sep 17 00:00:00 2001 From: ZHAO Jinxiang Date: Thu, 1 Apr 2021 03:39:24 +0800 Subject: [PATCH 02/46] feat: add async support for vite config file (#2758) --- docs/config/index.md | 13 +++++++++++++ packages/vite/src/node/config.ts | 9 +++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/docs/config/index.md b/docs/config/index.md index e6526efb34af53..6f85e92e58e082 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -68,6 +68,19 @@ export default ({ command, mode }) => { } ``` +### Async Config + +If the config needs to call async function, it can export a async function instead: + +```js +export default async ({ command, mode }) => { + const data = await asyncFunction(); + return { + // build specific config + } +} +``` + ## Shared Options ### root diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 68787fa3369a66..dc9ce6c0952064 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -45,8 +45,8 @@ export interface ConfigEnv { mode: string } -export type UserConfigFn = (env: ConfigEnv) => UserConfig -export type UserConfigExport = UserConfig | UserConfigFn +export type UserConfigFn = (env: ConfigEnv) => UserConfig | Promise +export type UserConfigExport = UserConfig | Promise | UserConfigFn /** * Type helper to make it easier to use vite.config.ts @@ -707,8 +707,9 @@ export async function loadConfigFromFile( debug(`bundled config file loaded in ${Date.now() - start}ms`) } - const config = - typeof userConfig === 'function' ? userConfig(configEnv) : userConfig + const config = await (typeof userConfig === 'function' + ? userConfig(configEnv) + : userConfig) if (!isObject(config)) { throw new Error(`config must export or return an object.`) } From 11de3c226940a9eaf1ba998f037bfbd1e7aaf3ec Mon Sep 17 00:00:00 2001 From: Shinigami Date: Wed, 31 Mar 2021 21:45:32 +0200 Subject: [PATCH 03/46] chore: prefer-const (#2733) --- .eslintrc.js | 8 +++++++- packages/plugin-vue/src/handleHotUpdate.ts | 2 +- packages/vite/src/client/client.ts | 2 +- packages/vite/src/node/importGlob.ts | 2 +- packages/vite/src/node/plugins/css.ts | 4 ++-- packages/vite/src/node/plugins/resolve.ts | 2 +- packages/vite/src/node/server/index.ts | 1 + packages/vite/src/node/server/middlewares/static.ts | 2 +- packages/vite/src/node/server/openBrowser.ts | 2 +- 9 files changed, 16 insertions(+), 9 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index edf6be5da94729..4bc59a084a8021 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -51,7 +51,13 @@ module.exports = { 'node/no-unpublished-import': 'off', 'node/no-unpublished-require': 'off', 'node/no-unsupported-features/es-syntax': 'off', - 'no-process-exit': 'off' + 'no-process-exit': 'off', + 'prefer-const': [ + 'warn', + { + destructuring: 'all' + } + ] }, overrides: [ { diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts index 3b3ec974d1638c..e47d3b173021ee 100644 --- a/packages/plugin-vue/src/handleHotUpdate.ts +++ b/packages/plugin-vue/src/handleHotUpdate.ts @@ -127,7 +127,7 @@ export async function handleHotUpdate({ } } - let updateType = [] + const updateType = [] if (needRerender) { updateType.push(`template`) // template is inlined into main, add main module instead diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts index 366896293b0490..3eac2d2e5057d4 100644 --- a/packages/vite/src/client/client.ts +++ b/packages/vite/src/client/client.ts @@ -236,7 +236,7 @@ export function updateStyle(id: string, content: string) { } export function removeStyle(id: string) { - let style = sheetsMap.get(id) + const style = sheetsMap.get(id) if (style) { if (style instanceof CSSStyleSheet) { // @ts-ignore diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts index f14d7bd8bfddda..75a57953894e36 100644 --- a/packages/vite/src/node/importGlob.ts +++ b/packages/vite/src/node/importGlob.ts @@ -42,7 +42,7 @@ export async function transformImportGlob( } let base let parentDepth = 0 - let isAbsolute = pattern.startsWith('/') + const isAbsolute = pattern.startsWith('/') if (isAbsolute) { base = path.resolve(root) pattern = pattern.slice(1) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 8dfcb2a15faf14..e3a5c2a2f093fe 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -764,7 +764,7 @@ function rewriteCssUrls( replacer: CssUrlReplacer ): Promise { return asyncReplace(css, cssUrlRE, async (match) => { - let [matched, rawUrl] = match + const [matched, rawUrl] = match return await doUrlReplace(rawUrl, matched, replacer) }) } @@ -774,7 +774,7 @@ function rewriteCssImageSet( replacer: CssUrlReplacer ): Promise { return asyncReplace(css, cssImageSetRE, async (match) => { - let [matched, rawUrl] = match + const [matched, rawUrl] = match const url = await processSrcSet(rawUrl, ({ url }) => doUrlReplace(url, matched, replacer) ) diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts index e6eca61f08ef8d..0d6a07a9042375 100644 --- a/packages/vite/src/node/plugins/resolve.ts +++ b/packages/vite/src/node/plugins/resolve.ts @@ -121,7 +121,7 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin { // relative if (id.startsWith('.') || (preferRelative && /^\w/.test(id))) { const basedir = importer ? path.dirname(importer) : process.cwd() - let fsPath = path.resolve(basedir, id) + const fsPath = path.resolve(basedir, id) // handle browser field mapping for relative imports if ((res = tryResolveBrowserMapping(fsPath, importer, options, true))) { diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts index baf84145f7143a..045e1d8dcda389 100644 --- a/packages/vite/src/node/server/index.ts +++ b/packages/vite/src/node/server/index.ts @@ -285,6 +285,7 @@ export async function createServer( const moduleGraph = new ModuleGraph(container) const closeHttpServer = createServerCloseFn(httpServer) + // eslint-disable-next-line prefer-const let exitProcess: () => void const server: ViteDevServer = { diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts index 30173bb8b6ea24..c4c39c68028361 100644 --- a/packages/vite/src/node/server/middlewares/static.ts +++ b/packages/vite/src/node/server/middlewares/static.ts @@ -41,7 +41,7 @@ export function serveStaticMiddleware( const serve = sirv(dir, sirvOptions) return (req, res, next) => { - let url = req.url! + const url = req.url! // only serve the file if it's not an html request // so that html requests can fallthrough to our html middleware for diff --git a/packages/vite/src/node/server/openBrowser.ts b/packages/vite/src/node/server/openBrowser.ts index 68b65a400b65e9..817eed3ae8e2b6 100644 --- a/packages/vite/src/node/server/openBrowser.ts +++ b/packages/vite/src/node/server/openBrowser.ts @@ -91,7 +91,7 @@ function startBrowserProcess(browser: string | undefined, url: string) { // Fallback to open // (It will always open new tab) try { - var options = { app: browser, url: true } + const options = { app: browser, url: true } open(url, options).catch(() => {}) // Prevent `unhandledRejection` error. return true } catch (err) { From d466ad0a095859a895fd4cb85f425ad4c4583e4e Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Thu, 1 Apr 2021 03:57:47 +0800 Subject: [PATCH 04/46] fix: ignore babelrc in legacy plugin (#2801) --- packages/plugin-legacy/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js index 56ba4c10122161..0ecf2bd67b2ad5 100644 --- a/packages/plugin-legacy/index.js +++ b/packages/plugin-legacy/index.js @@ -226,6 +226,7 @@ function viteLegacyPlugin(options = {}) { // transform the legacy chunk with @babel/preset-env const sourceMaps = !!config.build.sourcemap const { code, map } = loadBabel().transform(raw, { + babelrc: false, configFile: false, compact: true, sourceMaps, @@ -408,6 +409,7 @@ function viteLegacyPlugin(options = {}) { function detectPolyfills(code, targets, list) { const { ast } = loadBabel().transform(code, { ast: true, + babelrc: false, configFile: false, presets: [ [ From 5bf050948def6d9f490d413ee3bdec734e475f81 Mon Sep 17 00:00:00 2001 From: Shinigami Date: Wed, 31 Mar 2021 22:06:16 +0200 Subject: [PATCH 05/46] chore: format with prettier (#2768) --- .circleci/config.yml | 4 +- .github.amrom.workers.devmit-convention.md | 11 +- .github/contributing.md | 4 +- .github/workflows/issue-close-require.yml | 2 +- .prettierignore | 6 + CODE_OF_CONDUCT.md | 2 +- docs/.vitepress/theme/sponsors.css | 2 +- docs/guide/api-hmr.md | 2 +- docs/guide/assets.md | 2 +- docs/guide/backend-integration.md | 5 +- docs/guide/static-deploy.md | 198 +++++++++--------- docs/plugins/index.md | 2 +- .../template-lit-element-ts/package.json | 2 +- .../template-lit-element/package.json | 2 +- .../template-preact-ts/package.json | 2 +- .../template-preact-ts/src/index.css | 25 +-- .../create-app/template-preact/package.json | 2 +- .../create-app/template-preact/src/app.jsx | 2 +- .../create-app/template-preact/src/index.css | 25 +-- .../create-app/template-react-ts/package.json | 2 +- .../template-react-ts/src/index.css | 6 +- .../create-app/template-react/package.json | 2 +- .../create-app/template-react/src/index.css | 6 +- .../template-svelte-ts/package.json | 2 +- .../create-app/template-svelte/package.json | 2 +- .../create-app/template-vanilla/package.json | 2 +- .../create-app/template-vanilla/style.css | 2 +- .../create-app/template-vue-ts/src/App.vue | 2 +- .../src/components/HelloWorld.vue | 9 +- packages/create-app/template-vue/package.json | 2 +- packages/create-app/template-vue/src/App.vue | 2 +- .../src/components/HelloWorld.vue | 7 +- packages/playground/alias/dir/test.css | 2 +- packages/playground/assets/css/fonts.css | 2 +- packages/playground/assets/package.json | 2 +- packages/playground/assets/static/raw.css | 2 +- packages/playground/css-codesplit/main.css | 4 +- packages/playground/css/async-treeshaken.css | 2 +- packages/playground/css/async.css | 2 +- packages/playground/css/css-dep/index.css | 2 +- packages/playground/css/dep.css | 2 +- .../playground/css/imported-at-import.css | 2 +- packages/playground/css/imported.css | 2 +- packages/playground/data-uri/package.json | 2 +- packages/playground/glob-import/dir/baz.json | 2 +- .../optimize-deps/dep-linked-include/Test.vue | 2 +- .../optimize-deps/dep-linked-include/test.css | 2 +- packages/playground/react/App.jsx | 4 +- .../playground/resolve-linked/package.json | 2 +- packages/playground/resolve/custom-ext.es | 2 +- .../resolve/exports-env/browser.mjs | 2 +- .../resolve/exports-env/browser.prod.mjs | 2 +- .../resolve/inline-package/package.json | 2 +- packages/playground/ssr-vue/src/App.vue | 2 +- .../playground/ssr-vue/src/components/Foo.jsx | 2 +- .../playground/ssr-vue/src/components/foo.css | 2 +- .../playground/ssr-vue/src/pages/About.vue | 2 +- .../playground/ssr-vue/src/pages/Home.vue | 6 +- packages/playground/vue/Assets.vue | 4 +- packages/playground/vue/CustomBlock.vue | 4 +- packages/playground/vue/Hmr.vue | 2 +- packages/playground/vue/Main.vue | 2 +- packages/playground/vue/Slotted.vue | 4 +- packages/plugin-react-refresh/README.md | 13 +- packages/plugin-vue-jsx/README.md | 3 +- packages/vite/README.md | 2 +- 66 files changed, 229 insertions(+), 211 deletions(-) create mode 100644 .prettierignore diff --git a/.circleci/config.yml b/.circleci/config.yml index 9335ce3054f0d8..74cb374c1c1640 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -7,8 +7,8 @@ defaults: &defaults step_restore_cache: &restore_cache restore_cache: keys: - - v1-dependencies-{{ checksum "yarn.lock" }}-1 - - v1-dependencies- + - v1-dependencies-{{ checksum "yarn.lock" }}-1 + - v1-dependencies- step_install_deps: &install_deps run: diff --git a/.github.amrom.workers.devmit-convention.md b/.github.amrom.workers.devmit-convention.md index c66c7b9676ab3a..baa447479e9c39 100644 --- a/.github.amrom.workers.devmit-convention.md +++ b/.github.amrom.workers.devmit-convention.md @@ -6,7 +6,8 @@ Messages must be matched by the following regex: -``` js + +```js /^(revert: )?(feat|fix|docs|dx|refactor|perf|test|workflow|build|ci|chore|types|wip|release|deps)(\(.+\))?: .{1,50}/ ``` @@ -44,7 +45,7 @@ This reverts commit 667ecc1654a317a13331b17617d973392f415f02. ### Full Message Format -A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**: +A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**: ``` (): @@ -74,9 +75,9 @@ The scope could be anything specifying the place of the commit change. For examp The subject contains a succinct description of the change: -* use the imperative, present tense: "change" not "changed" nor "changes" -* don't capitalize the first letter -* no dot (.) at the end +- use the imperative, present tense: "change" not "changed" nor "changes" +- don't capitalize the first letter +- no dot (.) at the end ### Body diff --git a/.github/contributing.md b/.github/contributing.md index 60c348cd49c36c..d0b3e4f9b66bb0 100644 --- a/.github/contributing.md +++ b/.github/contributing.md @@ -12,8 +12,8 @@ To development and test the core `vite` package: 2. Run `yarn link` in `packages/vite`. This links `vite` globally so that you can: - - Run `yarn link vite` in another Vite project to use the locally built Vite; - - Use the `vite` binary anywhere. + - Run `yarn link vite` in another Vite project to use the locally built Vite; + - Use the `vite` binary anywhere. ## Running Tests diff --git a/.github/workflows/issue-close-require.yml b/.github/workflows/issue-close-require.yml index 058d89bbc26b98..244ae4e6297f01 100644 --- a/.github/workflows/issue-close-require.yml +++ b/.github/workflows/issue-close-require.yml @@ -2,7 +2,7 @@ name: Issue Close Require on: schedule: - - cron: "0 0 * * *" + - cron: '0 0 * * *' jobs: close-issues: diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000000000..ba0c80d22e344b --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +docs/.vitepress/dist/ +packages/vite/dist/ +packages/plugin-vue/dist/ +packages/*/CHANGELOG.md +LICENSE.md +.prettierrc \ No newline at end of file diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 3c78f4082d7a64..e88816ee2d4e60 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -42,4 +42,4 @@ Project maintainers who do not follow or enforce the Code of Conduct in good fai This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html -[homepage]: https://www.contributor-covenant.org \ No newline at end of file +[homepage]: https://www.contributor-covenant.org diff --git a/docs/.vitepress/theme/sponsors.css b/docs/.vitepress/theme/sponsors.css index 2f30c1a888c540..bc0e9e1ca406ac 100644 --- a/docs/.vitepress/theme/sponsors.css +++ b/docs/.vitepress/theme/sponsors.css @@ -25,4 +25,4 @@ color: #999; font-size: 1.2rem; border: none; -} \ No newline at end of file +} diff --git a/docs/guide/api-hmr.md b/docs/guide/api-hmr.md index cc58ebce612999..829c53a7f1ccc3 100644 --- a/docs/guide/api-hmr.md +++ b/docs/guide/api-hmr.md @@ -112,4 +112,4 @@ For now, calling `import.meta.hot.invalidate()` simply reloads the page. ## `hot.on(event, cb)` -Listen to a custom HMR event. Custom HMR events can be sent from plugins. See [handleHotUpdate](./api-plugin#handlehotupdate) for more details. \ No newline at end of file +Listen to a custom HMR event. Custom HMR events can be sent from plugins. See [handleHotUpdate](./api-plugin#handlehotupdate) for more details. diff --git a/docs/guide/assets.md b/docs/guide/assets.md index e76b642d08657f..a932c08dd6bc48 100644 --- a/docs/guide/assets.md +++ b/docs/guide/assets.md @@ -45,7 +45,7 @@ import shaderString from './shader.glsl?raw' ### Importing Script as a Worker -Scripts can be imported as web workers with the `?worker` suffix. +Scripts can be imported as web workers with the `?worker` suffix. ```js // Separate chunk in the production build diff --git a/docs/guide/backend-integration.md b/docs/guide/backend-integration.md index 27d17ab1b05bb0..4669bd6c818dec 100644 --- a/docs/guide/backend-integration.md +++ b/docs/guide/backend-integration.md @@ -41,8 +41,8 @@ Or you can follow these steps to configure it manually: ```html ``` - diff --git a/docs/guide/static-deploy.md b/docs/guide/static-deploy.md index 48dc91fe1a8b53..c5c53efda936a5 100644 --- a/docs/guide/static-deploy.md +++ b/docs/guide/static-deploy.md @@ -64,33 +64,33 @@ Now the `preview` method will launch the server at http://localhost:8080. 2. Inside your project, create `deploy.sh` with the following content (with highlighted lines uncommented appropriately), and run it to deploy: -```bash{13,20,23} -#!/usr/bin/env sh + ```bash{13,20,23} + #!/usr/bin/env sh -# abort on errors -set -e + # abort on errors + set -e -# build -npm run build + # build + npm run build -# navigate into the build output directory -cd dist + # navigate into the build output directory + cd dist -# if you are deploying to a custom domain -# echo 'www.example.com' > CNAME + # if you are deploying to a custom domain + # echo 'www.example.com' > CNAME -git init -git add -A -git commit -m 'deploy' + git init + git add -A + git commit -m 'deploy' -# if you are deploying to https://.github.io -# git push -f git@github.com:/.github.io.git master + # if you are deploying to https://.github.io + # git push -f git@github.com:/.github.io.git master -# if you are deploying to https://.github.io/ -# git push -f git@github.com:/.git master:gh-pages + # if you are deploying to https://.github.io/ + # git push -f git@github.com:/.git master:gh-pages -cd - -``` + cd - + ``` ::: tip You can also run the above script in your CI setup to enable automatic deployment on each push. @@ -110,60 +110,60 @@ You can also run the above script in your CI setup to enable automatic deploymen 4. Use the GitHub Pages deploy provider template, and follow the [Travis CI documentation](https://docs.travis-ci.com/user/deployment/pages/). -```yaml -language: node_js -node_js: - - lts/* -install: - - npm ci -script: - - npm run build -deploy: - provider: pages - skip_cleanup: true - local_dir: dist - # A token generated on GitHub allowing Travis to push code on you repository. - # Set in the Travis settings page of your repository, as a secure variable. - github_token: $GITHUB_TOKEN - keep_history: true - on: - branch: master -``` + ```yaml + language: node_js + node_js: + - lts/* + install: + - npm ci + script: + - npm run build + deploy: + provider: pages + skip_cleanup: true + local_dir: dist + # A token generated on GitHub allowing Travis to push code on you repository. + # Set in the Travis settings page of your repository, as a secure variable. + github_token: $GITHUB_TOKEN + keep_history: true + on: + branch: master + ``` ## GitLab Pages and GitLab CI 1. Set the correct `base` in `vite.config.js`. - If you are deploying to `https://.gitlab.io/`, you can omit `base` as it defaults to `'/'`. + If you are deploying to `https://.gitlab.io/`, you can omit `base` as it defaults to `'/'`. - If you are deploying to `https://.gitlab.io//`, for example your repository is at `https://gitlab.com//`, then set `base` to `'//'`. + If you are deploying to `https://.gitlab.io//`, for example your repository is at `https://gitlab.com//`, then set `base` to `'//'`. 2. Set `build.outDir` in `vite.config.js` to `public`. 3. Create a file called `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content: -```yaml -image: node:10.22.0 -pages: - cache: - paths: - - node_modules/ - script: - - npm install - - npm run build - artifacts: - paths: - - public - only: - - master -``` + ```yaml + image: node:10.22.0 + pages: + cache: + paths: + - node_modules/ + script: + - npm install + - npm run build + artifacts: + paths: + - public + only: + - master + ``` ## Netlify 1. On [Netlify](https://netlify.com), setup up a new project from GitHub with the following settings: -- **Build Command:** `vite build` or `npm run build` -- **Publish directory:** `dist` + - **Build Command:** `vite build` or `npm run build` + - **Publish directory:** `dist` 2. Hit the deploy button. @@ -173,26 +173,26 @@ pages: 2. Create `firebase.json` and `.firebaserc` at the root of your project with the following content: - `firebase.json`: + `firebase.json`: - ```json - { - "hosting": { - "public": "dist", - "ignore": [] - } - } - ``` + ```json + { + "hosting": { + "public": "dist", + "ignore": [] + } + } + ``` - `.firebaserc`: + `.firebaserc`: - ```js - { - "projects": { - "default": "" + ```js + { + "projects": { + "default": "" + } } - } - ``` + ``` 3. After running `npm run build`, deploy using the command `firebase deploy`. @@ -214,46 +214,46 @@ You can also deploy to a [custom domain](http://surge.sh/help/adding-a-custom-do 3. Run `heroku login` and fill in your Heroku credentials: -```bash -$ heroku login -``` + ```bash + $ heroku login + ``` 4. Create a file called `static.json` in the root of your project with the below content: -`static.json`: + `static.json`: -```json -{ - "root": "./dist" -} -``` + ```json + { + "root": "./dist" + } + ``` -This is the configuration of your site; read more at [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static). + This is the configuration of your site; read more at [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static). 5. Set up your Heroku git remote: -```bash -# version change -$ git init -$ git add . -$ git commit -m "My site ready for deployment." + ```bash + # version change + $ git init + $ git add . + $ git commit -m "My site ready for deployment." -# creates a new app with a specified name -$ heroku apps:create example + # creates a new app with a specified name + $ heroku apps:create example -# set buildpack for static sites -$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git -``` + # set buildpack for static sites + $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git + ``` 6. Deploy your site: -```bash -# publish site -$ git push heroku master + ```bash + # publish site + $ git push heroku master -# opens a browser to view the Dashboard version of Heroku CI -$ heroku open -``` + # opens a browser to view the Dashboard version of Heroku CI + $ heroku open + ``` ## Vercel diff --git a/docs/plugins/index.md b/docs/plugins/index.md index 4a7c6e46df1819..647c9706e313de 100644 --- a/docs/plugins/index.md +++ b/docs/plugins/index.md @@ -28,4 +28,4 @@ Check out [awesome-vite](https://github.com/vitejs/awesome-vite#plugins) - you c ## Rollup Plugins -[Vite plugins](../guide/api-plugin) are an extension of Rollup's plugin interface. Check out the [Rollup Plugin Compatibility section](../guide/api-plugin#rollup-plugin-compatibility) for more information. \ No newline at end of file +[Vite plugins](../guide/api-plugin) are an extension of Rollup's plugin interface. Check out the [Rollup Plugin Compatibility section](../guide/api-plugin#rollup-plugin-compatibility) for more information. diff --git a/packages/create-app/template-lit-element-ts/package.json b/packages/create-app/template-lit-element-ts/package.json index 6187f3cb45c47a..e75bc7d31a4b81 100644 --- a/packages/create-app/template-lit-element-ts/package.json +++ b/packages/create-app/template-lit-element-ts/package.json @@ -21,4 +21,4 @@ "vite": "^2.1.5", "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 a0305ac31b72fe..652ab069112e2b 100644 --- a/packages/create-app/template-lit-element/package.json +++ b/packages/create-app/template-lit-element/package.json @@ -18,4 +18,4 @@ "devDependencies": { "vite": "^2.1.5" } -} \ 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 c1c30dbbf5450a..8c3a22ec3f9322 100644 --- a/packages/create-app/template-preact-ts/package.json +++ b/packages/create-app/template-preact-ts/package.json @@ -14,4 +14,4 @@ "typescript": "^4.1.3", "vite": "^2.1.5" } -} \ No newline at end of file +} diff --git a/packages/create-app/template-preact-ts/src/index.css b/packages/create-app/template-preact-ts/src/index.css index b8c94dfb55e8d0..3d36f1648343ec 100644 --- a/packages/create-app/template-preact-ts/src/index.css +++ b/packages/create-app/template-preact-ts/src/index.css @@ -1,18 +1,19 @@ -html, body { - height: 100%; - width: 100%; - padding: 0; - margin: 0; - background: #FAFAFA; - font-family: 'Helvetica Neue', arial, sans-serif; - font-weight: 400; - color: #444; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +html, +body { + height: 100%; + width: 100%; + padding: 0; + margin: 0; + background: #fafafa; + font-family: 'Helvetica Neue', arial, sans-serif; + font-weight: 400; + color: #444; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } * { - box-sizing: border-box; + box-sizing: border-box; } #app { diff --git a/packages/create-app/template-preact/package.json b/packages/create-app/template-preact/package.json index ed6e100d0b0e64..2de01c658f685f 100644 --- a/packages/create-app/template-preact/package.json +++ b/packages/create-app/template-preact/package.json @@ -13,4 +13,4 @@ "@preact/preset-vite": "^2.0.0", "vite": "^2.1.5" } -} \ No newline at end of file +} diff --git a/packages/create-app/template-preact/src/app.jsx b/packages/create-app/template-preact/src/app.jsx index ae31e704597d4b..9d649444f686d9 100644 --- a/packages/create-app/template-preact/src/app.jsx +++ b/packages/create-app/template-preact/src/app.jsx @@ -17,4 +17,4 @@ export function App(props) {

) -} \ No newline at end of file +} diff --git a/packages/create-app/template-preact/src/index.css b/packages/create-app/template-preact/src/index.css index b8c94dfb55e8d0..3d36f1648343ec 100644 --- a/packages/create-app/template-preact/src/index.css +++ b/packages/create-app/template-preact/src/index.css @@ -1,18 +1,19 @@ -html, body { - height: 100%; - width: 100%; - padding: 0; - margin: 0; - background: #FAFAFA; - font-family: 'Helvetica Neue', arial, sans-serif; - font-weight: 400; - color: #444; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +html, +body { + height: 100%; + width: 100%; + padding: 0; + margin: 0; + background: #fafafa; + font-family: 'Helvetica Neue', arial, sans-serif; + font-weight: 400; + color: #444; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } * { - box-sizing: border-box; + box-sizing: border-box; } #app { diff --git a/packages/create-app/template-react-ts/package.json b/packages/create-app/template-react-ts/package.json index 4ed547b5ef53cb..18997ac311b416 100644 --- a/packages/create-app/template-react-ts/package.json +++ b/packages/create-app/template-react-ts/package.json @@ -17,4 +17,4 @@ "typescript": "^4.1.2", "vite": "^2.1.5" } -} \ No newline at end of file +} diff --git a/packages/create-app/template-react-ts/src/index.css b/packages/create-app/template-react-ts/src/index.css index 4a1df4db71cdb3..ec2585e8c0bb81 100644 --- a/packages/create-app/template-react-ts/src/index.css +++ b/packages/create-app/template-react-ts/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } diff --git a/packages/create-app/template-react/package.json b/packages/create-app/template-react/package.json index 6411b42284a7e0..ccf4a7b2072ea1 100644 --- a/packages/create-app/template-react/package.json +++ b/packages/create-app/template-react/package.json @@ -14,4 +14,4 @@ "@vitejs/plugin-react-refresh": "^1.3.1", "vite": "^2.1.5" } -} \ No newline at end of file +} diff --git a/packages/create-app/template-react/src/index.css b/packages/create-app/template-react/src/index.css index 4a1df4db71cdb3..ec2585e8c0bb81 100644 --- a/packages/create-app/template-react/src/index.css +++ b/packages/create-app/template-react/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } diff --git a/packages/create-app/template-svelte-ts/package.json b/packages/create-app/template-svelte-ts/package.json index 7ca9fd9b9e524d..1111c5b5b7bc9a 100644 --- a/packages/create-app/template-svelte-ts/package.json +++ b/packages/create-app/template-svelte-ts/package.json @@ -13,4 +13,4 @@ "typescript": "^4.2.3", "vite": "^2.1.5" } -} \ No newline at end of file +} diff --git a/packages/create-app/template-svelte/package.json b/packages/create-app/template-svelte/package.json index 5fcb083b2b301b..d8af9254125228 100644 --- a/packages/create-app/template-svelte/package.json +++ b/packages/create-app/template-svelte/package.json @@ -11,4 +11,4 @@ "svelte": "^3.35.0", "vite": "^2.1.5" } -} \ 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 80d36d9d5af3c0..2dae8d9761e1bc 100644 --- a/packages/create-app/template-vanilla/package.json +++ b/packages/create-app/template-vanilla/package.json @@ -9,4 +9,4 @@ "devDependencies": { "vite": "^2.1.5" } -} \ No newline at end of file +} diff --git a/packages/create-app/template-vanilla/style.css b/packages/create-app/template-vanilla/style.css index 89778b81515f05..852de7aa2ae573 100644 --- a/packages/create-app/template-vanilla/style.css +++ b/packages/create-app/template-vanilla/style.css @@ -5,4 +5,4 @@ text-align: center; color: #2c3e50; margin-top: 60px; -} \ No newline at end of file +} diff --git a/packages/create-app/template-vue-ts/src/App.vue b/packages/create-app/template-vue-ts/src/App.vue index 26d5731c4055d1..72cc3b82039dd2 100644 --- a/packages/create-app/template-vue-ts/src/App.vue +++ b/packages/create-app/template-vue-ts/src/App.vue @@ -24,4 +24,4 @@ export default defineComponent({ color: #2c3e50; margin-top: 60px; } - \ No newline at end of file + diff --git a/packages/create-app/template-vue-ts/src/components/HelloWorld.vue b/packages/create-app/template-vue-ts/src/components/HelloWorld.vue index f51da8271be163..f35d1b04facc6b 100644 --- a/packages/create-app/template-vue-ts/src/components/HelloWorld.vue +++ b/packages/create-app/template-vue-ts/src/components/HelloWorld.vue @@ -8,7 +8,9 @@ Vetur + > + Vetur + or Volar (if using @@ -18,7 +20,10 @@

See README.md for more information.

- Vite Docs | + + Vite Docs + + | Vue 3 Docs

diff --git a/packages/create-app/template-vue/package.json b/packages/create-app/template-vue/package.json index acc119e8696914..f46af73be732b5 100644 --- a/packages/create-app/template-vue/package.json +++ b/packages/create-app/template-vue/package.json @@ -14,4 +14,4 @@ "@vue/compiler-sfc": "^3.0.5", "vite": "^2.1.5" } -} \ No newline at end of file +} diff --git a/packages/create-app/template-vue/src/App.vue b/packages/create-app/template-vue/src/App.vue index e9748276d24a0b..b67169df640bb4 100644 --- a/packages/create-app/template-vue/src/App.vue +++ b/packages/create-app/template-vue/src/App.vue @@ -19,4 +19,4 @@ import HelloWorld from './components/HelloWorld.vue' color: #2c3e50; margin-top: 60px; } - \ No newline at end of file + diff --git a/packages/create-app/template-vue/src/components/HelloWorld.vue b/packages/create-app/template-vue/src/components/HelloWorld.vue index e4f6590eeccdf0..d834212fe51377 100644 --- a/packages/create-app/template-vue/src/components/HelloWorld.vue +++ b/packages/create-app/template-vue/src/components/HelloWorld.vue @@ -2,7 +2,10 @@

{{ msg }}

- Vite Documentation | + + Vite Documentation + + | Vue 3 Documentation

@@ -27,4 +30,4 @@ const state = reactive({ count: 0 }) a { color: #42b983; } - \ No newline at end of file + diff --git a/packages/playground/alias/dir/test.css b/packages/playground/alias/dir/test.css index f3d1ca7aeaddc8..52ed24d8063f15 100644 --- a/packages/playground/alias/dir/test.css +++ b/packages/playground/alias/dir/test.css @@ -1,3 +1,3 @@ body { color: grey; -} \ No newline at end of file +} diff --git a/packages/playground/assets/css/fonts.css b/packages/playground/assets/css/fonts.css index 974d80fe726d9f..f9e06755951534 100644 --- a/packages/playground/assets/css/fonts.css +++ b/packages/playground/assets/css/fonts.css @@ -9,4 +9,4 @@ body { font-family: 'Inter'; -} \ No newline at end of file +} diff --git a/packages/playground/assets/package.json b/packages/playground/assets/package.json index ed26f61e22c261..3f6c5d0783cfe3 100644 --- a/packages/playground/assets/package.json +++ b/packages/playground/assets/package.json @@ -8,4 +8,4 @@ "debug": "node --inspect-brk ../../vite/bin/vite", "serve": "vite preview" } -} \ No newline at end of file +} diff --git a/packages/playground/assets/static/raw.css b/packages/playground/assets/static/raw.css index b60c26ff703106..ee4f36a2c29e64 100644 --- a/packages/playground/assets/static/raw.css +++ b/packages/playground/assets/static/raw.css @@ -1,3 +1,3 @@ .raw-css { color: red; -} \ No newline at end of file +} diff --git a/packages/playground/css-codesplit/main.css b/packages/playground/css-codesplit/main.css index 24aec3a5671d8f..adc68fa6a4dfa0 100644 --- a/packages/playground/css-codesplit/main.css +++ b/packages/playground/css-codesplit/main.css @@ -1,3 +1,3 @@ -h1 { +h1 { color: red; -} \ No newline at end of file +} diff --git a/packages/playground/css/async-treeshaken.css b/packages/playground/css/async-treeshaken.css index f0d7d653a8f8a5..9b609f308a63cf 100644 --- a/packages/playground/css/async-treeshaken.css +++ b/packages/playground/css/async-treeshaken.css @@ -1,3 +1,3 @@ .async-treeshaken { color: plum; -} \ No newline at end of file +} diff --git a/packages/playground/css/async.css b/packages/playground/css/async.css index a00539db8f3b1a..aee3dcafd84895 100644 --- a/packages/playground/css/async.css +++ b/packages/playground/css/async.css @@ -1,3 +1,3 @@ .async { color: teal; -} \ No newline at end of file +} diff --git a/packages/playground/css/css-dep/index.css b/packages/playground/css/css-dep/index.css index fb86e5496c1aee..0fdcd8118ad54c 100644 --- a/packages/playground/css/css-dep/index.css +++ b/packages/playground/css/css-dep/index.css @@ -1,3 +1,3 @@ .css-dep { color: purple; -} \ No newline at end of file +} diff --git a/packages/playground/css/dep.css b/packages/playground/css/dep.css index cb828d3383582a..8d5b62847cd70e 100644 --- a/packages/playground/css/dep.css +++ b/packages/playground/css/dep.css @@ -1 +1 @@ -@import 'css-dep' \ No newline at end of file +@import 'css-dep'; diff --git a/packages/playground/css/imported-at-import.css b/packages/playground/css/imported-at-import.css index 6395e26d6cb670..b71ef00e65b27a 100644 --- a/packages/playground/css/imported-at-import.css +++ b/packages/playground/css/imported-at-import.css @@ -1,3 +1,3 @@ .imported-at-import { color: purple; -} \ No newline at end of file +} diff --git a/packages/playground/css/imported.css b/packages/playground/css/imported.css index edd5c35b22ac3d..4bedd02a53f0f5 100644 --- a/packages/playground/css/imported.css +++ b/packages/playground/css/imported.css @@ -16,4 +16,4 @@ pre { .nesting { color: pink; } -} \ No newline at end of file +} diff --git a/packages/playground/data-uri/package.json b/packages/playground/data-uri/package.json index 54912c035d44e7..7f5cabc688332e 100644 --- a/packages/playground/data-uri/package.json +++ b/packages/playground/data-uri/package.json @@ -8,4 +8,4 @@ "debug": "node --inspect-brk ../../vite/bin/vite", "serve": "vite preview" } -} \ No newline at end of file +} diff --git a/packages/playground/glob-import/dir/baz.json b/packages/playground/glob-import/dir/baz.json index ef46606326191e..e8677dc6e2dae3 100644 --- a/packages/playground/glob-import/dir/baz.json +++ b/packages/playground/glob-import/dir/baz.json @@ -1,3 +1,3 @@ { "msg": "baz" -} \ No newline at end of file +} diff --git a/packages/playground/optimize-deps/dep-linked-include/Test.vue b/packages/playground/optimize-deps/dep-linked-include/Test.vue index ca11049b3e883b..0f5052cb6a8853 100644 --- a/packages/playground/optimize-deps/dep-linked-include/Test.vue +++ b/packages/playground/optimize-deps/dep-linked-include/Test.vue @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/playground/optimize-deps/dep-linked-include/test.css b/packages/playground/optimize-deps/dep-linked-include/test.css index b719c608467fdd..60f1eab97137f7 100644 --- a/packages/playground/optimize-deps/dep-linked-include/test.css +++ b/packages/playground/optimize-deps/dep-linked-include/test.css @@ -1,3 +1,3 @@ body { color: red; -} \ No newline at end of file +} diff --git a/packages/playground/react/App.jsx b/packages/playground/react/App.jsx index ef0ee76f43fcc5..1de7461b163776 100644 --- a/packages/playground/react/App.jsx +++ b/packages/playground/react/App.jsx @@ -7,7 +7,9 @@ function App() {

Hello Vite + React

- +

Edit App.jsx and save to test HMR updates. diff --git a/packages/playground/resolve-linked/package.json b/packages/playground/resolve-linked/package.json index 68263fb725c4c8..8042ce78119b8f 100644 --- a/packages/playground/resolve-linked/package.json +++ b/packages/playground/resolve-linked/package.json @@ -3,4 +3,4 @@ "version": "0.0.0", "private": true, "main": "src/index.js" -} \ No newline at end of file +} diff --git a/packages/playground/resolve/custom-ext.es b/packages/playground/resolve/custom-ext.es index 000f3d188d0dea..b7f7c98793dc2b 100644 --- a/packages/playground/resolve/custom-ext.es +++ b/packages/playground/resolve/custom-ext.es @@ -1 +1 @@ -export const msg = `[success] custom ext` \ No newline at end of file +export const msg = `[success] custom ext` diff --git a/packages/playground/resolve/exports-env/browser.mjs b/packages/playground/resolve/exports-env/browser.mjs index 6d8ec78613bd18..e4cb61295b1086 100644 --- a/packages/playground/resolve/exports-env/browser.mjs +++ b/packages/playground/resolve/exports-env/browser.mjs @@ -1 +1 @@ -export const msg = '[success] exports env (browser.mjs)' \ No newline at end of file +export const msg = '[success] exports env (browser.mjs)' diff --git a/packages/playground/resolve/exports-env/browser.prod.mjs b/packages/playground/resolve/exports-env/browser.prod.mjs index 8265343ed6220f..bace0b9cd0dfa7 100644 --- a/packages/playground/resolve/exports-env/browser.prod.mjs +++ b/packages/playground/resolve/exports-env/browser.prod.mjs @@ -1 +1 @@ -export const msg = '[success] exports env (browser.prod.mjs)' \ No newline at end of file +export const msg = '[success] exports env (browser.prod.mjs)' diff --git a/packages/playground/resolve/inline-package/package.json b/packages/playground/resolve/inline-package/package.json index d84c0c9332104d..335e35a9236d5b 100644 --- a/packages/playground/resolve/inline-package/package.json +++ b/packages/playground/resolve/inline-package/package.json @@ -3,4 +3,4 @@ "private": true, "sideEffects": false, "main": "./inline" -} \ No newline at end of file +} diff --git a/packages/playground/ssr-vue/src/App.vue b/packages/playground/ssr-vue/src/App.vue index 06f31569726915..8edc0dbf369b32 100644 --- a/packages/playground/ssr-vue/src/App.vue +++ b/packages/playground/ssr-vue/src/App.vue @@ -19,4 +19,4 @@ color: #2c3e50; margin-top: 60px; } - \ No newline at end of file + diff --git a/packages/playground/ssr-vue/src/components/Foo.jsx b/packages/playground/ssr-vue/src/components/Foo.jsx index c1670c6a13758f..427815b2d252d2 100644 --- a/packages/playground/ssr-vue/src/components/Foo.jsx +++ b/packages/playground/ssr-vue/src/components/Foo.jsx @@ -7,4 +7,4 @@ export const Foo = defineComponent({ setup() { return () =>

from JSX
} -}) \ No newline at end of file +}) diff --git a/packages/playground/ssr-vue/src/components/foo.css b/packages/playground/ssr-vue/src/components/foo.css index bfaacd33a2f805..f8baa0d15b90d3 100644 --- a/packages/playground/ssr-vue/src/components/foo.css +++ b/packages/playground/ssr-vue/src/components/foo.css @@ -1,3 +1,3 @@ .jsx { color: blue; -} \ No newline at end of file +} diff --git a/packages/playground/ssr-vue/src/pages/About.vue b/packages/playground/ssr-vue/src/pages/About.vue index 6ce83448eea6ec..5fe0930c7abc4f 100644 --- a/packages/playground/ssr-vue/src/pages/About.vue +++ b/packages/playground/ssr-vue/src/pages/About.vue @@ -16,4 +16,4 @@ export default { h1 { color: red; } - \ No newline at end of file + diff --git a/packages/playground/ssr-vue/src/pages/Home.vue b/packages/playground/ssr-vue/src/pages/Home.vue index 35260df7dae30f..77634c1a68283a 100644 --- a/packages/playground/ssr-vue/src/pages/Home.vue +++ b/packages/playground/ssr-vue/src/pages/Home.vue @@ -11,7 +11,9 @@ @@ -21,4 +23,4 @@ h1, a { color: green; } - \ No newline at end of file + diff --git a/packages/playground/vue/Assets.vue b/packages/playground/vue/Assets.vue index 9663d239faf8c4..875ac1b243b393 100644 --- a/packages/playground/vue/Assets.vue +++ b/packages/playground/vue/Assets.vue @@ -20,7 +20,7 @@ SVG Fragment reference @@ -39,4 +39,4 @@ img { background-image: url('./assets/asset.png'); background-size: 30px; } - \ No newline at end of file + diff --git a/packages/playground/vue/CustomBlock.vue b/packages/playground/vue/CustomBlock.vue index 2fae9f05441b47..cc49cd07242fdd 100644 --- a/packages/playground/vue/CustomBlock.vue +++ b/packages/playground/vue/CustomBlock.vue @@ -25,7 +25,7 @@ export default { en: - hello: "hello,vite!" + hello: 'hello,vite!' ja: - hello: "こんにちは、vite!" + hello: 'こんにちは、vite!' diff --git a/packages/playground/vue/Hmr.vue b/packages/playground/vue/Hmr.vue index 0be84398fddde8..89dade2c4f5879 100644 --- a/packages/playground/vue/Hmr.vue +++ b/packages/playground/vue/Hmr.vue @@ -16,4 +16,4 @@ const count = ref(foo) .hmr-inc { color: red; } - \ No newline at end of file + diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue index 8ed3ba4de5f301..62cd2016730ee8 100644 --- a/packages/playground/vue/Main.vue +++ b/packages/playground/vue/Main.vue @@ -34,7 +34,7 @@ const time = ref('loading...') window.addEventListener('load', () => { setTimeout(() => { - const [entry] = performance.getEntriesByType("navigation") + const [entry] = performance.getEntriesByType('navigation') time.value = `loaded in ${entry.duration.toFixed(2)}ms.` }, 0) }) diff --git a/packages/playground/vue/Slotted.vue b/packages/playground/vue/Slotted.vue index 5d38a63762e05b..fb25a9c5100215 100644 --- a/packages/playground/vue/Slotted.vue +++ b/packages/playground/vue/Slotted.vue @@ -3,10 +3,10 @@

:slotted

-> + \ No newline at end of file + diff --git a/packages/plugin-react-refresh/README.md b/packages/plugin-react-refresh/README.md index cb73bfbf86d217..9f2abf5a5c54f6 100644 --- a/packages/plugin-react-refresh/README.md +++ b/packages/plugin-react-refresh/README.md @@ -45,14 +45,11 @@ To mitigate this issue, you can explicitly transform your `index.html` like this ```ts app.get('/', async (req, res, next) => { try { - let html = fs.readFileSync( - path.resolve(root, 'index.html'), - 'utf-8' - ); - html = await viteServer.transformIndexHtml(req.url, html); - res.send(html); + let html = fs.readFileSync(path.resolve(root, 'index.html'), 'utf-8') + html = await viteServer.transformIndexHtml(req.url, html) + res.send(html) } catch (e) { - return next(e); + return next(e) } -}); +}) ``` diff --git a/packages/plugin-vue-jsx/README.md b/packages/plugin-vue-jsx/README.md index 098c7559a811b7..d1825db5fc0c36 100644 --- a/packages/plugin-vue-jsx/README.md +++ b/packages/plugin-vue-jsx/README.md @@ -18,6 +18,7 @@ export default { ## Options See [@vue/babel-plugin-jsx](https://github.com/vuejs/jsx-next). + ## HMR Detection This plugin supports HMR of Vue JSX components. The detection requirements are: @@ -53,4 +54,4 @@ export const Bar = { ... } // not exported const Foo = defineComponent(...) -``` \ No newline at end of file +``` diff --git a/packages/vite/README.md b/packages/vite/README.md index b04e97cb308db4..89490d7b480a8e 100644 --- a/packages/vite/README.md +++ b/packages/vite/README.md @@ -17,4 +17,4 @@ Vite (French word for "fast", pronounced `/vit/`) is a new breed of frontend bui In addition, Vite is highly extensible via its [Plugin API](https://vitejs.dev/guide/api-plugin.html) and [JavaScript API](https://vitejs.dev/guide/api-javascript.html) with full typing support. -[Read the Docs to Learn More](https://vitejs.dev). \ No newline at end of file +[Read the Docs to Learn More](https://vitejs.dev). From 34bd6282c012298a8aa2c82e8300a50a2e3e7b1f Mon Sep 17 00:00:00 2001 From: Shinigami Date: Wed, 31 Mar 2021 23:20:10 +0200 Subject: [PATCH 06/46] chore: use eslint-define-config (#2688) --- .eslintrc.js | 7 +++++-- package.json | 1 + yarn.lock | 5 +++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4bc59a084a8021..f19c57faa15bbc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,7 @@ -module.exports = { +// @ts-check +const { defineConfig } = require('eslint-define-config') + +module.exports = defineConfig({ root: true, extends: ['plugin:node/recommended'], parser: '@typescript-eslint/parser', @@ -80,4 +83,4 @@ module.exports = { } } ] -} +}) diff --git a/package.json b/package.json index aabfb68ab88c71..9dd439477eb0a4 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "cross-env": "^7.0.3", "enquirer": "^2.3.6", "eslint": "^7.15.0", + "eslint-define-config": "^1.0.3", "eslint-plugin-node": "^11.1.0", "execa": "^5.0.0", "fs-extra": "^9.0.1", diff --git a/yarn.lock b/yarn.lock index a4827d67f217b6..d108d562cd09de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2882,6 +2882,11 @@ escodegen@^2.0.0: optionalDependencies: source-map "~0.6.1" +eslint-define-config@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/eslint-define-config/-/eslint-define-config-1.0.3.tgz#26efbf9124d3855c8ff49233e6d3e3e3be939f60" + integrity sha512-GlfTqk2lysLHRx4YH3xuliY06t/p4WMZc3GABLqZ84RcxJxwRVMp0qF9cQSL42gf0pO7IY+dyUsxMrv2b6rZTQ== + eslint-plugin-es@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz#75a7cdfdccddc0589934aeeb384175f221c57893" From fa8574921195dd03b539c150a2ae5f97121a0aea Mon Sep 17 00:00:00 2001 From: Vben Date: Thu, 1 Apr 2021 05:21:29 +0800 Subject: [PATCH 07/46] fix(define): ensure the normal use of NODE_ENV, fix #2759 (#2764) --- packages/vite/src/node/plugins/define.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts index 069e41417902aa..573c0d362c46c7 100644 --- a/packages/vite/src/node/plugins/define.ts +++ b/packages/vite/src/node/plugins/define.ts @@ -31,7 +31,7 @@ export function definePlugin(config: ResolvedConfig): Plugin { } const replacements: Record = { - 'process.env.NODE_ENV': JSON.stringify(config.mode), + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || config.mode), ...userDefine, ...importMetaKeys, 'process.env.': `({}).` From b4a1526696c05b4c56d27f4b27cebd1706a6c918 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 3 Apr 2021 23:38:45 +0800 Subject: [PATCH 08/46] docs: note that `define` should be used for CONSTANTS not variables (#2837) --- docs/config/index.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/config/index.md b/docs/config/index.md index 6f85e92e58e082..481c43c5844eec 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -118,12 +118,16 @@ export default async ({ command, mode }) => { - **Type:** `Record` - Define global variable replacements. Entries will be defined as globals during dev and statically replaced during build. + Define global constant replacements. Entries will be defined as globals during dev and statically replaced during build. - Starting from `2.0.0-beta.70`, string values will be used as raw expressions, so if defining a string constant, it needs to be explicitly quoted (e.g. with `JSON.stringify`). - Replacements are performed only when the match is surrounded by word boundaries (`\b`). + Because it's implemented as straightforward text replacements without any syntax analyzation, we recommend using `define` for CONSTANTS only. + + For example, `process.env.FOO` and `__APP_VERSION__` are good fits. But `process` or `global` should not be put into this option. Variables can be shimmed or polyfilled instead. + ### plugins - **Type:** ` (Plugin | Plugin[])[]` From 1451b78e7b1a34b89e2768315832087c686fb5aa Mon Sep 17 00:00:00 2001 From: Richard Petersen Date: Sun, 4 Apr 2021 07:33:47 +0200 Subject: [PATCH 09/46] fix: chunks are analysed multiple times (#2541) Co-authored-by: Richard Petersen --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 0baba266958434..70d364900d03e9 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -218,6 +218,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { if (imports.length) { const s = new MagicString(code) + const analyzed: Set = new Set() for (let index = 0; index < imports.length; index++) { const { s: start, e: end, d: dynamicIndex } = imports[index] // if dynamic import polyfill is used, rewrite the import to @@ -234,6 +235,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { // literal import - trace direct imports and add to deps const addDeps = (filename: string) => { if (filename === ownerFilename) return + if (analyzed.has(filename)) return + analyzed.add(filename) const chunk = bundle[filename] as OutputChunk | undefined if (chunk) { deps.add(config.base + chunk.fileName) From de4e08d10e92d3a2411b0393dba6771293fcebbc Mon Sep 17 00:00:00 2001 From: wang Date: Sun, 4 Apr 2021 15:58:54 +0900 Subject: [PATCH 10/46] build: add source map to vite (#2843) --- packages/vite/package.json | 2 +- packages/vite/rollup.config.js | 9 ++++++--- yarn.lock | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/vite/package.json b/packages/vite/package.json index 3ff6c45a6f3fe1..d005451f6bdd62 100644 --- a/packages/vite/package.json +++ b/packages/vite/package.json @@ -60,7 +60,7 @@ "@rollup/plugin-dynamic-import-vars": "^1.1.1", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^11.0.1", - "@rollup/plugin-typescript": "^8.0.0", + "@rollup/plugin-typescript": "^8.2.1", "@rollup/pluginutils": "^4.1.0", "@types/clean-css": "^4.2.3", "@types/convert-source-map": "^1.5.1", diff --git a/packages/vite/rollup.config.js b/packages/vite/rollup.config.js index 378242bfb6657e..6814db9f9e437b 100644 --- a/packages/vite/rollup.config.js +++ b/packages/vite/rollup.config.js @@ -26,7 +26,8 @@ const envConfig = { }) ], output: { - dir: path.resolve(__dirname, 'dist/client') + dir: path.resolve(__dirname, 'dist/client'), + sourcemap: true } } @@ -47,7 +48,8 @@ const clientConfig = { }) ], output: { - dir: path.resolve(__dirname, 'dist/client') + dir: path.resolve(__dirname, 'dist/client'), + sourcemap: true } } @@ -67,7 +69,8 @@ const sharedNodeOptions = { exports: 'named', format: 'cjs', externalLiveBindings: false, - freeze: false + freeze: false, + sourcemap: true }, onwarn(warning, warn) { // node-resolve complains a lot about this but seems to still work? diff --git a/yarn.lock b/yarn.lock index d108d562cd09de..27f6554dcaa436 100644 --- a/yarn.lock +++ b/yarn.lock @@ -831,7 +831,7 @@ is-module "^1.0.0" resolve "^1.19.0" -"@rollup/plugin-typescript@^8.0.0": +"@rollup/plugin-typescript@^8.2.1": version "8.2.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.2.1.tgz#f1a32d4030cc83432ce36a80a922280f0f0b5d44" integrity sha512-Qd2E1pleDR4bwyFxqbjt4eJf+wB0UKVMLc7/BAFDGVdAXQMCsD4DUv5/7/ww47BZCYxWtJqe1Lo0KVNswBJlRw== From 3816f6edb67e6bdf94db98e82e8acff4029bfe48 Mon Sep 17 00:00:00 2001 From: tianyu94 Date: Sun, 4 Apr 2021 16:15:46 +0800 Subject: [PATCH 11/46] fix(create-app): change index.html templates' favicon.svg href to absolute URL (#2620) --- packages/create-app/template-lit-element-ts/index.html | 2 +- packages/create-app/template-lit-element/index.html | 2 +- packages/create-app/template-preact-ts/index.html | 2 +- packages/create-app/template-preact/index.html | 2 +- packages/create-app/template-react-ts/index.html | 2 +- packages/create-app/template-react/index.html | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/create-app/template-lit-element-ts/index.html b/packages/create-app/template-lit-element-ts/index.html index 887b8ee9ad4c27..30bf7f9c81694e 100644 --- a/packages/create-app/template-lit-element-ts/index.html +++ b/packages/create-app/template-lit-element-ts/index.html @@ -2,7 +2,7 @@ - + Vite + Lit-Element App diff --git a/packages/create-app/template-lit-element/index.html b/packages/create-app/template-lit-element/index.html index 96eb1f95c57393..ad2c3e9ac596f8 100644 --- a/packages/create-app/template-lit-element/index.html +++ b/packages/create-app/template-lit-element/index.html @@ -2,7 +2,7 @@ - + Vite + Lit-Element App diff --git a/packages/create-app/template-preact-ts/index.html b/packages/create-app/template-preact-ts/index.html index a917605727d172..5dd45a1e2ab404 100644 --- a/packages/create-app/template-preact-ts/index.html +++ b/packages/create-app/template-preact-ts/index.html @@ -2,7 +2,7 @@ - + Vite App diff --git a/packages/create-app/template-preact/index.html b/packages/create-app/template-preact/index.html index 87d9f988dde878..c06e9fce67a28f 100644 --- a/packages/create-app/template-preact/index.html +++ b/packages/create-app/template-preact/index.html @@ -2,7 +2,7 @@ - + Vite App diff --git a/packages/create-app/template-react-ts/index.html b/packages/create-app/template-react-ts/index.html index b755334c0946a7..38f386110323c3 100644 --- a/packages/create-app/template-react-ts/index.html +++ b/packages/create-app/template-react-ts/index.html @@ -2,7 +2,7 @@ - + Vite App diff --git a/packages/create-app/template-react/index.html b/packages/create-app/template-react/index.html index 642973e54da6f9..b46ab83364e374 100644 --- a/packages/create-app/template-react/index.html +++ b/packages/create-app/template-react/index.html @@ -2,7 +2,7 @@ - + Vite App From 16412e3a9452cbb7d82f72dd3cebfbc822061f05 Mon Sep 17 00:00:00 2001 From: underfin Date: Sun, 4 Apr 2021 21:53:05 +0800 Subject: [PATCH 12/46] fix(plugin-react-refresh): ensure decorators before export, fix #2776 (#2855) --- packages/plugin-react-refresh/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/plugin-react-refresh/index.js b/packages/plugin-react-refresh/index.js index a68875e5df2b83..fc4f47da6a0d30 100644 --- a/packages/plugin-react-refresh/index.js +++ b/packages/plugin-react-refresh/index.js @@ -110,6 +110,9 @@ function reactRefreshPlugin(opts) { allowAwaitOutsideFunction: true, plugins: parserPlugins }, + generatorOpts: { + decoratorsBeforeExport: true + }, plugins: [ require('@babel/plugin-transform-react-jsx-self'), require('@babel/plugin-transform-react-jsx-source'), From 2e018ffbb9aef0bb4b6bc569e68d10016b0ba87b Mon Sep 17 00:00:00 2001 From: Brice BERNARD Date: Sun, 4 Apr 2021 18:08:41 +0200 Subject: [PATCH 13/46] chore: add missing comma for docs (#2856) --- docs/config/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/index.md b/docs/config/index.md index 481c43c5844eec..6f606857f5bce5 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -381,7 +381,7 @@ export default async ({ command, mode }) => { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') - } + }, // with RegEx '^/fallback/.*': { target: 'http://jsonplaceholder.typicode.com', From 2a89c57d3fb2dedbe595c4d49c454f3d138e6414 Mon Sep 17 00:00:00 2001 From: underfin Date: Mon, 5 Apr 2021 02:27:15 +0800 Subject: [PATCH 14/46] fix(build): support `cssCodeSplit` for cjs format, fix #2575 (#2621) Co-authored-by: Anthony Fu --- .../__tests__/css-codesplit.spec.ts | 20 +++++++++++++++++++ .../playground/css-codesplit-cjs/index.html | 2 ++ .../playground/css-codesplit-cjs/main.css | 3 +++ packages/playground/css-codesplit-cjs/main.js | 6 ++++++ .../playground/css-codesplit-cjs/other.js | 1 + .../playground/css-codesplit-cjs/package.json | 11 ++++++++++ .../playground/css-codesplit-cjs/style.css | 3 +++ .../css-codesplit-cjs/vite.config.js | 20 +++++++++++++++++++ packages/vite/src/node/plugins/css.ts | 6 ++++-- 9 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 packages/playground/css-codesplit-cjs/__tests__/css-codesplit.spec.ts create mode 100644 packages/playground/css-codesplit-cjs/index.html create mode 100644 packages/playground/css-codesplit-cjs/main.css create mode 100644 packages/playground/css-codesplit-cjs/main.js create mode 100644 packages/playground/css-codesplit-cjs/other.js create mode 100644 packages/playground/css-codesplit-cjs/package.json create mode 100644 packages/playground/css-codesplit-cjs/style.css create mode 100644 packages/playground/css-codesplit-cjs/vite.config.js diff --git a/packages/playground/css-codesplit-cjs/__tests__/css-codesplit.spec.ts b/packages/playground/css-codesplit-cjs/__tests__/css-codesplit.spec.ts new file mode 100644 index 00000000000000..95fe97a1b953ba --- /dev/null +++ b/packages/playground/css-codesplit-cjs/__tests__/css-codesplit.spec.ts @@ -0,0 +1,20 @@ +import { findAssetFile, getColor, isBuild, readManifest } from '../../testUtils' + +test('should load both stylesheets', async () => { + expect(await getColor('h1')).toBe('red') + expect(await getColor('h2')).toBe('blue') +}) + +if (isBuild) { + test('should remove empty chunk', async () => { + expect(findAssetFile(/style.*\.js$/)).toBe('') + expect(findAssetFile('main.*.js$')).toMatch(`/* empty css`) + expect(findAssetFile('other.*.js$')).toMatch(`/* empty css`) + }) + + test('should generate correct manifest', async () => { + const manifest = readManifest() + expect(manifest['index.html'].css.length).toBe(2) + expect(manifest['other.js'].css.length).toBe(1) + }) +} diff --git a/packages/playground/css-codesplit-cjs/index.html b/packages/playground/css-codesplit-cjs/index.html new file mode 100644 index 00000000000000..6b7b3bb2b4dc2d --- /dev/null +++ b/packages/playground/css-codesplit-cjs/index.html @@ -0,0 +1,2 @@ + +
diff --git a/packages/playground/css-codesplit-cjs/main.css b/packages/playground/css-codesplit-cjs/main.css new file mode 100644 index 00000000000000..24aec3a5671d8f --- /dev/null +++ b/packages/playground/css-codesplit-cjs/main.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} \ No newline at end of file diff --git a/packages/playground/css-codesplit-cjs/main.js b/packages/playground/css-codesplit-cjs/main.js new file mode 100644 index 00000000000000..8c80df2c181511 --- /dev/null +++ b/packages/playground/css-codesplit-cjs/main.js @@ -0,0 +1,6 @@ +import './style.css' +import './main.css' + +document.getElementById( + 'app' +).innerHTML = `

This should be red

This should be blue

` diff --git a/packages/playground/css-codesplit-cjs/other.js b/packages/playground/css-codesplit-cjs/other.js new file mode 100644 index 00000000000000..cab743adef7757 --- /dev/null +++ b/packages/playground/css-codesplit-cjs/other.js @@ -0,0 +1 @@ +import './style.css' diff --git a/packages/playground/css-codesplit-cjs/package.json b/packages/playground/css-codesplit-cjs/package.json new file mode 100644 index 00000000000000..f0ffc32390e161 --- /dev/null +++ b/packages/playground/css-codesplit-cjs/package.json @@ -0,0 +1,11 @@ +{ + "name": "test-css-codesplit-cjs", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "debug": "node --inspect-brk ../../vite/bin/vite", + "serve": "vite preview" + } +} diff --git a/packages/playground/css-codesplit-cjs/style.css b/packages/playground/css-codesplit-cjs/style.css new file mode 100644 index 00000000000000..2b4bb3671e654b --- /dev/null +++ b/packages/playground/css-codesplit-cjs/style.css @@ -0,0 +1,3 @@ +h2 { + color: blue; +} diff --git a/packages/playground/css-codesplit-cjs/vite.config.js b/packages/playground/css-codesplit-cjs/vite.config.js new file mode 100644 index 00000000000000..7cd8967121f021 --- /dev/null +++ b/packages/playground/css-codesplit-cjs/vite.config.js @@ -0,0 +1,20 @@ +const { resolve } = require('path') + +module.exports = { + build: { + outDir: './dist', + manifest: true, + rollupOptions: { + input: { + main: resolve(__dirname, './index.html'), + other: resolve(__dirname, './other.js') + }, + treeshake: false, + output: { + format: 'cjs', + freeze: false, + externalLiveBindings: false + } + } + } +} diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index e3a5c2a2f093fe..89b751d7061882 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -338,7 +338,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // this is a shared CSS-only chunk that is empty. pureCssChunks.add(chunk.fileName) } - if (opts.format === 'es') { + if (opts.format === 'es' || opts.format === 'cjs') { chunkCSS = await processChunkCSS(chunkCSS, { inlined: false, minify: true @@ -397,7 +397,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { .join('|') .replace(/\./g, '\\.') const emptyChunkRE = new RegExp( - `\\bimport\\s*"[^"]*(?:${emptyChunkFiles})";\n?`, + opts.format === 'es' + ? `\\bimport\\s*"[^"]*(?:${emptyChunkFiles})";\n?` + : `\\brequire\\(\\s*"[^"]*(?:${emptyChunkFiles})"\\);\n?`, 'g' ) for (const file in bundle) { From 0dc6e37298e2e3efda74a1042f37bd70e3f5d3a5 Mon Sep 17 00:00:00 2001 From: Sacha STAFYNIAK Date: Mon, 5 Apr 2021 18:43:47 +0200 Subject: [PATCH 15/46] feat(cli): build watch mode, fix #1434 (#1449) --- docs/config/index.md | 7 ++ docs/guide/build.md | 15 ++++ packages/vite/src/node/build.ts | 154 ++++++++++++++++++++++++-------- packages/vite/src/node/cli.ts | 1 + 4 files changed, 139 insertions(+), 38 deletions(-) diff --git a/docs/config/index.md b/docs/config/index.md index 6f606857f5bce5..0060f330aa99e2 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -561,6 +561,13 @@ export default async ({ command, mode }) => { - **Default:** `500` Limit for chunk size warnings (in kbs). + +### build.watch + +- **Type:** [`WatcherOptions`](https://rollupjs.org/guide/en/#watch-options)`| null` +- **Default:** `null` + + Set to `{}` to enable rollup watcher. This is mostly used in cases that involve build-only plugins or integrations processes. ## Dep Optimization Options diff --git a/docs/guide/build.md b/docs/guide/build.md index 0f8ea3f681f25e..dd0c940e2fbf50 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -46,6 +46,21 @@ module.exports = { For example, you can specify multiple Rollup outputs with plugins that are only applied during build. +## Rebuild on files changes + +You can enable rollup watcher with `vite build --watch`. Or, you can directly adjust the underlying [`WatcherOptions`](https://rollupjs.org/guide/en/#watch-options) via `build.watch`: + +```js +// vite.config.js +module.exports = { + build: { + watch: { + // https://rollupjs.org/guide/en/#watch-options + } + } +} +``` + ## Multi-Page App Suppose you have the following source code structure: diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index 958f32dd83066a..73d520675206ee 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -12,7 +12,10 @@ import Rollup, { RollupOutput, ExternalOption, GetManualChunk, - GetModuleInfo + GetModuleInfo, + WatcherOptions, + RollupWatcher, + RollupError } from 'rollup' import { buildReporterPlugin } from './plugins/reporter' import { buildHtmlPlugin } from './plugins/html' @@ -176,6 +179,11 @@ export interface BuildOptions { * @default 500 */ chunkSizeWarningLimit?: number + /** + * Rollup watch options + * https://rollupjs.org/guide/en/#watchoptions + */ + watch?: WatcherOptions | null } export interface LibraryOptions { @@ -214,6 +222,7 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions { ssrManifest: false, brotliSize: true, chunkSizeWarningLimit: 500, + watch: null, ...raw } @@ -279,7 +288,7 @@ const parallelBuilds: RollupBuild[] = [] */ export async function build( inlineConfig: InlineConfig = {} -): Promise { +): Promise { parallelCallCounts++ try { return await doBuild(inlineConfig) @@ -294,7 +303,7 @@ export async function build( async function doBuild( inlineConfig: InlineConfig = {} -): Promise { +): Promise { const config = await resolveConfig(inlineConfig, 'build', 'production') const options = config.build const ssr = !!options.ssr @@ -355,29 +364,39 @@ async function doBuild( } const rollup = require('rollup') as typeof Rollup + const rollupOptions: RollupOptions = { + input, + preserveEntrySignatures: ssr + ? 'allow-extension' + : libOptions + ? 'strict' + : false, + ...options.rollupOptions, + plugins, + external, + onwarn(warning, warn) { + onRollupWarning(warning, warn, config) + } + } - try { - const bundle = await rollup.rollup({ - input, - preserveEntrySignatures: ssr - ? 'allow-extension' - : libOptions - ? 'strict' - : false, - ...options.rollupOptions, - plugins, - external, - onwarn(warning, warn) { - onRollupWarning(warning, warn, config) - } - }) - - parallelBuilds.push(bundle) + const outputBuildError = (e: RollupError) => { + config.logger.error( + chalk.red(`${e.plugin ? `[${e.plugin}] ` : ''}${e.message}`) + ) + if (e.id) { + const loc = e.loc ? `:${e.loc.line}:${e.loc.column}` : '' + config.logger.error(`file: ${chalk.cyan(`${e.id}${loc}`)}`) + } + if (e.frame) { + config.logger.error(chalk.yellow(e.frame)) + } + } + try { const pkgName = libOptions && getPkgName(config.root) - const generate = (output: OutputOptions = {}) => { - return bundle[options.write ? 'write' : 'generate']({ + const buildOuputOptions = (output: OutputOptions = {}): OutputOptions => { + return { dir: outDir, format: ssr ? 'cjs' : 'es', exports: ssr ? 'named' : 'auto', @@ -406,7 +425,81 @@ async function doBuild( ? createMoveToVendorChunkFn(config) : undefined, ...output + } + } + + // resolve lib mode outputs + const outputs = resolveBuildOutputs( + options.rollupOptions?.output, + libOptions, + config.logger + ) + + // watch file changes with rollup + if (config.build.watch) { + config.logger.info(chalk.cyanBright(`\nwatching for file changes...`)) + + const output: OutputOptions[] = [] + if (Array.isArray(outputs)) { + for (const resolvedOutput of outputs) { + output.push(buildOuputOptions(resolvedOutput)) + } + } else { + output.push(buildOuputOptions(outputs)) + } + + const watcherOptions = config.build.watch + const watcher = rollup.watch({ + ...rollupOptions, + output, + watch: { + ...watcherOptions, + chokidar: { + ignored: [ + '**/node_modules/**', + '**/.git/**', + ...(watcherOptions?.chokidar?.ignored || []) + ], + ignoreInitial: true, + ignorePermissionErrors: true, + ...watcherOptions.chokidar + } + } + }) + + watcher.on('event', (event) => { + if (event.code === 'BUNDLE_START') { + config.logger.info(chalk.cyanBright(`\nbuild started...`)) + + // clean previous files + if (options.write) { + emptyDir(outDir) + if (fs.existsSync(config.publicDir)) { + copyDir(config.publicDir, outDir) + } + } + } else if (event.code === 'BUNDLE_END') { + event.result.close() + config.logger.info(chalk.cyanBright(`built in ${event.duration}ms.`)) + } else if (event.code === 'ERROR') { + outputBuildError(event.error) + } }) + + // stop watching + watcher.close() + + return watcher + } + + // write or generate files with rollup + const bundle = await rollup.rollup(rollupOptions) + parallelBuilds.push(bundle) + + const generate = (output: OutputOptions = {}) => { + return bundle[options.write ? 'write' : 'generate']( + buildOuputOptions(output) + ) } if (options.write) { @@ -434,12 +527,6 @@ async function doBuild( } } - // resolve lib mode outputs - const outputs = resolveBuildOutputs( - options.rollupOptions?.output, - libOptions, - config.logger - ) if (Array.isArray(outputs)) { const res = [] for (const output of outputs) { @@ -450,16 +537,7 @@ async function doBuild( return await generate(outputs) } } catch (e) { - config.logger.error( - chalk.red(`${e.plugin ? `[${e.plugin}] ` : ``}${e.message}`) - ) - if (e.id) { - const loc = e.loc ? `:${e.loc.line}:${e.loc.column}` : `` - config.logger.error(`file: ${chalk.cyan(`${e.id}${loc}`)}`) - } - if (e.frame) { - config.logger.error(chalk.yellow(e.frame)) - } + outputBuildError(e) throw e } } diff --git a/packages/vite/src/node/cli.ts b/packages/vite/src/node/cli.ts index 26384fd6b2511e..41ed363388d7a7 100644 --- a/packages/vite/src/node/cli.ts +++ b/packages/vite/src/node/cli.ts @@ -130,6 +130,7 @@ cli `[boolean] force empty outDir when it's outside of root` ) .option('-m, --mode ', `[string] set env mode`) + .option('-w, --watch', `[boolean] rebuilds when modules have changed on disk`) .action(async (root: string, options: BuildOptions & GlobalCLIOptions) => { const { build } = await import('./build') const buildOptions = cleanOptions(options) as BuildOptions From ffcb7ce0ac4fe61fbd02da05090d48835a0dd1e4 Mon Sep 17 00:00:00 2001 From: Christoph Werner Date: Thu, 8 Apr 2021 19:29:19 +0200 Subject: [PATCH 16/46] feat: export manifest types (#2901) --- packages/vite/src/node/index.ts | 1 + packages/vite/src/node/plugins/manifest.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts index e75611ad66f475..e020f10ad7f0a2 100644 --- a/packages/vite/src/node/index.ts +++ b/packages/vite/src/node/index.ts @@ -43,6 +43,7 @@ export type { export type { CSSOptions, CSSModulesOptions } from './plugins/css' export type { JsonOptions } from './plugins/json' export type { ESBuildOptions, ESBuildTransformResult } from './plugins/esbuild' +export type { Manifest, ManifestChunk } from './plugins/manifest' export type { PackageData, ResolveOptions, diff --git a/packages/vite/src/node/plugins/manifest.ts b/packages/vite/src/node/plugins/manifest.ts index b17020c013265f..bc1c3434eb464b 100644 --- a/packages/vite/src/node/plugins/manifest.ts +++ b/packages/vite/src/node/plugins/manifest.ts @@ -6,9 +6,9 @@ import { chunkToEmittedCssFileMap } from './css' import { chunkToEmittedAssetsMap } from './asset' import { normalizePath } from '../utils' -type Manifest = Record +export type Manifest = Record -interface ManifestChunk { +export interface ManifestChunk { src?: string file: string css?: string[] From 5dfd0e85978f77c8d12f7b83f25a383ae9c2f7e9 Mon Sep 17 00:00:00 2001 From: liuwei Date: Sat, 10 Apr 2021 04:15:14 +0800 Subject: [PATCH 17/46] feat(plugin): plugin config hook supports return promise (#2800) --- packages/vite/src/node/config.ts | 6 +++--- packages/vite/src/node/plugin.ts | 5 ++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index dc9ce6c0952064..be6a99b049e73e 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -242,14 +242,14 @@ export async function resolveConfig( // run config hooks const userPlugins = [...prePlugins, ...normalPlugins, ...postPlugins] - userPlugins.forEach((p) => { + for (const p of userPlugins) { if (p.config) { - const res = p.config(config, configEnv) + const res = await p.config(config, configEnv) if (res) { config = mergeConfig(config, res) } } - }) + } // resolve root const resolvedRoot = normalizePath( diff --git a/packages/vite/src/node/plugin.ts b/packages/vite/src/node/plugin.ts index 7bef2402de4729..4f13439604f86e 100644 --- a/packages/vite/src/node/plugin.ts +++ b/packages/vite/src/node/plugin.ts @@ -61,7 +61,10 @@ export interface Plugin extends RollupPlugin { * Note: User plugins are resolved before running this hook so injecting other * plugins inside the `config` hook will have no effect. */ - config?: (config: UserConfig, env: ConfigEnv) => UserConfig | null | void + config?: ( + config: UserConfig, + env: ConfigEnv + ) => UserConfig | null | void | Promise /** * Use this hook to read and store the final resolved vite config. */ From daf783866b744c09e2b10234ced853c6f9a84dff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Han=EF=BC=88=E3=83=8F=E3=83=B3=EF=BC=89?= Date: Sat, 10 Apr 2021 05:35:49 +0900 Subject: [PATCH 18/46] fix(scan): avoid crawling type only import (#2810) Co-authored-by: Anthony Fu --- .../playground/ssr-vue/dep-import-type/deep/index.d.ts | 1 + packages/playground/ssr-vue/dep-import-type/package.json | 5 +++++ packages/playground/ssr-vue/package.json | 1 + .../playground/ssr-vue/src/components/ImportType.vue | 9 +++++++++ packages/playground/ssr-vue/src/pages/Home.vue | 3 +++ packages/vite/src/node/optimizer/scan.ts | 2 +- yarn.lock | 4 ++++ 7 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 packages/playground/ssr-vue/dep-import-type/deep/index.d.ts create mode 100644 packages/playground/ssr-vue/dep-import-type/package.json create mode 100644 packages/playground/ssr-vue/src/components/ImportType.vue diff --git a/packages/playground/ssr-vue/dep-import-type/deep/index.d.ts b/packages/playground/ssr-vue/dep-import-type/deep/index.d.ts new file mode 100644 index 00000000000000..39df3b83f7e9b8 --- /dev/null +++ b/packages/playground/ssr-vue/dep-import-type/deep/index.d.ts @@ -0,0 +1 @@ +export interface Foo {} diff --git a/packages/playground/ssr-vue/dep-import-type/package.json b/packages/playground/ssr-vue/dep-import-type/package.json new file mode 100644 index 00000000000000..b58c873340ebe2 --- /dev/null +++ b/packages/playground/ssr-vue/dep-import-type/package.json @@ -0,0 +1,5 @@ +{ + "name": "dep-import-type", + "version": "0.0.0", + "main": "index.js" +} diff --git a/packages/playground/ssr-vue/package.json b/packages/playground/ssr-vue/package.json index 6bf759471d3a93..77f02fedc6260e 100644 --- a/packages/playground/ssr-vue/package.json +++ b/packages/playground/ssr-vue/package.json @@ -20,6 +20,7 @@ "@vitejs/plugin-vue-jsx": "^1.1.2", "@vue/compiler-sfc": "^3.0.8", "@vue/server-renderer": "^3.0.6", + "dep-import-type": "link:./dep-import-type", "compression": "^1.7.4", "cross-env": "^7.0.3", "express": "^4.17.1", diff --git a/packages/playground/ssr-vue/src/components/ImportType.vue b/packages/playground/ssr-vue/src/components/ImportType.vue new file mode 100644 index 00000000000000..7fa77170ff7d61 --- /dev/null +++ b/packages/playground/ssr-vue/src/components/ImportType.vue @@ -0,0 +1,9 @@ + + + diff --git a/packages/playground/ssr-vue/src/pages/Home.vue b/packages/playground/ssr-vue/src/pages/Home.vue index 77634c1a68283a..f96fb6b4d5a66a 100644 --- a/packages/playground/ssr-vue/src/pages/Home.vue +++ b/packages/playground/ssr-vue/src/pages/Home.vue @@ -6,11 +6,14 @@

msg from virtual module: {{ foo.msg }}

+ + + + diff --git a/packages/create-app/template-vanilla-ts/package.json b/packages/create-app/template-vanilla-ts/package.json new file mode 100644 index 00000000000000..67c488c418847e --- /dev/null +++ b/packages/create-app/template-vanilla-ts/package.json @@ -0,0 +1,13 @@ +{ + "name": "vite-typescript-starter", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "serve": "vite preview" + }, + "devDependencies": { + "typescript": "^4.2.3", + "vite": "^2.1.5" + } +} diff --git a/packages/create-app/template-vanilla-ts/src/main.ts b/packages/create-app/template-vanilla-ts/src/main.ts new file mode 100644 index 00000000000000..f77db7a8fcab13 --- /dev/null +++ b/packages/create-app/template-vanilla-ts/src/main.ts @@ -0,0 +1,8 @@ +import './style.css' + +const app = document.querySelector('#app')! + +app.innerHTML = ` +

Hello Vite!

+ Documentation +` diff --git a/packages/create-app/template-vanilla-ts/src/style.css b/packages/create-app/template-vanilla-ts/src/style.css new file mode 100644 index 00000000000000..852de7aa2ae573 --- /dev/null +++ b/packages/create-app/template-vanilla-ts/src/style.css @@ -0,0 +1,8 @@ +#app { + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: #2c3e50; + margin-top: 60px; +} diff --git a/packages/create-app/template-vanilla-ts/tsconfig.json b/packages/create-app/template-vanilla-ts/tsconfig.json new file mode 100644 index 00000000000000..43d4bc703dd9ff --- /dev/null +++ b/packages/create-app/template-vanilla-ts/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "lib": ["ESNext", "DOM"], + "moduleResolution": "Node", + "strict": true, + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "types": ["vite/client"], + "noEmit": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true + }, + "include": ["./src"] +} From 8fe828e9be9e9de67463af6f5dc35ebdbfdbda28 Mon Sep 17 00:00:00 2001 From: ygj6 Date: Sat, 10 Apr 2021 19:43:31 +0800 Subject: [PATCH 23/46] fix(plugin-vue): add newline character before class components, fix #2787 (#2933) --- packages/plugin-vue/src/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts index 1d2f896e79cb2a..655d0db83e871b 100644 --- a/packages/plugin-vue/src/main.ts +++ b/packages/plugin-vue/src/main.ts @@ -249,7 +249,7 @@ async function genScriptCode( const classMatch = script.content.match(exportDefaultClassRE) if (classMatch) { scriptCode = - script.content.replace(exportDefaultClassRE, `class $1`) + + script.content.replace(exportDefaultClassRE, `\nclass $1`) + `\nconst _sfc_main = ${classMatch[1]}` if (/export\s+default/.test(scriptCode)) { // fallback if there are still export default From e70c80ef53c06ca377241f5fe87e1407700d0b3b Mon Sep 17 00:00:00 2001 From: Shinigami Date: Sat, 10 Apr 2021 14:34:35 +0200 Subject: [PATCH 24/46] ci: use github actions (#2622) * ci: use github actions * fix(ci): build before lint * chore(ci): improve ci matrix * chore(ci): remove non-linux from default os * chore(ci): explicitly set architecture * chore(ci): use node 14 for windows-2016_x86 * chore(ci): provide job names * chore(ci): fix needs array * chore(ci): improve job naming * chore(ci): try set env NODE_OPTIONS * chore(ci): try shorter job name * chore(ci): windows-2016 x86 has out of memory problems * chore(ci): omit architecture and improve job naming Co-authored-by: Amin Yahyaabadi --- .github/workflows/ci.yml | 71 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 .github/workflows/ci.yml diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 00000000000000..03a9620712ce87 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,71 @@ +name: CI + +on: + push: + branches: + - main + pull_request: + +jobs: + build: + runs-on: ${{ matrix.os }} + strategy: + matrix: + os: [ubuntu-latest] + node_version: [12, 14, 15] + include: + - os: macos-latest + node_version: 14 + - os: windows-latest + node_version: 14 + fail-fast: false + + name: 'Build&Test: node-${{ matrix.node_version }}, ${{ matrix.os }}' + steps: + - name: Checkout + uses: actions/checkout@v2 + + - name: Set node version to ${{ matrix.node_version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node_version }} + + - name: Versions + run: yarn versions + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build vite + run: yarn build-vite + + - name: Build plugin-vue + run: yarn build-plugin-vue + + - name: Test serve + run: yarn test-serve --runInBand + + - name: Test build + run: yarn test-build --runInBand + + lint: + runs-on: ubuntu-latest + name: 'Lint: node-14, ubuntu-latest' + steps: + - uses: actions/checkout@v2 + with: + fetch-depth: 0 + + - name: Set node version to 14 + uses: actions/setup-node@v2 + with: + node-version: 14 + + - name: Prepare + run: | + yarn install --frozen-lockfile + yarn build-vite + yarn build-plugin-vue + + - name: Lint + run: yarn lint From b8325a0df144e2259514ed76d68cb94c8f23b4c1 Mon Sep 17 00:00:00 2001 From: Jeff Yang Date: Sun, 11 Apr 2021 01:20:37 +0630 Subject: [PATCH 25/46] ci: add caching step in GitHub Actions (#2936) --- .github/workflows/ci.yml | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 03a9620712ce87..d4d50aa18c34c9 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -30,6 +30,19 @@ jobs: with: node-version: ${{ matrix.node_version }} + - name: Get yarn cache directory + id: yarn-cache + run: echo "::set-output name=dir::$(yarn cache dir)" + + - name: Set dependencies cache + uses: actions/cache@v2 + with: + path: ${{ steps.yarn-cache.outputs.dir }} + key: ${{ runner.os }}-${{ matrix.node_version }}-${{ hashFiles('yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ matrix.node_version }}-${{ hashFiles('yarn.lock') }} + ${{ runner.os }}-${{ matrix.node_version }}- + - name: Versions run: yarn versions @@ -61,6 +74,15 @@ jobs: with: node-version: 14 + - name: Set dependencies cache + uses: actions/cache@v2 + with: + path: ~/.cache/yarn + key: lint-dependencies-${{ hashFiles('yarn.lock') }} + restore-keys: | + lint-dependencies-${{ hashFiles('yarn.lock') }} + lint-dependencies- + - name: Prepare run: | yarn install --frozen-lockfile From 1e3cd996f9e377fed516117136f2afe219266680 Mon Sep 17 00:00:00 2001 From: Michael P Smith Date: Sun, 11 Apr 2021 05:11:21 -0400 Subject: [PATCH 26/46] docs: Multi-Page App note when using 'root' (#2939) --- docs/guide/build.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/guide/build.md b/docs/guide/build.md index dd0c940e2fbf50..5c6f45c46eb1b1 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -95,6 +95,8 @@ module.exports = { } ``` +If you specify a different root, remember that `__dirname` will still be the folder of your vite.config.js file when resolving the input paths. Therfore, you will need to add your `root` entry to the arguments for `resolve`. + ## Library Mode When you are developing a browser-oriented library, you are likely spending most of the time on a test/demo page that imports your actual library. With Vite, you can use your `index.html` for that purpose to get the smooth development experience. From 71215533ac60e8ff566dc3467feabfc2c71a01e2 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Sun, 11 Apr 2021 12:01:28 +0200 Subject: [PATCH 27/46] feat: support globbing from dependencies (#2519) fix #2390 --- docs/guide/features.md | 2 +- packages/vite/src/node/plugins/importAnalysisBuild.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/guide/features.md b/docs/guide/features.md index 70489d0e0115de..b9b343bad1ad1b 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -251,7 +251,7 @@ const modules = { Note that: - This is a Vite-only feature and is not a web or ES standard. -- The glob patterns are treated like import specifiers: they must be either relative (start with `./`) or absolute (start with `/`, resolved relative to project root). Globbing from dependencies is not supported. +- The glob patterns are treated like import specifiers: they must be either relative (start with `./`) or absolute (start with `/`, resolved relative to project root). - The glob matching is done via `fast-glob` - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax). ## Web Assembly diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 70d364900d03e9..0826031779549f 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -96,7 +96,10 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { }, async transform(source, importer) { - if (importer.includes('node_modules')) { + if ( + importer.includes('node_modules') && + !source.includes('import.meta.glob') + ) { return } From 92b31935666c756c1e15170fbafb817faf995c97 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Sun, 11 Apr 2021 16:46:21 +0200 Subject: [PATCH 28/46] test: fix flakiness of client-side routing test (fix #2646) (#2948) --- .../ssr-react/__tests__/ssr-react.spec.ts | 13 ++++++-- .../ssr-vue/__tests__/ssr-vue.spec.ts | 13 ++++++-- packages/playground/testUtils.ts | 31 +++++++++++++++++++ 3 files changed, 51 insertions(+), 6 deletions(-) diff --git a/packages/playground/ssr-react/__tests__/ssr-react.spec.ts b/packages/playground/ssr-react/__tests__/ssr-react.spec.ts index 12660c81e4be14..64457de30b17a3 100644 --- a/packages/playground/ssr-react/__tests__/ssr-react.spec.ts +++ b/packages/playground/ssr-react/__tests__/ssr-react.spec.ts @@ -1,4 +1,10 @@ -import { editFile, getColor, isBuild, untilUpdated } from '../../testUtils' +import { + editFile, + getColor, + isBuild, + untilUpdated, + autoRetry +} from '../../testUtils' import { port } from './serve' import fetch from 'node-fetch' @@ -39,8 +45,9 @@ test('hmr', async () => { test('client navigation', async () => { await page.click('a[href="/about"]') - await page.waitForTimeout(10) - expect(await page.textContent('h1')).toMatch('About') + await autoRetry(async () => { + expect(await page.textContent('h1')).toMatch('About') + }) editFile('src/pages/About.jsx', (code) => code.replace('

About', '

changed') ) diff --git a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts index 63a6034cc7b36d..343c1140f81106 100644 --- a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts +++ b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts @@ -1,4 +1,10 @@ -import { editFile, getColor, isBuild, untilUpdated } from '../../testUtils' +import { + editFile, + getColor, + isBuild, + untilUpdated, + autoRetry +} from '../../testUtils' import { port } from './serve' import fetch from 'node-fetch' @@ -110,8 +116,9 @@ test('hmr', async () => { test('client navigation', async () => { await page.click('a[href="/about"]') - await page.waitForTimeout(10) - expect(await page.textContent('h1')).toMatch('About') + await autoRetry(async () => { + expect(await page.textContent('h1')).toMatch('About') + }) editFile('src/pages/About.vue', (code) => code.replace('About', 'changed')) await untilUpdated(() => page.textContent('h1'), 'changed') }) diff --git a/packages/playground/testUtils.ts b/packages/playground/testUtils.ts index 3da60754c891d0..10e2d9d618532c 100644 --- a/packages/playground/testUtils.ts +++ b/packages/playground/testUtils.ts @@ -119,3 +119,34 @@ export async function untilUpdated( } } } + +export async function autoRetry( + test: () => void | Promise +): Promise { + const timeout = 60 * 1000 + const period = 100 + const numberOfTries = timeout / period + let i = 0 + while (true) { + try { + await test() + return + } catch (err) { + i = i + 1 + if (i > numberOfTries) { + throw err + } + } + await sleep(period) + } + + return + + function sleep(milliseconds: number): Promise { + return new Promise((resolve) => + setTimeout(() => { + resolve() + }, milliseconds) + ) + } +} From 44bfb960ea4c512753165580a91022a9d85cdd73 Mon Sep 17 00:00:00 2001 From: Jeff Yang Date: Sun, 11 Apr 2021 23:13:20 +0630 Subject: [PATCH 29/46] chore: fix Vite Land link in CoC [skip ci] (#2952) --- CODE_OF_CONDUCT.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index e88816ee2d4e60..8c0ecf5ab85f8c 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [Vite Land](chat.vitejs.dev). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [Vite Land](https://chat.vitejs.dev). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. From cf27a08830dba9e2dc58912a6bf9d6b507bdb2a6 Mon Sep 17 00:00:00 2001 From: leemove Date: Mon, 12 Apr 2021 18:17:36 +0800 Subject: [PATCH 30/46] chore: upgrade vue-tsc to 0.0.23 (#2960) --- packages/create-app/template-vue-ts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-app/template-vue-ts/package.json b/packages/create-app/template-vue-ts/package.json index 4129cac07c9ebb..65f8c8caf189aa 100644 --- a/packages/create-app/template-vue-ts/package.json +++ b/packages/create-app/template-vue-ts/package.json @@ -14,6 +14,6 @@ "@vue/compiler-sfc": "^3.0.5", "typescript": "^4.1.3", "vite": "^2.1.5", - "vue-tsc": "^0.0.15" + "vue-tsc": "^0.0.23" } } \ No newline at end of file From 0825f7ee3574ae3f28f566da27835fbf3b210fac Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Mon, 12 Apr 2021 19:21:18 +0800 Subject: [PATCH 31/46] fix(create-app): the node in the svelte template is incorrectly mounted (#2947) --- packages/create-app/template-svelte-ts/src/main.ts | 2 +- packages/create-app/template-svelte/src/main.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-app/template-svelte-ts/src/main.ts b/packages/create-app/template-svelte-ts/src/main.ts index 0dfb1eefa5c33b..d8200ac4fe3078 100644 --- a/packages/create-app/template-svelte-ts/src/main.ts +++ b/packages/create-app/template-svelte-ts/src/main.ts @@ -1,7 +1,7 @@ import App from './App.svelte' const app = new App({ - target: document.body + target: document.getElementById('app') }) export default app diff --git a/packages/create-app/template-svelte/src/main.js b/packages/create-app/template-svelte/src/main.js index 0dfb1eefa5c33b..d8200ac4fe3078 100644 --- a/packages/create-app/template-svelte/src/main.js +++ b/packages/create-app/template-svelte/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte' const app = new App({ - target: document.body + target: document.getElementById('app') }) export default app From 705a2b394e574ac5fd8f583847f0474acf5e3769 Mon Sep 17 00:00:00 2001 From: Dominik G Date: Mon, 12 Apr 2021 19:19:23 +0200 Subject: [PATCH 32/46] fix(test): improve stability of ssr testsuites by using chokidar polling mode and additional waits (#2954) --- .../ssr-react/__tests__/ssr-react.spec.ts | 13 ++------ packages/playground/ssr-react/server.js | 8 ++++- .../ssr-vue/__tests__/ssr-vue.spec.ts | 13 ++------ packages/playground/ssr-vue/server.js | 8 ++++- packages/playground/testUtils.ts | 31 ------------------- 5 files changed, 20 insertions(+), 53 deletions(-) diff --git a/packages/playground/ssr-react/__tests__/ssr-react.spec.ts b/packages/playground/ssr-react/__tests__/ssr-react.spec.ts index 64457de30b17a3..bf161e03e5143c 100644 --- a/packages/playground/ssr-react/__tests__/ssr-react.spec.ts +++ b/packages/playground/ssr-react/__tests__/ssr-react.spec.ts @@ -1,10 +1,4 @@ -import { - editFile, - getColor, - isBuild, - untilUpdated, - autoRetry -} from '../../testUtils' +import { editFile, getColor, isBuild, untilUpdated } from '../../testUtils' import { port } from './serve' import fetch from 'node-fetch' @@ -44,10 +38,9 @@ test('hmr', async () => { }) test('client navigation', async () => { + await untilUpdated(() => page.textContent('a[href="/about"]'), 'About') await page.click('a[href="/about"]') - await autoRetry(async () => { - expect(await page.textContent('h1')).toMatch('About') - }) + await untilUpdated(() => page.textContent('h1'), 'About') editFile('src/pages/About.jsx', (code) => code.replace('

About', '

changed') ) diff --git a/packages/playground/ssr-react/server.js b/packages/playground/ssr-react/server.js index 4a6a653a3a781b..7c0c1a81152445 100644 --- a/packages/playground/ssr-react/server.js +++ b/packages/playground/ssr-react/server.js @@ -26,7 +26,13 @@ async function createServer( root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: true + middlewareMode: true, + watch: { + // During tests we edit the files too fast and sometimes chokidar + // misses change events, so enforce polling for consistency + usePolling: true, + interval: 100 + } } }) // use vite's connect instance as middleware diff --git a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts index 343c1140f81106..a86916b1ad7594 100644 --- a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts +++ b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts @@ -1,10 +1,4 @@ -import { - editFile, - getColor, - isBuild, - untilUpdated, - autoRetry -} from '../../testUtils' +import { editFile, getColor, isBuild, untilUpdated } from '../../testUtils' import { port } from './serve' import fetch from 'node-fetch' @@ -115,10 +109,9 @@ test('hmr', async () => { }) test('client navigation', async () => { + await untilUpdated(() => page.textContent('a[href="/about"]'), 'About') await page.click('a[href="/about"]') - await autoRetry(async () => { - expect(await page.textContent('h1')).toMatch('About') - }) + await untilUpdated(() => page.textContent('h1'), 'About') editFile('src/pages/About.vue', (code) => code.replace('About', 'changed')) await untilUpdated(() => page.textContent('h1'), 'changed') }) diff --git a/packages/playground/ssr-vue/server.js b/packages/playground/ssr-vue/server.js index 969ab6dacee01a..4ccbc21a4816ab 100644 --- a/packages/playground/ssr-vue/server.js +++ b/packages/playground/ssr-vue/server.js @@ -31,7 +31,13 @@ async function createServer( root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: true + middlewareMode: true, + watch: { + // During tests we edit the files too fast and sometimes chokidar + // misses change events, so enforce polling for consistency + usePolling: true, + interval: 100 + } } }) // use vite's connect instance as middleware diff --git a/packages/playground/testUtils.ts b/packages/playground/testUtils.ts index 10e2d9d618532c..3da60754c891d0 100644 --- a/packages/playground/testUtils.ts +++ b/packages/playground/testUtils.ts @@ -119,34 +119,3 @@ export async function untilUpdated( } } } - -export async function autoRetry( - test: () => void | Promise -): Promise { - const timeout = 60 * 1000 - const period = 100 - const numberOfTries = timeout / period - let i = 0 - while (true) { - try { - await test() - return - } catch (err) { - i = i + 1 - if (i > numberOfTries) { - throw err - } - } - await sleep(period) - } - - return - - function sleep(milliseconds: number): Promise { - return new Promise((resolve) => - setTimeout(() => { - resolve() - }, milliseconds) - ) - } -} From c9e0bcf5653c31ffa00819083a9ce58a24e0bd17 Mon Sep 17 00:00:00 2001 From: leemove Date: Tue, 13 Apr 2021 18:13:15 +0800 Subject: [PATCH 33/46] fix(ssr): fix ssrTransform catch clause error (fix #2667) (#2966) --- .../src/node/ssr/__tests__/ssrTransform.spec.ts | 15 +++++++++++++++ packages/vite/src/node/ssr/ssrTransform.ts | 5 +++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts b/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts index cb29121356cb1f..163097c3c9ff18 100644 --- a/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts +++ b/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts @@ -156,6 +156,21 @@ test('do not rewrite method definition', async () => { `) }) +test('do not rewrite catch clause', async () => { + expect( + ( + await ssrTransform( + `import {error} from './dependency';try {} catch(error) {}`, + null, + null + ) + ).code + ).toMatchInlineSnapshot(` + "const __vite_ssr_import_0__ = __vite_ssr_import__(\\"./dependency\\") + try {} catch(error) {}" + `) +}) + // #2221 test('should declare variable for imported super class', async () => { expect( diff --git a/packages/vite/src/node/ssr/ssrTransform.ts b/packages/vite/src/node/ssr/ssrTransform.ts index b291a74a6c00a2..0e838f1932f8c6 100644 --- a/packages/vite/src/node/ssr/ssrTransform.ts +++ b/packages/vite/src/node/ssr/ssrTransform.ts @@ -322,9 +322,10 @@ function walk( function isRefIdentifier(id: Identifier, parent: _Node, parentStack: _Node[]) { // declaration id if ( - (parent.type === 'VariableDeclarator' || + parent.type === 'CatchClause' || + ((parent.type === 'VariableDeclarator' || parent.type === 'ClassDeclaration') && - parent.id === id + parent.id === id) ) { return false } From 266fb55adc1e3580bab86d30fcd1dfd1d80748a9 Mon Sep 17 00:00:00 2001 From: Richard Petersen Date: Tue, 13 Apr 2021 21:53:28 +0200 Subject: [PATCH 34/46] fix: A static and dynamically imported module is loaded twice (#2935) --- .../__tests__/dynamic-import.spec.ts | 16 +++++++++++++ packages/playground/dynamic-import/index.html | 3 +++ packages/playground/dynamic-import/mxd.js | 1 + packages/playground/dynamic-import/mxd.json | 1 + .../playground/dynamic-import/nested/index.js | 24 +++++++++++++++++++ .../playground/dynamic-import/vite.config.js | 8 +++++++ .../vite/src/node/plugins/importAnalysis.ts | 15 +++++++++--- 7 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 packages/playground/dynamic-import/mxd.js create mode 100644 packages/playground/dynamic-import/mxd.json diff --git a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts index 32333059ad7381..292cdb2e861b4b 100644 --- a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts +++ b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts @@ -20,6 +20,22 @@ test('should load data URL of `data:`', async () => { await untilUpdated(() => page.textContent('.view'), 'data', true) }) +test('should have same reference on static and dynamic js import', async () => { + await page.click('.mxd') + await untilUpdated(() => page.textContent('.view'), 'true', true) +}) + +// in this case, it is not possible to detect the correct module +test('should have same reference on static and dynamic js import', async () => { + await page.click('.mxd2') + await untilUpdated(() => page.textContent('.view'), 'false', true) +}) + +test('should have same reference on static and dynamic js import', async () => { + await page.click('.mxdjson') + await untilUpdated(() => page.textContent('.view'), 'true', true) +}) + // since this test has a timeout, it should be put last so that it // does not bleed on the last test('should load dynamic import with vars', async () => { diff --git a/packages/playground/dynamic-import/index.html b/packages/playground/dynamic-import/index.html index 87bb6ebdaa37e8..3039d9eadf3c00 100644 --- a/packages/playground/dynamic-import/index.html +++ b/packages/playground/dynamic-import/index.html @@ -2,6 +2,9 @@ + + + diff --git a/packages/playground/dynamic-import/mxd.js b/packages/playground/dynamic-import/mxd.js new file mode 100644 index 00000000000000..ea9b101e1c2259 --- /dev/null +++ b/packages/playground/dynamic-import/mxd.js @@ -0,0 +1 @@ +export default function () {} diff --git a/packages/playground/dynamic-import/mxd.json b/packages/playground/dynamic-import/mxd.json new file mode 100644 index 00000000000000..9e26dfeeb6e641 --- /dev/null +++ b/packages/playground/dynamic-import/mxd.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/packages/playground/dynamic-import/nested/index.js b/packages/playground/dynamic-import/nested/index.js index cc6522016fc1d8..48a7cb7f924c38 100644 --- a/packages/playground/dynamic-import/nested/index.js +++ b/packages/playground/dynamic-import/nested/index.js @@ -1,3 +1,6 @@ +import mxdStatic from '../mxd' +import mxdStaticJSON from '../mxd.json' + async function setView(view) { const { msg } = await import(`../views/${view}.js`) text('.view', msg) @@ -21,6 +24,27 @@ document.querySelector('.qux').addEventListener('click', async () => { text('.view', msg) }) +// mixed static and dynamic +document.querySelector('.mxd').addEventListener('click', async () => { + const view = 'mxd' + const { default: mxdDynamic } = await import(`../${view}.js`) + text('.view', mxdStatic === mxdDynamic) +}) + +document.querySelector('.mxd2').addEventListener('click', async () => { + const test = { jss: '../mxd.js' } + const ttest = test + const view = 'mxd' + const { default: mxdDynamic } = await import(test.jss) + text('.view', mxdStatic === mxdDynamic) +}) + +document.querySelector('.mxdjson').addEventListener('click', async () => { + const view = 'mxd' + const { default: mxdDynamicJSON } = await import(`../${view}.json`) + text('.view', mxdStaticJSON === mxdDynamicJSON) +}) + // data URLs (`blob:`) const code1 = 'export const msg = "blob"' const blob = new Blob([code1], { type: 'text/javascript;charset=UTF-8' }) diff --git a/packages/playground/dynamic-import/vite.config.js b/packages/playground/dynamic-import/vite.config.js index e0fb1f662fd3d0..010e47d6308d30 100644 --- a/packages/playground/dynamic-import/vite.config.js +++ b/packages/playground/dynamic-import/vite.config.js @@ -10,6 +10,14 @@ module.exports = { path.resolve(__dirname, 'qux.js'), path.resolve(__dirname, 'dist/qux.js') ) + fs.copyFileSync( + path.resolve(__dirname, 'mxd.js'), + path.resolve(__dirname, 'dist/mxd.js') + ) + fs.copyFileSync( + path.resolve(__dirname, 'mxd.json'), + path.resolve(__dirname, 'dist/mxd.json') + ) } } ] diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts index e37b04393bf824..040558b9f79645 100644 --- a/packages/vite/src/node/plugins/importAnalysis.ts +++ b/packages/vite/src/node/plugins/importAnalysis.ts @@ -48,8 +48,12 @@ const clientDir = normalizePath(CLIENT_DIR) const skipRE = /\.(map|json)$/ const canSkip = (id: string) => skipRE.test(id) || isDirectCSSRequest(id) +function isExplicitImportRequired(url: string) { + return !isJSRequest(cleanUrl(url)) && !isCSSRequest(url) +} + function markExplicitImport(url: string) { - if (!isJSRequest(cleanUrl(url)) && !isCSSRequest(url)) { + if (isExplicitImportRequired(url)) { return injectQuery(url, 'import') } return url @@ -407,8 +411,13 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin { `/* @vite-ignore */ comment inside the import() call to suppress this warning.\n` ) } - needQueryInjectHelper = true - str().overwrite(start, end, `__vite__injectQuery(${url}, 'import')`) + if ( + !/^('.*'|".*"|`.*`)$/.test(url) || + isExplicitImportRequired(url.slice(1, -1)) + ) { + needQueryInjectHelper = true + str().overwrite(start, end, `__vite__injectQuery(${url}, 'import')`) + } } } From 9be7449544b078d572b93e7df463a0c4756a84f5 Mon Sep 17 00:00:00 2001 From: Markus Lanthaler Date: Tue, 13 Apr 2021 23:14:11 +0200 Subject: [PATCH 35/46] fix(types): clean-css types (#2971) --- packages/vite/types/clean-css.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/types/clean-css.d.ts b/packages/vite/types/clean-css.d.ts index 6344df8fa509e8..9c6368e7c52f7f 100644 --- a/packages/vite/types/clean-css.d.ts +++ b/packages/vite/types/clean-css.d.ts @@ -453,7 +453,7 @@ export namespace CleanCSS { /** * denotes a number of /*! ... * / comments preserved; defaults to `all` */ - specialComments?: string + specialComments?: 'all' | '1' | 1 | '0' | 0 /** * Controls at-rules (e.g. `@charset`, `@import`) optimizing; defaults to `true` From 8b38168f7bc5be1d3417f3115ac723baec736ed6 Mon Sep 17 00:00:00 2001 From: Dominik G Date: Wed, 14 Apr 2021 00:42:53 +0200 Subject: [PATCH 36/46] feat(plugin-api): support async configResolved hooks (fixes #2949) (#2951) --- docs/guide/api-plugin.md | 4 ++-- packages/vite/src/node/config.ts | 6 +----- packages/vite/src/node/plugin.ts | 2 +- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/guide/api-plugin.md b/docs/guide/api-plugin.md index 241031ef0a224e..dd96508d5307b8 100644 --- a/docs/guide/api-plugin.md +++ b/docs/guide/api-plugin.md @@ -189,8 +189,8 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo ### `configResolved` -- **Type:** `(config: ResolvedConfig) => void` -- **Kind:** `sync`, `sequential` +- **Type:** `(config: ResolvedConfig) => void | Promise` +- **Kind:** `async`, `parallel` Called after the Vite config is resolved. Use this hook to read and store the final resolved config. It is also useful when the plugin needs to do something different based the command is being run. diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index be6a99b049e73e..15f85ef8edd28b 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -376,11 +376,7 @@ export async function resolveConfig( ) // call configResolved hooks - userPlugins.forEach((p) => { - if (p.configResolved) { - p.configResolved(resolved) - } - }) + await Promise.all(userPlugins.map((p) => p.configResolved?.(resolved))) if (process.env.DEBUG) { debug(`using resolved config: %O`, { diff --git a/packages/vite/src/node/plugin.ts b/packages/vite/src/node/plugin.ts index 4f13439604f86e..012c32e0fa6dfb 100644 --- a/packages/vite/src/node/plugin.ts +++ b/packages/vite/src/node/plugin.ts @@ -68,7 +68,7 @@ export interface Plugin extends RollupPlugin { /** * Use this hook to read and store the final resolved vite config. */ - configResolved?: (config: ResolvedConfig) => void + configResolved?: (config: ResolvedConfig) => void | Promise /** * Configure the vite server. The hook receives the {@link ViteDevServer} * instance. This can also be used to store a reference to the server From 8b02abf537cb731fcfe84cf8e93ba3e923e83114 Mon Sep 17 00:00:00 2001 From: psaren <18718574603@163.com> Date: Wed, 14 Apr 2021 20:47:53 +0800 Subject: [PATCH 37/46] fix(build): avoid import duplicate chunks, fix #2906 (#2940) --- packages/vite/src/node/plugins/html.ts | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index cd147519332bce..88f0dd9ee5b1bf 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -267,6 +267,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { }, async generateBundle(_, bundle) { + const analyzedChunk: Map = new Map() const getPreloadLinksForChunk = ( chunk: OutputChunk, seen: Set = new Set() @@ -274,7 +275,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { const tags: HtmlTagDescriptor[] = [] chunk.imports.forEach((file) => { const importee = bundle[file] - if (importee && importee.type === 'chunk' && !seen.has(file)) { + if (importee?.type === 'chunk' && !seen.has(file)) { seen.add(file) tags.push({ tag: 'link', @@ -294,12 +295,16 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { seen: Set = new Set() ): HtmlTagDescriptor[] => { const tags: HtmlTagDescriptor[] = [] - chunk.imports.forEach((file) => { - const importee = bundle[file] - if (importee && importee.type === 'chunk') { - tags.push(...getCssTagsForChunk(importee, seen)) - } - }) + if (!analyzedChunk.has(chunk)) { + analyzedChunk.set(chunk, 1) + chunk.imports.forEach((file) => { + const importee = bundle[file] + if (importee?.type === 'chunk') { + tags.push(...getCssTagsForChunk(importee, seen)) + } + }) + } + const cssFiles = chunkToEmittedCssFileMap.get(chunk) if (cssFiles) { cssFiles.forEach((file) => { From 8dbebeed4c1dd13e13aa7201ad6922d4d4c20368 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Risoud?= Date: Wed, 14 Apr 2021 14:50:27 +0200 Subject: [PATCH 38/46] fix(css): properly pass options to stylus compiler, fix #2587 (#2860) Co-authored-by: Shinigami --- packages/playground/css/__tests__/css.spec.ts | 43 +++++++++++++++++ packages/playground/css/css-dep/index.styl | 2 + packages/playground/css/index.html | 23 ++++++++++ packages/playground/css/main.js | 3 ++ packages/playground/css/nested/nested.styl | 6 +++ .../css/options/absolute-import.styl | 3 ++ .../css/options/relative-import.styl | 3 ++ packages/playground/css/package.json | 3 +- packages/playground/css/stylus.styl | 11 +++++ packages/playground/css/vite.config.js | 8 ++++ packages/vite/src/node/plugins/css.ts | 30 +++++++++--- yarn.lock | 46 +++++++++++++++++-- 12 files changed, 169 insertions(+), 12 deletions(-) create mode 100644 packages/playground/css/css-dep/index.styl create mode 100644 packages/playground/css/nested/nested.styl create mode 100644 packages/playground/css/options/absolute-import.styl create mode 100644 packages/playground/css/options/relative-import.styl create mode 100644 packages/playground/css/stylus.styl diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index 010fde92347e7e..212778a375a5dd 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -56,11 +56,16 @@ test('postcss config', async () => { test('sass', async () => { const imported = await page.$('.sass') const atImport = await page.$('.sass-at-import') + const atImportAlias = await page.$('.sass-at-import-alias') const partialImport = await page.$('.sass-partial') expect(await getColor(imported)).toBe('orange') expect(await getColor(atImport)).toBe('olive') expect(await getBg(atImport)).toMatch(isBuild ? /base64/ : '/nested/icon.png') + expect(await getColor(atImportAlias)).toBe('olive') + expect(await getBg(atImportAlias)).toMatch( + isBuild ? /base64/ : '/nested/icon.png' + ) expect(await getColor(partialImport)).toBe('orchid') editFile('sass.scss', (code) => @@ -82,10 +87,15 @@ test('sass', async () => { test('less', async () => { const imported = await page.$('.less') const atImport = await page.$('.less-at-import') + const atImportAlias = await page.$('.less-at-import-alias') expect(await getColor(imported)).toBe('blue') expect(await getColor(atImport)).toBe('darkslateblue') expect(await getBg(atImport)).toMatch(isBuild ? /base64/ : '/nested/icon.png') + expect(await getColor(atImportAlias)).toBe('darkslateblue') + expect(await getBg(atImportAlias)).toMatch( + isBuild ? /base64/ : '/nested/icon.png' + ) editFile('less.less', (code) => code.replace('@color: blue', '@color: red')) await untilUpdated(() => getColor(imported), 'red') @@ -96,6 +106,35 @@ test('less', async () => { await untilUpdated(() => getColor(atImport), 'blue') }) +test('stylus', async () => { + const imported = await page.$('.stylus') + const additionalData = await page.$('.stylus-additional-data') + const relativeImport = await page.$('.stylus-import') + const relativeImportAlias = await page.$('.stylus-import-alias') + const optionsRelativeImport = await page.$('.stylus-options-relative-import') + const optionsAbsoluteImport = await page.$('.stylus-options-absolute-import') + + expect(await getColor(imported)).toBe('blue') + expect(await getColor(additionalData)).toBe('orange') + expect(await getColor(relativeImport)).toBe('darkslateblue') + expect(await getColor(relativeImportAlias)).toBe('darkslateblue') + expect(await getBg(relativeImportAlias)).toMatch( + isBuild ? /base64/ : '/nested/icon.png' + ) + expect(await getColor(optionsRelativeImport)).toBe('green') + expect(await getColor(optionsAbsoluteImport)).toBe('red') + + editFile('stylus.styl', (code) => + code.replace('$color ?= blue', '$color ?= red') + ) + await untilUpdated(() => getColor(imported), 'red') + + editFile('nested/nested.styl', (code) => + code.replace('color: darkslateblue', 'color: blue') + ) + await untilUpdated(() => getColor(relativeImport), 'blue') +}) + test('css modules', async () => { const imported = await page.$('.modules') expect(await getColor(imported)).toBe('turquoise') @@ -133,6 +172,10 @@ test('@import dependency w/ sass entry', async () => { expect(await getColor('.css-dep-sass')).toBe('orange') }) +test('@import dependency w/ stylus entry', async () => { + expect(await getColor('.css-dep-stylus')).toBe('red') +}) + test('async chunk', async () => { const el = await page.$('.async') expect(await getColor(el)).toBe('teal') diff --git a/packages/playground/css/css-dep/index.styl b/packages/playground/css/css-dep/index.styl new file mode 100644 index 00000000000000..68170594a118a9 --- /dev/null +++ b/packages/playground/css/css-dep/index.styl @@ -0,0 +1,2 @@ +.css-dep-stylus + color red diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html index c1128b68039047..ac2d0e90fb5526 100644 --- a/packages/playground/css/index.html +++ b/packages/playground/css/index.html @@ -40,6 +40,26 @@

CSS

Imported Less string:


 
+  

Stylus: This should be blue

+

+ Stylus additionalData: This should be orange +

+

@import from Stylus: This should be darkslateblue

+

+ @import from Stylus: This should be darkslateblue and have bg image which + url contains alias +

+

+ Stylus import (relative path) via vite config preprocessor options: This + should be green +

+

+ Stylus import (absolute path) via vite config preprocessor options: This + should be red +

+

Imported Stylus string:

+

+
   

CSS modules: this should be turquoise

Imported CSS module:


@@ -54,6 +74,9 @@ 

CSS

@import dependency w/ sass enrtrypoints: this should be orange

+

+ @import dependency w/ styl enrtrypoints: this should be red +

diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js index 0026e6305a2eb9..31b44b5552a8e5 100644 --- a/packages/playground/css/main.js +++ b/packages/playground/css/main.js @@ -7,6 +7,9 @@ text('.imported-sass', sass) import less from './less.less' text('.imported-less', less) +import stylus from './stylus.styl' +text('.imported-stylus', stylus) + import mod from './mod.module.css' document.querySelector('.modules').classList.add(mod['apply-color']) text('.modules-code', JSON.stringify(mod, null, 2)) diff --git a/packages/playground/css/nested/nested.styl b/packages/playground/css/nested/nested.styl new file mode 100644 index 00000000000000..72e6f7a5074685 --- /dev/null +++ b/packages/playground/css/nested/nested.styl @@ -0,0 +1,6 @@ +.stylus-import + color darkslateblue + +.stylus-import-alias + color darkslateblue + background url('@/nested/icon.png') 10px no-repeat diff --git a/packages/playground/css/options/absolute-import.styl b/packages/playground/css/options/absolute-import.styl new file mode 100644 index 00000000000000..a057258d56c0c6 --- /dev/null +++ b/packages/playground/css/options/absolute-import.styl @@ -0,0 +1,3 @@ +.stylus-options-absolute-import + /* imported via vite.config.js */ + color red diff --git a/packages/playground/css/options/relative-import.styl b/packages/playground/css/options/relative-import.styl new file mode 100644 index 00000000000000..157e0ea8d500eb --- /dev/null +++ b/packages/playground/css/options/relative-import.styl @@ -0,0 +1,3 @@ +.stylus-options-relative-import + /* imported via vite.config.js */ + color green diff --git a/packages/playground/css/package.json b/packages/playground/css/package.json index dedf35b5834fd0..e5cc96c39fe40d 100644 --- a/packages/playground/css/package.json +++ b/packages/playground/css/package.json @@ -9,9 +9,10 @@ "serve": "vite preview" }, "devDependencies": { + "css-dep": "link:./css-dep", "less": "^4.1.0", "postcss-nested": "^5.0.3", "sass": "^1.32.5", - "css-dep": "link:./css-dep" + "stylus": "^0.54.8" } } diff --git a/packages/playground/css/stylus.styl b/packages/playground/css/stylus.styl new file mode 100644 index 00000000000000..7b77ca36531be8 --- /dev/null +++ b/packages/playground/css/stylus.styl @@ -0,0 +1,11 @@ +@import './nested/nested' +@import 'css-dep'; // package w/ styl entry points + +$color ?= blue + +.stylus + color $color + +.stylus-additional-data + /* injected via vite.config.js */ + color $injectedColor diff --git a/packages/playground/css/vite.config.js b/packages/playground/css/vite.config.js index 08b9eca9768a3f..5484342e3966a5 100644 --- a/packages/playground/css/vite.config.js +++ b/packages/playground/css/vite.config.js @@ -1,3 +1,4 @@ +const path = require('path') /** * @type {import('vite').UserConfig} */ @@ -32,6 +33,13 @@ module.exports = { preprocessorOptions: { scss: { additionalData: `$injectedColor: orange;` + }, + styl: { + additionalData: `$injectedColor ?= orange`, + imports: [ + './options/relative-import.styl', + path.join(__dirname, 'options/absolute-import.styl') + ] } } } diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 89b751d7061882..79c4e1df8a0f2d 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -35,7 +35,9 @@ import { import MagicString from 'magic-string' import * as Postcss from 'postcss' import type Sass from 'sass' -import type Stylus from 'stylus' +// We need to disable check of extraneous import which is buggy for stylus, +// and causes the CI tests fail, see: https://github.com/vitejs/vite/pull/2860 +import type Stylus from 'stylus' // eslint-disable-line node/no-extraneous-import import type Less from 'less' import { Alias } from 'types/alias' @@ -1104,18 +1106,31 @@ function createViteLessPlugin( } // .styl -const styl: StylePreprocessor = (source, root, options) => { +const styl: StylePreprocessor = async (source, root, options) => { const nodeStylus = loadPreprocessor(PreprocessLang.stylus, root) + // Get source with preprocessor options.additionalData. Make sure a new line separator + // is added to avoid any render error, as added stylus content may not have semi-colon separators + source = await getSource( + source, + options.filename, + options.additionalData, + '\n' + ) + // Get preprocessor options.imports dependencies as stylus + // does not return them with its builtin `.deps()` method + const importsDeps = (options.imports ?? []).map((dep: string) => + path.resolve(dep) + ) try { - const ref = nodeStylus(source) + const ref = nodeStylus(source, options) - Object.keys(options).forEach((key) => ref.set(key, options[key])) // if (map) ref.set('sourcemap', { inline: false, comment: false }) const result = ref.render() // @ts-expect-error: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/51919 - const deps = ref.deps() + // Concat imports deps with computed deps + const deps = [...ref.deps(), ...importsDeps] return { code: result, errors: [], deps } } catch (e) { @@ -1126,13 +1141,14 @@ const styl: StylePreprocessor = (source, root, options) => { function getSource( source: string, filename: string, - additionalData?: PreprocessorAdditionalData + additionalData?: PreprocessorAdditionalData, + sep: string = '' ): string | Promise { if (!additionalData) return source if (typeof additionalData === 'function') { return additionalData(source, filename) } - return additionalData + source + return additionalData + sep + source } const preProcessors = Object.freeze({ diff --git a/yarn.lock b/yarn.lock index 26f27f4f368ad9..468fcaa1671024 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2483,6 +2483,23 @@ css-color-names@^1.0.1: version "0.0.0" uid "" +css-parse@~2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4" + integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q= + dependencies: + css "^2.0.0" + +css@^2.0.0: + version "2.2.4" + resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" + integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw== + dependencies: + inherits "^2.0.3" + source-map "^0.6.1" + source-map-resolve "^0.5.2" + urix "^0.1.0" + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -2564,6 +2581,13 @@ debug@^3.2.6: dependencies: ms "^2.1.1" +debug@~3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + decamelize-keys@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9" @@ -5417,7 +5441,7 @@ mixin-deep@^1.2.0: for-in "^1.0.2" is-extendable "^1.0.1" -mkdirp@1.0.4, mkdirp@1.x: +mkdirp@1.0.4, mkdirp@1.x, mkdirp@~1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== @@ -6862,7 +6886,7 @@ safe-regex@^1.1.0: dependencies: ret "~0.1.10" -"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: +"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0: version "2.1.2" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== @@ -6889,7 +6913,7 @@ sass@^1.30.0, sass@^1.32.5: dependencies: chokidar ">=2.0.0 <4.0.0" -sax@^1.2.4: +sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== @@ -7115,7 +7139,7 @@ snapdragon@^0.8.1: source-map-resolve "^0.5.0" use "^3.1.0" -source-map-resolve@^0.5.0: +source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw== @@ -7426,6 +7450,20 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1, strip-json-comments@~3.1 resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +stylus@^0.54.8: + version "0.54.8" + resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147" + integrity sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg== + dependencies: + css-parse "~2.0.0" + debug "~3.1.0" + glob "^7.1.6" + mkdirp "~1.0.4" + safer-buffer "^2.1.2" + sax "~1.2.4" + semver "^6.3.0" + source-map "^0.7.3" + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" From a56d4af2b2be20798739f2877eefb1dc47374b81 Mon Sep 17 00:00:00 2001 From: Vben Date: Thu, 15 Apr 2021 01:38:59 +0800 Subject: [PATCH 39/46] chore: upgrade vue-tsc to 0.0.24 (#2992) --- packages/create-app/template-vue-ts/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-app/template-vue-ts/package.json b/packages/create-app/template-vue-ts/package.json index 65f8c8caf189aa..2b5f0896a2d197 100644 --- a/packages/create-app/template-vue-ts/package.json +++ b/packages/create-app/template-vue-ts/package.json @@ -14,6 +14,6 @@ "@vue/compiler-sfc": "^3.0.5", "typescript": "^4.1.3", "vite": "^2.1.5", - "vue-tsc": "^0.0.23" + "vue-tsc": "^0.0.24" } -} \ No newline at end of file +} From 6dfba789f0826500566f69db9aff7e301ef6e858 Mon Sep 17 00:00:00 2001 From: patak Date: Wed, 14 Apr 2021 19:40:20 +0200 Subject: [PATCH 40/46] docs: contributing.md extending test suite section (#2946) --- .github/contributing.md | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/.github/contributing.md b/.github/contributing.md index d0b3e4f9b66bb0..49f528295e4e1d 100644 --- a/.github/contributing.md +++ b/.github/contributing.md @@ -29,7 +29,7 @@ Each test can be run under either dev server mode or build mode. - You can also use `yarn test-serve [match]` or `yarn test-build [match]` to run tests in a specific playground package, e.g. `yarn test-serve css` will run tests for both `playground/css` and `playground/css-codesplit` under serve mode. - Note package matching is not aviable for the `yarn test` script, which always runs all tests. + Note package matching is not available for the `yarn test` script, which always runs all tests. ### Test Env and Helpers @@ -43,6 +43,38 @@ test('should work', async () => { Some common test helpers, e.g. `testDir`, `isBuild` or `editFile` are available in `packages/playground/testUtils.ts`. +### Extending the Test Suite + +To add new tests, you should find a related playground to the fix or feature (or create a new one). As an example, static assets loading are tested in the [assets playground](https://github.com/vitejs/vite/tree/main/packages/playground/assets). In this Vite App, there is a test for `?raw` imports, with [a section is defined in the `index.html` for it](https://github.com/vitejs/vite/blob/71215533ac60e8ff566dc3467feabfc2c71a01e2/packages/playground/assets/index.html#L121): + +```html +

?raw import

+ +``` + +This will be modified [with the result of a file import](https://github.com/vitejs/vite/blob/71215533ac60e8ff566dc3467feabfc2c71a01e2/packages/playground/assets/index.html#L151): + +```js +import rawSvg from './nested/fragment.svg?raw' +text('.raw', rawSvg) +``` + +Where the `text` util is defined as: + +```js +function text(el, text) { + document.querySelector(el).textContent = text +} +``` + +In the [spec tests](https://github.com/vitejs/vite/blob/71215533ac60e8ff566dc3467feabfc2c71a01e2/packages/playground/assets/__tests__/assets.spec.ts#L180), the modifications to the DOM listed above are used to test this feature: + +```js +test('?raw import', async () => { + expect(await page.textContent('.raw')).toMatch('SVG') +}) +``` + ## Pull Request Guidelines - Checkout a topic branch from a base branch, e.g. `main`, and merge back against that branch. From c61b3e4e413a7f182b9c40bd5ff2c688e50e107f Mon Sep 17 00:00:00 2001 From: Shinigami Date: Wed, 14 Apr 2021 20:49:26 +0200 Subject: [PATCH 41/46] chore: @typescript-eslint/explicit-module-boundary-types (#2735) --- packages/plugin-vue/src/handleHotUpdate.ts | 4 +- packages/plugin-vue/src/script.ts | 4 +- .../plugin-vue/src/utils/descriptorCache.ts | 24 +++++++--- packages/plugin-vue/src/utils/query.ts | 4 +- packages/vite/src/client/client.ts | 8 ++-- packages/vite/src/client/overlay.ts | 4 +- packages/vite/src/node/build.ts | 2 +- packages/vite/src/node/config.ts | 6 ++- .../src/node/optimizer/registerMissing.ts | 4 +- packages/vite/src/node/optimizer/scan.ts | 6 ++- packages/vite/src/node/plugins/asset.ts | 9 ++-- packages/vite/src/node/plugins/css.ts | 4 +- packages/vite/src/node/plugins/html.ts | 15 ++++-- packages/vite/src/node/preview.ts | 5 +- packages/vite/src/node/server/hmr.ts | 4 +- packages/vite/src/node/server/http.ts | 4 +- .../vite/src/node/server/middlewares/error.ts | 2 +- .../src/node/server/middlewares/indexHtml.ts | 4 +- packages/vite/src/node/server/moduleGraph.ts | 16 +++---- packages/vite/src/node/server/send.ts | 2 +- packages/vite/src/node/server/sourcemap.ts | 2 +- packages/vite/src/node/ssr/ssrStacktrace.ts | 5 +- packages/vite/src/node/utils.ts | 48 +++++++++++-------- 23 files changed, 119 insertions(+), 67 deletions(-) diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts index e47d3b173021ee..ae07de16e19c93 100644 --- a/packages/plugin-vue/src/handleHotUpdate.ts +++ b/packages/plugin-vue/src/handleHotUpdate.ts @@ -144,7 +144,7 @@ export async function handleHotUpdate({ return [...affectedModules].filter(Boolean) as ModuleNode[] } -export function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null) { +export function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null): boolean { if (!a && !b) return true if (!a || !b) return false // src imports will trigger their own updates @@ -161,7 +161,7 @@ export function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null) { export function isOnlyTemplateChanged( prev: SFCDescriptor, next: SFCDescriptor -) { +): boolean { return ( isEqualBlock(prev.script, next.script) && isEqualBlock(prev.scriptSetup, next.scriptSetup) && diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts index a80341c7255f7e..4857ad8c10e1ce 100644 --- a/packages/plugin-vue/src/script.ts +++ b/packages/plugin-vue/src/script.ts @@ -17,7 +17,7 @@ export function setResolvedScript( descriptor: SFCDescriptor, script: SFCScriptBlock, ssr: boolean -) { +): void { ;(ssr ? ssrCache : clientCache).set(descriptor, script) } @@ -25,7 +25,7 @@ export function resolveScript( descriptor: SFCDescriptor, options: ResolvedOptions, ssr: boolean -) { +): SFCScriptBlock | null { if (!descriptor.script && !descriptor.scriptSetup) { return null } diff --git a/packages/plugin-vue/src/utils/descriptorCache.ts b/packages/plugin-vue/src/utils/descriptorCache.ts index dc1cc7fc69d3f7..d03643dc8bc026 100644 --- a/packages/plugin-vue/src/utils/descriptorCache.ts +++ b/packages/plugin-vue/src/utils/descriptorCache.ts @@ -1,7 +1,13 @@ import path from 'path' import slash from 'slash' import hash from 'hash-sum' -import { parse, SFCDescriptor } from '@vue/compiler-sfc' +import { CompilerError, parse, SFCDescriptor } from '@vue/compiler-sfc' + +// node_modules/@vue/compiler-sfc/dist/compiler-sfc.d.ts SFCParseResult should be exported so it can be re-used +export interface SFCParseResult { + descriptor: SFCDescriptor + errors: Array +} const cache = new Map() const prevCache = new Map() @@ -11,7 +17,7 @@ export function createDescriptor( source: string, root: string, isProduction: boolean | undefined -) { +): SFCParseResult { const { descriptor, errors } = parse(source, { filename, sourceMap: true @@ -26,15 +32,21 @@ export function createDescriptor( return { descriptor, errors } } -export function getPrevDescriptor(filename: string) { +export function getPrevDescriptor(filename: string): SFCDescriptor | undefined { return prevCache.get(filename) } -export function setPrevDescriptor(filename: string, entry: SFCDescriptor) { +export function setPrevDescriptor( + filename: string, + entry: SFCDescriptor +): void { prevCache.set(filename, entry) } -export function getDescriptor(filename: string, errorOnMissing = true) { +export function getDescriptor( + filename: string, + errorOnMissing = true +): SFCDescriptor | undefined { if (cache.has(filename)) { return cache.get(filename)! } @@ -46,6 +58,6 @@ export function getDescriptor(filename: string, errorOnMissing = true) { } } -export function setDescriptor(filename: string, entry: SFCDescriptor) { +export function setDescriptor(filename: string, entry: SFCDescriptor): void { cache.set(filename, entry) } diff --git a/packages/plugin-vue/src/utils/query.ts b/packages/plugin-vue/src/utils/query.ts index c0bafedcbd6a0d..bd1c6394940be9 100644 --- a/packages/plugin-vue/src/utils/query.ts +++ b/packages/plugin-vue/src/utils/query.ts @@ -9,7 +9,9 @@ export interface VueQuery { raw?: boolean } -export function parseVueRequest(id: string) { +export function parseVueRequest( + id: string +): { filename: string; query: VueQuery } { const [filename, rawQuery] = id.split(`?`, 2) const query = qs.parse(rawQuery) as VueQuery if (query.vue != null) { diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts index 3eac2d2e5057d4..6a089e10f45d5a 100644 --- a/packages/vite/src/client/client.ts +++ b/packages/vite/src/client/client.ts @@ -201,7 +201,7 @@ const supportsConstructedSheet = (() => { const sheetsMap = new Map() -export function updateStyle(id: string, content: string) { +export function updateStyle(id: string, content: string): void { let style = sheetsMap.get(id) if (supportsConstructedSheet && !content.includes('@import')) { if (style && !(style instanceof CSSStyleSheet)) { @@ -235,7 +235,7 @@ export function updateStyle(id: string, content: string) { sheetsMap.set(id, style) } -export function removeStyle(id: string) { +export function removeStyle(id: string): void { const style = sheetsMap.get(id) if (style) { if (style instanceof CSSStyleSheet) { @@ -334,6 +334,8 @@ const ctxToListenersMap = new Map< Map void)[]> >() +// Just infer the return type for now +// _This would have to be activated when used `plugin:@typescript-eslint/recommended`_ eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const createHotContext = (ownerPath: string) => { if (!dataMap.has(ownerPath)) { dataMap.set(ownerPath, {}) @@ -436,7 +438,7 @@ export const createHotContext = (ownerPath: string) => { /** * urls here are dynamic import() urls that couldn't be statically analyzed */ -export function injectQuery(url: string, queryToInject: string) { +export function injectQuery(url: string, queryToInject: string): string { // skip urls that won't be handled by vite if (!url.startsWith('.') && !url.startsWith('/')) { return url diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts index 41c44505aa65c4..47a7dacad85a1b 100644 --- a/packages/vite/src/client/overlay.ts +++ b/packages/vite/src/client/overlay.ts @@ -151,7 +151,7 @@ export class ErrorOverlay extends HTMLElement { }) } - text(selector: string, text: string, linkFiles = false) { + text(selector: string, text: string, linkFiles = false): void { const el = this.root.querySelector(selector)! if (!linkFiles) { el.textContent = text @@ -176,7 +176,7 @@ export class ErrorOverlay extends HTMLElement { } } - close() { + close(): void { this.parentNode?.removeChild(this) } } diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index bf4a6cd42f3122..0ee1ccf9d28428 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -637,7 +637,7 @@ export function onRollupWarning( warning: RollupWarning, warn: WarningHandler, config: ResolvedConfig -) { +): void { if (warning.code === 'UNRESOLVED_IMPORT') { const id = warning.source const importer = warning.importer diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 15f85ef8edd28b..883378d6eb1aec 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -798,7 +798,11 @@ async function loadConfigFromBundledFile( return config } -export function loadEnv(mode: string, root: string, prefix = 'VITE_') { +export function loadEnv( + mode: string, + root: string, + prefix = 'VITE_' +): Record { if (mode === 'local') { throw new Error( `"local" cannot be used as a mode name because it conflicts with ` + diff --git a/packages/vite/src/node/optimizer/registerMissing.ts b/packages/vite/src/node/optimizer/registerMissing.ts index d65481bc5283d1..32fdce1526d1ba 100644 --- a/packages/vite/src/node/optimizer/registerMissing.ts +++ b/packages/vite/src/node/optimizer/registerMissing.ts @@ -9,7 +9,9 @@ import { resolveSSRExternal } from '../ssr/ssrExternal' */ const debounceMs = 100 -export function createMissingImporterRegisterFn(server: ViteDevServer) { +export function createMissingImporterRegisterFn( + server: ViteDevServer +): (id: string, resolved: string) => void { const { logger } = server.config let knownOptimized = server._optimizeDepsMetadata!.optimized let currentMissing: Record = {} diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts index 2c838e831502e6..e40a1b1dea7acc 100644 --- a/packages/vite/src/node/optimizer/scan.ts +++ b/packages/vite/src/node/optimizer/scan.ts @@ -417,7 +417,10 @@ async function transformGlob( return s.toString() } -export function shouldExternalizeDep(resolvedId: string, rawId: string) { +export function shouldExternalizeDep( + resolvedId: string, + rawId: string +): boolean { // not a valid file path if (!path.isAbsolute(resolvedId)) { return true @@ -430,4 +433,5 @@ export function shouldExternalizeDep(resolvedId: string, rawId: string) { if (!JS_TYPES_RE.test(resolvedId) && !htmlTypesRE.test(resolvedId)) { return true } + return false } diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts index 0e426fd6e5d934..950f7e86c59696 100644 --- a/packages/vite/src/node/plugins/asset.ts +++ b/packages/vite/src/node/plugins/asset.ts @@ -102,7 +102,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin { } } -export function registerAssetToChunk(chunk: RenderedChunk, file: string) { +export function registerAssetToChunk(chunk: RenderedChunk, file: string): void { let emitted = chunkToEmittedAssetsMap.get(chunk) if (!emitted) { emitted = new Set() @@ -132,7 +132,7 @@ export function fileToUrl( id: string, config: ResolvedConfig, ctx: PluginContext -) { +): string | Promise { if (config.command === 'serve') { return fileToDevUrl(id, config) } else { @@ -163,7 +163,10 @@ const assetHashToFilenameMap = new WeakMap< Map >() -export function getAssetFilename(hash: string, config: ResolvedConfig) { +export function getAssetFilename( + hash: string, + config: ResolvedConfig +): string | undefined { return assetHashToFilenameMap.get(config)?.get(hash) } diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 79c4e1df8a0f2d..9d17b245767fc1 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -97,10 +97,10 @@ const enum PureCssLang { } type CssLang = keyof typeof PureCssLang | keyof typeof PreprocessLang -export const isCSSRequest = (request: string) => +export const isCSSRequest = (request: string): boolean => cssLangRE.test(request) && !directRequestRE.test(request) -export const isDirectCSSRequest = (request: string) => +export const isDirectCSSRequest = (request: string): boolean => cssLangRE.test(request) && directRequestRE.test(request) const cssModulesCache = new WeakMap< diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index 88f0dd9ee5b1bf..66991fe93e6215 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -29,7 +29,7 @@ import { } from '@vue/compiler-dom' const htmlProxyRE = /\?html-proxy&index=(\d+)\.js$/ -export const isHTMLProxy = (id: string) => htmlProxyRE.test(id) +export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id) const htmlCommentRE = //g const scriptModuleRE = /(]*type\s*=\s*(?:"module"|'module')[^>]*>)(.*?)<\/script>/gims @@ -79,7 +79,7 @@ export async function traverseHtml( html: string, filePath: string, visitor: NodeTransform -) { +): Promise { // lazy load compiler const { parse, transform } = await import('@vue/compiler-dom') // @vue/compiler-core doesn't like lowercase doctypes @@ -101,7 +101,12 @@ export async function traverseHtml( } } -export function getScriptInfo(node: ElementNode) { +export function getScriptInfo( + node: ElementNode +): { + src: AttributeNode | undefined + isModule: boolean +} { let src: AttributeNode | undefined let isModule = false for (let i = 0; i < node.props.length; i++) { @@ -440,7 +445,9 @@ export type IndexHtmlTransform = transform: IndexHtmlTransformHook } -export function resolveHtmlTransforms(plugins: readonly Plugin[]) { +export function resolveHtmlTransforms( + plugins: readonly Plugin[] +): [IndexHtmlTransformHook[], IndexHtmlTransformHook[]] { const preHooks: IndexHtmlTransformHook[] = [] const postHooks: IndexHtmlTransformHook[] = [] diff --git a/packages/vite/src/node/preview.ts b/packages/vite/src/node/preview.ts index c76a68337cdfdf..2be9a40b73dec7 100644 --- a/packages/vite/src/node/preview.ts +++ b/packages/vite/src/node/preview.ts @@ -11,7 +11,10 @@ import { openBrowser } from './server/openBrowser' import corsMiddleware from 'cors' import { proxyMiddleware } from './server/middlewares/proxy' -export async function preview(config: ResolvedConfig, port = 5000) { +export async function preview( + config: ResolvedConfig, + port = 5000 +): Promise { const app = connect() as Connect.Server const httpServer = await resolveHttpServer(config.server, app) diff --git a/packages/vite/src/node/server/hmr.ts b/packages/vite/src/node/server/hmr.ts index c0df3effb731a9..4ad09c81b477d4 100644 --- a/packages/vite/src/node/server/hmr.ts +++ b/packages/vite/src/node/server/hmr.ts @@ -164,7 +164,7 @@ export async function handleFileAddUnlink( file: string, server: ViteDevServer, isUnlink = false -) { +): Promise { const modules = [...(server.moduleGraph.getModulesByFile(file) ?? [])] if (isUnlink && file in server._globImporters) { delete server._globImporters[file] @@ -247,7 +247,7 @@ function invalidate(mod: ModuleNode, timestamp: number, seen: Set) { export function handlePrunedModules( mods: Set, { ws }: ViteDevServer -) { +): void { // update the disposed modules' hmr timestamp // since if it's re-imported, it should re-apply side effects // and without the timestamp the browser will not re-import it! diff --git a/packages/vite/src/node/server/http.ts b/packages/vite/src/node/server/http.ts index d701525807b064..b31fc3be991ede 100644 --- a/packages/vite/src/node/server/http.ts +++ b/packages/vite/src/node/server/http.ts @@ -30,7 +30,9 @@ export async function resolveHttpServer( } } -export async function resolveHttpsConfig(httpsOption: HttpsServerOptions) { +export async function resolveHttpsConfig( + httpsOption: HttpsServerOptions +): Promise { const { ca, cert, key, pfx } = httpsOption Object.assign(httpsOption, { ca: readFileIfExists(ca), diff --git a/packages/vite/src/node/server/middlewares/error.ts b/packages/vite/src/node/server/middlewares/error.ts index 71fbaa665a151a..42809b1d4424eb 100644 --- a/packages/vite/src/node/server/middlewares/error.ts +++ b/packages/vite/src/node/server/middlewares/error.ts @@ -24,7 +24,7 @@ export function buildErrorMessage( err: RollupError, args: string[] = [], includeStack = true -) { +): string { if (err.plugin) args.push(` Plugin: ${chalk.magenta(err.plugin)}`) if (err.id) args.push(` File: ${chalk.cyan(err.id)}`) if (err.frame) args.push(chalk.yellow(pad(err.frame))) diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index 89f448d615f435..36a29769aeb37a 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -16,7 +16,9 @@ import { CLIENT_PUBLIC_PATH, FS_PREFIX } from '../../constants' import { cleanUrl, fsPathFromId } from '../../utils' import { assetAttrsConfig } from '../../plugins/html' -export function createDevHtmlTransformFn(server: ViteDevServer) { +export function createDevHtmlTransformFn( + server: ViteDevServer +): (url: string, html: string) => Promise { const [preHooks, postHooks] = resolveHtmlTransforms(server.config.plugins) return (url: string, html: string): Promise => { diff --git a/packages/vite/src/node/server/moduleGraph.ts b/packages/vite/src/node/server/moduleGraph.ts index eb1331645759f9..c5c94b749c9add 100644 --- a/packages/vite/src/node/server/moduleGraph.ts +++ b/packages/vite/src/node/server/moduleGraph.ts @@ -56,20 +56,20 @@ export class ModuleGraph { this.container = container } - async getModuleByUrl(rawUrl: string) { + async getModuleByUrl(rawUrl: string): Promise { const [url] = await this.resolveUrl(rawUrl) return this.urlToModuleMap.get(url) } - getModuleById(id: string) { + getModuleById(id: string): ModuleNode | undefined { return this.idToModuleMap.get(removeTimestampQuery(id)) } - getModulesByFile(file: string) { + getModulesByFile(file: string): Set | undefined { return this.fileToModulesMap.get(file) } - onFileChange(file: string) { + onFileChange(file: string): void { const mods = this.getModulesByFile(file) if (mods) { const seen = new Set() @@ -79,13 +79,13 @@ export class ModuleGraph { } } - invalidateModule(mod: ModuleNode, seen: Set = new Set()) { + invalidateModule(mod: ModuleNode, seen: Set = new Set()): void { mod.transformResult = null mod.ssrTransformResult = null invalidateSSRModule(mod, seen) } - invalidateAll() { + invalidateAll(): void { const seen = new Set() this.idToModuleMap.forEach((mod) => { this.invalidateModule(mod, seen) @@ -138,7 +138,7 @@ export class ModuleGraph { return noLongerImported } - async ensureEntryFromUrl(rawUrl: string) { + async ensureEntryFromUrl(rawUrl: string): Promise { const [url, resolvedId] = await this.resolveUrl(rawUrl) let mod = this.urlToModuleMap.get(url) if (!mod) { @@ -161,7 +161,7 @@ export class ModuleGraph { // url because they are inlined into the main css import. But they still // need to be represented in the module graph so that they can trigger // hmr in the importing css file. - createFileOnlyEntry(file: string) { + createFileOnlyEntry(file: string): ModuleNode { file = normalizePath(file) const url = `${FS_PREFIX}${file}` let fileMappedModules = this.fileToModulesMap.get(file) diff --git a/packages/vite/src/node/server/send.ts b/packages/vite/src/node/server/send.ts index 4d50af7cd3c624..1c54ec46f88af8 100644 --- a/packages/vite/src/node/server/send.ts +++ b/packages/vite/src/node/server/send.ts @@ -19,7 +19,7 @@ export function send( etag = getEtag(content, { weak: true }), cacheControl = 'no-cache', map?: SourceMap | null -) { +): void { if (req.headers['if-none-match'] === etag) { res.statusCode = 304 return res.end() diff --git a/packages/vite/src/node/server/sourcemap.ts b/packages/vite/src/node/server/sourcemap.ts index 864082bc7b766b..79d303391f7e43 100644 --- a/packages/vite/src/node/server/sourcemap.ts +++ b/packages/vite/src/node/server/sourcemap.ts @@ -4,7 +4,7 @@ import path from 'path' export async function injectSourcesContent( map: { sources: string[]; sourcesContent?: string[]; sourceRoot?: string }, file: string -) { +): Promise { const sourceRoot = await fs.realpath( path.resolve(path.dirname(file), map.sourceRoot || '') ) diff --git a/packages/vite/src/node/ssr/ssrStacktrace.ts b/packages/vite/src/node/ssr/ssrStacktrace.ts index d15c4d94ae0de3..615a03d0b35964 100644 --- a/packages/vite/src/node/ssr/ssrStacktrace.ts +++ b/packages/vite/src/node/ssr/ssrStacktrace.ts @@ -12,7 +12,10 @@ try { offset = match ? +match[1] - 1 : 0 } -export function ssrRewriteStacktrace(stack: string, moduleGraph: ModuleGraph) { +export function ssrRewriteStacktrace( + stack: string, + moduleGraph: ModuleGraph +): string { return stack .split('\n') .map((line) => { diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts index 57a857d73b55c3..2a49685df92571 100644 --- a/packages/vite/src/node/utils.ts +++ b/packages/vite/src/node/utils.ts @@ -24,7 +24,7 @@ export function unwrapId(id: string): string { return id.startsWith(VALID_ID_PREFIX) ? id.slice(VALID_ID_PREFIX.length) : id } -export const flattenId = (id: string) => id.replace(/[\/\.]/g, '_') +export const flattenId = (id: string): string => id.replace(/[\/\.]/g, '_') export function isBuiltin(id: string): boolean { return builtins.includes(id) @@ -40,7 +40,7 @@ try { const ssrExtensions = ['.js', '.json', '.node'] -export function resolveFrom(id: string, basedir: string, ssr = false) { +export function resolveFrom(id: string, basedir: string, ssr = false): string { return resolve.sync(id, { basedir, extensions: ssr ? ssrExtensions : DEFAULT_EXTENSIONS, @@ -58,7 +58,10 @@ interface DebuggerOptions { onlyWhenFocused?: boolean | string } -export function createDebugger(ns: string, options: DebuggerOptions = {}) { +export function createDebugger( + ns: string, + options: DebuggerOptions = {} +): debug.Debugger['log'] { const log = debug(ns) const { onlyWhenFocused } = options const focus = typeof onlyWhenFocused === 'string' ? onlyWhenFocused : ns @@ -94,17 +97,17 @@ export function ensureVolumeInPath(file: string): string { export const queryRE = /\?.*$/ export const hashRE = /#.*$/ -export const cleanUrl = (url: string) => +export const cleanUrl = (url: string): string => url.replace(hashRE, '').replace(queryRE, '') export const externalRE = /^(https?:)?\/\// -export const isExternalUrl = (url: string) => externalRE.test(url) +export const isExternalUrl = (url: string): boolean => externalRE.test(url) export const dataUrlRE = /^\s*data:/i -export const isDataUrl = (url: string) => dataUrlRE.test(url) +export const isDataUrl = (url: string): boolean => dataUrlRE.test(url) const knownJsSrcRE = /\.((j|t)sx?|mjs|vue)($|\?)/ -export const isJSRequest = (url: string) => { +export const isJSRequest = (url: string): boolean => { if (knownJsSrcRE.test(url)) { return true } @@ -117,13 +120,13 @@ export const isJSRequest = (url: string) => { const importQueryRE = /(\?|&)import(?:&|$)/ const trailingSeparatorRE = /[\?&]$/ -export const isImportRequest = (url: string) => importQueryRE.test(url) +export const isImportRequest = (url: string): boolean => importQueryRE.test(url) -export function removeImportQuery(url: string) { +export function removeImportQuery(url: string): string { return url.replace(importQueryRE, '$1').replace(trailingSeparatorRE, '') } -export function injectQuery(url: string, queryToInject: string) { +export function injectQuery(url: string, queryToInject: string): string { // encode percents for consistent behavior with pathToFileURL // see #2614 for details let resolvedUrl = new URL(url.replace(/%/g, '%25'), 'relative:///') @@ -141,7 +144,7 @@ export function injectQuery(url: string, queryToInject: string) { } const timestampRE = /\bt=\d{13}&?\b/ -export function removeTimestampQuery(url: string) { +export function removeTimestampQuery(url: string): string { return url.replace(timestampRE, '').replace(trailingSeparatorRE, '') } @@ -149,7 +152,7 @@ export async function asyncReplace( input: string, re: RegExp, replacer: (match: RegExpExecArray) => string | Promise -) { +): Promise { let match: RegExpExecArray | null let remaining = input let rewritten = '' @@ -162,7 +165,7 @@ export async function asyncReplace( return rewritten } -export function timeFrom(start: number, subtract = 0) { +export function timeFrom(start: number, subtract = 0): string { const time: number | string = Date.now() - start - subtract const timeString = (time + `ms`).padEnd(5, ' ') if (time < 10) { @@ -177,7 +180,7 @@ export function timeFrom(start: number, subtract = 0) { /** * pretty url for logging. */ -export function prettifyUrl(url: string, root: string) { +export function prettifyUrl(url: string, root: string): string { url = removeTimestampQuery(url) const isAbsoluteFile = url.startsWith(root) if (isAbsoluteFile || url.startsWith(FS_PREFIX)) { @@ -223,7 +226,7 @@ const splitRE = /\r?\n/ const range: number = 2 -export function pad(source: string, n = 2) { +export function pad(source: string, n = 2): string { const lines = source.split(splitRE) return lines.map((l) => ` `.repeat(n) + l).join(`\n`) } @@ -245,7 +248,7 @@ export function posToNumber( export function numberToPos( source: string, offset: number | { line: number; column: number } -) { +): { line: number; column: number } { if (typeof offset !== 'number') return offset if (offset > source.length) { throw new Error('offset is longer than source length!') @@ -309,7 +312,10 @@ export function generateCodeFrame( return res.join('\n') } -export function writeFile(filename: string, content: string | Uint8Array) { +export function writeFile( + filename: string, + content: string | Uint8Array +): void { const dir = path.dirname(filename) if (!fs.existsSync(dir)) { fs.mkdirSync(dir, { recursive: true }) @@ -317,7 +323,7 @@ export function writeFile(filename: string, content: string | Uint8Array) { fs.writeFileSync(filename, content) } -export function emptyDir(dir: string) { +export function emptyDir(dir: string): void { if (!fs.existsSync(dir)) { return } @@ -333,7 +339,7 @@ export function emptyDir(dir: string) { } } -export function copyDir(srcDir: string, destDir: string) { +export function copyDir(srcDir: string, destDir: string): void { fs.mkdirSync(destDir, { recursive: true }) for (const file of fs.readdirSync(srcDir)) { const srcFile = path.resolve(srcDir, file) @@ -351,7 +357,7 @@ export function ensureWatchedFile( watcher: FSWatcher, file: string | null, root: string -) { +): void { if ( file && // only need to watch if out of root @@ -373,7 +379,7 @@ const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g export async function processSrcSet( srcs: string, replacer: (arg: ImageCandidate) => Promise -) { +): Promise { const imageCandidates: ImageCandidate[] = srcs.split(',').map((s) => { const [url, descriptor] = s .replace(escapedSpaceCharacters, ' ') From 81b80c69d6bb00f54aae0481ea78f869db35725d Mon Sep 17 00:00:00 2001 From: Kevin Hazy <0x142857@gmail.com> Date: Thu, 15 Apr 2021 03:23:12 +0800 Subject: [PATCH 42/46] feat: add inlineConfig.envFile option (#2475) --- docs/guide/api-javascript.md | 1 + packages/vite/src/node/config.ts | 5 +++-- packages/vite/src/node/server/hmr.ts | 8 ++++++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/guide/api-javascript.md b/docs/guide/api-javascript.md index c1e8834a7c70e7..f67f0592255865 100644 --- a/docs/guide/api-javascript.md +++ b/docs/guide/api-javascript.md @@ -33,6 +33,7 @@ const { createServer } = require('vite') The `InlineConfig` interface extends `UserConfig` with additional properties: - `configFile`: specify config file to use. If not set, Vite will try to automatically resolve one from project root. Set to `false` to disable auto resolving. +- `envFile`: Set to `false` to disable `.env` files. ## `ViteDevServer` diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 883378d6eb1aec..68944e44741810 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -160,12 +160,13 @@ export interface SSROptions { export interface InlineConfig extends UserConfig { configFile?: string | false + envFile?: false } export type ResolvedConfig = Readonly< Omit & { configFile: string | undefined - inlineConfig: UserConfig + inlineConfig: InlineConfig root: string base: string publicDir: string @@ -273,7 +274,7 @@ export async function resolveConfig( } // load .env files - const userEnv = loadEnv(mode, resolvedRoot) + const userEnv = inlineConfig.envFile !== false && loadEnv(mode, resolvedRoot) // Note it is possible for user to have a custom mode, e.g. `staging` where // production-like behavior is expected. This is indicated by NODE_ENV=production diff --git a/packages/vite/src/node/server/hmr.ts b/packages/vite/src/node/server/hmr.ts index 4ad09c81b477d4..2692ce557d8b32 100644 --- a/packages/vite/src/node/server/hmr.ts +++ b/packages/vite/src/node/server/hmr.ts @@ -44,11 +44,15 @@ export async function handleHMRUpdate( const { ws, config, moduleGraph } = server const shortFile = getShortName(file, config.root) - if (file === config.configFile || file.endsWith('.env')) { + const isConfig = file === config.configFile + const isEnv = config.inlineConfig.envFile !== false && file.endsWith('.env') + if (isConfig || isEnv) { // auto restart server debugHmr(`[config change] ${chalk.dim(shortFile)}`) config.logger.info( - chalk.green('config or .env file changed, restarting server...'), + chalk.green( + `${isConfig ? 'config' : '.env'} file changed, restarting server...` + ), { clear: true, timestamp: true } ) await restartServer(server) From 176e55dd1bf0232f483697d35b95f6e29a47fd74 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 15 Apr 2021 03:28:00 +0800 Subject: [PATCH 43/46] feat(create-app): two-level prompt for framework and variants (#2941) Co-authored-by: Shinigami --- packages/create-app/index.js | 170 ++++++++++++++++++++++++++++++----- 1 file changed, 146 insertions(+), 24 deletions(-) diff --git a/packages/create-app/index.js b/packages/create-app/index.js index 60bac17a7f4379..e0548bec6b9949 100755 --- a/packages/create-app/index.js +++ b/packages/create-app/index.js @@ -4,34 +4,123 @@ const fs = require('fs') const path = require('path') const argv = require('minimist')(process.argv.slice(2)) +// eslint-disable-next-line node/no-restricted-require const { prompt } = require('enquirer') const { yellow, green, cyan, + blue, magenta, lightRed, - red, - stripColors + red } = require('kolorist') const cwd = process.cwd() -const TEMPLATES = [ - yellow('vanilla'), - yellow('vanilla-ts'), - green('vue'), - green('vue-ts'), - cyan('react'), - cyan('react-ts'), - magenta('preact'), - magenta('preact-ts'), - lightRed('lit-element'), - lightRed('lit-element-ts'), - red('svelte'), - red('svelte-ts') +const FRAMEWORKS = [ + { + name: 'vanilla', + color: yellow, + variants: [ + { + name: 'vanilla', + display: 'JavaScript', + color: yellow + }, + { + name: 'vanilla-ts', + display: 'TypeScript', + color: blue + } + ] + }, + { + name: 'vue', + color: green, + variants: [ + { + name: 'vue', + display: 'JavaScript', + color: yellow + }, + { + name: 'vue-ts', + display: 'TypeScript', + color: blue + } + ] + }, + { + name: 'react', + color: cyan, + variants: [ + { + name: 'react', + display: 'JavaScript', + color: yellow + }, + { + name: 'react-ts', + display: 'TypeScript', + color: blue + } + ] + }, + { + name: 'preact', + color: magenta, + variants: [ + { + name: 'preact', + display: 'JavaScript', + color: yellow + }, + { + name: 'preact-ts', + display: 'TypeScript', + color: blue + } + ] + }, + { + name: 'lit-element', + color: lightRed, + variants: [ + { + name: 'lit-element', + display: 'JavaScript', + color: yellow + }, + { + name: 'lit-element-ts', + display: 'TypeScript', + color: blue + } + ] + }, + { + name: 'svelte', + color: red, + variants: [ + { + name: 'svelte', + display: 'JavaScript', + color: yellow + }, + { + name: 'svelte-ts', + display: 'TypeScript', + color: blue + } + ] + } ] +const TEMPLATES = FRAMEWORKS.map( + (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name] +).reduce((a, b) => a.concat(b), []) + const renameFiles = { _gitignore: '.gitignore' } @@ -52,7 +141,6 @@ async function init() { } const packageName = await getValidPackageName(targetDir) const root = path.join(cwd, targetDir) - console.log(`\nScaffolding project in ${root}...`) if (!fs.existsSync(root)) { fs.mkdirSync(root, { recursive: true }) @@ -80,29 +168,63 @@ async function init() { // determine template let template = argv.t || argv.template - let message = 'Select a template:' + let message = 'Select a framework:' let isValidTemplate = false // --template expects a value if (typeof template === 'string') { - const availableTemplates = TEMPLATES.map(stripColors) - isValidTemplate = availableTemplates.includes(template) + isValidTemplate = TEMPLATES.includes(template) message = `${template} isn't a valid template. Please choose from below:` } if (!template || !isValidTemplate) { /** - * @type {{ t: string }} + * @type {{ framework: string }} */ - const { t } = await prompt({ + const { framework } = await prompt({ type: 'select', - name: 't', + name: 'framework', message, - choices: TEMPLATES + format(name) { + const framework = FRAMEWORKS.find((v) => v.name === name) + return framework + ? framework.color(framework.display || framework.name) + : name + }, + choices: FRAMEWORKS.map((f) => ({ + name: f.name, + value: f.name, + message: f.color(f.display || f.name) + })) }) - template = stripColors(t) + const frameworkInfo = FRAMEWORKS.find((f) => f.name === framework) + + if (frameworkInfo.variants) { + /** + * @type {{ name: string }} + */ + const { name } = await prompt({ + type: 'select', + name: 'name', + format(name) { + const variant = frameworkInfo.variants.find((v) => v.name === name) + return variant ? variant.color(variant.display || variant.name) : name + }, + message: 'Select a variant:', + choices: frameworkInfo.variants.map((v) => ({ + name: v.name, + value: v.name, + message: v.color(v.display || v.name) + })) + }) + template = name + } else { + template = frameworkInfo.name + } } + console.log(`\nScaffolding project in ${root}...`) + const templateDir = path.join(__dirname, `template-${template}`) const write = (file, content) => { From 41261c70e6d65ddf1dca52a6e94e5aa555539581 Mon Sep 17 00:00:00 2001 From: Chris Santamaria Date: Wed, 14 Apr 2021 15:30:32 -0400 Subject: [PATCH 44/46] fix(build): properly handle alias key in config merge (#2847) Co-authored-by: Anthony Fu --- .../vite/src/node/__tests__/config.spec.ts | 94 +++++++++++++++++++ packages/vite/src/node/config.ts | 28 ++++-- 2 files changed, 114 insertions(+), 8 deletions(-) create mode 100644 packages/vite/src/node/__tests__/config.spec.ts diff --git a/packages/vite/src/node/__tests__/config.spec.ts b/packages/vite/src/node/__tests__/config.spec.ts new file mode 100644 index 00000000000000..1e2dc6fce8124e --- /dev/null +++ b/packages/vite/src/node/__tests__/config.spec.ts @@ -0,0 +1,94 @@ +import { mergeConfig, UserConfigExport } from '../config' + +describe('mergeConfig', () => { + test('handles configs with different alias schemas', () => { + const baseConfig: UserConfigExport = { + resolve: { + alias: [ + { + find: 'foo', + replacement: 'foo-value' + } + ] + } + } + + const newConfig: UserConfigExport = { + resolve: { + alias: { + bar: 'bar-value', + baz: 'baz-value' + } + } + } + + const mergedConfig: UserConfigExport = { + resolve: { + alias: [ + { + find: 'foo', + replacement: 'foo-value' + }, + { + find: 'bar', + replacement: 'bar-value' + }, + { + find: 'baz', + replacement: 'baz-value' + } + ] + } + } + + expect(mergeConfig(baseConfig, newConfig)).toEqual(mergedConfig) + }) + + test('handles assetsInclude', () => { + const baseConfig: UserConfigExport = { + assetsInclude: 'some-string' + } + + const newConfig: UserConfigExport = { + assetsInclude: ['some-other-string', /regexp?/] + } + + const mergedConfig: UserConfigExport = { + assetsInclude: ['some-string', 'some-other-string', /regexp?/] + } + + expect(mergeConfig(baseConfig, newConfig)).toEqual(mergedConfig) + }) + + test('not handles alias not under `resolve`', () => { + const baseConfig = { + custom: { + alias: { + bar: 'bar-value', + baz: 'baz-value' + } + } + } + + const newConfig = { + custom: { + alias: { + bar: 'bar-value-2', + foo: 'foo-value' + } + } + } + + const mergedConfig = { + custom: { + alias: { + bar: 'bar-value-2', + baz: 'baz-value', + foo: 'foo-value' + } + } + } + + expect(mergeConfig(baseConfig, newConfig)).toEqual(mergedConfig) + }) +}) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 68944e44741810..a0cf1e8ef971cd 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -502,11 +502,11 @@ function resolveBaseUrl( return base } -export function mergeConfig( +function mergeConfigRecursively( a: Record, b: Record, - isRoot = true -): Record { + rootPath: string +) { const merged: Record = { ...a } for (const key in b) { const value = b[key] @@ -520,16 +520,20 @@ export function mergeConfig( continue } if (isObject(existing) && isObject(value)) { - merged[key] = mergeConfig(existing, value, false) + merged[key] = mergeConfigRecursively( + existing, + value, + rootPath ? `${rootPath}.${key}` : key + ) continue } - // root fields that require special handling - if (existing != null && isRoot) { - if (key === 'alias') { + // fields that require special handling + if (existing != null) { + if (key === 'alias' && (rootPath === 'resolve' || rootPath === '')) { merged[key] = mergeAlias(existing, value) continue - } else if (key === 'assetsInclude') { + } else if (key === 'assetsInclude' && rootPath === '') { merged[key] = [].concat(existing, value) continue } @@ -540,6 +544,14 @@ export function mergeConfig( return merged } +export function mergeConfig( + a: Record, + b: Record, + isRoot = true +): Record { + return mergeConfigRecursively(a, b, isRoot ? '' : '.') +} + function mergeAlias(a: AliasOptions = [], b: AliasOptions = []): Alias[] { return [...normalizeAlias(a), ...normalizeAlias(b)] } From fd1c9ba11bff634c10e23a9cad2e5d639145ccf6 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 15 Apr 2021 00:09:12 -0700 Subject: [PATCH 45/46] fix: don't resolve import using browser during SSR (fix #2995) (#2996) --- packages/vite/src/node/plugins/resolve.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts index 0d6a07a9042375..891767e1ba1323 100644 --- a/packages/vite/src/node/plugins/resolve.ts +++ b/packages/vite/src/node/plugins/resolve.ts @@ -124,7 +124,10 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin { const fsPath = path.resolve(basedir, id) // handle browser field mapping for relative imports - if ((res = tryResolveBrowserMapping(fsPath, importer, options, true))) { + if ( + !ssr && + (res = tryResolveBrowserMapping(fsPath, importer, options, true)) + ) { return res } From 146143c375d2f24b1e0d1d9ee07f01e6510dca1f Mon Sep 17 00:00:00 2001 From: patak-js Date: Thu, 15 Apr 2021 09:19:23 +0200 Subject: [PATCH 46/46] release: create-app@2.2.4 --- packages/create-app/CHANGELOG.md | 16 ++++++++++++++++ packages/create-app/package.json | 2 +- .../template-lit-element-ts/package.json | 2 +- .../create-app/template-lit-element/package.json | 2 +- .../create-app/template-preact-ts/package.json | 2 +- packages/create-app/template-preact/package.json | 2 +- .../create-app/template-react-ts/package.json | 2 +- packages/create-app/template-react/package.json | 2 +- .../create-app/template-svelte-ts/package.json | 2 +- packages/create-app/template-svelte/package.json | 2 +- .../create-app/template-vanilla-ts/package.json | 2 +- .../create-app/template-vanilla/package.json | 2 +- packages/create-app/template-vue-ts/package.json | 2 +- packages/create-app/template-vue/package.json | 2 +- 14 files changed, 29 insertions(+), 13 deletions(-) diff --git a/packages/create-app/CHANGELOG.md b/packages/create-app/CHANGELOG.md index 89c02e044146d7..be51b5d1c42d49 100644 --- a/packages/create-app/CHANGELOG.md +++ b/packages/create-app/CHANGELOG.md @@ -1,3 +1,19 @@ +## [2.2.4](https://github.com/vitejs/vite/compare/create-app@2.2.3...create-app@2.2.4) (2021-04-15) + + +### Bug Fixes + +* **create-app:** change index.html templates' favicon.svg href to absolute URL ([#2620](https://github.com/vitejs/vite/issues/2620)) ([3816f6e](https://github.com/vitejs/vite/commit/3816f6edb67e6bdf94db98e82e8acff4029bfe48)) +* **create-app:** the node in the svelte template is incorrectly mounted ([#2947](https://github.com/vitejs/vite/issues/2947)) ([0825f7e](https://github.com/vitejs/vite/commit/0825f7ee3574ae3f28f566da27835fbf3b210fac)) + + +### Features + +* **create-app:** add template vanilla-ts ([#2023](https://github.com/vitejs/vite/issues/2023)) ([89898d3](https://github.com/vitejs/vite/commit/89898d36cbe03bce9b6a7ab80a1c45de9989e56e)) +* **create-app:** two-level prompt for framework and variants ([#2941](https://github.com/vitejs/vite/issues/2941)) ([176e55d](https://github.com/vitejs/vite/commit/176e55dd1bf0232f483697d35b95f6e29a47fd74)) + + + ## [2.2.3](https://github.com/vitejs/vite/compare/create-app@2.2.2...create-app@2.2.3) (2021-03-31) diff --git a/packages/create-app/package.json b/packages/create-app/package.json index 0436bf6c239b12..b1a84223ad8b1e 100644 --- a/packages/create-app/package.json +++ b/packages/create-app/package.json @@ -1,6 +1,6 @@ { "name": "@vitejs/create-app", - "version": "2.2.3", + "version": "2.2.4", "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 e75bc7d31a4b81..6187f3cb45c47a 100644 --- a/packages/create-app/template-lit-element-ts/package.json +++ b/packages/create-app/template-lit-element-ts/package.json @@ -21,4 +21,4 @@ "vite": "^2.1.5", "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 652ab069112e2b..a0305ac31b72fe 100644 --- a/packages/create-app/template-lit-element/package.json +++ b/packages/create-app/template-lit-element/package.json @@ -18,4 +18,4 @@ "devDependencies": { "vite": "^2.1.5" } -} +} \ 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 8c3a22ec3f9322..c1c30dbbf5450a 100644 --- a/packages/create-app/template-preact-ts/package.json +++ b/packages/create-app/template-preact-ts/package.json @@ -14,4 +14,4 @@ "typescript": "^4.1.3", "vite": "^2.1.5" } -} +} \ 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 2de01c658f685f..ed6e100d0b0e64 100644 --- a/packages/create-app/template-preact/package.json +++ b/packages/create-app/template-preact/package.json @@ -13,4 +13,4 @@ "@preact/preset-vite": "^2.0.0", "vite": "^2.1.5" } -} +} \ 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 18997ac311b416..4ed547b5ef53cb 100644 --- a/packages/create-app/template-react-ts/package.json +++ b/packages/create-app/template-react-ts/package.json @@ -17,4 +17,4 @@ "typescript": "^4.1.2", "vite": "^2.1.5" } -} +} \ 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 ccf4a7b2072ea1..6411b42284a7e0 100644 --- a/packages/create-app/template-react/package.json +++ b/packages/create-app/template-react/package.json @@ -14,4 +14,4 @@ "@vitejs/plugin-react-refresh": "^1.3.1", "vite": "^2.1.5" } -} +} \ No newline at end of file diff --git a/packages/create-app/template-svelte-ts/package.json b/packages/create-app/template-svelte-ts/package.json index 1111c5b5b7bc9a..7ca9fd9b9e524d 100644 --- a/packages/create-app/template-svelte-ts/package.json +++ b/packages/create-app/template-svelte-ts/package.json @@ -13,4 +13,4 @@ "typescript": "^4.2.3", "vite": "^2.1.5" } -} +} \ No newline at end of file diff --git a/packages/create-app/template-svelte/package.json b/packages/create-app/template-svelte/package.json index d8af9254125228..5fcb083b2b301b 100644 --- a/packages/create-app/template-svelte/package.json +++ b/packages/create-app/template-svelte/package.json @@ -11,4 +11,4 @@ "svelte": "^3.35.0", "vite": "^2.1.5" } -} +} \ No newline at end of file diff --git a/packages/create-app/template-vanilla-ts/package.json b/packages/create-app/template-vanilla-ts/package.json index 67c488c418847e..0c72ddab9a6e87 100644 --- a/packages/create-app/template-vanilla-ts/package.json +++ b/packages/create-app/template-vanilla-ts/package.json @@ -10,4 +10,4 @@ "typescript": "^4.2.3", "vite": "^2.1.5" } -} +} \ 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 2dae8d9761e1bc..80d36d9d5af3c0 100644 --- a/packages/create-app/template-vanilla/package.json +++ b/packages/create-app/template-vanilla/package.json @@ -9,4 +9,4 @@ "devDependencies": { "vite": "^2.1.5" } -} +} \ No newline at end of file diff --git a/packages/create-app/template-vue-ts/package.json b/packages/create-app/template-vue-ts/package.json index 2b5f0896a2d197..6433a593fe4079 100644 --- a/packages/create-app/template-vue-ts/package.json +++ b/packages/create-app/template-vue-ts/package.json @@ -16,4 +16,4 @@ "vite": "^2.1.5", "vue-tsc": "^0.0.24" } -} +} \ No newline at end of file diff --git a/packages/create-app/template-vue/package.json b/packages/create-app/template-vue/package.json index f46af73be732b5..acc119e8696914 100644 --- a/packages/create-app/template-vue/package.json +++ b/packages/create-app/template-vue/package.json @@ -14,4 +14,4 @@ "@vue/compiler-sfc": "^3.0.5", "vite": "^2.1.5" } -} +} \ No newline at end of file