From b43cad9d22d6fa229e014e35f139cfd64a5cf130 Mon Sep 17 00:00:00 2001 From: patak <583075+patak-dev@users.noreply.github.com> Date: Tue, 20 Feb 2024 07:50:58 +0100 Subject: [PATCH 01/22] chore: review team members (#15969) --- _data/team.js | 95 +++++++++++++++++++++++++-------------------------- 1 file changed, 47 insertions(+), 48 deletions(-) diff --git a/_data/team.js b/_data/team.js index d62b5e55..a58e4cab 100644 --- a/_data/team.js +++ b/_data/team.js @@ -64,54 +64,6 @@ export const core = [ ], sponsor: 'https://github.com/sponsors/sapphi-red', }, - { - avatar: 'https://github.com/sodatea.png', - name: 'Haoqun Jiang', - title: 'Developer', - org: 'Vue.js', - orgLink: 'https://vuejs.org/', - desc: 'Vue/Vite core team member. Full-time open sourcerer.', - links: [ - { icon: 'github', link: 'https://github.com/sodatea' }, - { icon: 'twitter', link: 'https://twitter.com/haoqunjiang' }, - { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@haoqun' }, - ], - sponsor: 'https://github.com/sponsors/sodatea', - }, - { - avatar: 'https://github.com/Shinigami92.png', - name: 'Shinigami', - title: 'Maintainer', - org: 'Faker', - orgLink: 'https://fakerjs.dev', - desc: 'Passionate TypeScript enthusiast working extensively with Vue SPA and pug.', - links: [ - { icon: 'github', link: 'https://github.com/Shinigami92' }, - { icon: 'mastodon', link: 'https://elk.zone/mas.to/@Shini92' }, - ], - sponsor: 'https://github.com/sponsors/Shinigami92', - }, - { - avatar: 'https://i.imgur.com/KMed6rQ.jpeg', - name: 'Alec Larson', - title: 'Entrepreneur', - desc: 'Dabbling in social ecommerce, meta frameworks, and board games', - links: [ - { icon: 'github', link: 'https://github.com/aleclarson' }, - { icon: 'twitter', link: 'https://twitter.com/retropragma' }, - ], - sponsor: 'https://github.com/sponsors/aleclarson', - }, - { - avatar: 'https://github.com/poyoho.png', - name: 'yoho', - title: 'Frontend Developer', - desc: 'Frontend. Vite team member.', - links: [ - { icon: 'github', link: 'https://github.com/poyoho' }, - { icon: 'twitter', link: 'https://twitter.com/yoho_po' }, - ], - }, { avatar: 'https://github.com/ArnaudBarre.png', name: 'Arnaud Barré', @@ -147,9 +99,56 @@ export const core = [ ], sponsor: 'https://github.com/sponsors/sheremet-va', }, + { + avatar: 'https://github.com/Shinigami92.png', + name: 'Shinigami', + title: 'Maintainer', + org: 'Faker', + orgLink: 'https://fakerjs.dev', + desc: 'Passionate TypeScript enthusiast working extensively with Vue SPA and pug.', + links: [ + { icon: 'github', link: 'https://github.com/Shinigami92' }, + { icon: 'mastodon', link: 'https://elk.zone/mas.to/@Shini92' }, + ], + sponsor: 'https://github.com/sponsors/Shinigami92', + }, + { + avatar: 'https://github.com/sodatea.png', + name: 'Haoqun Jiang', + title: 'Developer', + org: 'Vue.js', + orgLink: 'https://vuejs.org/', + desc: 'Vue/Vite core team member. Full-time open sourcerer.', + links: [ + { icon: 'github', link: 'https://github.com/sodatea' }, + { icon: 'twitter', link: 'https://twitter.com/haoqunjiang' }, + { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@haoqun' }, + ], + sponsor: 'https://github.com/sponsors/sodatea', + }, ] export const emeriti = [ + { + avatar: 'https://i.imgur.com/KMed6rQ.jpeg', + name: 'Alec Larson', + title: 'Entrepreneur', + desc: 'Dabbling in social ecommerce, meta frameworks, and board games', + links: [ + { icon: 'github', link: 'https://github.com/aleclarson' }, + { icon: 'twitter', link: 'https://twitter.com/retropragma' }, + ], + }, + { + avatar: 'https://github.com/poyoho.png', + name: 'yoho', + title: 'Frontend Developer', + desc: 'Frontend. Vite team member.', + links: [ + { icon: 'github', link: 'https://github.com/poyoho' }, + { icon: 'twitter', link: 'https://twitter.com/yoho_po' }, + ], + }, { avatar: 'https://github.com/ygj6.png', name: 'ygj6', From 9fbb7478e5a48456c9cda82760331e976f83769c Mon Sep 17 00:00:00 2001 From: Martin Krisnanto Putra Date: Tue, 20 Feb 2024 23:01:03 +0900 Subject: [PATCH 02/22] docs: add canonical url in head (#15984) --- .vitepress/config.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 6222cdbd..ad88cf1e 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -331,5 +331,16 @@ export default defineConfig({ level: [2, 3], }, }, + transformPageData(pageData) { + const canonicalUrl = `${ogUrl}/${pageData.relativePath}` + .replace(/\/index\.md$/, '/') + .replace(/\.md$/, '/') + pageData.frontmatter.head ??= [] + pageData.frontmatter.head.unshift([ + 'link', + { rel: 'canonical', href: canonicalUrl }, + ]) + return pageData + }, buildEnd, }) From 9bc79d63d2f591607f3ab4e345ba25d2957d1f58 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Wed, 21 Feb 2024 15:20:29 +0800 Subject: [PATCH 03/22] docs(hmr): improve handleHotUpdate and add further reading (#15996) --- guide/api-hmr.md | 6 ++++++ guide/api-plugin.md | 24 +++++++++++++++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/guide/api-hmr.md b/guide/api-hmr.md index e55f0af4..a24fe277 100644 --- a/guide/api-hmr.md +++ b/guide/api-hmr.md @@ -206,3 +206,9 @@ Send custom events back to Vite's dev server. If called before connected, the data will be buffered and sent once the connection is established. See [Client-server Communication](/guide/api-plugin.html#client-server-communication) for more details. + +## Further Reading + +If you'd like to learn more about how to use the HMR API and how it works under-the-hood. Check out these resources: + +- [Hot Module Replacement is Easy](https://bjornlu.com/blog/hot-module-replacement-is-easy) diff --git a/guide/api-plugin.md b/guide/api-plugin.md index 40b8261d..eb62b70c 100644 --- a/guide/api-plugin.md +++ b/guide/api-plugin.md @@ -402,6 +402,7 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo ### `handleHotUpdate` - **Type:** `(ctx: HmrContext) => Array | void | Promise | void>` +- **See also:** [HMR API](./api-hmr) Perform custom HMR update handling. The hook receives a context object with the following signature: @@ -423,10 +424,31 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo - Filter and narrow down the affected module list so that the HMR is more accurate. - - Return an empty array and perform complete custom HMR handling by sending custom events to the client (example uses `server.hot` which was introduced in Vite 5.1, it is recommended to also use `server.ws` if you support lower versions): + - Return an empty array and perform a full reload: + + ```js + handleHotUpdate({ server, modules, timestamp }) { + // Also use `server.ws.send` to support Vite <5.1 if needed + server.hot.send({ type: 'full-reload' }) + // Invalidate modules manually + const invalidatedModules = new Set() + for (const mod of modules) { + server.moduleGraph.invalidateModule( + mod, + invalidatedModules, + timestamp, + true + ) + } + return [] + } + ``` + + - Return an empty array and perform complete custom HMR handling by sending custom events to the client: ```js handleHotUpdate({ server }) { + // Also use `server.ws.send` to support Vite <5.1 if needed server.hot.send({ type: 'custom', event: 'special-update', From 7989704b5a0bce3cec0e5a10d9fe4fe9ac3d6e4d Mon Sep 17 00:00:00 2001 From: waynzh Date: Mon, 26 Feb 2024 11:27:14 +0800 Subject: [PATCH 04/22] docs(cn): resolve conflicts --- guide/api-hmr.md | 10 +++------- guide/api-plugin.md | 20 ++++++-------------- 2 files changed, 9 insertions(+), 21 deletions(-) diff --git a/guide/api-hmr.md b/guide/api-hmr.md index e047029f..a8735921 100644 --- a/guide/api-hmr.md +++ b/guide/api-hmr.md @@ -203,14 +203,10 @@ import.meta.hot.accept((module) => { 如果在连接前调用，数据会先被缓存、等到连接建立好后再发送。 -<<<<<<< HEAD 查看 [客户端与服务器的数据交互](/guide/api-plugin.html#client-server-communication) 一节获取更多细节。 -======= -See [Client-server Communication](/guide/api-plugin.html#client-server-communication) for more details. -## Further Reading +## 推荐阅读 {#further-reading} -If you'd like to learn more about how to use the HMR API and how it works under-the-hood. Check out these resources: +如果你想深入了解如何使用 HMR API，以及它的内部运作机制，可以参考以下资源： -- [Hot Module Replacement is Easy](https://bjornlu.com/blog/hot-module-replacement-is-easy) ->>>>>>> 9bc79d63d2f591607f3ab4e345ba25d2957d1f58 +- [热模块替换其实很简单](https://bjornlu.com/blog/hot-module-replacement-is-easy) diff --git a/guide/api-plugin.md b/guide/api-plugin.md index e527bc5f..6186237d 100644 --- a/guide/api-plugin.md +++ b/guide/api-plugin.md @@ -400,12 +400,8 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子 ### `handleHotUpdate` {#handlehotupdate} -<<<<<<< HEAD - **类型：** `(ctx: HmrContext) => Array | void | Promise | void>` -======= -- **Type:** `(ctx: HmrContext) => Array | void | Promise | void>` -- **See also:** [HMR API](./api-hmr) ->>>>>>> 9bc79d63d2f591607f3ab4e345ba25d2957d1f58 +- **参见：** [HMR API](./api-hmr) 执行自定义 HMR 更新处理。钩子接收一个带有以下签名的上下文对象： @@ -427,16 +423,13 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子 - 过滤和缩小受影响的模块列表，使 HMR 更准确。 -<<<<<<< HEAD - - 返回一个空数组，并通过向客户端发送自定义事件来执行完整的自定义 HMR 处理（示例使用了在 Vite 5.1 中引入的 `server.hot`，如果你想支持较低版本，建议使用 `server.ws`）: -======= - - Return an empty array and perform a full reload: + - 返回一个空数组并进行全面刷新： ```js handleHotUpdate({ server, modules, timestamp }) { - // Also use `server.ws.send` to support Vite <5.1 if needed + // 如果需要，也可使用 `server.ws.send` 来支持 Vite <5.1 版本 server.hot.send({ type: 'full-reload' }) - // Invalidate modules manually + // 手动使模块失效 const invalidatedModules = new Set() for (const mod of modules) { server.moduleGraph.invalidateModule( @@ -450,12 +443,11 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子 } ``` - - Return an empty array and perform complete custom HMR handling by sending custom events to the client: ->>>>>>> 9bc79d63d2f591607f3ab4e345ba25d2957d1f58 + - 返回一个空数组，并通过向客户端发送自定义事件，来进行完全自定义的 HMR处理： ```js handleHotUpdate({ server }) { - // Also use `server.ws.send` to support Vite <5.1 if needed + // 如果需要，也可使用 `server.ws.send` 来支持 Vite <5.1 版本 server.hot.send({ type: 'custom', event: 'special-update', From 32605fc83db272a28b3e1d9719dff911213c1b80 Mon Sep 17 00:00:00 2001 From: Stan Hu Date: Fri, 1 Mar 2024 04:12:07 -0800 Subject: [PATCH 05/22] docs(hmr): document `hmr.protocol` setting (#16056) --- config/server-options.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config/server-options.md b/config/server-options.md index 5b1480ac..8ae5f5cb 100644 --- a/config/server-options.md +++ b/config/server-options.md @@ -152,6 +152,8 @@ Disable or configure HMR connection (in cases where the HMR websocket must use a Set `server.hmr.overlay` to `false` to disable the server error overlay. +`protocol` sets the WebSocket protocol used for the HMR connection: `ws` (WebSocket) or `wss` (WebSocket Secure). + `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. When `server.hmr.server` is defined, Vite will process the HMR connection requests through the provided server. If not in middleware mode, Vite will attempt to process HMR connection requests through the existing server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port. From 035d250114828d6f3b4c887e4cafb4cd14395bc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=B1=84=EC=A4=80=20-=20CJ=20Lee?= Date: Sat, 2 Mar 2024 23:51:25 -0800 Subject: [PATCH 06/22] docs(assets): add note to inlining SVG through url() (#15534) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 翠 / green --- guide/assets.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/guide/assets.md b/guide/assets.md index dff926f2..657db9de 100644 --- a/guide/assets.md +++ b/guide/assets.md @@ -30,6 +30,16 @@ The behavior is similar to webpack's `file-loader`. The difference is that the i - TypeScript, by default, does not recognize static asset imports as valid modules. To fix this, include [`vite/client`](./features#client-types). +::: tip Inlining SVGs through `url()` +When passing a URL of SVG to a manually constructed `url()` by JS, the variable should be wrapped within double quotes. + +```js +import imgUrl from './img.svg' +document.getElementById('hero-img').style.background = `url("${imgUrl}")` +``` + +::: + ### Explicit URL Imports Assets that are not included in the internal list or in `assetsInclude`, can be explicitly imported as a URL using the `?url` suffix. This is useful, for example, to import [Houdini Paint Worklets](https://houdini.how/usage). From 956dc047fc543e6220c965ddbe1e33e392a84a2c Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Tue, 5 Mar 2024 22:36:35 +0800 Subject: [PATCH 07/22] docs: add reference link for set debug environment variable on Windows (#16097) --- guide/api-hmr.md | 2 +- guide/performance.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/guide/api-hmr.md b/guide/api-hmr.md index a24fe277..e0cd9485 100644 --- a/guide/api-hmr.md +++ b/guide/api-hmr.md @@ -197,7 +197,7 @@ Custom HMR events can also be sent from plugins. See [handleHotUpdate](./api-plu ## `hot.off(event, cb)` -Remove callback from the event listeners +Remove callback from the event listeners. ## `hot.send(event, data)` diff --git a/guide/performance.md b/guide/performance.md index 2d56ca2e..0c56f5ea 100644 --- a/guide/performance.md +++ b/guide/performance.md @@ -26,7 +26,7 @@ However, the performance of community plugins is out of Vite's control, which ma The longer it takes to transform a file, the more significant the request waterfall will be when loading the site in the browser. - You can inspect the duration it takes to transform a file using `DEBUG="vite:plugin-transform" vite` or [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect). Note that as asynchronous operations tend to provide inaccurate timings, you should treat the numbers as a rough estimate, but it should still reveal the more expensive operations. + You can inspect the duration it takes to transform a file using `DEBUG="vite:plugin-transform" vite` or [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect). Note that as asynchronous operations tend to provide inaccurate timings, you should treat the numbers as a rough estimate, but it should still reveal the more expensive operations. For setting environment variables on Windows platform, please refer to the [documentation](https://github.com/debug-js/debug?tab=readme-ov-file#windows-command-prompt-notes). ::: tip Profiling You can run `vite --profile`, visit the site, and press `p + enter` in your terminal to record a `.cpuprofile`. A tool like [speedscope](https://www.speedscope.app) can then be used to inspect the profile and identify the bottlenecks. You can also [share the profiles](https://chat.vitejs.dev) with the Vite team to help us identify performance issues. From 857885bc756b49f643bfc82d40e834cac99b07f3 Mon Sep 17 00:00:00 2001 From: Evan You Date: Sat, 9 Mar 2024 18:36:21 +0800 Subject: [PATCH 08/22] docs: support using different sponsor images for dark mode --- .vitepress/theme/composables/sponsor.ts | 35 ++++++++++++++++++++++++- public/transloadit-dark.svg | 17 ++++++++++++ 2 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 public/transloadit-dark.svg diff --git a/.vitepress/theme/composables/sponsor.ts b/.vitepress/theme/composables/sponsor.ts index ea8a180a..78fd30a1 100644 --- a/.vitepress/theme/composables/sponsor.ts +++ b/.vitepress/theme/composables/sponsor.ts @@ -1,4 +1,4 @@ -import { ref, onMounted } from 'vue' +import { ref, onMounted, onUnmounted } from 'vue' interface Sponsors { special: Sponsor[] @@ -13,6 +13,10 @@ interface Sponsor { name: string img: string url: string + /** + * Expects to also have an **inversed** image with `-dark` postfix. + */ + hasDark?: true } // shared data across instances so we load only once. @@ -58,12 +62,40 @@ const viteSponsors: Pick = { name: 'Transloadit', url: 'https://transloadit.com/?utm_source=vite&utm_medium=referral&utm_campaign=sponsorship&utm_content=website', img: '/transloadit.svg', + hasDark: true, }, ], } +function toggleDarkLogos() { + if (data.value) { + const isDark = document.documentElement.classList.contains('dark') + data.value.forEach(({ items }) => { + items.forEach((s: Sponsor) => { + if (s.hasDark) { + s.img = isDark + ? s.img.replace(/(\.\w+)$/, '-dark$1') + : s.img.replace(/-dark(\.\w+)$/, '$1') + } + }) + }) + } +} + export function useSponsor() { onMounted(async () => { + const ob = new MutationObserver((list) => { + for (const m of list) { + if (m.attributeName === 'class') { + toggleDarkLogos() + } + } + }) + ob.observe(document.documentElement, { attributes: true }) + onUnmounted(() => { + ob.disconnect() + }) + if (data.value) { return } @@ -72,6 +104,7 @@ export function useSponsor() { const json = await result.json() data.value = mapSponsors(json) + toggleDarkLogos() }) return { diff --git a/public/transloadit-dark.svg b/public/transloadit-dark.svg new file mode 100644 index 00000000..f402f7a9 --- /dev/null +++ b/public/transloadit-dark.svg @@ -0,0 +1,17 @@ + + + + + + From 6a160cdee8ec2e193d978477d8af1120f6f6d723 Mon Sep 17 00:00:00 2001 From: BoringBoredom <16615327+BoringBoredom@users.noreply.github.com> Date: Mon, 11 Mar 2024 05:43:59 +0100 Subject: [PATCH 09/22] docs(static-deploy): update workflow (#15773) --- guide/static-deploy.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/guide/static-deploy.md b/guide/static-deploy.md index c5d7446b..199a1ead 100644 --- a/guide/static-deploy.md +++ b/guide/static-deploy.md @@ -98,24 +98,24 @@ Now the `preview` command will launch the server at `http://localhost:8080`. - name: Checkout uses: actions/checkout@v4 - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies - run: npm install + run: npm ci - name: Build run: npm run build - name: Setup Pages - uses: actions/configure-pages@v3 + uses: actions/configure-pages@v4 - name: Upload artifact - uses: actions/upload-pages-artifact@v2 + uses: actions/upload-pages-artifact@v3 with: - # Upload dist repository + # Upload dist folder path: './dist' - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v2 + uses: actions/deploy-pages@v4 ``` ## GitLab Pages and GitLab CI From 7721fe121de13ca9939a272facb3f1b0e421a297 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Tue, 12 Mar 2024 14:52:05 +0900 Subject: [PATCH 10/22] docs: add docs about `vite serve` alias (#16145) --- config/index.md | 2 +- guide/cli.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/index.md b/config/index.md index 6932c7f2..d5da4fdf 100644 --- a/config/index.md +++ b/config/index.md @@ -65,7 +65,7 @@ export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => { }) ``` -It is important to note that in Vite's API the `command` value is `serve` during dev (in the cli `vite`, `vite dev`, and `vite serve` are aliases), and `build` when building for production (`vite build`). +It is important to note that in Vite's API the `command` value is `serve` during dev (in the cli [`vite`](/guide/cli#vite), `vite dev`, and `vite serve` are aliases), and `build` when building for production ([`vite build`](/guide/cli#vite-build)). `isSsrBuild` and `isPreview` are additional optional flags to differentiate the kind of `build` and `serve` commands respectively. Some tools that load the Vite config may not support these flags and will pass `undefined` instead. Hence, it's recommended to use explicit comparison against `true` and `false`. diff --git a/guide/cli.md b/guide/cli.md index bfbd6ca7..8256f081 100644 --- a/guide/cli.md +++ b/guide/cli.md @@ -4,7 +4,7 @@ ### `vite` -Start Vite dev server in the current directory. +Start Vite dev server in the current directory. `vite dev` and `vite serve` are aliases for `vite`. #### Usage From 01850fe731d6c07d320df5d20814356834dd7919 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Tue, 12 Mar 2024 14:52:57 +0900 Subject: [PATCH 11/22] docs: replace `DEBUG="vite:foo"` with `--debug foo` (#16144) --- guide/performance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guide/performance.md b/guide/performance.md index 0c56f5ea..9c30a740 100644 --- a/guide/performance.md +++ b/guide/performance.md @@ -26,7 +26,7 @@ However, the performance of community plugins is out of Vite's control, which ma The longer it takes to transform a file, the more significant the request waterfall will be when loading the site in the browser. - You can inspect the duration it takes to transform a file using `DEBUG="vite:plugin-transform" vite` or [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect). Note that as asynchronous operations tend to provide inaccurate timings, you should treat the numbers as a rough estimate, but it should still reveal the more expensive operations. For setting environment variables on Windows platform, please refer to the [documentation](https://github.com/debug-js/debug?tab=readme-ov-file#windows-command-prompt-notes). + You can inspect the duration it takes to transform a file using `vite --debug plugin-transform` or [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect). Note that as asynchronous operations tend to provide inaccurate timings, you should treat the numbers as a rough estimate, but it should still reveal the more expensive operations. ::: tip Profiling You can run `vite --profile`, visit the site, and press `p + enter` in your terminal to record a `.cpuprofile`. A tool like [speedscope](https://www.speedscope.app) can then be used to inspect the profile and identify the bottlenecks. You can also [share the profiles](https://chat.vitejs.dev) with the Vite team to help us identify performance issues. @@ -84,7 +84,7 @@ The import relationship can only be known after the file is transformed. If `Big Vite allows you to warm up files that you know are frequently used, e.g. `big-utils.js`, using the [`server.warmup`](/config/server-options.md#server-warmup) option. This way `big-utils.js` will be ready and cached to be served immediately when requested. -You can find files that are frequently used by running `DEBUG="vite:transform" vite` and inspect the logs: +You can find files that are frequently used by running `vite --debug transform` and inspect the logs: ```bash vite:transform 28.72ms /@vite/client +1ms From bca1e0d51eb462bbcc5a5de075827606d84e861f Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Tue, 12 Mar 2024 21:15:05 +0800 Subject: [PATCH 12/22] feat(resolve): auto externalize node builtins for `noExternal: true` in node (#16019) --- config/ssr-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/ssr-options.md b/config/ssr-options.md index 0111aa56..1f5cd8e4 100644 --- a/config/ssr-options.md +++ b/config/ssr-options.md @@ -18,7 +18,7 @@ Note that the explicitly listed dependencies (using `string[]` type) will always Prevent listed dependencies from being externalized for SSR, which they will get bundled in build. By default, only linked dependencies are not externalized (for HMR). If you prefer to externalize the linked dependency, you can pass its name to the `ssr.external` option. -If `true`, no dependencies are externalized. However, dependencies explicitly listed in `ssr.external` (using `string[]` type) can take priority and still be externalized. +If `true`, no dependencies are externalized. However, dependencies explicitly listed in `ssr.external` (using `string[]` type) can take priority and still be externalized. If `ssr.target: 'node'` is set, Node.js built-ins will also be externalized by default. Note that if both `ssr.noExternal: true` and `ssr.external: true` are configured, `ssr.noExternal` takes priority and no dependencies are externalized. From b4e46edda81f33f7f6280267aeafa840b3fc8b1a Mon Sep 17 00:00:00 2001 From: Philipp Zerelles <66033561+pzerelles@users.noreply.github.com> Date: Tue, 12 Mar 2024 14:39:57 +0100 Subject: [PATCH 13/22] fix: encode URLs correctly (fix #15298) (#15311) Co-authored-by: bluwy --- guide/build.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/guide/build.md b/guide/build.md index a9c79c3d..4da2ef51 100644 --- a/guide/build.md +++ b/guide/build.md @@ -282,3 +282,5 @@ experimental: { } } ``` + +Note that the `filename` passed is a decoded URL, and if the function returns a URL string, it should also be decoded. Vite will handle the encoding automatically when rendering the URLs. If an object with `runtime` is returned, encoding should be handled yourself where needed as the runtime code will be rendered as is. From f342a05350899a3cce7e395f6fcc96d2f335351e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Wed, 13 Mar 2024 23:47:33 +0900 Subject: [PATCH 14/22] feat: csp nonce support (#16052) Co-authored-by: Andrew <8158705+maccuaa@users.noreply.github.com> Co-authored-by: Justin Tay <49700559+justin-tay@users.noreply.github.com> --- config/shared-options.md | 7 +++++++ guide/features.md | 22 ++++++++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/config/shared-options.md b/config/shared-options.md index d8b81b45..95ec386e 100644 --- a/config/shared-options.md +++ b/config/shared-options.md @@ -163,6 +163,13 @@ Enabling this setting causes vite to determine file identity by the original fil - **Related:** [esbuild#preserve-symlinks](https://esbuild.github.io/api/#preserve-symlinks), [webpack#resolve.symlinks ](https://webpack.js.org/configuration/resolve/#resolvesymlinks) +## html.cspNonce + +- **Type:** `string` +- **Related:** [Content Security Policy (CSP)](/guide/features#content-security-policy-csp) + +A nonce value placeholder that will be used when generating script / style tags. Setting this value will also generate a meta tag with nonce value. + ## css.modules - **Type:** diff --git a/guide/features.md b/guide/features.md index 19e4e3ad..cbb981a0 100644 --- a/guide/features.md +++ b/guide/features.md @@ -642,6 +642,28 @@ import MyWorker from './worker?worker&url' See [Worker Options](/config/worker-options.md) for details on configuring the bundling of all workers. +## Content Security Policy (CSP) + +To deploy CSP, certain directives or configs must be set due to Vite's internals. + +### [`'nonce-{RANDOM}'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#nonce-base64-value) + +When [`html.cspNonce`](/config/shared-options#html-cspnonce) is set, Vite adds a nonce attribute with the specified value to the output script tag and link tag for stylesheets. Note that Vite will not add a nonce attribute to other tags, such as `