feat: sourcemap dir structure

Author: jbroma

packages/repack/src/plugins/SourceMapPlugin.ts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import type { Compiler, RspackPluginInstance } from '@rspack/core';
 import { ConfigurationError } from './utils/ConfigurationError.js';
 
@@ -14,6 +15,10 @@ export class SourceMapPlugin implements RspackPluginInstance {
       return;
     }
 
+    const host = compiler.options.devServer!.host;
+    const port = compiler.options.devServer!.port;
+    const namespace = `http://${host}:${port}`;
+
     const format = compiler.options.devtool;
     // disable builtin sourcemap generation
     compiler.options.devtool = false;
@@ -24,8 +29,8 @@ export class SourceMapPlugin implements RspackPluginInstance {
     const devtoolNamespace =
       compiler.options.output.devtoolNamespace ??
       compiler.options.output.uniqueName;
-    const devtoolModuleFilenameTemplate =
-      compiler.options.output.devtoolModuleFilenameTemplate;
+    // const devtoolModuleFilenameTemplate =
+    //   compiler.options.output.devtoolModuleFilenameTemplate;
     const devtoolFallbackModuleFilenameTemplate =
       compiler.options.output.devtoolFallbackModuleFilenameTemplate;
 
@@ -48,14 +53,41 @@ export class SourceMapPlugin implements RspackPluginInstance {
     const moduleMaps = format.includes('module');
     const noSources = format.includes('nosources');
 
-    // TODO Fix sourcemap directory structure
-    // Right now its very messy and not every node module is inside of the node module
-    // like React Devtools backend etc or some symilinked module appear with relative path
-    // We should normalize this through a custom handler and provide an output similar to Metro
     new compiler.webpack.SourceMapDevToolPlugin({
       test: /\.([cm]?jsx?|bundle)$/,
       filename: '[file].map',
-      moduleFilenameTemplate: devtoolModuleFilenameTemplate,
+      moduleFilenameTemplate: (info) => {
+        // inlined modules
+        if (!info.identifier) {
+          return `${namespace}`;
+        }
+
+        const [prefix, ...parts] = info.resourcePath.split('/');
+
+        // prefixed modules like React DevTools Backend
+        if (prefix !== '.' && prefix !== '..') {
+          const resourcePath = parts.filter((part) => part !== '..').join('/');
+          return `webpack://${prefix}/${resourcePath}`;
+        }
+
+        const hasValidAbsolutePath = path.isAbsolute(info.absoluteResourcePath);
+
+        // project root
+        if (hasValidAbsolutePath && info.resourcePath.startsWith('./')) {
+          return `[projectRoot]${info.resourcePath.slice(1)}`;
+        }
+
+        // outside of project root
+        if (hasValidAbsolutePath && info.resourcePath.startsWith('../')) {
+          const parts = info.resourcePath.split('/');
+          const upLevel = parts.filter((part) => part === '..').length;
+          const restPath = parts.slice(parts.lastIndexOf('..') + 1).join('/');
+          const rootRef = `[projectRoot^${upLevel}]`;
+          return `${rootRef}${restPath ? '/' + restPath : ''}`;
+        }
+
+        return `[unknownOrigin]/${path.basename(info.identifier)}`;
+      },
       fallbackModuleFilenameTemplate: devtoolFallbackModuleFilenameTemplate,
       append: hidden
         ? false