webpack plugin: replaces version plugins with a simpler plugin using SourceProcessor

Author: perf2711

tools/webpack-plugin/package.json

@@ -12,7 +12,7 @@
         "clean": "tsc -b ./tsconfig.build.json --clean && rimraf \"lib\"",
         "format": "prettier --write '**/*.ts'",
         "lint": "eslint . --ext .ts",
-        "watch": "tsc -b ./tsconfig.packages.json -w",
+        "watch": "tsc -b ./tsconfig.build.json -w",
         "test": "npm run test:webpackv5 && npm run test:webpackv4",
         "test:webpackv4": "NODE_ENV=test jest --config ./webpack4.jest.config.js",
         "test:webpackv5": "NODE_ENV=test jest",

tools/webpack-plugin/src/BacktracePlugin.ts

@@ -1,19 +1,77 @@
-import webpack from 'webpack';
-import { BacktracePluginV4 } from './BacktracePluginV4';
-import { BacktracePluginV5 } from './BacktracePluginV5';
-
-let BacktracePlugin: typeof BacktracePluginV4 | typeof BacktracePluginV5;
-
-const version = process.env.WEBPACK_VERSION ?? webpack.version[0];
-switch (version) {
-    case '4':
-        BacktracePlugin = BacktracePluginV4;
-        break;
-    case '5':
-        BacktracePlugin = BacktracePluginV5;
-        break;
-    default:
-        throw new Error(`Webpack version ${version} is not supported.`);
-}
+import { DebugIdGenerator, SourceMapUploader, SourceProcessor } from '@backtrace/sourcemap-tools';
+import path from 'path';
+import webpack, { WebpackPluginInstance } from 'webpack';
+import { BacktracePluginOptions } from './models/BacktracePluginOptions';
+
+export class BacktracePlugin implements WebpackPluginInstance {
+    private readonly _sourceMapProcessor: SourceProcessor;
+    private readonly _sourceMapUploader?: SourceMapUploader;
+
+    constructor(public readonly options?: BacktracePluginOptions) {
+        this._sourceMapProcessor = new SourceProcessor(options?.debugIdGenerator ?? new DebugIdGenerator());
+
+        this._sourceMapUploader =
+            options?.sourceMapUploader ?? (options?.uploadUrl ? new SourceMapUploader(options.uploadUrl) : undefined);
+    }
+
+    public apply(compiler: webpack.Compiler) {
+        compiler.hooks.afterEmit.tapPromise(BacktracePlugin.name, async (compilation) => {
+            const logger = compilation.getLogger(BacktracePlugin.name);
+            if (!compilation.outputOptions.path) {
+                logger.error('skipping everything because outputOptions.path is not set, a bug?');
+                return;
+            }
+
+            const entries: [string, string, string][] = [];
+
+            for (const asset in compilation.assets) {
+                if (!asset.match(/\.(c|m)?jsx?$/)) {
+                    logger.debug(`[${asset}] skipping processing, extension does not match`);
+                    continue;
+                }
 
-export { BacktracePlugin };
+                const map = asset + '.map';
+                if (!compilation.assets[map]) {
+                    logger.debug(`[${asset}] skipping processing, map file not found`);
+                    continue;
+                }
+
+                const assetPath = path.join(compilation.outputOptions.path, asset);
+                const sourceMapPath = path.join(compilation.outputOptions.path, map);
+
+                logger.debug(`adding asset ${assetPath} with sourcemap ${sourceMapPath}`);
+                entries.push([asset, assetPath, sourceMapPath]);
+            }
+
+            logger.log(`received ${entries.length} files for processing`);
+
+            for (const [asset, sourcePath, sourceMapPath] of entries) {
+                logger.time(`[${asset}] process source and sourcemap`);
+
+                let debugId: string;
+                try {
+                    debugId = await this._sourceMapProcessor.processSourceAndSourceMapFiles(sourcePath, sourceMapPath);
+                    logger.timeEnd(`[${asset}] process source and sourcemap`);
+                } catch (err) {
+                    logger.timeEnd(`[${asset}] process source and sourcemap`);
+                    logger.error(`[${asset}] process source and sourcemap failed:`, err);
+                    continue;
+                }
+
+                if (this._sourceMapUploader) {
+                    logger.time(`[${asset}] upload sourcemap`);
+                    try {
+                        await this._sourceMapUploader.upload(sourceMapPath, debugId);
+                        logger.timeEnd(`[${asset}] upload sourcemap`);
+                    } catch (err) {
+                        logger.timeEnd(`[${asset}] upload sourcemap`);
+                        logger.error(`[${asset}] upload sourcemap failed:`, err);
+                    }
+                    logger.log(`[${asset}] file processed and sourcemap uploaded`);
+                } else {
+                    logger.log(`[${asset}] file processed`);
+                }
+            }
+        });
+    }
+}

tools/webpack-plugin/src/BacktracePluginV4.ts

@@ -1,7 +1,4 @@
 import { BacktracePlugin } from './BacktracePlugin';
-
-export { BacktracePluginV4 } from './BacktracePluginV4';
-export { BacktracePluginV5 } from './BacktracePluginV5';
 export { BacktracePluginOptions } from './models/BacktracePluginOptions';
 export { BacktracePlugin };
 export default BacktracePlugin;

tools/webpack-plugin/src/BacktracePluginV5.ts

@@ -1,5 +1,7 @@
-import { DebugIdGenerator } from '@backtrace/sourcemap-tools';
+import { DebugIdGenerator, SourceMapUploader } from '@backtrace/sourcemap-tools';
 
 export interface BacktracePluginOptions {
     debugIdGenerator?: DebugIdGenerator;
+    sourceMapUploader?: SourceMapUploader;
+    uploadUrl?: string | URL;
 }