fix: @marko/register source maps

.changeset/witty-actors-search.md

@@ -0,0 +1,7 @@
+---
+"@marko/compiler": patch
+"marko": patch
+"@marko/translator-default": patch
+---
+
+Ensure source maps are loaded in dev mode when using the @marko/register hook.

packages/babel-utils/src/tags.js

@@ -297,10 +297,12 @@ export function resolveTagImport(path, request) {
 
 function createNewFileOpts(opts, filename) {
   const sourceFileName = basename(filename);
+  const sourceRoot = dirname(filename);
   const filenameRelative = relative(CWD, filename);
   return {
     ...opts,
     filename,
+    sourceRoot,
     sourceFileName,
     filenameRelative,
     parserOpts: {
@@ -310,6 +312,7 @@ function createNewFileOpts(opts, filename) {
     generatorOpts: {
       ...opts.generatorOpts,
       filename,
+      sourceRoot,
       sourceFileName
     }
   };

packages/compiler/package.json

@@ -26,6 +26,7 @@
     "raptor-util": "^3.2.0",
     "resolve-from": "^5.0.0",
     "self-closing-tags": "^1.0.1",
+    "source-map-support": "^0.5.21",
     "strip-ansi": "^6.0.0",
     "strip-json-comments": "^3.1.1"
   },

packages/compiler/src/index.js

@@ -14,6 +14,8 @@ import { buildCodeFrameError } from "./util/build-code-frame";
 import throwAggregateError from "./util/merge-errors";
 export { taglib };
 
+const CWD = process.cwd();
+
 let globalConfig = { ...defaultConfig };
 export function configure(newConfig) {
   globalConfig = { ...defaultConfig, ...newConfig };
@@ -88,9 +90,8 @@ function loadBabelConfig(filename, { babelConfig, ...markoConfig }) {
     ]
   ];
   const baseBabelConfig = {
-    filenameRelative: filename
-      ? path.relative(process.cwd(), filename)
-      : undefined,
+    filenameRelative: filename ? path.relative(CWD, filename) : undefined,
+    sourceRoot: filename ? path.dirname(filename) : undefined,
     sourceFileName: filename ? path.basename(filename) : undefined,
     configFile: isTranslated,
     babelrc: isTranslated,

packages/compiler/src/register.js

@@ -4,27 +4,48 @@ const compiler = require(".");
 const shouldOptimize = require("./util/should-optimize").default;
 const requiredOptions = { modules: "cjs" };
 const isDev = !shouldOptimize();
+const sourceMaps = new Map();
+let installSourceMaps = () => {
+  installSourceMaps = () => {};
+  require("source-map-support").install({
+    handleUncaughtExceptions: false,
+    environment: "node",
+    retrieveSourceMap(source) {
+      const map = sourceMaps.get(source);
+      if (map) {
+        return { url: null, map };
+      }
+      return null;
+    }
+  });
+};
 
 module.exports = register;
 register();
 
 function register({ extensions = require.extensions, ...options } = {}) {
-  extensions[".marko"] = (module, filename) =>
-    module._compile(
-      compiler.compileFileSync(
-        filename,
-        Object.assign(
-          {
-            meta: true,
-            hot: process.env.BROWSER_REFRESH_URL !== undefined,
-            // eslint-disable-next-line no-constant-condition
-            sourceMaps: isDev ? "inline" : false
-          },
-          options,
-          requiredOptions
-        )
-      ).code,
-      filename
+  extensions[".marko"] = (module, filename) => {
+    const compiled = compiler.compileFileSync(
+      filename,
+      Object.assign(
+        {
+          meta: true,
+          hot: process.env.BROWSER_REFRESH_URL !== undefined,
+          // eslint-disable-next-line no-constant-condition
+          sourceMaps: isDev ? "both" : false
+        },
+        options,
+        requiredOptions
+      )
     );
+
+    if (compiled.map) {
+      sourceMaps.set(filename, compiled.map);
+      installSourceMaps();
+    }
+
+    return module._compile(compiled.code, filename);
+  };
+
   return extensions;
 }