fix: webpack and esbuild query string support

src/esbuild/index.ts

@@ -112,6 +112,8 @@ export function getEsbuildPlugin <UserOptions = {}> (
 
           if (plugin.load || plugin.transform) {
             onLoad({ filter: onLoadFilter }, async (args) => {
+              const id = args.path + args.suffix
+
               const errors: PartialMessage[] = []
               const warnings: PartialMessage[] = []
               const pluginContext: UnpluginContext = {
@@ -125,7 +127,7 @@ export function getEsbuildPlugin <UserOptions = {}> (
               let code: string | undefined, map: SourceMap | null | undefined
 
               if (plugin.load) {
-                const result = await plugin.load.call(Object.assign(context, pluginContext), args.path)
+                const result = await plugin.load.call(Object.assign(context, pluginContext), id)
                 if (typeof result === 'string') {
                   code = result
                 } else if (typeof result === 'object' && result !== null) {
@@ -149,15 +151,15 @@ export function getEsbuildPlugin <UserOptions = {}> (
                 return { contents: code, errors, warnings, loader: guessLoader(args.path), resolveDir }
               }
 
-              if (!plugin.transformInclude || plugin.transformInclude(args.path)) {
+              if (!plugin.transformInclude || plugin.transformInclude(id)) {
                 if (!code) {
                   // caution: 'utf8' assumes the input file is not in binary.
                   // if you want your plugin handle binary files, make sure to
                   // `plugin.load()` them first.
                   code = await fs.promises.readFile(args.path, 'utf8')
                 }
 
-                const result = await plugin.transform.call(Object.assign(context, pluginContext), code, args.path)
+                const result = await plugin.transform.call(Object.assign(context, pluginContext), code, id)
                 if (typeof result === 'string') {
                   code = result
                 } else if (typeof result === 'object' && result !== null) {

src/webpack/index.ts

@@ -2,7 +2,7 @@ import fs from 'fs'
 import { fileURLToPath } from 'url'
 import { resolve, dirname } from 'path'
 import VirtualModulesPlugin from 'webpack-virtual-modules'
-import type { ResolvePluginInstance } from 'webpack'
+import type { ResolvePluginInstance, RuleSetUseItem } from 'webpack'
 import type { UnpluginContextMeta, UnpluginInstance, UnpluginFactory, WebpackCompiler, ResolvedUnpluginOptions } from '../types'
 import { slash, backSlash } from './utils'
 import { createContext } from './context'
@@ -48,24 +48,26 @@ export function getWebpackPlugin<UserOptions = {}> (
 
         // transform hook
         if (plugin.transform) {
+          const useLoader: RuleSetUseItem[] = [{
+            loader: TRANSFORM_LOADER,
+            ident: plugin.name,
+            options: {
+              unpluginName: plugin.name
+            }
+          }]
+          const useNone: RuleSetUseItem[] = []
           compiler.options.module.rules.push({
-            include (id: string) {
-              if (id == null) {
-                return false
-              }
-              if (plugin.transformInclude) {
-                return plugin.transformInclude(slash(id))
-              } else {
-                return true
-              }
-            },
             enforce: plugin.enforce,
-            use: [{
-              loader: TRANSFORM_LOADER,
-              options: {
-                unpluginName: plugin.name
+            use: (data: { resource: string | null, resourceQuery: string }) => {
+              if (data.resource == null) {
+                return useNone
               }
-            }]
+              const id = slash(data.resource + (data.resourceQuery || ''))
+              if (!plugin.transformInclude || plugin.transformInclude(id)) {
+                return useLoader
+              }
+              return useNone
+            }
           })
         }
 

test/fixtures/transform/__test__/build.test.ts

@@ -10,6 +10,7 @@ describe('transform build', () => {
 
     expect(content).toContain('NON-TARGET: __UNPLUGIN__')
     expect(content).toContain('TARGET: [Injected Vite]')
+    expect(content).toContain('QUERY: [Injected Vite]')
   })
 
   it('rollup', async () => {
@@ -24,12 +25,14 @@ describe('transform build', () => {
 
     expect(content).toContain('NON-TARGET: __UNPLUGIN__')
     expect(content).toContain('TARGET: [Injected Webpack]')
+    expect(content).toContain('QUERY: [Injected Webpack]')
   })
 
   it('esbuild', async () => {
     const content = await fs.readFile(r('esbuild/main.js'), 'utf-8')
 
     expect(content).toContain('NON-TARGET: __UNPLUGIN__')
     expect(content).toContain('TARGET: [Injected Esbuild]')
+    expect(content).toContain('QUERY: [Injected Esbuild]')
   })
 })

test/fixtures/transform/src/main.js

@@ -1,4 +1,5 @@
 import { msg1 } from './nontarget'
 import { msg2 } from './target'
+import { msg3 } from './query?query-param=query-value'
 
-console.log(msg1, msg2)
+console.log(msg1, msg2, msg3)

test/fixtures/transform/src/query.js

@@ -0,0 +1 @@
+export const msg3 = 'QUERY: __UNPLUGIN__'

test/fixtures/transform/unplugin.js

@@ -1,11 +1,20 @@
 const { createUnplugin } = require('unplugin')
 const MagicString = require('magic-string')
 
-module.exports = createUnplugin((options) => {
+module.exports = createUnplugin((options, meta) => {
   return {
     name: 'transform-fixture',
+    resolveId (id) {
+      // Rollup doesn't know how to import module with query string so we ignore the module
+      if (id.includes('?query-param=query-value') && meta.framework === 'rollup') {
+        return {
+          id,
+          external: true
+        }
+      }
+    },
     transformInclude (id) {
-      return id.match(/[/\\]target\.js$/)
+      return id.match(/[/\\]target\.js$/) || id.includes('?query-param=query-value')
     },
     transform (code, id) {
       const s = new MagicString(code)
@@ -14,7 +23,14 @@ module.exports = createUnplugin((options) => {
         return null
       }
 
-      s.overwrite(index, index + '__UNPLUGIN__'.length, `[Injected ${options.msg}]`)
+      const injectedCode = `[Injected ${options.msg}]`
+
+      if (id.includes(injectedCode)) {
+        throw new Error('File was already transformed')
+      }
+
+      s.overwrite(index, index + '__UNPLUGIN__'.length, injectedCode)
+
       return {
         code: s.toString(),
         map: s.generateMap({