From 6f47215c65eeccb9f6cb755e1702364ddf071afa Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Mon, 27 Oct 2025 16:59:27 +0900 Subject: [PATCH 01/10] wip: migration guide --- docs/guide/migration.md | 176 +++++++++++++++++++++++++++++++--------- 1 file changed, 137 insertions(+), 39 deletions(-) diff --git a/docs/guide/migration.md b/docs/guide/migration.md index 42daebc41cb25e..7a1a5d36ef21da 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -1,58 +1,156 @@ -# Migration from v6 +# Migration from v7 -## Node.js Support +## New Features -Vite no longer supports Node.js 18, which reached its EOL. Node.js 20.19+ / 22.12+ is now required. +::: tip Temporary section + +This section will be moved to the release post before the stable release. + +::: + +### Built-in tsconfig `paths` Support + +**_TODO: write this section_** + +### `emitDecoratorMetadata` Support + +**_TODO: write this section_** ## Default Browser Target change -The default browser value of `build.target` is updated to a newer browser. +**_TODO: implement this change later_** -- Chrome 87 → 107 -- Edge 88 → 107 -- Firefox 78 → 104 -- Safari 14.0 → 16.0 +The default browser value of `build.target`, `'baseline-widely-available'`, is updated to a newer browser. -These browser versions align with [Baseline](https://web-platform-dx.github.io/web-features/) Widely Available feature sets as of 2025-05-01. In other words, they were all released before 2022-11-01. +- Chrome 107 → 111 +- Edge 107 → 111 +- Firefox 104 → 114 +- Safari 16.0 → 16.4 -In Vite 5, the default target was named `'modules'`, but this is no longer available. Instead, a new default target `'baseline-widely-available'` is introduced. +These browser versions align with [Baseline](https://web-platform-dx.github.io/web-features/) Widely Available feature sets as of 2026-01-01. In other words, they were all released before 2026-01-01. -## General Changes +## Rolldown Integration + +**_TODO: write this section_** + +### Gradual migration + +`rolldown-vite` package implements Vite 7 with Rolldown integration, but without the other Vite 8 changes. This can be used as a intermediate step to migrate to Vite 8. See [the Rolldown Integration guide](https://v7.vite.dev/guide/rolldown) in the Vite 7 docs to switch to `rolldown-vite` from Vite 7. + +For users migrating from `rolldown-vite` to Vite 8, you can undo the dependencies changes in `package.json` and update to Vite 8. + +### Dependency Optimizer now uses Rolldown + +_**TODO: write this section**_ + +### JS Transformation by Oxc + +_**TODO: write this section**_ + +`esbuild` option, `oxc` option... + +Note that if you use a plugin that uses `transformWithEsbuild` function, you need to install `esbuild` as a dev dependency as it's now an optional dependency. `transformWithEsbuild` function is now deprecated and will be removed in the future. + +TODO: No Native Decorator Support +TODO: `supported` option https://github.com/rolldown/rolldown/issues/6212 + +### JS Minification by Oxc + +Oxc Minifier is now used for JS minification by default. You can use `build.minify: 'esbuild'` option to switch back to esbuild. Note that you need to install `esbuild` as a dev dependency as it's now an optional dependency. + +TODO: explain that `mangleProps` / `reserveProps` / `mangleQuoted` / `mangleCache` options are not supported by Oxc but are supported by esbuild. +TODO: write about different assumptions (https://esbuild.github.io/content-types/#javascript-caveats) + +### CSS Minification by LightningCSS -### Removed Sass legacy API support +LightningCSS is now used for CSS minification by default. You can use `build.cssMinify: 'esbuild'` option to switch back to esbuild. Note that you need to install `esbuild` as a dev dependency as it's now an optional dependency. -As planned, support for the Sass legacy API is removed. Vite now only supports the modern API. You can remove the `css.preprocessorOptions.sass.api` / `css.preprocessorOptions.scss.api` option. +### Consistent CJS Interop + +**_TODO: write this section_** + +https://github.com/rolldown/rolldown/issues/6269 +https://github.com/rolldown/rolldown/issues/6438 +https://esbuild.github.io/content-types/#default-interop + +### Module Resolution Using Format Sniffing + +When both `browser` and `module` fields are present in `package.json`, Vite used to resolve the field based on the content of the file, trying to pick the ESM file for browsers. This was introduced because some packages were using the `module` field to point to ESM files for Node.js and some other packages were using the `browser` field to point to UMD files for browsers. Given that the modern `exports` field solved this problem and is now adopted by many packages, Vite no longer uses this heuristic and always respects the order of the `resolve.mainFields` option. If you were relying on this behavior, you can use the `resolve.alias` option to map the field to the desired file or apply a patch with your package manager (e.g. `patch-package`, `pnpm patch`). + +### Deprecate `build.rollupOptions.output.manualChunks` + +**_TODO: write this section_** + +### Require Calls For Externalized Modules + +`require` calls for externalized modules are now preserved as `require` calls and not converted to `import` statements. + +https://rolldown.rs/in-depth/bundling-cjs#require-external-modules + +_**TODO: write this section**_ + +### `import.meta.url` in UMD / IIFE + +_**TODO: write this section**_ + +https://github.com/rolldown/rolldown/issues/3301 + +### Removed `build.rollupOptions.watch.chokidar` option + +_**TODO: write this section**_ + +`build.rollupOptions.watch.chokidar` option is removed. Please migrate to `build.rollupOptions.watch.notify` option. + +### Deprecations + +The following options are deprecated. + +- `build.rollupOptions`: please use `build.rolldownOptions` instead. +- `esbuild`: please use `oxc` option instead. +- `worker.rollupOptions`: please use `worker.rolldownOptions` instead. +- `optimizeDeps.esbuildOptions`: please use `optimizeDeps.rolldownOptions` instead. + +## General Changes ## Removed deprecated features -- `splitVendorChunkPlugin` (deprecated in v5.2.7) - - This plugin was originally provided to ease migration to Vite v2.9. - - The `build.rollupOptions.output.manualChunks` option can be used to control the chunking behavior if needed. -- Hook-level `enforce` / `transform` for `transformIndexHtml` (deprecated in v4.0.0) - - It was changed to align the interface with [Rollup's object hooks](https://rollupjs.org/plugin-development/#build-hooks:~:text=Instead%20of%20a%20function%2C%20hooks%20can%20also%20be%20objects.). - - `order` should be used instead of `enforce`, and `handler` should be used instead of `transform`. +**_TODO: implement these changes later_** ## Advanced There are other breaking changes which only affect few users. -- [[#19979] chore: declare version range for peer dependencies](https://github.com/vitejs/vite/pull/19979) - - Specified the peer dependencies version range for CSS preprocessors. -- [[#20013] refactor: remove no-op `legacy.proxySsrExternalModules`](https://github.com/vitejs/vite/pull/20013) - - `legacy.proxySsrExternalModules` property had no effect since Vite 6. It is now removed. -- [[#19985] refactor!: remove deprecated no-op type only properties](https://github.com/vitejs/vite/pull/19985) - - The following unused properties are now removed: `ModuleRunnerOptions.root`, `ViteDevServer._importGlobMap`, `ResolvePluginOptions.isFromTsImporter`, `ResolvePluginOptions.getDepsOptimizer`, `ResolvePluginOptions.shouldExternalize`, `ResolvePluginOptions.ssrConfig` -- [[#19986] refactor: remove deprecated env api properties](https://github.com/vitejs/vite/pull/19986) - - These properties were deprecated from the beginning. It is now removed. -- [[#19987] refactor!: remove deprecated `HotBroadcaster` related types](https://github.com/vitejs/vite/pull/19987) - - These types were introduced as part of the now-deprecated Runtime API. It is now removed: `HMRBroadcaster`, `HMRBroadcasterClient`, `ServerHMRChannel`, `HMRChannel` -- [[#19996] fix(ssr)!: don't access `Object` variable in ssr transformed code](https://github.com/vitejs/vite/pull/19996) - - `__vite_ssr_exportName__` is now required for the module runner runtime context. -- [[#20045] fix: treat all `optimizeDeps.entries` values as globs](https://github.com/vitejs/vite/pull/20045) - - `optimizeDeps.entries` now does not receive literal string paths. Instead, it always receives globs. -- [[#20222] feat: apply some middlewares before `configureServer` hook](https://github.com/vitejs/vite/pull/20222), [[#20224] feat: apply some middlewares before `configurePreviewServer` hook](https://github.com/vitejs/vite/pull/20224) - - Some middlewares are now applied before the `configureServer` / `configurePreviewServer` hook. Note that if you don't expect a certain route to apply the [`server.cors`](../config/server-options.md#server-cors) / [`preview.cors`](../config/preview-options.md#preview-cors) option, make sure to remove the related headers from the response. - -## Migration from v5 - -Check the [Migration from v5 Guide](https://v6.vite.dev/guide/migration.html) in the Vite v6 docs first to see the needed changes to port your app to Vite 6, and then proceed with the changes on this page. +- **[TODO: fix before stable release (better if it's fixed before first beta)]** https://github.com/vitejs/rolldown-vite/issues/461 (blocking sveltekit) +- **[TODO: fix before stable release (better if it's fixed before first beta)]** https://github.com/rolldown/rolldown/issues/5867 +- **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/5726 (affects nuxt, qwik) +- **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/3403 (affects sveltekit) +- **[TODO: fix before stable release]** https://github.com/vitejs/rolldown-vite/issues/465 +- **[TODO: fix before stable release]** https://github.com/vitejs/rolldown-vite/issues/450 +- **[TODO: fix before stable release]** Legacy chunks are emitted as an asset file instead of a chunk file due to the lack of prebuilt chunk emit feature ([rolldown#4304](https://github.com/rolldown/rolldown/issues/4034)). This means the chunk related options does not apply to legacy chunks and the manifest file will not include legacy chunks as a chunk file. +- **[TODO: fix before stable release]** resolver cache breaks minor cases in Vitest ([rolldown-vite#466](https://github.com/vitejs/rolldown-vite/issues/466), [vitest#8754](https://github.com/vitest-dev/vitest/issues/8754#issuecomment-3441115032)) +- **[TODO: fix before stable release]** The resolver does not work with yarn pnp ([rolldown-vite#324](https://github.com/vitejs/rolldown-vite/issues/324), [rolldown-vite#392](https://github.com/vitejs/rolldown-vite/issues/392)) +- **[TODO: fix before stable release]** native plugin ordering issue ([rolldown-vite#373](https://github.com/vitejs/rolldown-vite/issues/373)) +- **[TODO: fix before stable release]** `@vite-ignore` comment edge case ([rolldown-vite#426](https://github.com/vitejs/rolldown-vite/issues/426)) +- **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/3403 +- ext glob support ([rolldown-vite#365](https://github.com/vitejs/rolldown-vite/issues/365)) +- `define` does not share reference for objects: When you pass an object as a value to `define`, each variable will have a separate copy of the object. +- `bundle` object changes (`bundle` is an object passed in `generateBundle` / `writeBundle` hooks, returned by `build` function): + - Assigning to `bundle[foo]` is not supported. This is discouraged by Rollup as well. Please use `this.emitFile()` instead. + - the reference is not shared across the hooks ([rolldown-vite#410](https://github.com/vitejs/rolldown-vite/issues/410)) + - `structuredClone(bundle)` errors with `DataCloneError: # could not be cloned`. This is not supported anymore. Please clone it with `structuredClone({ ...bundle })`. ([rolldown-vite#128](https://github.com/vitejs/rolldown-vite/issues/128)) +- **[TODO: clarify this in Rolldown's docs and link it from here]** All parallel hooks in Rollup works as sequential hooks. +- **[TODO: clarify this in Rolldown's docs and link it from here]** `"use strict";` is not injected sometimes. +- Transforming to lower than ES5 with plugin-legacy is not supported ([rolldown-vite#452](https://github.com/vitejs/rolldown-vite/issues/452)) +- Passing the same browser with multiple versions of it to `build.target` option now errors: esbuild selects the latest version of it, which was probably not what you intended. +- Missing support by Rolldown: The following features are not supported by Rolldown and is no longer supported by Vite. + - `build.rollupOptions.output.format: 'system'` ([rolldown#2387](https://github.com/rolldown/rolldown/issues/2387)) + - `build.rollupOptions.output.format: 'amd'` ([rolldown#2387](https://github.com/rolldown/rolldown/issues/2528)) + - Complete support for TypeScript legacy namespace ([oxc-project/oxc#14227](https://github.com/oxc-project/oxc/issues/14227)) + - `shouldTransformCachedModule` hook ([rolldown#4389](https://github.com/rolldown/rolldown/issues/4389)) + - `resolveImportMeta` hook ([rolldown#1010](https://github.com/rolldown/rolldown/issues/1010)) + - `renderDynamicImport` hook ([rolldown#4532](https://github.com/rolldown/rolldown/issues/4532)) + - `resolveFileUrl` hook + +## Migration from v6 + +Check the [Migration from v6 Guide](https://v7.vite.dev/guide/migration.html) in the Vite v7 docs first to see the needed changes to port your app to Vite 7, and then proceed with the changes on this page. From 0ab7f9b1c83b36807965983d2748c1a229356dfc Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Thu, 30 Oct 2025 18:22:16 +0900 Subject: [PATCH 02/10] wip: update --- docs/guide/migration.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guide/migration.md b/docs/guide/migration.md index 7a1a5d36ef21da..072429de9a94a5 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -53,6 +53,7 @@ Note that if you use a plugin that uses `transformWithEsbuild` function, you nee TODO: No Native Decorator Support TODO: `supported` option https://github.com/rolldown/rolldown/issues/6212 +TODO: `jsxSideEffects` option ### JS Minification by Oxc @@ -69,11 +70,10 @@ LightningCSS is now used for CSS minification by default. You can use `build.css **_TODO: write this section_** -https://github.com/rolldown/rolldown/issues/6269 https://github.com/rolldown/rolldown/issues/6438 https://esbuild.github.io/content-types/#default-interop -### Module Resolution Using Format Sniffing +### Removed Module Resolution Using Format Sniffing When both `browser` and `module` fields are present in `package.json`, Vite used to resolve the field based on the content of the file, trying to pick the ESM file for browsers. This was introduced because some packages were using the `module` field to point to ESM files for Node.js and some other packages were using the `browser` field to point to UMD files for browsers. Given that the modern `exports` field solved this problem and is now adopted by many packages, Vite no longer uses this heuristic and always respects the order of the `resolve.mainFields` option. If you were relying on this behavior, you can use the `resolve.alias` option to map the field to the desired file or apply a patch with your package manager (e.g. `patch-package`, `pnpm patch`). @@ -85,6 +85,7 @@ When both `browser` and `module` fields are present in `package.json`, Vite used `require` calls for externalized modules are now preserved as `require` calls and not converted to `import` statements. +https://github.com/rolldown/rolldown/issues/6269 https://rolldown.rs/in-depth/bundling-cjs#require-external-modules _**TODO: write this section**_ @@ -93,7 +94,7 @@ _**TODO: write this section**_ _**TODO: write this section**_ -https://github.com/rolldown/rolldown/issues/3301 +https://rolldown.rs/in-depth/non-esm-output-formats#well-known-import-meta-properties ### Removed `build.rollupOptions.watch.chokidar` option @@ -124,7 +125,6 @@ There are other breaking changes which only affect few users. - **[TODO: fix before stable release (better if it's fixed before first beta)]** https://github.com/rolldown/rolldown/issues/5867 - **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/5726 (affects nuxt, qwik) - **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/3403 (affects sveltekit) -- **[TODO: fix before stable release]** https://github.com/vitejs/rolldown-vite/issues/465 - **[TODO: fix before stable release]** https://github.com/vitejs/rolldown-vite/issues/450 - **[TODO: fix before stable release]** Legacy chunks are emitted as an asset file instead of a chunk file due to the lack of prebuilt chunk emit feature ([rolldown#4304](https://github.com/rolldown/rolldown/issues/4034)). This means the chunk related options does not apply to legacy chunks and the manifest file will not include legacy chunks as a chunk file. - **[TODO: fix before stable release]** resolver cache breaks minor cases in Vitest ([rolldown-vite#466](https://github.com/vitejs/rolldown-vite/issues/466), [vitest#8754](https://github.com/vitest-dev/vitest/issues/8754#issuecomment-3441115032)) From 7ef22ae7a2b0084035a821638a837ff586ad8e7d Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Thu, 6 Nov 2025 00:33:55 +0900 Subject: [PATCH 03/10] wip --- docs/guide/migration.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/guide/migration.md b/docs/guide/migration.md index 072429de9a94a5..0a1065fc3289bf 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -125,7 +125,6 @@ There are other breaking changes which only affect few users. - **[TODO: fix before stable release (better if it's fixed before first beta)]** https://github.com/rolldown/rolldown/issues/5867 - **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/5726 (affects nuxt, qwik) - **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/3403 (affects sveltekit) -- **[TODO: fix before stable release]** https://github.com/vitejs/rolldown-vite/issues/450 - **[TODO: fix before stable release]** Legacy chunks are emitted as an asset file instead of a chunk file due to the lack of prebuilt chunk emit feature ([rolldown#4304](https://github.com/rolldown/rolldown/issues/4034)). This means the chunk related options does not apply to legacy chunks and the manifest file will not include legacy chunks as a chunk file. - **[TODO: fix before stable release]** resolver cache breaks minor cases in Vitest ([rolldown-vite#466](https://github.com/vitejs/rolldown-vite/issues/466), [vitest#8754](https://github.com/vitest-dev/vitest/issues/8754#issuecomment-3441115032)) - **[TODO: fix before stable release]** The resolver does not work with yarn pnp ([rolldown-vite#324](https://github.com/vitejs/rolldown-vite/issues/324), [rolldown-vite#392](https://github.com/vitejs/rolldown-vite/issues/392)) From 1ffd4243b762862108ea08fb118ba1dfcd45da44 Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Thu, 6 Nov 2025 20:09:32 +0900 Subject: [PATCH 04/10] wip --- docs/config/build-options.md | 17 ++- docs/config/dep-optimization-options.md | 25 +++- docs/config/shared-options.md | 30 ++-- docs/guide/migration.md | 176 +++++++++++++++++++----- packages/vite/src/node/config.ts | 5 +- 5 files changed, 191 insertions(+), 62 deletions(-) diff --git a/docs/config/build-options.md b/docs/config/build-options.md index 59282616d3bbfa..058a21f22f7e43 100644 --- a/docs/config/build-options.md +++ b/docs/config/build-options.md @@ -129,10 +129,10 @@ In this case, you need to set `build.cssTarget` to `chrome61` to prevent vite fr ## build.cssMinify -- **Type:** `boolean | 'esbuild' | 'lightningcss'` -- **Default:** the same as [`build.minify`](#build-minify) for client, `'esbuild'` for SSR +- **Type:** `boolean | 'lightningcss' | 'esbuild'` +- **Default:** the same as [`build.minify`](#build-minify) for client, `'lightningcss'` for SSR -This option allows users to override CSS minification specifically instead of defaulting to `build.minify`, so you can configure minification for JS and CSS separately. Vite uses `esbuild` by default to minify CSS. Set the option to `'lightningcss'` to use [Lightning CSS](https://lightningcss.dev/minification.html) instead. If selected, it can be configured using [`css.lightningcss`](./shared-options.md#css-lightningcss). +This option allows users to override CSS minification specifically instead of defaulting to `build.minify`, so you can configure minification for JS and CSS separately. Vite uses [Lightning CSS](https://lightningcss.dev/minification.html) by default to minify CSS. It can be configured using [`css.lightningcss`](./shared-options.md#css-lightningcss). Set the option to `'esbuild'` to use esbuild instead. ## build.sourcemap @@ -277,16 +277,19 @@ During the SSR build, static assets aren't emitted as it is assumed they would b ## build.minify -- **Type:** `boolean | 'terser' | 'esbuild'` -- **Default:** `'esbuild'` for client build, `false` for SSR build +- **Type:** `boolean | 'oxc' | 'terser' | 'esbuild'` +- **Default:** `'oxc'` for client build, `false` for SSR build -Set to `false` to disable minification, or specify the minifier to use. The default is [esbuild](https://github.com/evanw/esbuild) which is 20 ~ 40x faster than terser and only 1 ~ 2% worse compression. [Benchmarks](https://github.com/privatenumber/minification-benchmarks) +Set to `false` to disable minification, or specify the minifier to use. The default is [Oxc Minifier](https://oxc.rs/docs/guide/usage/minifier) which is 30 ~ 90x faster than terser and only 0.5 ~ 2% worse compression. [Benchmarks](https://github.com/privatenumber/minification-benchmarks) + +`build.minify: 'esbuild'` is deprecated and will be removed in the future. Note the `build.minify` option does not minify whitespaces when using the `'es'` format in lib mode, as it removes pure annotations and breaks tree-shaking. -Terser must be installed when it is set to `'terser'`. +esbuild and Terser must be installed when it is set to `'esbuild'` or `'terser'`. ```sh +npm add -D esbuild npm add -D terser ``` diff --git a/docs/config/dep-optimization-options.md b/docs/config/dep-optimization-options.md index deddba9e57bf5b..b22795f06c3c53 100644 --- a/docs/config/dep-optimization-options.md +++ b/docs/config/dep-optimization-options.md @@ -51,6 +51,23 @@ export default defineConfig({ }) ``` +## optimizeDeps.rolldownOptions + +- **Type:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<``RolldownOptions`, `'input' | 'logLevel' | 'output'> & { + output?: [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<` + `RolldownOutputOptions`, + `'format' | 'sourcemap' | 'dir' | 'banner'>` +`}` + + + + +Options to pass to Rolldown during the dep scanning and optimization. + +Certain options are omitted since changing them would not be compatible with Vite's dep optimization. + +- `plugins` are merged with Vite's dep plugin + ## optimizeDeps.esbuildOptions - **Type:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<`[`EsbuildBuildOptions`](https://esbuild.github.io/api/#general-options)`, @@ -64,13 +81,9 @@ export default defineConfig({ | 'outbase' | 'outExtension' | 'metafile'>` +- **Deprecated** -Options to pass to esbuild during the dep scanning and optimization. - -Certain options are omitted since changing them would not be compatible with Vite's dep optimization. - -- `external` is also omitted, use Vite's `optimizeDeps.exclude` option -- `plugins` are merged with Vite's dep plugin +This option is converted to `optimizeDeps.rolldownOptions` internally. Use `optimizeDeps.rolldownOptions` instead. ## optimizeDeps.force diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index b2da75237150e8..4bebb6f8593604 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -353,36 +353,44 @@ If set to `true`, imported JSON will be transformed into `export default JSON.pa If set to `'auto'`, the data will be stringified only if [the data is bigger than 10kB](https://v8.dev/blog/cost-of-javascript-2019#json:~:text=A%20good%20rule%20of%20thumb%20is%20to%20apply%20this%20technique%20for%20objects%20of%2010%20kB%20or%20larger). -## esbuild +## oxc -- **Type:** `ESBuildOptions | false` +- **Type:** `OxcOptions | false` -`ESBuildOptions` extends [esbuild's own transform options](https://esbuild.github.io/api/#transform). The most common use case is customizing JSX: +`OxcOptions` extends [Oxc trasnformer's options](https://oxc.rs/docs/guide/usage/transformer). The most common use case is customizing JSX: ```js export default defineConfig({ - esbuild: { - jsxFactory: 'h', - jsxFragment: 'Fragment', + oxc: { + jsx: { + runtime: 'classic', + pragma: 'h', + pragmaFrag: 'Fragment', + }, }, }) ``` -By default, esbuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, which can be a regex, a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern, or an array of either. +By default, transformation by Oxc is applied to `ts`, `jsx` and `tsx` files. You can customize this with `oxc.include` and `oxc.exclude`, which can be a regex, a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern, or an array of either. -In addition, you can also use `esbuild.jsxInject` to automatically inject JSX helper imports for every file transformed by esbuild: +In addition, you can also use `oxc.jsxInject` to automatically inject JSX helper imports for every file transformed by Oxc: ```js export default defineConfig({ - esbuild: { + oxc: { jsxInject: `import React from 'react'`, }, }) ``` -When [`build.minify`](./build-options.md#build-minify) is `true`, all minify optimizations are applied by default. To disable [certain aspects](https://esbuild.github.io/api/#minify) of it, set any of `esbuild.minifyIdentifiers`, `esbuild.minifySyntax`, or `esbuild.minifyWhitespace` options to `false`. Note the `esbuild.minify` option can't be used to override `build.minify`. +Set to `false` to disable transformation by Oxc. + +## esbuild + +- **Type:** `ESBuildOptions | false` +- **Deprecated** -Set to `false` to disable esbuild transforms. +This option is converted to `oxc` option internally. Use `oxc` option instead. ## assetsInclude diff --git a/docs/guide/migration.md b/docs/guide/migration.md index 0a1065fc3289bf..03852ce1571e0c 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -31,7 +31,7 @@ These browser versions align with [Baseline](https://web-platform-dx.github.io/w ## Rolldown Integration -**_TODO: write this section_** +Vite 8 uses Oxc based tools instead of esbuild and Rollup. ### Gradual migration @@ -41,75 +41,179 @@ For users migrating from `rolldown-vite` to Vite 8, you can undo the dependencie ### Dependency Optimizer now uses Rolldown -_**TODO: write this section**_ +Rolldown is now used for dependency optimization instead of esbuild. Vite still supports the [`optimizeDeps.esbuildOptions`](/config/dep-optimization-options#optimizedeps-esbuildoptions) option for backward compatibility by converting it to [`optimizeDeps.rolldownOptions`](/config/dep-optimization-options#optimizedeps-rolldownoptions) internally. But `optimizeDeps.esbuildOptions` is deprecated and will be removed in the future and we encourage you to migrate to `optimizeDeps.rolldownOptions`. + +The following options are converted: + +- [`esbuildOptions.minify`](https://esbuild.github.io/api/#minify) -> `rolldownOptions.output.minify` +- [`esbuildOptions.treeShaking`](https://esbuild.github.io/api/#tree-shaking) -> `rolldownOptions.treeshake` +- [`esbuildOptions.define`](https://esbuild.github.io/api/#define) -> `rolldownOptions.transform.define` +- [`esbuildOptions.loader`](https://esbuild.github.io/api/#loader) -> `rolldownOptions.moduleTypes` +- [`esbuildOptions.preserveSymlinks`](https://esbuild.github.io/api/#preserve-symlinks) -> `!rolldownOptions.resolve.symlinks` +- [`esbuildOptions.resolveExtensions`](https://esbuild.github.io/api/#resolve-extensions) -> `rolldownOptions.resolve.extensions` +- [`esbuildOptions.mainFields`](https://esbuild.github.io/api/#main-fields) -> `rolldownOptions.resolve.mainFields` +- [`esbuildOptions.conditions`](https://esbuild.github.io/api/#conditions) -> `rolldownOptions.resolve.conditionNames` +- [`esbuildOptions.keepNames`](https://esbuild.github.io/api/#keep-names) -> `rolldownOptions.output.keepNames` +- [`esbuildOptions.platform`](https://esbuild.github.io/api/#platform) -> `rolldownOptions.platform` +- [`esbuildOptions.plugins`](https://esbuild.github.io/plugins/) -> `rolldownOptions.plugins` (partial support) + + + +You can also get the options set by the compatibility layer from the `configResolved` hook: + +```js +const plugin = { + name: 'log-config', + configResolved(config) { + console.log('options', config.optimizeDeps.esbuildOptions) + }, +}, +``` ### JS Transformation by Oxc -_**TODO: write this section**_ +Oxc is now used for JS transformation instead of esbuild. Vite still supports the [`esbuild`](/config/shared-options#esbuild) option for backward compatibility by converting it to [`oxc`](/config/shared-options#oxc) internally. But `esbuild` is deprecated and will be removed in the future and we encourage you to migrate to `oxc`. + +The following options are converted: + +- `esbuild.jsxInject` -> `oxc.jsxInject` +- `esbuild.include` -> `oxc.include` +- `esbuild.exclude` -> `oxc.exclude` +- `esbuild.jsx` -> [`oxc.jsx`](https://oxc.rs/docs/guide/usage/transformer/jsx) + - `esbuild.jsx: 'preserve'` -> `oxc.jsx: 'preserve'` + - `esbuild.jsx: 'automatic'` -> `oxc.jsx: { runtime: 'automatic' }` + - `esbuild.jsxImportSource` -> `oxc.jsx.importSource` + - `esbuild.jsx: 'transform'` -> `oxc.jsx: { runtime: 'classic' }` + - `esbuild.jsxFactory` -> `oxc.jsx.pragma` + - `esbuild.jsxFragment` -> `oxc.jsx.pragmaFrag` + - `esbuild.jsxDev` -> `oxc.jsx.development` +- [`esbuild.define`](https://esbuild.github.io/api/#define) -> [`oxc.define`](https://oxc.rs/docs/guide/usage/transformer/global-variable-replacement#define) +- [`esbuild.banner`](https://esbuild.github.io/api/#banner) -> custom plugin using transform hook +- [`esbuild.footer`](https://esbuild.github.io/api/#footer) -> custom plugin using transform hook + +[`esbuild.supported`](https://esbuild.github.io/api/#supported) option and [`esbuild.jsxSideEffects`](https://esbuild.github.io/api/#jsx-side-effects) option are not supported by Oxc. + + + +You can also get the options set by the compatibility layer from the `configResolved` hook: -`esbuild` option, `oxc` option... +```js +const plugin = { + name: 'log-config', + configResolved(config) { + console.log('options', config.oxc) + }, +}, +``` -Note that if you use a plugin that uses `transformWithEsbuild` function, you need to install `esbuild` as a dev dependency as it's now an optional dependency. `transformWithEsbuild` function is now deprecated and will be removed in the future. + -TODO: No Native Decorator Support -TODO: `supported` option https://github.com/rolldown/rolldown/issues/6212 -TODO: `jsxSideEffects` option +Currently, Oxc transformer does not support lowering native decorators. + +::: details Workaround for lowering native decorators + + + +::: + +Note that if you use a plugin that uses `transformWithEsbuild` function, you need to install `esbuild` as a dev dependency as it's now an optional dependency. `transformWithEsbuild` function is now deprecated and will be removed in the future. We recommend to use the new `transformWithOxc` function instead. ### JS Minification by Oxc -Oxc Minifier is now used for JS minification by default. You can use `build.minify: 'esbuild'` option to switch back to esbuild. Note that you need to install `esbuild` as a dev dependency as it's now an optional dependency. +Oxc Minifier is now used for JS minification by default instead of esbuild. You can use [`build.minify: 'esbuild'`](/config/build-options#minify) option to switch back to esbuild, but this is deprecated and will be removed in the future. Note that you need to install `esbuild` as a dev dependency as it's now an optional dependency. -TODO: explain that `mangleProps` / `reserveProps` / `mangleQuoted` / `mangleCache` options are not supported by Oxc but are supported by esbuild. -TODO: write about different assumptions (https://esbuild.github.io/content-types/#javascript-caveats) +If you were using `esbuild.minify*` options to control the minification behavior, you can use `build.rolldownOptions.output.minify` option instead. -### CSS Minification by LightningCSS +Property mangling feature is not supported by Oxc and the related options ([`mangleProps`, `reserveProps`, `mangleQuoted`, `mangleCache`](https://esbuild.github.io/api/#mangle-props)) are not supported. -LightningCSS is now used for CSS minification by default. You can use `build.cssMinify: 'esbuild'` option to switch back to esbuild. Note that you need to install `esbuild` as a dev dependency as it's now an optional dependency. + + +Note that esbuild and Oxc Minifier have a slightly different assumptions about the input code. While this would not affect most projects, you can compare the assumptions if the minifier breaks your code ([esbuild assumptions](https://esbuild.github.io/api/#minify-considerations), [Oxc Minifier assumptions](https://oxc.rs/docs/guide/usage/minifier.html#assumptions)). + +### CSS Minification by Lightning CSS + +[Lightning CSS](https://lightningcss.dev/) is now used for CSS minification by default. You can use [`build.cssMinify: 'esbuild'`](/config/build-options#cssminify) option to switch back to esbuild. Note that you need to install `esbuild` as a dev dependency as it's now an optional dependency. + +Lightning CSS supports more syntax lowering, so you may see a bigger CSS bundle size. ### Consistent CJS Interop -**_TODO: write this section_** +The `default` import from a CJS module is now handled in a consistent way. -https://github.com/rolldown/rolldown/issues/6438 -https://esbuild.github.io/content-types/#default-interop +If it matches one of the following conditions, the `default` import is the `module.exports` value of the importee CJS module. Otherwise, the `default` import is the `module.exports.default` value of the importee CJS module. -### Removed Module Resolution Using Format Sniffing +- The importer is `.mjs` or `.mts` +- The closest `package.json` for the importer has a `type` field set to `module` +- The `module.exports.__esModule` value of the importee CJS module is not set to true -When both `browser` and `module` fields are present in `package.json`, Vite used to resolve the field based on the content of the file, trying to pick the ESM file for browsers. This was introduced because some packages were using the `module` field to point to ESM files for Node.js and some other packages were using the `browser` field to point to UMD files for browsers. Given that the modern `exports` field solved this problem and is now adopted by many packages, Vite no longer uses this heuristic and always respects the order of the `resolve.mainFields` option. If you were relying on this behavior, you can use the `resolve.alias` option to map the field to the desired file or apply a patch with your package manager (e.g. `patch-package`, `pnpm patch`). +::: details The previous behaviors -### Deprecate `build.rollupOptions.output.manualChunks` +In dev, if it matches one of the following conditions, the `default` import is the `module.exports` value of the importee CJS module. Otherwise, the `default` import is the `module.exports.default` value of the importee CJS module. -**_TODO: write this section_** +- _The importer is included in the dependency optimization_ and `.mjs` or `.mts` +- _The importer is included in the dependency optimization_ and the closest `package.json` for the importer has a `type` field set to `module` +- The `module.exports.__esModule` value of the importee CJS module is not set to true + +In build, the conditions were: + +- The `module.exports.__esModule` value of the importee CJS module is not set to true +- _`default` property of `module.exports` does not exist_ + +(assuming [`build.commonjsOptions.defaultIsModuleExports`](https://github.com/rollup/plugins/tree/master/packages/commonjs#defaultismoduleexports) is not changed from the default `'auto'`) + +::: + +See Rolldown's document about this problem for more details: [Ambiguous `default` import from CJS modules - Bundling CJS | Rolldown](https://rolldown.rs/in-depth/bundling-cjs#ambiguous-default-import-from-cjs-modules). + +This change may break some existing code importing CJS modules. You can use the `legacy.inconsistentCjsInterop: true` option to temporary restore the previous behavior. Note that this option will be removed in the future. If you find a package that is affected by this change, please report it to the package author. Make sure to link to the Rolldown document above so that the author can understand the context. + +### Removed Module Resolution Using Format Sniffing + +When both `browser` and `module` fields are present in `package.json`, Vite used to resolve the field based on the content of the file, trying to pick the ESM file for browsers. This was introduced because some packages were using the `module` field to point to ESM files for Node.js and some other packages were using the `browser` field to point to UMD files for browsers. Given that the modern `exports` field solved this problem and is now adopted by many packages, Vite no longer uses this heuristic and always respects the order of the [`resolve.mainFields`](/config/shared-options#resolve-mainfields) option. If you were relying on this behavior, you can use the [`resolve.alias`](/config/shared-options#resolve-alias) option to map the field to the desired file or apply a patch with your package manager (e.g. `patch-package`, `pnpm patch`). ### Require Calls For Externalized Modules -`require` calls for externalized modules are now preserved as `require` calls and not converted to `import` statements. +`require` calls for externalized modules are now preserved as `require` calls and not converted to `import` statements. This is to preserve the semantics of `require` calls. -https://github.com/rolldown/rolldown/issues/6269 -https://rolldown.rs/in-depth/bundling-cjs#require-external-modules +If you want to convert them to `import` statements, you can use Rolldown's built-in `esmExternalRequirePlugin`, which is re-exported from `vite`. -_**TODO: write this section**_ +```js +import { defineConfig, esmExternalRequirePlugin } from 'vite' -### `import.meta.url` in UMD / IIFE +export default defineConfig({ + // ... + plugins: [ + esmExternalRequirePlugin({ + external: ['react', 'vue', /^node:/], + }), + ], +}) +``` + +See Rolldown's document for more details: [`require` external modules - Bundling CJS | Rolldown](https://rolldown.rs/in-depth/bundling-cjs#require-external-modules). -_**TODO: write this section**_ +### `import.meta.url` in UMD / IIFE -https://rolldown.rs/in-depth/non-esm-output-formats#well-known-import-meta-properties +`import.meta.url` is not polyfilled in UMD / IIFE output formats. It will be replaced with `undefined` by default. If you prefer the previous behavior, you can use the `define` option with `build.rolldownOptions.output.intro` option. See Rolldown's document for more details: [Well-known `import.meta` properties - Non ESM Output Formats | Rolldown](https://rolldown.rs/in-depth/non-esm-output-formats#well-known-import-meta-properties). ### Removed `build.rollupOptions.watch.chokidar` option -_**TODO: write this section**_ +`build.rollupOptions.watch.chokidar` option is removed. Please migrate to `build.rolldownOptions.watch.notify` option. + + + +### Deprecate `build.rollupOptions.output.manualChunks` + +`output.manualChunks` option is deprecated. Rolldown has `advacedChunks` option, which is more flexible. Please migrate to `output.advancedChunks` option. See Rolldown's document for more details about `advancedChunks`: [Advanced Chunks - Rolldown](https://rolldown.rs/in-depth/advanced-chunks). -`build.rollupOptions.watch.chokidar` option is removed. Please migrate to `build.rollupOptions.watch.notify` option. + -### Deprecations +### Other Related Deprecations -The following options are deprecated. +The following options are deprecated and will be removed in the future: -- `build.rollupOptions`: please use `build.rolldownOptions` instead. -- `esbuild`: please use `oxc` option instead. -- `worker.rollupOptions`: please use `worker.rolldownOptions` instead. -- `optimizeDeps.esbuildOptions`: please use `optimizeDeps.rolldownOptions` instead. +- `build.rollupOptions`: renamed to `build.rolldownOptions` +- `worker.rollupOptions`: renamed to `worker.rolldownOptions` ## General Changes @@ -152,4 +256,4 @@ There are other breaking changes which only affect few users. ## Migration from v6 -Check the [Migration from v6 Guide](https://v7.vite.dev/guide/migration.html) in the Vite v7 docs first to see the needed changes to port your app to Vite 7, and then proceed with the changes on this page. +Check the [Migration from v6 Guide](https://v7.vite.dev/guide/migration) in the Vite v7 docs first to see the needed changes to port your app to Vite 7, and then proceed with the changes on this page. diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 2ee60f1ffa9dc4..e9b0ca5a54577f 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -1122,6 +1122,7 @@ function resolveDepOptimizationOptions( rollupOptions.resolve ??= {} rollupOptions.output ??= {} + rollupOptions.transform ??= {} const setResolveOptions = < T extends keyof Exclude, @@ -1148,9 +1149,9 @@ function resolveDepOptimizationOptions( } if ( merged.esbuildOptions.define !== undefined && - rollupOptions.define === undefined + rollupOptions.transform.define === undefined ) { - rollupOptions.define = merged.esbuildOptions.define + rollupOptions.transform.define = merged.esbuildOptions.define } if (merged.esbuildOptions.loader !== undefined) { const loader = merged.esbuildOptions.loader From f989ecba391de45d972749ed945adcf77087c5da Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Thu, 6 Nov 2025 21:11:37 +0900 Subject: [PATCH 05/10] wip --- docs/guide/migration.md | 19 ++++++++----------- packages/vite/src/node/config.ts | 5 ++--- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/docs/guide/migration.md b/docs/guide/migration.md index 03852ce1571e0c..b32d5164ae3ebb 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -79,21 +79,20 @@ The following options are converted: - `esbuild.jsxInject` -> `oxc.jsxInject` - `esbuild.include` -> `oxc.include` - `esbuild.exclude` -> `oxc.exclude` -- `esbuild.jsx` -> [`oxc.jsx`](https://oxc.rs/docs/guide/usage/transformer/jsx) +- [`esbuild.jsx`](https://esbuild.github.io/api/#jsx) -> [`oxc.jsx`](https://oxc.rs/docs/guide/usage/transformer/jsx) - `esbuild.jsx: 'preserve'` -> `oxc.jsx: 'preserve'` - `esbuild.jsx: 'automatic'` -> `oxc.jsx: { runtime: 'automatic' }` - - `esbuild.jsxImportSource` -> `oxc.jsx.importSource` + - [`esbuild.jsxImportSource`](https://esbuild.github.io/api/#jsx-import-source) -> `oxc.jsx.importSource` - `esbuild.jsx: 'transform'` -> `oxc.jsx: { runtime: 'classic' }` - - `esbuild.jsxFactory` -> `oxc.jsx.pragma` - - `esbuild.jsxFragment` -> `oxc.jsx.pragmaFrag` - - `esbuild.jsxDev` -> `oxc.jsx.development` + - [`esbuild.jsxFactory`](https://esbuild.github.io/api/#jsx-factory) -> `oxc.jsx.pragma` + - [`esbuild.jsxFragment`](https://esbuild.github.io/api/#jsx-fragment) -> `oxc.jsx.pragmaFrag` + - [`esbuild.jsxDev`](https://esbuild.github.io/api/#jsx-dev) -> `oxc.jsx.development` + - [`esbuild.jsxSideEffects`](https://esbuild.github.io/api/#jsx-side-effects) -> `oxc.jsx.pure` - [`esbuild.define`](https://esbuild.github.io/api/#define) -> [`oxc.define`](https://oxc.rs/docs/guide/usage/transformer/global-variable-replacement#define) - [`esbuild.banner`](https://esbuild.github.io/api/#banner) -> custom plugin using transform hook - [`esbuild.footer`](https://esbuild.github.io/api/#footer) -> custom plugin using transform hook -[`esbuild.supported`](https://esbuild.github.io/api/#supported) option and [`esbuild.jsxSideEffects`](https://esbuild.github.io/api/#jsx-side-effects) option are not supported by Oxc. - - +[`esbuild.supported`](https://esbuild.github.io/api/#supported) option is not supported by Oxc. If you need these options, please check [oxc-project/oxc#15373](https://github.com/oxc-project/oxc/issues/15373). You can also get the options set by the compatibility layer from the `configResolved` hook: @@ -124,9 +123,7 @@ Oxc Minifier is now used for JS minification by default instead of esbuild. You If you were using `esbuild.minify*` options to control the minification behavior, you can use `build.rolldownOptions.output.minify` option instead. -Property mangling feature is not supported by Oxc and the related options ([`mangleProps`, `reserveProps`, `mangleQuoted`, `mangleCache`](https://esbuild.github.io/api/#mangle-props)) are not supported. - - +Property mangling feature is not supported by Oxc and the related options ([`mangleProps`, `reserveProps`, `mangleQuoted`, `mangleCache`](https://esbuild.github.io/api/#mangle-props)) are not supported. If you need these options, please check [oxc-project/oxc#15375](https://github.com/oxc-project/oxc/issues/15375). Note that esbuild and Oxc Minifier have a slightly different assumptions about the input code. While this would not affect most projects, you can compare the assumptions if the minifier breaks your code ([esbuild assumptions](https://esbuild.github.io/api/#minify-considerations), [Oxc Minifier assumptions](https://oxc.rs/docs/guide/usage/minifier.html#assumptions)). diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index e9b0ca5a54577f..2ee60f1ffa9dc4 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -1122,7 +1122,6 @@ function resolveDepOptimizationOptions( rollupOptions.resolve ??= {} rollupOptions.output ??= {} - rollupOptions.transform ??= {} const setResolveOptions = < T extends keyof Exclude, @@ -1149,9 +1148,9 @@ function resolveDepOptimizationOptions( } if ( merged.esbuildOptions.define !== undefined && - rollupOptions.transform.define === undefined + rollupOptions.define === undefined ) { - rollupOptions.transform.define = merged.esbuildOptions.define + rollupOptions.define = merged.esbuildOptions.define } if (merged.esbuildOptions.loader !== undefined) { const loader = merged.esbuildOptions.loader From 9ec8614630f222597965161382241434d1ac3bdb Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Fri, 7 Nov 2025 18:47:14 +0900 Subject: [PATCH 06/10] wip --- docs/guide/migration.md | 112 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 107 insertions(+), 5 deletions(-) diff --git a/docs/guide/migration.md b/docs/guide/migration.md index b32d5164ae3ebb..efb675498187fe 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -107,14 +107,116 @@ const plugin = { -Currently, Oxc transformer does not support lowering native decorators. +Currently, Oxc transformer does not support lowering native decorators ([oxc-project/oxc#9170](https://github.com/oxc-project/oxc/issues/9170)). -::: details Workaround for lowering native decorators +:::: details Workaround for lowering native decorators - +You can use [Babel](https://babeljs.io/) or [SWC](https://swc.rs/) to lower native decorators for the time being. While SWC is faster than Babel, it does **not support the latest decorator spec** that esbuild supports. + +The decorator spec has been updated multiple times since it reached stage 3 and the versions supported by each tools are (the version names are same with [babel's options](https://babeljs.io/docs/babel-plugin-proposal-decorators#version)): + +- `"2023-11"` (esbuild and TS5.4+ and babel supports this version) +- `"2023-05"` (TS5.2+ supports this version) +- `"2023-01"` (TS5.0+ supports this version) +- `"2022-03"` (SWC supports this version) + +**If you want to use babel:** + +::: code-group + +```bash [npm] +$ npm install -D @rollup/plugin-babel @babel/plugin-proposal-decorators +``` + +```bash [Yarn] +$ yarn add -D @rollup/plugin-babel @babel/plugin-proposal-decorators +``` + +```bash [pnpm] +$ pnpm add -D @rollup/plugin-babel @babel/plugin-proposal-decorators +``` + +```bash [Bun] +$ bun add -D @rollup/plugin-babel @babel/plugin-proposal-decorators +``` + +```bash [Deno] +$ deno add -D npm:@rollup/plugin-babel npm:@babel/plugin-proposal-decorators +``` ::: +```ts [vite.config.ts] +import { defineConfig, withFilter } from 'vite' +import { babel } from '@rollup/plugin-babel' + +export default defineConfig({ + plugins: [ + withFilter( + babel({ + configFile: false, + plugins: [ + ['@babel/plugin-proposal-decorators', { version: '2023-11' }], + ], + }), + // only run this transform if the file contains a decorator + { transform: { code: '@' } }, + ), + ], +}) +``` + +**If you want to use SWC:** + +::: code-group + +```bash [npm] +$ npm install -D @rollup/plugin-swc @swc/core +``` + +```bash [Yarn] +$ yarn add -D @rollup/plugin-swc @swc/core +``` + +```bash [pnpm] +$ pnpm add -D @rollup/plugin-swc @swc/core +``` + +```bash [Bun] +$ bun add -D @rollup/plugin-swc @swc/core +``` + +```bash [Deno] +$ deno add -D npm:@rollup/plugin-swc npm:@swc/core +``` + +::: + +```js +import { defineConfig, withFilter } from 'vite' + +export default defineConfig({ + // ... + plugins: [ + withFilter( + swc({ + swc: { + jsc: { + parser: { decorators: true, decoratorsBeforeExport: true }, + // NOTE: SWC doesn't support '2023-11' version yet + transform: { decoratorVersion: '2022-03' }, + }, + }, + }), + // only run this transform if the file contains a decorator + { transform: { code: '@' } }, + ), + ], +}) +``` + +:::: + Note that if you use a plugin that uses `transformWithEsbuild` function, you need to install `esbuild` as a dev dependency as it's now an optional dependency. `transformWithEsbuild` function is now deprecated and will be removed in the future. We recommend to use the new `transformWithOxc` function instead. ### JS Minification by Oxc @@ -232,8 +334,8 @@ There are other breaking changes which only affect few users. - **[TODO: fix before stable release]** native plugin ordering issue ([rolldown-vite#373](https://github.com/vitejs/rolldown-vite/issues/373)) - **[TODO: fix before stable release]** `@vite-ignore` comment edge case ([rolldown-vite#426](https://github.com/vitejs/rolldown-vite/issues/426)) - **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/3403 -- ext glob support ([rolldown-vite#365](https://github.com/vitejs/rolldown-vite/issues/365)) -- `define` does not share reference for objects: When you pass an object as a value to `define`, each variable will have a separate copy of the object. +- **[TODO: clarify this here a bit more]** ext glob support ([rolldown-vite#365](https://github.com/vitejs/rolldown-vite/issues/365)) +- `define` does not share reference for objects: When you pass an object as a value to `define`, each variable will have a separate copy of the object. See [Oxc Transformer document](https://oxc.rs/docs/guide/usage/transformer/global-variable-replacement#define) for more details. - `bundle` object changes (`bundle` is an object passed in `generateBundle` / `writeBundle` hooks, returned by `build` function): - Assigning to `bundle[foo]` is not supported. This is discouraged by Rollup as well. Please use `this.emitFile()` instead. - the reference is not shared across the hooks ([rolldown-vite#410](https://github.com/vitejs/rolldown-vite/issues/410)) From 58edac0af934bb4c14a13de56ff5fe3a6b864077 Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Fri, 7 Nov 2025 23:52:24 +0900 Subject: [PATCH 07/10] wip --- docs/guide/migration.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/guide/migration.md b/docs/guide/migration.md index efb675498187fe..fab5a331a74344 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -10,11 +10,15 @@ This section will be moved to the release post before the stable release. ### Built-in tsconfig `paths` Support -**_TODO: write this section_** +Vite 8 now has built-in tsconfig `paths` support, thanks to [Oxc Resolver](https://oxc.rs/docs/guide/usage/resolver). This is not enabled by default, because it has a performance cost and is [discouraged by the TypeScript team to use this option to change the behavior of the external tools](https://www.typescriptlang.org/tsconfig/#paths:~:text=Note%20that%20this%20feature%20does%20not%20change%20how%20import%20paths%20are%20emitted%20by%20tsc%2C%20so%20paths%20should%20only%20be%20used%20to%20inform%20TypeScript%20that%20another%20tool%20has%20this%20mapping%20and%20will%20use%20it%20at%20runtime%20or%20when%20bundling.). While having that caveat, you can enable it by setting `resolve.tsconfigPaths` to `true`. + +**_[TODO: fix before stable release] currently this feature only supports basic cases. If the tsconfig.json uses references/include/exclude, it won't work as expected._** ### `emitDecoratorMetadata` Support -**_TODO: write this section_** +Vite 8 now has built-in support for TypeScript's [`emitDecoratorMetadata` option](https://www.typescriptlang.org/tsconfig/#emitDecoratorMetadata), thanks to [Oxc Transformer](https://oxc.rs/docs/guide/usage/transformer). If you have `emitDecoratorMetadata` set to `true` in your tsconfig, this feature will be enabled automatically. + +Note that this transformation has some limitations as the full support requires the full type inference by TypeScript compiler, which is not supported. See [Oxc Transformer's documentation](https://oxc.rs/docs/guide/usage/transformer/typescript#decorators) for more details. ## Default Browser Target change @@ -341,7 +345,7 @@ There are other breaking changes which only affect few users. - the reference is not shared across the hooks ([rolldown-vite#410](https://github.com/vitejs/rolldown-vite/issues/410)) - `structuredClone(bundle)` errors with `DataCloneError: # could not be cloned`. This is not supported anymore. Please clone it with `structuredClone({ ...bundle })`. ([rolldown-vite#128](https://github.com/vitejs/rolldown-vite/issues/128)) - **[TODO: clarify this in Rolldown's docs and link it from here]** All parallel hooks in Rollup works as sequential hooks. -- **[TODO: clarify this in Rolldown's docs and link it from here]** `"use strict";` is not injected sometimes. +- `"use strict";` is not injected sometimes. See [Rolldown's documentation](https://rolldown.rs/in-depth/directives) for more details. - Transforming to lower than ES5 with plugin-legacy is not supported ([rolldown-vite#452](https://github.com/vitejs/rolldown-vite/issues/452)) - Passing the same browser with multiple versions of it to `build.target` option now errors: esbuild selects the latest version of it, which was probably not what you intended. - Missing support by Rolldown: The following features are not supported by Rolldown and is no longer supported by Vite. From d5b1a6d757d8a5932f6b6f338f9b27a75d4c6381 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0?= Date: Mon, 10 Nov 2025 21:25:38 +0900 Subject: [PATCH 08/10] =?UTF-8?q?chore:=20update,=20thanks=20alex=20?= =?UTF-8?q?=F0=9F=92=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alexander Lichter --- docs/config/build-options.md | 2 +- docs/config/shared-options.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/config/build-options.md b/docs/config/build-options.md index 058a21f22f7e43..858abc4f5f1b0a 100644 --- a/docs/config/build-options.md +++ b/docs/config/build-options.md @@ -286,7 +286,7 @@ Set to `false` to disable minification, or specify the minifier to use. The defa Note the `build.minify` option does not minify whitespaces when using the `'es'` format in lib mode, as it removes pure annotations and breaks tree-shaking. -esbuild and Terser must be installed when it is set to `'esbuild'` or `'terser'`. +esbuild or Terser must be installed when it is set to `'esbuild'` or `'terser'` respectively. ```sh npm add -D esbuild diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index 4bebb6f8593604..00b2b9346e6d8f 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -357,7 +357,7 @@ If set to `'auto'`, the data will be stringified only if [the data is bigger tha - **Type:** `OxcOptions | false` -`OxcOptions` extends [Oxc trasnformer's options](https://oxc.rs/docs/guide/usage/transformer). The most common use case is customizing JSX: +`OxcOptions` extends [Oxc Transformer's options](https://oxc.rs/docs/guide/usage/transformer). The most common use case is customizing JSX: ```js export default defineConfig({ From d8a2739b34ca8f2f60793496fa3e0ce50742f964 Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Mon, 10 Nov 2025 21:30:47 +0900 Subject: [PATCH 09/10] chore: add example --- docs/guide/migration.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/guide/migration.md b/docs/guide/migration.md index fab5a331a74344..52365d566fb5c5 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -41,8 +41,19 @@ Vite 8 uses Oxc based tools instead of esbuild and Rollup. `rolldown-vite` package implements Vite 7 with Rolldown integration, but without the other Vite 8 changes. This can be used as a intermediate step to migrate to Vite 8. See [the Rolldown Integration guide](https://v7.vite.dev/guide/rolldown) in the Vite 7 docs to switch to `rolldown-vite` from Vite 7. + + For users migrating from `rolldown-vite` to Vite 8, you can undo the dependencies changes in `package.json` and update to Vite 8. +```json +{ + "dependencies": { + "vite": "npm:rolldown-vite@7.2.2" // [!code --] + "vite": "^8.0.0" // [!code ++] + } +} +``` + ### Dependency Optimizer now uses Rolldown Rolldown is now used for dependency optimization instead of esbuild. Vite still supports the [`optimizeDeps.esbuildOptions`](/config/dep-optimization-options#optimizedeps-esbuildoptions) option for backward compatibility by converting it to [`optimizeDeps.rolldownOptions`](/config/dep-optimization-options#optimizedeps-rolldownoptions) internally. But `optimizeDeps.esbuildOptions` is deprecated and will be removed in the future and we encourage you to migrate to `optimizeDeps.rolldownOptions`. From 65d940002cba329c9afbbed4b977264d976d970b Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Fri, 14 Nov 2025 20:19:53 +0900 Subject: [PATCH 10/10] docs: add `esbuild.drop` description and `parseAst` / `parseAst` deprecation --- docs/guide/migration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guide/migration.md b/docs/guide/migration.md index 52365d566fb5c5..c2c2d36932bd1f 100644 --- a/docs/guide/migration.md +++ b/docs/guide/migration.md @@ -238,7 +238,7 @@ Note that if you use a plugin that uses `transformWithEsbuild` function, you nee Oxc Minifier is now used for JS minification by default instead of esbuild. You can use [`build.minify: 'esbuild'`](/config/build-options#minify) option to switch back to esbuild, but this is deprecated and will be removed in the future. Note that you need to install `esbuild` as a dev dependency as it's now an optional dependency. -If you were using `esbuild.minify*` options to control the minification behavior, you can use `build.rolldownOptions.output.minify` option instead. +If you were using `esbuild.minify*` options to control the minification behavior, you can use `build.rolldownOptions.output.minify` option instead. If you were using `esbuild.drop` option, you can use [`build.rolldownOptions.output.minify.compress.drop*` options](https://oxc.rs/docs/guide/usage/minifier/dead-code-elimination) instead. Property mangling feature is not supported by Oxc and the related options ([`mangleProps`, `reserveProps`, `mangleQuoted`, `mangleCache`](https://esbuild.github.io/api/#mangle-props)) are not supported. If you need these options, please check [oxc-project/oxc#15375](https://github.com/oxc-project/oxc/issues/15375). @@ -339,7 +339,6 @@ The following options are deprecated and will be removed in the future: There are other breaking changes which only affect few users. -- **[TODO: fix before stable release (better if it's fixed before first beta)]** https://github.com/vitejs/rolldown-vite/issues/461 (blocking sveltekit) - **[TODO: fix before stable release (better if it's fixed before first beta)]** https://github.com/rolldown/rolldown/issues/5867 - **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/5726 (affects nuxt, qwik) - **[TODO: fix before stable release]** https://github.com/rolldown/rolldown/issues/3403 (affects sveltekit) @@ -367,6 +366,7 @@ There are other breaking changes which only affect few users. - `resolveImportMeta` hook ([rolldown#1010](https://github.com/rolldown/rolldown/issues/1010)) - `renderDynamicImport` hook ([rolldown#4532](https://github.com/rolldown/rolldown/issues/4532)) - `resolveFileUrl` hook +- `parseAst` / `parseAstAsync` functions are now deprecated in favor of `parse` / `parseAsync` functions which has more features. ## Migration from v6