fix: separate systemjs transform from polyfill detection

Author: hi-ogawa

packages/plugin-legacy/src/index.ts

@@ -487,8 +487,8 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       //   )
       // }
       const polyfillsDiscovered = {
-        modern: new Set(),
-        legacy: new Set(),
+        modern: new Set<string>(),
+        legacy: new Set<string>(),
       }
 
       if (!isLegacyChunk(chunk, opts)) {
@@ -557,12 +557,23 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       // transform the legacy chunk with @babel/preset-env
       const sourceMaps = !!config.build.sourcemap
       const babel = await loadBabel()
-      const systemJsPlugins = [
-        // @ts-ignore
-        (await import('@babel/plugin-transform-dynamic-import')).default,
-        // @ts-ignore
-        (await import('@babel/plugin-transform-modules-systemjs')).default,
-      ]
+
+      // need to transform into systemjs separately from other plugins
+      // for preset-env polyfill detection and removal
+      // TODO: use transformFromAst to avoid multiple parse
+      const resultSystem = babel.transform(raw, {
+        babelrc: false,
+        configFile: false,
+        // TODO: source map
+        plugins: [
+          // @ts-ignore
+          (await import('@babel/plugin-transform-dynamic-import')).default,
+          // @ts-ignore
+          (await import('@babel/plugin-transform-modules-systemjs')).default,
+        ],
+      })
+      raw = resultSystem?.code!
+
       const result = babel.transform(raw, {
         babelrc: false,
         configFile: false,
@@ -575,7 +586,6 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           [
             () => ({
               plugins: [
-                ...systemJsPlugins,
                 recordAndRemovePolyfillBabelPlugin(polyfillsDiscovered.legacy),
                 replaceLegacyEnvBabelPlugin(),
                 wrapIIFEBabelPlugin(),

playground/legacy-simple/index.html

@@ -0,0 +1 @@
+<script type="module" src="/src/entry.js"></script>

playground/legacy-simple/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@vitejs/test-legacy-simple",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "workspace:*",
+    "@vitejs/plugin-legacy": "workspace:*"
+  }
+}

playground/legacy-simple/src/dep1.js

@@ -0,0 +1,2 @@
+import dep2 from './dep2'
+export default ['dep1.js', dep2]

playground/legacy-simple/src/dep2.js

@@ -0,0 +1,2 @@
+await new Promise((r) => setTimeout(r, 0))
+export default 'dep2.js'

playground/legacy-simple/src/dep3.txt

@@ -0,0 +1 @@
+test asset

playground/legacy-simple/src/entry.js

@@ -0,0 +1,25 @@
+import dep2 from './dep2.js'
+
+async function main() {
+  const dep1 = await import('./dep1.js')
+  console.log(dep1, dep2)
+  console.log('[dep3.txt] ', new URL('./dep3.txt', import.meta.url).href)
+
+  if (typeof document !== 'undefined') {
+    const el = document.createElement('div')
+    el.innerHTML = `
+      <pre>${JSON.stringify(
+        {
+          dep1,
+          dep2,
+          dep3: new URL('./dep3.txt', import.meta.url).href,
+        },
+        null,
+        2,
+      )}</pre>
+    `
+    document.body.appendChild(el)
+  }
+}
+
+main()

playground/legacy-simple/vite.config.js

@@ -0,0 +1,48 @@
+// import fs from 'node:fs'
+// import path from 'node:path'
+import assert from 'assert'
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  // base: './',
+  plugins: [
+    legacy({
+      targets: 'IE 11',
+      // modernPolyfills: true,
+    }),
+    {
+      name: 'legacy-html',
+      apply: 'build',
+      enforce: 'post',
+      generateBundle(_options, bundle) {
+        const chunk = bundle['index.html']
+        assert(chunk.type === 'asset')
+        const source = chunk.source
+        assert(typeof source === 'string')
+        chunk.source = source
+          .replace(/<script type="module".*?<\/script>/g, '')
+          .replace(/<link rel="modulepreload".*?>/, '')
+          .replace(/<script nomodule/g, '<script')
+      },
+    },
+  ],
+
+  build: {
+    minify: false,
+    assetsInlineLimit: 0,
+    // manifest: true,
+    // sourcemap: true,
+  },
+
+  // // for tests, remove `<script type="module">` tags and remove `nomodule`
+  // // attrs so that we run the legacy bundle instead.
+  // __test__() {
+  //   const indexPath = path.resolve(__dirname, './dist/index.html')
+  //   let index = fs.readFileSync(indexPath, 'utf-8')
+  //   index = index
+  //     .replace(/<script type="module".*?<\/script>/g, '')
+  //     .replace(/<script nomodule/g, '<script')
+  //   fs.writeFileSync(indexPath, index)
+  // },
+})