feat: plugin legacy (#293)

Co-authored-by: Hiroshi Ogawa <[email protected]>

Author: sapphi-red

packages/plugin-legacy/package.json

@@ -15,8 +15,8 @@
   ],
   "exports": "./dist/index.js",
   "scripts": {
-    "//dev": "tsdown --watch",
-    "//build": "tsdown",
+    "dev": "tsdown --watch",
+    "build": "tsdown",
     "prepublishOnly": "npm run build"
   },
   "engines": {
@@ -34,6 +34,8 @@
   "funding": "https://github.com/vitejs/vite?sponsor=1",
   "dependencies": {
     "@babel/core": "^7.27.7",
+    "@babel/plugin-transform-dynamic-import": "^7.27.1",
+    "@babel/plugin-transform-modules-systemjs": "^7.27.1",
     "@babel/preset-env": "^7.27.2",
     "browserslist": "^4.25.1",
     "browserslist-to-esbuild": "^2.1.1",

packages/plugin-legacy/src/index.ts

@@ -124,6 +124,9 @@ const _require = createRequire(import.meta.url)
 const nonLeadingHashInFileNameRE = /[^/]+\[hash(?::\d+)?\]/
 const prefixedHashInFileNameRE = /\W?\[hash(?::\d+)?\]/
 
+const outputOptionsForLegacyChunks =
+  new WeakSet<Rollup.NormalizedOutputOptions>()
+
 function viteLegacyPlugin(options: Options = {}): Plugin[] {
   let config: ResolvedConfig
   let targets: Options['targets']
@@ -287,7 +290,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         )
       }
 
-      if (!isLegacyBundle(bundle, opts)) {
+      if (!isLegacyBundle(bundle)) {
         // Merge discovered modern polyfills to `modernPolyfills`
         for (const { modern } of chunkFileNameToPolyfills.values()) {
           modern.forEach((p) => modernPolyfills.add(p))
@@ -302,6 +305,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           )
         }
         await buildPolyfillChunk(
+          this,
           config.mode,
           modernPolyfills,
           bundle,
@@ -345,6 +349,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         }
 
         await buildPolyfillChunk(
+          this,
           config.mode,
           legacyPolyfills,
           bundle,
@@ -432,7 +437,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       ): Rollup.OutputOptions => {
         return {
           ...options,
-          format: 'system',
+          format: 'esm',
           entryFileNames: getLegacyOutputFileName(options.entryFileNames),
           chunkFileNames: getLegacyOutputFileName(options.chunkFileNames),
         }
@@ -451,6 +456,11 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           ...(genModern ? [output || {}] : []),
         ]
       }
+
+      // @ts-expect-error is readonly but should be injected here
+      _config.isOutputOptionsForLegacyChunks = (
+        opts: Rollup.NormalizedOutputOptions,
+      ): boolean => outputOptionsForLegacyChunks.has(opts)
     },
 
     async renderChunk(raw, chunk, opts, { chunks }) {
@@ -477,7 +487,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         )
       }
 
-      if (!isLegacyChunk(chunk, opts)) {
+      if (!isLegacyChunk(chunk)) {
         if (
           options.modernPolyfills &&
           !Array.isArray(options.modernPolyfills) &&
@@ -526,20 +536,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         return null
       }
 
-      // @ts-expect-error avoid esbuild transform on legacy chunks since it produces
-      // legacy-unsafe code - e.g. rewriting object properties into shorthands
-      opts.__vite_skip_esbuild__ = true
-
-      // @ts-expect-error force terser for legacy chunks. This only takes effect if
-      // minification isn't disabled, because that leaves out the terser plugin
-      // entirely.
-      opts.__vite_force_terser__ = true
-
-      // @ts-expect-error In the `generateBundle` hook,
-      // we'll delete the assets from the legacy bundle to avoid emitting duplicate assets.
-      // But that's still a waste of computing resource.
-      // So we add this flag to avoid emitting the asset in the first place whenever possible.
-      opts.__vite_skip_asset_emit__ = true
+      outputOptionsForLegacyChunks.add(opts)
 
       // avoid emitting assets for legacy bundle
       const needPolyfills =
@@ -548,7 +545,23 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       // transform the legacy chunk with @babel/preset-env
       const sourceMaps = !!config.build.sourcemap
       const babel = await loadBabel()
-      const result = babel.transform(raw, {
+
+      // need to transform into systemjs separately from other plugins
+      // for preset-env polyfill detection and removal
+      const resultSystem = babel.transform(raw, {
+        babelrc: false,
+        configFile: false,
+        ast: true,
+        sourceMaps,
+        plugins: [
+          // @ts-expect-error -- not typed
+          (await import('@babel/plugin-transform-dynamic-import')).default,
+          // @ts-expect-error -- not typed
+          (await import('@babel/plugin-transform-modules-systemjs')).default,
+        ],
+      })
+
+      const babelTransformOptions: babel.TransformOptions = {
         babelrc: false,
         configFile: false,
         compact: !!config.build.minify,
@@ -572,8 +585,17 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
             createBabelPresetEnvOptions(targets, { needPolyfills }),
           ],
         ],
-      })
-
+      }
+      let result: babel.BabelFileResult | null
+      if (resultSystem) {
+        result = babel.transformFromAstSync(
+          resultSystem.ast!,
+          resultSystem.code ?? undefined,
+          babelTransformOptions,
+        )
+      } else {
+        result = babel.transform(raw, babelTransformOptions)
+      }
       if (result) return { code: result.code!, map: result.map }
       return null
     },
@@ -713,15 +735,19 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       }
     },
 
-    generateBundle(opts, bundle) {
+    generateBundle(_opts, bundle) {
       if (config.build.ssr) {
         return
       }
 
-      if (isLegacyBundle(bundle, opts) && genModern) {
+      if (isLegacyBundle(bundle) && genModern) {
         // avoid emitting duplicate assets
         for (const name in bundle) {
-          if (bundle[name].type === 'asset' && !/.+\.map$/.test(name)) {
+          if (
+            bundle[name].type === 'asset' &&
+            !/.+\.map$/.test(name) &&
+            !name.includes('-legacy') // legacy chunks
+          ) {
             delete bundle[name]
           }
         }
@@ -787,6 +813,7 @@ function createBabelPresetEnvOptions(
 }
 
 async function buildPolyfillChunk(
+  ctx: Rollup.PluginContext,
   mode: string,
   imports: Set<string>,
   bundle: Rollup.OutputBundle,
@@ -822,7 +849,7 @@ async function buildPolyfillChunk(
           format,
           hashCharacters: rollupOutputOptions.hashCharacters,
           entryFileNames: rollupOutputOptions.entryFileNames,
-          sourcemapBaseUrl: rollupOutputOptions.sourcemapBaseUrl,
+          // sourcemapBaseUrl: rollupOutputOptions.sourcemapBaseUrl,
         },
       },
     },
@@ -855,15 +882,23 @@ async function buildPolyfillChunk(
   }
 
   // add the chunk to the bundle
-  bundle[polyfillChunk.fileName] = polyfillChunk
+  ctx.emitFile({
+    type: 'asset',
+    fileName: polyfillChunk.fileName,
+    source: polyfillChunk.code,
+  })
   if (polyfillChunk.sourcemapFileName) {
     const polyfillChunkMapAsset = _polyfillChunk.output.find(
       (chunk) =>
         chunk.type === 'asset' &&
         chunk.fileName === polyfillChunk.sourcemapFileName,
     ) as Rollup.OutputAsset | undefined
     if (polyfillChunkMapAsset) {
-      bundle[polyfillChunk.sourcemapFileName] = polyfillChunkMapAsset
+      ctx.emitFile({
+        type: 'asset',
+        fileName: polyfillChunkMapAsset.fileName,
+        source: polyfillChunkMapAsset.source,
+      })
     }
   }
 }
@@ -914,26 +949,16 @@ function prependModenChunkLegacyGuardPlugin(): Plugin {
   }
 }
 
-function isLegacyChunk(
-  chunk: Rollup.RenderedChunk,
-  options: Rollup.NormalizedOutputOptions,
-) {
-  return options.format === 'system' && chunk.fileName.includes('-legacy')
+function isLegacyChunk(chunk: Rollup.RenderedChunk) {
+  return chunk.fileName.includes('-legacy')
 }
 
-function isLegacyBundle(
-  bundle: Rollup.OutputBundle,
-  options: Rollup.NormalizedOutputOptions,
-) {
-  if (options.format === 'system') {
-    const entryChunk = Object.values(bundle).find(
-      (output) => output.type === 'chunk' && output.isEntry,
-    )
-
-    return !!entryChunk && entryChunk.fileName.includes('-legacy')
-  }
+function isLegacyBundle(bundle: Rollup.OutputBundle) {
+  const entryChunk = Object.values(bundle).find(
+    (output) => output.type === 'chunk' && output.isEntry,
+  )
 
-  return false
+  return !!entryChunk && entryChunk.fileName.includes('-legacy')
 }
 
 function recordAndRemovePolyfillBabelPlugin(

packages/vite/src/node/config.ts

@@ -10,6 +10,7 @@ import colors from 'picocolors'
 import type { Alias, AliasOptions } from 'dep-types/alias'
 import picomatch from 'picomatch'
 import {
+  type NormalizedOutputOptions,
   type OutputChunk,
   type PluginContextMeta,
   type RolldownOptions,
@@ -637,6 +638,10 @@ export interface ResolvedConfig
       appType: AppType
       experimental: RequiredExceptFor<ExperimentalOptions, 'renderBuiltUrl'>
       environments: Record<string, ResolvedEnvironmentOptions>
+      /** @internal injected by legacy plugin */
+      isOutputOptionsForLegacyChunks?(
+        outputOptions: NormalizedOutputOptions,
+      ): boolean
       /**
        * The token to connect to the WebSocket server from browsers.
        *

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

@@ -849,7 +849,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         }
 
         if (this.environment.config.build.cssCodeSplit) {
-          if (opts.format === 'es' || opts.format === 'cjs') {
+          if (
+            (opts.format === 'es' || opts.format === 'cjs') &&
+            !chunk.fileName.includes('-legacy')
+          ) {
             const isEntry = chunk.isEntry && isPureCssChunk
             const cssFullAssetName = ensureFileExt(chunk.name, '.css')
             // if facadeModuleId doesn't exist or doesn't have a CSS extension,
@@ -863,7 +866,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             const originalFileName = getChunkOriginalFileName(
               chunk,
               config.root,
-              opts.format,
             )
 
             chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName)
@@ -904,20 +906,32 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
               `${style}.textContent = ${cssString};` +
               `document.head.appendChild(${style});`
 
-            // TODO: system js support
-            // const wrapIdx = code.indexOf('System.register')
-            // if (wrapIdx >= 0) {
-            //   const executeFnStart = code.indexOf('execute:', wrapIdx)
-            //   injectionPoint = code.indexOf('{', executeFnStart) + 1
-            // }
-            const m = (
-              opts.format === 'iife' ? IIFE_BEGIN_RE : UMD_BEGIN_RE
-            ).exec(code)
-            if (!m) {
-              this.error('Injection point for inlined CSS not found')
+            let injectionPoint: number
+            if (opts.format === 'iife' || opts.format === 'umd') {
+              const m = (
+                opts.format === 'iife' ? IIFE_BEGIN_RE : UMD_BEGIN_RE
+              ).exec(code)
+              if (!m) {
+                this.error('Injection point for inlined CSS not found')
+                return
+              }
+              injectionPoint = m.index + m[0].length
+            } else if (opts.format === 'es') {
+              // legacy build
+              if (code.startsWith('#!')) {
+                let secondLinePos = code.indexOf('\n')
+                if (secondLinePos === -1) {
+                  secondLinePos = 0
+                }
+                injectionPoint = secondLinePos
+              } else {
+                injectionPoint = 0
+              }
+            } else {
+              this.error('Non supported format')
               return
             }
-            const injectionPoint = m.index + m[0].length
+
             s ||= new MagicString(code)
             s.appendRight(injectionPoint, injectCode)
           }
@@ -954,8 +968,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
     },
 
     async generateBundle(opts, bundle) {
-      // @ts-expect-error asset emits are skipped in legacy bundle
-      if (opts.__vite_skip_asset_emit__) {
+      // to avoid emitting duplicate assets for modern build and legacy build
+      if (this.environment.config.isOutputOptionsForLegacyChunks?.(opts)) {
         return
       }
 

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

@@ -363,8 +363,9 @@ export const buildEsbuildPlugin = (): Plugin => {
       return environment.config.esbuild !== false
     },
     async renderChunk(code, chunk, opts) {
-      // @ts-expect-error injected by @vitejs/plugin-legacy
-      if (opts.__vite_skip_esbuild__) {
+      // avoid on legacy chunks since it produces legacy-unsafe code
+      // e.g. rewriting object properties into shorthands
+      if (this.environment.config.isOutputOptionsForLegacyChunks?.(opts)) {
         return null
       }