Fix sourcemap chaining

This commit fixes updating the sourcemap comment to point to the right
file. It also updates the test to use esbuild instead of webpack as the
sourcemaps generated by esbuild are friendlier without webpack speicif
protocol representing files. As we move to esbuild, the existing webpack
plugin is modified to suit esbuild as well.

Signed-off-by: Karthik Ganeshram <[email protected]>

Author: karthik2804

packages/build-tools/plugins/esbuild/index.js

@@ -0,0 +1,28 @@
+import {
+    getPackagesWithWasiDeps,
+    processWasiDeps
+} from '../../dist/wasiDepsParser.js';
+
+export async function SpinEsbuildPlugin() {
+    const { getWitImports } = await import('../../lib/wit_tools.js');
+
+    // Step 1: Get WIT imports from dependencies
+    const wasiDeps = getPackagesWithWasiDeps(process.cwd(), new Set(), true);
+    const { witPaths, targetWorlds } = processWasiDeps(wasiDeps);
+    const witImports = getWitImports(witPaths, targetWorlds);
+
+    // Store as a Set for fast lookup
+    const externals = new Set(witImports);
+
+    return {
+        name: 'spin-sdk-externals',
+        setup(build) {
+            build.onResolve({ filter: /.*/ }, args => {
+                if (externals.has(args.path)) {
+                    return { path: args.path, external: true };
+                }
+                return null;
+            });
+        }
+    };
+}

packages/build-tools/src/index.ts

@@ -70,9 +70,10 @@ async function main() {
     const source = await readFile(src, 'utf8');
     let { content: precompiledSource, sourceMap: precompiledSourceMap } = precompile(source, src, true, 'precompiled-source.js') as { content: string; sourceMap: SourceMapInput };
     // Check if input file has a source map because if we does, we need to chain it with the precompiled source map
+    // TODO: check using the sourcemap comment instead of the file existence and also deal with base64 encoded source maps
     if (await fileExists(src + '.map')) {
       const inputSourceMap = JSON.parse(await readFile(src + '.map', 'utf8')) as SourceMapInput;
-      precompiledSourceMap = chainSourceMaps(precompiledSourceMap, { src: inputSourceMap }) as SourceMapInput;
+      precompiledSourceMap = chainSourceMaps(precompiledSourceMap, { [src]: inputSourceMap }) as SourceMapInput;
     }
 
     // Write precompiled source to disk for debugging purposes.

packages/build-tools/src/precompile.js

@@ -51,12 +51,23 @@ export function precompile(source, filename = '<input>', moduleMode = false, pre
 
     magicString.prepend(`${PREAMBLE}${precompileCalls.join('\n')}${POSTAMBLE}`);
 
+    const sourceMapRegex = /\/\/# sourceMappingURL=.*$/gm;
+
+    let match;
+    while ((match = sourceMapRegex.exec(source))) {
+        const start = match.index;
+        const end = start + match[0].length;
+        magicString.remove(start, end);
+    }
+
+    const precompiledSource = magicString.toString() + `\n//# sourceMappingURL=${precompiledFileName}.map\n`;
+
     // When we're ready to pipe in source maps:
     const map = magicString.generateMap({
         source: filename,
         file: `${precompiledFileName}.map`,
         includeContent: true
     });
 
-    return { content: magicString.toString(), sourceMap: map };
+    return { content: precompiledSource, sourceMap: map };
 }

test/test-app/build.mjs

@@ -0,0 +1,39 @@
+// build.mjs
+import { build } from 'esbuild';
+import path from 'path';
+import { SpinEsbuildPlugin } from "@spinframework/build-tools/plugins/esbuild/index.js";
+import fs from 'fs';
+
+const spinPlugin = await SpinEsbuildPlugin();
+
+let SourceMapPlugin = {
+    name: 'excludeVendorFromSourceMap',
+    setup(build) {
+        build.onLoad({ filter: /node_modules/ }, args => {
+            return {
+                contents: fs.readFileSync(args.path, 'utf8')
+                    + '\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJtYXBwaW5ncyI6IkEifQ==',
+                loader: 'default',
+            }
+        })
+    },
+}
+
+await build({
+    entryPoints: ['./src/index.ts'],
+    outfile: './build/bundle.js',
+    bundle: true,
+    format: 'esm',
+    platform: 'node',
+    sourcemap: true,
+    minify: false,
+    plugins: [spinPlugin, SourceMapPlugin],
+    logLevel: 'error',
+    loader: {
+        '.ts': 'ts',
+        '.tsx': 'tsx',
+    },
+    resolveExtensions: ['.ts', '.tsx', '.js'],
+    // This prevents sourcemaps from traversing into node_modules
+    sourceRoot: path.resolve(process.cwd(), 'src'),
+});