feat(angular-rspack,angular-rsbuild): add sourcemap option (#29)

Author: Coly010

e2e/fixtures/rsbuild-csr-css/eslint.next.config.js

@@ -39,4 +39,7 @@ module.exports = [
       parser: require('jsonc-eslint-parser'),
     },
   },
+  {
+    ignores: ['build'],
+  },
 ];

e2e/fixtures/rspack-csr-css/rspack.config.js

@@ -12,8 +12,12 @@ module.exports = () => {
           polyfills: ['zone.js'],
           main: './src/main.ts',
           outputPath: {
-            base: './build',
-            browser: './build/static',
+            base: './dist',
+            browser: './dist/static',
+          },
+          sourceMap: {
+            scripts: true,
+            styles: true,
           },
           outputHashing: 'none',
           tsConfig: join(__dirname, './tsconfig.app.json'),

e2e/fixtures/rspack-csr-css/src/styles.css

@@ -0,0 +1,3 @@
+div {
+  color: red;
+}

packages/angular-rsbuild/src/lib/config/create-config.ts

@@ -44,6 +44,7 @@ export async function _createConfig(
       stylePlugins.push(
         pluginSass({
           sassLoaderOptions: {
+            sourceMap: normalizedOptions.sourceMap.styles,
             sassOptions: {
               includePaths:
                 normalizedOptions.stylePreprocessorOptions?.includePaths,
@@ -53,13 +54,20 @@ export async function _createConfig(
         })
       );
     } else {
-      stylePlugins.push(pluginSass());
+      stylePlugins.push(
+        pluginSass({
+          sassLoaderOptions: {
+            sourceMap: normalizedOptions.sourceMap.styles,
+          },
+        })
+      );
     }
   } else if (normalizedOptions.inlineStyleLanguage === 'less') {
     if (normalizedOptions.stylePreprocessorOptions?.includePaths) {
       stylePlugins.push(
         pluginLess({
           lessLoaderOptions: {
+            sourceMap: normalizedOptions.sourceMap.styles,
             lessOptions: {
               javascriptEnabled: true,
               paths: normalizedOptions.stylePreprocessorOptions?.includePaths,
@@ -71,6 +79,7 @@ export async function _createConfig(
       stylePlugins.push(
         pluginLess({
           lessLoaderOptions: {
+            sourceMap: normalizedOptions.sourceMap.styles,
             lessOptions: {
               javascriptEnabled: true,
             },
@@ -153,6 +162,10 @@ export async function _createConfig(
             js: `[name]${hashFormat.chunk}.js`,
             css: `[name]${hashFormat.file}.css`,
           },
+          sourceMap: {
+            js: normalizedOptions.sourceMap.scripts ? 'source-map' : false,
+            css: normalizedOptions.sourceMap.styles,
+          },
           distPath: {
             root: normalizedOptions.outputPath.browser,
             js: '',

packages/angular-rsbuild/src/lib/config/create-config.unit.test.ts

@@ -108,6 +108,12 @@ describe('createConfig', () => {
             server: 'dist/server',
             media: 'dist/browser/media',
           },
+          sourceMap: {
+            scripts: true,
+            styles: true,
+            hidden: false,
+            vendor: false,
+          },
         },
         rsbuildConfigOverrides: {
           source: {
@@ -145,6 +151,12 @@ describe('createConfig', () => {
             server: 'dist/server',
             media: 'dist/browser/media',
           },
+          sourceMap: {
+            scripts: true,
+            styles: true,
+            hidden: false,
+            vendor: false,
+          },
           devServer: {
             port: 8080,
           },

packages/angular-rsbuild/src/lib/models/normalize-options.ts

@@ -4,6 +4,7 @@ import {
   type DevServerOptions,
   OutputPath,
   NormalizedPluginAngularOptions,
+  SourceMap,
 } from './plugin-options';
 import { join, resolve } from 'node:path';
 import { existsSync } from 'node:fs';
@@ -89,6 +90,7 @@ export const DEFAULT_PLUGIN_ANGULAR_OPTIONS: PluginAngularOptions = {
   optimization: true,
   outputPath: normalizeOutputPath(process.cwd(), undefined),
   outputHashing: 'all',
+  sourceMap: false,
   useTsProjectReferences: false,
   skipTypeChecking: false,
   devServer: {
@@ -132,6 +134,7 @@ export function normalizeOptions(
     ...(ssr != null ? { ssr: normalizedSsr } : {}),
     optimization: normalizedOptimization,
     outputPath: normalizeOutputPath(root, options.outputPath),
+    sourceMap: normalizeSourceMap(options.sourceMap),
     advancedOptimizations,
     aot,
     outputHashing: options.outputHashing ?? 'all',
@@ -141,6 +144,33 @@ export function normalizeOptions(
   };
 }
 
+function normalizeSourceMap(
+  sourceMap: boolean | Partial<SourceMap> | undefined
+): SourceMap {
+  if (sourceMap === undefined || sourceMap === true) {
+    return {
+      scripts: true,
+      styles: true,
+      hidden: false,
+      vendor: false,
+    };
+  }
+  if (sourceMap === false) {
+    return {
+      scripts: false,
+      styles: false,
+      hidden: false,
+      vendor: false,
+    };
+  }
+  return {
+    scripts: sourceMap.scripts ?? true,
+    styles: sourceMap.styles ?? true,
+    hidden: sourceMap.hidden ?? false,
+    vendor: sourceMap.vendor ?? false,
+  };
+}
+
 function normalizeDevServer(
   devServer: DevServerOptions | undefined
 ): DevServerOptions & { port: number } {

packages/angular-rsbuild/src/lib/models/normalize-options.unit.test.ts

@@ -126,6 +126,12 @@ describe('normalizeOptions', () => {
     defaultOptions = {
       ...DEFAULT_PLUGIN_ANGULAR_OPTIONS,
       outputPath: normalizeOutputPath(process.cwd(), undefined),
+      sourceMap: {
+        scripts: true,
+        styles: true,
+        hidden: false,
+        vendor: false,
+      },
     };
   });
 

packages/angular-rsbuild/src/lib/models/plugin-options.ts

@@ -33,6 +33,13 @@ export interface OutputPath {
   media: string;
 }
 
+export interface SourceMap {
+  scripts: boolean;
+  styles: boolean;
+  hidden: boolean;
+  vendor: boolean;
+}
+
 export interface PluginAngularOptions {
   index: string;
   browser: string;
@@ -52,6 +59,7 @@ export interface PluginAngularOptions {
   aot: boolean;
   inlineStyleLanguage: InlineStyleLanguage;
   tsConfig: string;
+  sourceMap?: boolean | Partial<SourceMap>;
   optimization?: boolean | OptimizationOptions;
   outputHashing?: OutputHashing;
   hasServer: boolean;
@@ -67,4 +75,5 @@ export interface NormalizedPluginAngularOptions extends PluginAngularOptions {
   optimization: boolean | OptimizationOptions;
   outputHashing: OutputHashing;
   outputPath: OutputPath;
+  sourceMap: SourceMap;
 }

packages/angular-rsbuild/src/lib/plugin/plugin-hoisted-js-transformer.ts

@@ -29,8 +29,15 @@ export const pluginHoistedJsTransformer = (
     } = { errors: undefined, warnings: undefined };
     const javascriptTransformer = new JavaScriptTransformer(
       {
-        sourcemap: false,
-        thirdPartySourcemaps: false,
+        /**
+         * Matches https://github.com/angular/angular-cli/blob/33ed6e875e509ebbaa0cbdb57be9e932f9915dff/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts#L89
+         * where pluginOptions.sourcemap is set https://github.com/angular/angular-cli/blob/61d98fde122468978de9b17bd79761befdbf2fac/packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts#L34
+         */
+        sourcemap: !!(
+          pluginOptions.sourceMap.scripts &&
+          (pluginOptions.sourceMap.hidden ? 'external' : true)
+        ),
+        thirdPartySourcemaps: pluginOptions.sourceMap.vendor,
         // @TODO: it should be `pluginOptions.advancedOptimizations` but it currently fails the build
         advancedOptimizations: false,
         jit: !pluginOptions.aot,

packages/angular-rspack/package.json

@@ -48,6 +48,7 @@
     "@nx/angular-rspack-compiler": "workspace:*",
     "@nx/devkit": "^20.0.0",
     "express": "4.21.1",
+    "source-map-loader": "^5.0.0",
     "jsonc-parser": "^3.3.1",
     "less-loader": "^12.2.0",
     "license-webpack-plugin": "^4.0.2",

packages/angular-rspack/src/lib/config/create-config.ts

@@ -3,17 +3,79 @@ import {
   Configuration,
   DevServer,
   SwcJsMinimizerRspackPlugin,
+  SourceMapDevToolPlugin,
+  RspackPluginInstance,
+  RuleSetRule,
 } from '@rspack/core';
 import { merge as rspackMerge } from 'webpack-merge';
 import { resolve } from 'path';
-import { AngularRspackPluginOptions, normalizeOptions } from '../models';
+import {
+  AngularRspackPluginOptions,
+  normalizeOptions,
+  SourceMap,
+} from '../models';
 import {
   JS_ALL_EXT_REGEX,
   TS_ALL_EXT_REGEX,
 } from '@nx/angular-rspack-compiler';
 import { getStyleLoaders } from './style-config-utils';
 import { getOutputHashFormat } from './helpers';
 import { getProxyConfig } from './dev-server-config-utils';
+import { DevToolsIgnorePlugin } from '../plugins/tools/dev-tools-ignore-plugin';
+
+function configureSourceMap(sourceMap: SourceMap) {
+  const { scripts, styles, hidden, vendor } = sourceMap;
+
+  const sourceMapRules: RuleSetRule[] = [];
+  const sourceMapPlugins: RspackPluginInstance[] = [];
+
+  if (scripts || styles) {
+    const include: RegExp[] = [];
+    if (scripts) {
+      include.push(/js$/);
+    }
+
+    if (styles) {
+      include.push(/css$/);
+    }
+
+    sourceMapPlugins.push(new DevToolsIgnorePlugin());
+
+    sourceMapPlugins.push(
+      new SourceMapDevToolPlugin({
+        filename: '[file].map',
+        include,
+        // We want to set sourceRoot to  `webpack:///` for non
+        // inline sourcemaps as otherwise paths to sourcemaps will be broken in browser
+        // `webpack:///` is needed for Visual Studio breakpoints to work properly as currently
+        // there is no way to set the 'webRoot'
+        sourceRoot: 'webpack:///',
+        moduleFilenameTemplate: '[resource-path]',
+        append: hidden ? false : undefined,
+      })
+    );
+
+    sourceMapRules.push({
+      test: /\.[cm]?jsx?$/,
+      enforce: 'pre',
+      loader: require.resolve('source-map-loader'),
+      options: {
+        filterSourceMappingUrl: (_mapUri: string, resourcePath: string) => {
+          if (vendor) {
+            // Consume all sourcemaps when vendor option is enabled.
+            return true;
+          }
+
+          // Don't consume sourcemaps in node_modules when vendor is disabled.
+          // But, do consume local libraries sourcemaps.
+          return !resourcePath.includes('node_modules');
+        },
+      },
+    });
+  }
+
+  return { sourceMapRules, sourceMapPlugins };
+}
 
 export async function _createConfig(
   options: AngularRspackPluginOptions,
@@ -24,15 +86,23 @@ export async function _createConfig(
   const hashFormat = getOutputHashFormat(normalizedOptions.outputHashing);
   const root = process.cwd();
 
+  const { sourceMapRules, sourceMapPlugins } = configureSourceMap(
+    normalizedOptions.sourceMap
+  );
+
   const defaultConfig: Configuration = {
     context: root,
     mode: isProduction ? 'production' : 'development',
+    devtool: normalizedOptions.sourceMap.scripts ? 'source-map' : undefined,
     output: {
       uniqueName: 'rspack-angular',
       publicPath: 'auto',
       clean: true,
       crossOriginLoading: false,
       trustedTypes: { policyName: 'angular#bundler' },
+      sourceMapFilename: normalizedOptions.sourceMap.scripts
+        ? '[file].map'
+        : undefined,
     },
     resolve: {
       extensions: ['.ts', '.tsx', '.mjs', '.js'],
@@ -57,7 +127,11 @@ export async function _createConfig(
         },
       },
       rules: [
-        ...getStyleLoaders(options.stylePreprocessorOptions),
+        ...getStyleLoaders(
+          normalizedOptions.stylePreprocessorOptions,
+          normalizedOptions.sourceMap
+        ),
+        ...sourceMapRules,
         { test: /[/\\]rxjs[/\\]add[/\\].+\.js$/, sideEffects: true },
         {
           test: TS_ALL_EXT_REGEX,
@@ -92,7 +166,7 @@ export async function _createConfig(
         },
       ],
     },
-    plugins: [],
+    plugins: [...sourceMapPlugins],
   };
 
   const configs: Configuration[] = [];