feat(esbuild): added support for esbuild loader option (#337)

README.md

@@ -192,12 +192,12 @@ export const unplugin = createUnplugin((options: UserOptions, meta) => {
   console.log(meta.framework) // 'vite' | 'rollup' | 'webpack' | 'rspack' | 'esbuild'
 
   return {
-    // common unplugin hooks
+    // Common unplugin hooks
     name: 'unplugin-prefixed-name',
     transformInclude(id) { /* ... */ },
     transform(code) { /* ... */ },
 
-    // framework specific hooks
+    // Framework specific hooks
     vite: {
       // Vite plugin
       configureServer(server) {
@@ -209,16 +209,21 @@ export const unplugin = createUnplugin((options: UserOptions, meta) => {
       // Rollup plugin
     },
     webpack(compiler) {
-      // configure Webpack compiler
+      // Configure Webpack compiler
     },
     rspack(compiler) {
-      // configure Rspack compiler
+      // Configure Rspack compiler
     },
     esbuild: {
-      // change the filter of onResolve and onLoad
+      // Change the filter of onResolve and onLoad
       // onResolveFilter?: RegExp,
       // onLoadFilter?: RegExp,
-      // or you can completely replace the setup logic
+
+      // Tell esbuild how to interpret the contents. By default unplugin tries to guess the loader
+      // from file extension (eg: .js -> "js", .jsx -> 'jsx')
+      // loader?: (Loader | (code: string, id: string) => Loader)
+
+      // Or you can completely replace the setup logic
       // setup?: EsbuildPlugin.setup,
     },
   }

src/esbuild/index.ts

@@ -4,7 +4,7 @@ import type { PartialMessage } from 'esbuild'
 import type { SourceMap } from 'rollup'
 import type { RawSourceMap } from '@ampproject/remapping'
 import type { EsbuildPlugin, UnpluginBuildContext, UnpluginContext, UnpluginContextMeta, UnpluginFactory, UnpluginInstance, UnpluginOptions } from '../types'
-import { combineSourcemaps, createEsbuildContext, guessLoader, processCodeWithSourceMap, toArray } from './utils'
+import { combineSourcemaps, createEsbuildContext, guessLoader, processCodeWithSourceMap, toArray, unwrapLoader } from './utils'
 
 let i = 0
 
@@ -25,6 +25,7 @@ export function getEsbuildPlugin<UserOptions = Record<string, never>>(
 
         const onResolveFilter = plugin.esbuild?.onResolveFilter ?? /.*/
         const onLoadFilter = plugin.esbuild?.onLoadFilter ?? /.*/
+        const loader = plugin.esbuild?.loader ?? guessLoader
 
         const context: UnpluginBuildContext = createEsbuildContext(initialOptions)
 
@@ -98,7 +99,7 @@ export function getEsbuildPlugin<UserOptions = Record<string, never>>(
               if (map)
                 code = processCodeWithSourceMap(map, code)
 
-              return { contents: code, errors, warnings, loader: guessLoader(args.path), resolveDir }
+              return { contents: code, errors, warnings, loader: unwrapLoader(loader, code, args.path), resolveDir }
             }
 
             if (!plugin.transformInclude || plugin.transformInclude(id)) {
@@ -133,7 +134,7 @@ export function getEsbuildPlugin<UserOptions = Record<string, never>>(
             if (code) {
               if (map)
                 code = processCodeWithSourceMap(map, code)
-              return { contents: code, errors, warnings, loader: guessLoader(args.path), resolveDir }
+              return { contents: code, errors, warnings, loader: unwrapLoader(loader, code, args.path), resolveDir }
             }
           })
         }

src/esbuild/utils.ts

@@ -28,10 +28,21 @@ const ExtToLoader: Record<string, Loader> = {
   '.txt': 'text',
 }
 
-export function guessLoader(id: string): Loader {
+export function guessLoader(code: string, id: string): Loader {
   return ExtToLoader[path.extname(id).toLowerCase()] || 'js'
 }
 
+export function unwrapLoader(
+  loader: Loader | ((code: string, id: string) => Loader),
+  code: string,
+  id: string,
+): Loader {
+  if (typeof loader === 'function')
+    return loader(code, id)
+
+  return loader
+}
+
 // `load` and `transform` may return a sourcemap without toString and toUrl,
 // but esbuild needs them, we fix the two methods
 export function fixSourceMap(map: EncodedSourceMap): SourceMap {

src/types.ts

@@ -1,7 +1,7 @@
 import type { AcornNode, EmittedAsset, PluginContextMeta as RollupContextMeta, Plugin as RollupPlugin, SourceMapInput } from 'rollup'
 import type { Compiler as WebpackCompiler, WebpackPluginInstance } from 'webpack'
 import type { Plugin as VitePlugin } from 'vite'
-import type { Plugin as EsbuildPlugin, PluginBuild } from 'esbuild'
+import type { Plugin as EsbuildPlugin, Loader, PluginBuild } from 'esbuild'
 import type { Compiler as RspackCompiler, RspackPluginInstance } from '@rspack/core'
 import type VirtualModulesPlugin from 'webpack-virtual-modules'
 
@@ -75,6 +75,7 @@ export interface UnpluginOptions {
     onResolveFilter?: RegExp
     onLoadFilter?: RegExp
     setup?: EsbuildPlugin['setup']
+    loader?: Loader | ((code: string, id: string) => Loader)
   }
 }