feat: source map support of transform hook

Author: sxzz

playground/demo.ts

@@ -35,7 +35,26 @@ export function demoPlugin(): Plugin {
         const code = await readFile(fileURLToPath(id), 'utf8')
         const s = new MagicString(code)
         s.prepend('// header\n')
-        const map = s.generateMap({ hires: 'boundary', includeContent: true })
+        const map = s.generateMap({
+          file: id,
+          hires: 'boundary',
+          includeContent: true,
+        })
+        return {
+          code: s.toString(),
+          map,
+        }
+      }
+    },
+    transform(code, id) {
+      if (id.endsWith('trace.js') && typeof code === 'string') {
+        const s = new MagicString(code)
+        s.prepend('// header2\n')
+        const map = s.generateMap({
+          file: id,
+          hires: 'boundary',
+          includeContent: true,
+        })
         return {
           code: s.toString(),
           map,

src/loader/index.ts

@@ -1,4 +1,5 @@
 import process from 'node:process'
+import remapping from '@ampproject/remapping'
 import type {
   FalsyValue,
   LoadResult,
@@ -110,6 +111,7 @@ export const load: LoadHook = async (url, context, nextLoad) => {
 
   let result: LoadFnOutput | undefined
   const defaultFormat = context.format || 'module'
+  const maps: any[] = []
 
   // load hook
   for (const plugin of plugins) {
@@ -131,11 +133,9 @@ export const load: LoadHook = async (url, context, nextLoad) => {
           shortCircuit: true,
         }
       } else {
+        if (loadResult.map) maps.unshift(loadResult.map)
         result = {
-          source:
-            typeof loadResult.code === 'string'
-              ? attachSourceMap(loadResult.map, loadResult.code)
-              : loadResult.code,
+          source: loadResult.code,
           format: loadResult.format || defaultFormat,
           shortCircuit: true,
         }
@@ -162,6 +162,7 @@ export const load: LoadHook = async (url, context, nextLoad) => {
       ) {
         result = { ...result, source: transformResult }
       } else {
+        if (transformResult.map) maps.unshift(transformResult.map)
         result = {
           ...result,
           source: transformResult.code,
@@ -171,5 +172,11 @@ export const load: LoadHook = async (url, context, nextLoad) => {
     }
   }
 
+  if (maps.length && typeof result.source === 'string') {
+    const map = remapping(maps, () => null)
+    const code = attachSourceMap(map, result.source)
+    result.source = code
+  }
+
   return result
 }

src/loader/map.ts

@@ -1,35 +1,15 @@
 import { Buffer } from 'node:buffer'
-import type { EncodedSourceMap, SourceMap } from '@ampproject/remapping'
+import type { SourceMap } from '@ampproject/remapping'
 
-export function attachSourceMap(map: any, code: string): string {
+export function attachSourceMap(map: SourceMap, code: string): string {
   if (map) {
     if (!map.sourcesContent || map.sourcesContent.length === 0)
       map.sourcesContent = [code]
-
-    map = fixSourceMap(map as EncodedSourceMap)
-    code += `\n//# sourceMappingURL=${map.toUrl()}`
+    code += `\n//# sourceMappingURL=${toUrl(map)}`
   }
   return code
 }
 
-// `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 {
-  if (!Object.prototype.hasOwnProperty.call(map, 'toString')) {
-    Object.defineProperty(map, 'toString', {
-      enumerable: false,
-      value: function toString() {
-        return JSON.stringify(this)
-      },
-    })
-  }
-  if (!Object.prototype.hasOwnProperty.call(map, 'toUrl')) {
-    Object.defineProperty(map, 'toUrl', {
-      enumerable: false,
-      value: function toUrl() {
-        return `data:application/json;charset=utf-8;base64,${Buffer.from(this.toString()).toString('base64')}`
-      },
-    })
-  }
-  return map as SourceMap
+function toUrl(map: SourceMap) {
+  return `data:application/json;charset=utf-8;base64,${Buffer.from(map.toString()).toString('base64')}`
 }