From bd2f275d7132df6291a84abe75bf4007956e067d Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 7 Jan 2025 11:55:08 +0900 Subject: [PATCH] fix: separate systemjs transform from polyfill detection --- packages/plugin-legacy/src/index.ts | 28 ++++++++++----- playground/legacy-simple/index.html | 1 + playground/legacy-simple/package.json | 16 +++++++++ playground/legacy-simple/src/dep1.js | 2 ++ playground/legacy-simple/src/dep2.js | 2 ++ playground/legacy-simple/src/dep3.txt | 1 + playground/legacy-simple/src/entry.js | 9 +++++ playground/legacy-simple/vite.config.js | 48 +++++++++++++++++++++++++ pnpm-lock.yaml | 9 +++++ 9 files changed, 107 insertions(+), 9 deletions(-) create mode 100644 playground/legacy-simple/index.html create mode 100644 playground/legacy-simple/package.json create mode 100644 playground/legacy-simple/src/dep1.js create mode 100644 playground/legacy-simple/src/dep2.js create mode 100644 playground/legacy-simple/src/dep3.txt create mode 100644 playground/legacy-simple/src/entry.js create mode 100644 playground/legacy-simple/vite.config.js diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts index da1651751f5806..de935464dc7f54 100644 --- a/packages/plugin-legacy/src/index.ts +++ b/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(), + legacy: new Set(), } 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(), diff --git a/playground/legacy-simple/index.html b/playground/legacy-simple/index.html new file mode 100644 index 00000000000000..c604c14e007457 --- /dev/null +++ b/playground/legacy-simple/index.html @@ -0,0 +1 @@ + diff --git a/playground/legacy-simple/package.json b/playground/legacy-simple/package.json new file mode 100644 index 00000000000000..01115c66edaf69 --- /dev/null +++ b/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:*" + } +} diff --git a/playground/legacy-simple/src/dep1.js b/playground/legacy-simple/src/dep1.js new file mode 100644 index 00000000000000..d8e741e5ba1f8c --- /dev/null +++ b/playground/legacy-simple/src/dep1.js @@ -0,0 +1,2 @@ +import dep2 from './dep2' +export default ['dep1.js', dep2] diff --git a/playground/legacy-simple/src/dep2.js b/playground/legacy-simple/src/dep2.js new file mode 100644 index 00000000000000..1d41416a6c54d2 --- /dev/null +++ b/playground/legacy-simple/src/dep2.js @@ -0,0 +1,2 @@ +// await new Promise((r) => setTimeout(r, 0)) +export default 'dep2.js' diff --git a/playground/legacy-simple/src/dep3.txt b/playground/legacy-simple/src/dep3.txt new file mode 100644 index 00000000000000..7d40b559fcb4b1 --- /dev/null +++ b/playground/legacy-simple/src/dep3.txt @@ -0,0 +1 @@ +test asset diff --git a/playground/legacy-simple/src/entry.js b/playground/legacy-simple/src/entry.js new file mode 100644 index 00000000000000..1aa23d63fe43be --- /dev/null +++ b/playground/legacy-simple/src/entry.js @@ -0,0 +1,9 @@ +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) +} + +main() diff --git a/playground/legacy-simple/vite.config.js b/playground/legacy-simple/vite.config.js new file mode 100644 index 00000000000000..30eb10d0ab59a7 --- /dev/null +++ b/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(/