diff --git a/src/index.ts b/src/index.ts index 35f4aed..3216043 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,6 +6,8 @@ import esbuildPlugin from 'node-stdlib-browser/helpers/esbuild/plugin' import type { Plugin } from 'vite' import { compareModuleNames, isEnabled, isNodeProtocolImport, toRegExp, withoutNodeProtocol } from './utils' +type TransformHook = Extract + export type BuildTarget = 'build' | 'dev' export type BooleanOrBuildTarget = boolean | BuildTarget export type ModuleName = keyof typeof stdLibBrowser @@ -130,7 +132,7 @@ const globalShimBanners = { * }) * ``` */ -export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => { +export const nodePolyfills = (options: PolyfillOptions = {}): Plugin[] => { const optionsResolved: PolyfillOptionsResolved = { include: [], exclude: [], @@ -199,7 +201,23 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => { ``, ].join('\n') - return { + let rawInjectPlugin: Plugin | false | undefined + function transform(this: ThisParameterType, code: string, id: string, opts: Parameters[2]) { + if (rawInjectPlugin === undefined) { + throw new Error('transform called before inject plugin initialization') + } + if (rawInjectPlugin === false) { + return + } + return (rawInjectPlugin.transform as TransformHook).call(this, code, id, opts) + } + const injectPlugin: Plugin = { + name: 'vite-plugin-node-polyfills:inject', + enforce: 'post', + transform, + } + + const plugin: Plugin = { name: 'vite-plugin-node-polyfills', config(config, env) { const isDev = env.command === 'serve' @@ -220,6 +238,17 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => { ...(isEnabled(optionsResolved.globals.process, 'build') ? { process: 'vite-plugin-node-polyfills/shims/process' } : {}), } + const isNativeInjectAvailable = env.command === 'build' && isRolldownVite + rawInjectPlugin = (Object.keys(shimsToInject).length > 0 && !isNativeInjectAvailable) ? inject(shimsToInject) as Plugin : false + if (rawInjectPlugin === false) { + delete injectPlugin.transform + } else { + // hook filters are only supported in Vite 6.3.0+ + (transform as any).filter = { + code: new RegExp(Object.keys(shimsToInject).join('|')), + } + } + return { build: { rollupOptions: { @@ -232,17 +261,11 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => { rollupWarn(warning) }) }, - ...Object.keys(shimsToInject).length > 0 - ? isRolldownVite - ? { transform: { inject: shimsToInject } } - : { plugins: [inject(shimsToInject)] } + ...(Object.keys(shimsToInject).length > 0 && isRolldownVite) + ? { transform: { inject: shimsToInject } } : {}, }, }, - esbuild: { - // In dev, the global polyfills need to be injected as a banner in order for isolated scripts (such as Vue SFCs) to have access to them. - banner: isDev ? globalShimsBanner : undefined, - }, optimizeDeps: { exclude: [ ...globalShimPaths, @@ -308,4 +331,8 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => { } }, } + return [ + injectPlugin, + plugin, + ] } diff --git a/test/integration/global-references/index.test.ts b/test/integration/global-references/index.test.ts index 8bace33..dc139d4 100644 --- a/test/integration/global-references/index.test.ts +++ b/test/integration/global-references/index.test.ts @@ -7,12 +7,7 @@ describe('import globals', () => { const result = await transformDev(`Buffer.from('test')`) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill + import { default as Buffer } from "/shims/buffer/dist/index.js"; Buffer.from("test"); `)) @@ -28,8 +23,7 @@ describe('import globals', () => { }) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill + import { default as Buffer } from "/shims/buffer/dist/index.js"; Buffer.from("test"); `)) @@ -41,12 +35,7 @@ describe('import globals', () => { const result = await transformDev(`console.log(global)`) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill + import { default as global } from "/shims/global/dist/index.js"; console.log(global); `)) @@ -62,8 +51,7 @@ describe('import globals', () => { }) expect(result?.code).toEqual(formatWhitespace(` - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill + import { default as global } from "/shims/global/dist/index.js"; console.log(global); `)) @@ -75,12 +63,7 @@ describe('import globals', () => { const result = await transformDev(`console.log(process)`) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill + import { default as process } from "/shims/process/dist/index.js"; console.log(process); `)) @@ -96,8 +79,7 @@ describe('import globals', () => { }) expect(result?.code).toEqual(formatWhitespace(` - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill + import { default as process } from "/shims/process/dist/index.js"; console.log(process); `)) diff --git a/test/integration/import-globals/index.test.ts b/test/integration/import-globals/index.test.ts index 90ef455..7fa8173 100644 --- a/test/integration/import-globals/index.test.ts +++ b/test/integration/import-globals/index.test.ts @@ -10,13 +10,6 @@ describe('import globals', () => { `) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill - import Buffer from "/shims/buffer/dist/index.js"; console.log(Buffer); `)) @@ -29,13 +22,6 @@ describe('import globals', () => { `) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill - import Buffer from "/shims/buffer/dist/index.js"; console.log(Buffer); `)) @@ -48,13 +34,6 @@ describe('import globals', () => { `) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill - import Buffer from "/shims/buffer/dist/index.js"; console.log(Buffer); `)) @@ -67,13 +46,6 @@ describe('import globals', () => { `) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill - import Buffer from "/shims/buffer/dist/index.js"; console.log(Buffer); `)) @@ -88,13 +60,6 @@ describe('import globals', () => { `) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill - import process from "/shims/process/dist/index.js"; console.log(process); `)) @@ -107,13 +72,6 @@ describe('import globals', () => { `) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill - import process from "/shims/process/dist/index.js"; console.log(process); `)) @@ -126,13 +84,6 @@ describe('import globals', () => { `) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill - import process from "/shims/process/dist/index.js"; console.log(process); `)) @@ -145,13 +96,6 @@ describe('import globals', () => { `) expect(result?.code).toEqual(formatWhitespace(` - import __buffer_polyfill from "/shims/buffer/dist/index.js" - globalThis.Buffer = globalThis.Buffer || __buffer_polyfill - import __global_polyfill from "/shims/global/dist/index.js" - globalThis.global = globalThis.global || __global_polyfill - import __process_polyfill from "/shims/process/dist/index.js" - globalThis.process = globalThis.process || __process_polyfill - import process from "/shims/process/dist/index.js"; console.log(process); `))