feat!: rollup v4 (#14508)

Author: sapphi-red

docs/guide/migration.md

@@ -4,6 +4,17 @@
 
 Vite no longer supports Node.js 14 / 16 / 17 / 19, which reached its EOL. Node.js 18 / 20+ is now required.
 
+## Rollup 4
+
+Vite is now using Rollup 4 which also brings along its breaking changes, in particular:
+
+- Import assertions (`assertions` prop) has been renamed to import attributes (`attributes` prop).
+- Acorn plugins are no longer supported.
+- For Vite plugins, `this.resolve` `skipSelf` option is now `true` by default.
+- For Vite plugins, `this.parse` now only supports the `allowReturnOutsideFunction` option for now.
+
+Read the full breaking changes in [Rollup's release notes](https://github.com/rollup/rollup/releases/tag/v4.0.0) for build-related changes in `build.rollupOptions`.
+
 ## Deprecate CJS Node API
 
 The CJS Node API of Vite is deprecated. When calling `require('vite')`, a deprecation warning is now logged. You should update your files or frameworks to import the ESM build of Vite instead.

package.json

@@ -76,7 +76,7 @@
     "playwright-chromium": "^1.39.0",
     "prettier": "3.0.3",
     "rimraf": "^5.0.5",
-    "rollup": "^3.29.2",
+    "rollup": "^4.1.4",
     "simple-git-hooks": "^2.9.0",
     "tslib": "^2.6.2",
     "tsx": "^3.13.0",

packages/create-vite/build.config.ts

@@ -23,6 +23,7 @@ export default defineBuildConfig({
     'rollup:options'(ctx, options) {
       options.plugins = [
         options.plugins,
+        // @ts-expect-error TODO: unbuild uses rollup v3 and Vite uses rollup v4
         licensePlugin(
           path.resolve(__dirname, './LICENSE'),
           'create-vite license',

packages/vite/LICENSE.md

@@ -566,13 +566,6 @@ Repository: https://github.com/acornjs/acorn.git
 
 ---------------------------------------
 
-## acorn-import-assertions
-License: MIT
-By: Sven Sauleau
-Repository: https://github.com/xtuc/acorn-import-assertions
-
----------------------------------------
-
 ## acorn-walk
 License: MIT
 By: Marijn Haverbeke, Ingvar Stepanyan, Adrian Heine

packages/vite/package.json

@@ -76,7 +76,7 @@
   "dependencies": {
     "esbuild": "^0.19.3",
     "postcss": "^8.4.31",
-    "rollup": "^3.29.4"
+    "rollup": "^4.1.4"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.3"
@@ -94,7 +94,6 @@
     "@types/escape-html": "^1.0.2",
     "@types/pnpapi": "^0.0.3",
     "acorn": "^8.10.0",
-    "acorn-import-assertions": "^1.9.0",
     "acorn-walk": "^8.2.0",
     "cac": "^6.7.14",
     "chokidar": "^3.5.3",

packages/vite/rollup.config.ts

@@ -161,6 +161,7 @@ function createNodeConfig(isProduction: boolean) {
     external: [
       'fsevents',
       'lightningcss',
+      'rollup/parseAst',
       ...Object.keys(pkg.dependencies),
       ...(isProduction ? [] : Object.keys(pkg.devDependencies)),
     ],

packages/vite/src/node/build.ts

@@ -14,7 +14,6 @@ import type {
   RollupLog,
   RollupOptions,
   RollupOutput,
-  RollupWarning,
   RollupWatcher,
   WatcherOptions,
 } from 'rollup'
@@ -45,7 +44,6 @@ import { initDepsOptimizer } from './optimizer'
 import { loadFallbackPlugin } from './plugins/loadFallback'
 import { findNearestPackageData } from './packages'
 import type { PackageCache } from './packages'
-import { ensureWatchPlugin } from './plugins/ensureWatch'
 import { ESBUILD_MODULES_TARGET, VERSION } from './constants'
 import { resolveChokidarOptions } from './watch'
 import { completeSystemWrapPlugin } from './plugins/completeSystemWrap'
@@ -426,7 +424,6 @@ export async function resolveBuildPlugins(config: ResolvedConfig): Promise<{
   return {
     pre: [
       completeSystemWrapPlugin(),
-      ...(options.watch ? [ensureWatchPlugin()] : []),
       ...(usePluginCommonjs ? [commonjsPlugin(options.commonjsOptions)] : []),
       dataURIPlugin(),
       ...((
@@ -858,7 +855,7 @@ const dynamicImportWarningIgnoreList = [
 ]
 
 export function onRollupWarning(
-  warning: RollupWarning,
+  warning: RollupLog,
   warn: LoggingFunction,
   config: ResolvedConfig,
 ): void {

packages/vite/src/node/plugin.ts

@@ -150,7 +150,7 @@ export interface Plugin<A = any> extends RollupPlugin<A> {
       source: string,
       importer: string | undefined,
       options: {
-        assertions: Record<string, string>
+        attributes: Record<string, string>
         custom?: CustomPluginOptions
         ssr?: boolean
         /**

packages/vite/src/node/plugins/asset.ts

@@ -27,7 +27,8 @@ import {
 } from '../utils'
 import { FS_PREFIX } from '../constants'
 
-export const assetUrlRE = /__VITE_ASSET__([a-z\d]+)__(?:\$_(.*?)__)?/g
+// referenceId is base64url but replaces - with $
+export const assetUrlRE = /__VITE_ASSET__([\w$]+)__(?:\$_(.*?)__)?/g
 
 const rawRE = /(?:\?|&)raw(?:&|$)/
 export const urlRE = /(\?|&)url(?:&|$)/
@@ -78,10 +79,10 @@ export function renderAssetUrlInJS(
   let s: MagicString | undefined
 
   // Urls added with JS using e.g.
-  // imgElement.src = "__VITE_ASSET__5aa0ddc0__" are using quotes
+  // imgElement.src = "__VITE_ASSET__5aA0Ddc0__" are using quotes
 
   // Urls added in CSS that is imported in JS end up like
-  // var inlined = ".inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n";
+  // var inlined = ".inlined{color:green;background:url(__VITE_ASSET__5aA0Ddc0__)}\n";
 
   // In both cases, the wrapping should already be fine
 
@@ -107,7 +108,7 @@ export function renderAssetUrlInJS(
     s.update(match.index, match.index + full.length, replacementString)
   }
 
-  // Replace __VITE_PUBLIC_ASSET__5aa0ddc0__ with absolute paths
+  // Replace __VITE_PUBLIC_ASSET__5aA0Ddc0__ with absolute paths
 
   const publicAssetUrlMap = publicAssetUrlCache.get(config)!
   publicAssetUrlRE.lastIndex = 0
@@ -179,6 +180,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       // raw requests, read from disk
       if (rawRE.test(id)) {
         const file = checkPublicFile(id, config) || cleanUrl(id)
+        this.addWatchFile(file)
         // raw query, read file and return as string
         return `export default ${JSON.stringify(
           await fsp.readFile(file, 'utf-8'),

packages/vite/src/node/plugins/ensureWatch.ts

@@ -408,7 +408,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             ss: expStart,
             se: expEnd,
             d: dynamicIndex,
-            a: assertIndex,
+            a: attributeIndex,
           } = importSpecifier
 
           // #2083 User may use escape path,
@@ -464,8 +464,8 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
           const isDynamicImport = dynamicIndex > -1
 
-          // strip import assertions as we can process them ourselves
-          if (!isDynamicImport && assertIndex > -1) {
+          // strip import attributes as we can process them ourselves
+          if (!isDynamicImport && attributeIndex > -1) {
             str().remove(end + 1, expEnd)
           }
 

packages/vite/src/node/plugins/importAnalysis.ts

@@ -261,7 +261,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           }
         }
 
-        const resolved = await this.resolve(url, importerFile)
+        const resolved = await this.resolve(url, importerFile, {
+          skipSelf: false,
+        })
 
         if (!resolved) {
           // in ssr, we should let node handle the missing modules
@@ -305,13 +307,13 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           se: expEnd,
           n: specifier,
           d: dynamicIndex,
-          a: assertIndex,
+          a: attributeIndex,
         } = imports[index]
 
         const isDynamicImport = dynamicIndex > -1
 
-        // strip import assertions as we can process them ourselves
-        if (!isDynamicImport && assertIndex > -1) {
+        // strip import attributes as we can process them ourselves
+        if (!isDynamicImport && attributeIndex > -1) {
           str().remove(end + 1, expEnd)
         }
 

packages/vite/src/node/plugins/importAnalysisBuild.ts

@@ -486,7 +486,7 @@ type IdResolver = (
   id: string,
   importer?: string,
   options?: {
-    assertions?: Record<string, string>
+    attributes?: Record<string, string>
     custom?: CustomPluginOptions
     isEntry?: boolean
     skipSelf?: boolean

packages/vite/src/node/plugins/importMetaGlob.ts

@@ -21,7 +21,6 @@ import { preAliasPlugin } from './preAlias'
 import { definePlugin } from './define'
 import { workerImportMetaUrlPlugin } from './workerImportMetaUrl'
 import { assetImportMetaUrlPlugin } from './assetImportMetaUrl'
-import { ensureWatchPlugin } from './ensureWatch'
 import { metadataPlugin } from './metadata'
 import { dynamicImportVarsPlugin } from './dynamicImportVars'
 import { importGlobPlugin } from './importMetaGlob'
@@ -33,7 +32,6 @@ export async function resolvePlugins(
   postPlugins: Plugin[],
 ): Promise<Plugin[]> {
   const isBuild = config.command === 'build'
-  const isWatch = isBuild && !!config.build.watch
   const buildPlugins = isBuild
     ? await (await import('../build')).resolveBuildPlugins(config)
     : { pre: [], post: [] }
@@ -48,7 +46,6 @@ export async function resolvePlugins(
             : optimizedDepsPlugin(config),
         ]
       : []),
-    isWatch ? ensureWatchPlugin() : null,
     isBuild ? metadataPlugin() : null,
     watchPackageDataPlugin(config.packageCache),
     preAliasPlugin(config),

packages/vite/src/node/plugins/index.ts

@@ -10,10 +10,14 @@ export function loadFallbackPlugin(): Plugin {
     name: 'vite:load-fallback',
     async load(id) {
       try {
-        // if we don't add `await` here, we couldn't catch the error in readFile
-        return await fsp.readFile(cleanUrl(id), 'utf-8')
+        const cleanedId = cleanUrl(id)
+        const content = await fsp.readFile(cleanedId, 'utf-8')
+        this.addWatchFile(cleanedId)
+        return content
       } catch (e) {
-        return fsp.readFile(id, 'utf-8')
+        const content = await fsp.readFile(id, 'utf-8')
+        this.addWatchFile(id)
+        return content
       }
     },
   }

packages/vite/src/node/plugins/loadFallback.ts

@@ -102,10 +102,7 @@ export function optimizedDepsBuildPlugin(config: ResolvedConfig): Plugin {
           // When a optimized dep is aliased, we need to avoid waiting for it before optimizing
           return
         }
-        const resolved = await this.resolve(id, importer, {
-          ...options,
-          skipSelf: true,
-        })
+        const resolved = await this.resolve(id, importer, options)
         if (resolved && !resolved.external) {
           depsOptimizer.delayDepsOptimizerUntil(resolved.id, async () => {
             await this.load(resolved)

packages/vite/src/node/plugins/optimizedDeps.ts

@@ -56,7 +56,6 @@ export function preAliasPlugin(config: ResolvedConfig): Plugin {
           const resolved = await this.resolve(id, importer, {
             ...options,
             custom: { ...options.custom, 'vite:pre-alias': true },
-            skipSelf: true,
           })
           if (resolved && !depsOptimizer.isOptimizedDepFile(resolved.id)) {
             const optimizeDeps = depsOptimizer.options