feat: Generate sourcemaps of friendly call frames (#15022)

Co-authored-by: Justin Ridgewell <justin@ridgewell.name>
Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>

packages/babel-cli/package.json

@@ -24,7 +24,7 @@
     "compiler"
   ],
   "dependencies": {
-    "@jridgewell/trace-mapping": "^0.3.8",
+    "@jridgewell/trace-mapping": "^0.3.17",
     "commander": "^4.0.1",
     "convert-source-map": "^1.1.0",
     "fs-readdir-recursive": "^1.1.0",

packages/babel-core/package.json

@@ -46,7 +46,7 @@
     "./src/transform-file.ts": "./src/transform-file-browser.ts"
   },
   "dependencies": {
-    "@ampproject/remapping": "^2.1.0",
+    "@ampproject/remapping": "^2.2.0",
     "@babel/code-frame": "workspace:^",
     "@babel/generator": "workspace:^",
     "@babel/helper-compilation-targets": "workspace:^",
@@ -68,7 +68,7 @@
     "@babel/plugin-transform-flow-strip-types": "workspace:^",
     "@babel/plugin-transform-modules-commonjs": "workspace:^",
     "@babel/preset-env": "workspace:^",
-    "@jridgewell/trace-mapping": "^0.3.8",
+    "@jridgewell/trace-mapping": "^0.3.17",
     "@types/convert-source-map": "^1.5.1",
     "@types/debug": "^4.1.0",
     "@types/gensync": "^1.0.0",

packages/babel-core/src/transformation/file/generate.ts

@@ -16,6 +16,8 @@ export default function generateCode(
   const { opts, ast, code, inputMap } = file;
   const { generatorOpts } = opts;
 
+  generatorOpts.inputSourceMap = inputMap?.toObject();
+
   const results = [];
   for (const plugins of pluginPasses) {
     for (const plugin of plugins) {
@@ -51,18 +53,26 @@ export default function generateCode(
   // back to the encoded map.
   let { code: outputCode, decodedMap: outputMap = result.map } = result;
 
-  if (outputMap) {
-    if (inputMap) {
-      // mergeSourceMap returns an encoded map
-      outputMap = mergeSourceMap(
-        inputMap.toObject(),
-        outputMap,
-        generatorOpts.sourceFileName,
-      );
-    } else {
-      // We cannot output a decoded map, so retrieve the encoded form. Because
-      // the decoded form is free, it's fine to prioritize decoded first.
-      outputMap = result.map;
+  // For backwards compat.
+  if (result.__mergedMap) {
+    /**
+     * @see mergeSourceMap
+     */
+    outputMap = { ...result.map };
+  } else {
+    if (outputMap) {
+      if (inputMap) {
+        // mergeSourceMap returns an encoded map
+        outputMap = mergeSourceMap(
+          inputMap.toObject(),
+          outputMap,
+          generatorOpts.sourceFileName,
+        );
+      } else {
+        // We cannot output a decoded map, so retrieve the encoded form. Because
+        // the decoded form is free, it's fine to prioritize decoded first.
+        outputMap = result.map;
+      }
     }
   }
 

packages/babel-core/src/transformation/normalize-file.ts

@@ -12,7 +12,6 @@ import parser from "../parser";
 import cloneDeep from "./util/clone-deep";
 
 const debug = buildDebug("babel:transform:file");
-const LARGE_INPUT_SOURCEMAP_THRESHOLD = 3_000_000;
 
 // These regexps are copied from the convert-source-map package,
 // but without // or /* at the beginning of the comment.
@@ -81,15 +80,9 @@ export default function* normalizeFile(
           ) as any;
           const inputMapContent = fs.readFileSync(
             path.resolve(path.dirname(options.filename), match[1]),
+            "utf8",
           );
-          if (inputMapContent.length > LARGE_INPUT_SOURCEMAP_THRESHOLD) {
-            debug("skip merging input map > 1 MB");
-          } else {
-            inputMap = convertSourceMap.fromJSON(
-              // todo:
-              inputMapContent as unknown as string,
-            );
-          }
+          inputMap = convertSourceMap.fromJSON(inputMapContent);
         } catch (err) {
           debug("discarding unknown file input sourcemap", err);
         }

packages/babel-core/test/fixtures/transformation/source-maps/arrow-function/source-map.json

@@ -10,5 +10,5 @@
   "sourcesContent": [
     "var t = x => x * x;"
   ],
-  "mappings": "AAAA,IAAIA,CAAC,GAAG,SAAJA,CAAC,CAAGC,CAAC;EAAA,OAAIA,CAAC,GAAGA,CAAC;AAAA"
+  "mappings": "AAAA,IAAIA,CAAC,GAAG,SAAJA,CAACA,CAAGC,CAAC;EAAA,OAAIA,CAAC,GAAGA,CAAC;AAAA"
 }

packages/babel-core/test/fixtures/transformation/source-maps/class/source-map.json

@@ -2,6 +2,11 @@
   "version": 3,
   "names": [
     "Test",
+    "babelHelpers",
+    "classCallCheck",
+    "createClass",
+    "key",
+    "get",
     "Error",
     "test",
     "bar"
@@ -12,5 +17,5 @@
   "sourcesContent": [
     "class Test {\n  get bar() {\n    throw new Error(\"wow\");\n  }\n}\n\nvar test = new Test;\ntest.bar;"
   ],
-  "mappings": "IAAMA,IAAI;EAAA;;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA,KACR,YAAU;MACR,MAAM,IAAIC,KAAK,CAAC,KAAK,CAAC;IACxB;EAAC;EAAA;AAAA;AAGH,IAAIC,IAAI,GAAG,IAAIF,IAAI;AACnBE,IAAI,CAACC,GAAG"
+  "mappings": "IAAMA,IAAI;EAAA;;EAAA,SAAAA,KAAA;IAAAC,YAAA,CAAAC,cAAA,OAAAF,IAAA;EAAA;EAAAC,YAAA,CAAAE,WAAA,CAAAH,IAAA;IAAAI,GAAA;IAAAC,GAAA,EACR,SAAAA,CAAA,EAAU;MACR,MAAM,IAAIC,KAAK,CAAC,KAAK,CAAC;IACxB;EAAC;EAAA,OAAAN,IAAA;AAAA;AAGH,IAAIO,IAAI,GAAG,IAAIP,IAAI;AACnBO,IAAI,CAACC,GAAG"
 }

packages/babel-core/test/fixtures/transformation/source-maps/input-source-map-complex/source-map.json

@@ -1,16 +1,15 @@
 {
   "version": 3,
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAsFA;EACAA;EACAC;IACA;MACAC;IACA;EACA;AACA",
   "names": [
     "name",
     "data",
     "msg"
   ],
-  "sourceRoot": "src/components",
   "sources": [
-    "HelloWorld.vue"
+    "src/components/HelloWorld.vue"
   ],
   "sourcesContent": [
     "<template>\n  <div class=\"hello\">\n    <h1>{{ msg }}</h1>\n    <h2>Essential Links</h2>\n    <ul>\n      <li>\n        <a\n          href=\"https://vuejs.org\"\n          target=\"_blank\"\n        >\n          Core Docs\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://forum.vuejs.org\"\n          target=\"_blank\"\n        >\n          Forum\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://chat.vuejs.org\"\n          target=\"_blank\"\n        >\n          Community Chat\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://twitter.com/vuejs\"\n          target=\"_blank\"\n        >\n          Twitter\n        </a>\n      </li>\n      <br>\n      <li>\n        <a\n          href=\"http://vuejs-templates.github.io/webpack/\"\n          target=\"_blank\"\n        >\n          Docs for This Template\n        </a>\n      </li>\n    </ul>\n    <h2>Ecosystem</h2>\n    <ul>\n      <li>\n        <a\n          href=\"http://router.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vue-router\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"http://vuex.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vuex\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"http://vue-loader.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vue-loader\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://github.com/vuejs/awesome-vue\"\n          target=\"_blank\"\n        >\n          awesome-vue\n        </a>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'HelloWorld',\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App'\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\nh1, h2 {\n  font-weight: normal;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\n</style>\n"
-  ]
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAsFA;EACAA,IAAA;EACAC,KAAA;IACA;MACAC,GAAA;IACA;EACA;AACA,G"
 }

packages/babel-core/test/fixtures/transformation/source-maps/input-source-map-external/source-map.json

@@ -1,11 +1,13 @@
 {
   "version": 3,
-  "mappings": "AAAA,UAAU,Y;SAAM,C;CAAC",
-  "names": [],
+  "names": [
+    "foo"
+  ],
   "sources": [
     "original.js"
   ],
   "sourcesContent": [
     "var foo = () => 4;"
-  ]
+  ],
+  "mappings": "AAAA,IAAAA,GAAA,GAAU,SAAAA,CAAA,E;SAAM,C;CAAC"
 }

packages/babel-core/test/fixtures/transformation/source-maps/input-source-map-multiple-output-sources-complete-replace/source-map.json

@@ -1,13 +1,17 @@
 {
   "version": 3,
-  "mappings": "AAAC,KAAG;ACAJ,KAAG",
   "names": [],
   "sources": [
+    "input.tsx",
+    "source-maps/input-source-map-multiple-output-sources-complete-replace/input.js",
     "bar.js",
     "baz.js"
   ],
   "sourcesContent": [
+    "foo(1);\nfunction foo(bar: number): never {\n    throw new Error('Intentional.');\n}",
+    "foo(1);\nfunction foo(bar) {\n    throw new Error('Intentional.');\n}\n//# sourceMappingURL=input.js.map",
     "<bar />",
     "baz();"
-  ]
+  ],
+  "mappings": "AAAA,KAAI;AAAJ,KAAG"
 }

packages/babel-core/test/fixtures/transformation/source-maps/input-source-map-multiple-output-sources/source-map.json

@@ -1,17 +1,19 @@
 {
   "version": 3,
-  "mappings": "AAAC,KAAG;ACCJ,SAASA,GAAG,CAACC,GAAW;EACpB,MAAM,IAAIC,KAAK,CAAC,cAAc,CAAC;AACnC",
   "names": [
     "foo",
     "bar",
     "Error"
   ],
   "sources": [
-    "test.js",
-    "input.tsx"
+    "input.tsx",
+    "source-maps/input-source-map-multiple-output-sources/input.js",
+    "test.js"
   ],
   "sourcesContent": [
-    "<bar />",
-    "foo(1);\nfunction foo(bar: number): never {\n    throw new Error('Intentional.');\n}"
-  ]
+    "foo(1);\nfunction foo(bar: number): never {\n    throw new Error('Intentional.');\n}",
+    "foo(1);\nfunction foo(bar) {\n    throw new Error('Intentional.');\n}\n//# sourceMappingURL=input.js.map",
+    "<bar />"
+  ],
+  "mappings": "AAAA,KAAI;AACJ,SAASA,GAAGA,CAACC,GAAW;EACpB,MAAM,IAAIC,KAAK,CAAC,cAAc,CAAC;AACnC"
 }

packages/babel-core/test/fixtures/transformation/source-maps/input-source-map-same-location/source-map.json

@@ -1,11 +1,13 @@
 {
   "version": 3,
-  "mappings": "AAAA,UAAU,Y;SAAM,C;CAAC",
-  "names": [],
+  "names": [
+    "foo"
+  ],
   "sources": [
     "source-maps/input-source-map-same-location/input.js"
   ],
   "sourcesContent": [
     "var foo = () => 4;"
-  ]
+  ],
+  "mappings": "AAAA,IAAAA,GAAA,GAAU,SAAAA,CAAA,E;SAAM,C;CAAC"
 }

packages/babel-core/test/fixtures/transformation/source-maps/input-source-map-sources-complete-replace/source-map.json

@@ -1,11 +1,15 @@
 {
   "version": 3,
-  "mappings": "AAAC,KAAG",
   "names": [],
   "sources": [
+    "input.tsx",
+    "source-maps/input-source-map-sources-complete-replace/input.js",
     "test.js"
   ],
   "sourcesContent": [
+    "foo(1);\nfunction foo(bar: number): never {\n    throw new Error('Intentional.');\n}",
+    "foo(1);\nfunction foo(bar) {\n    throw new Error('Intentional.');\n}\n//# sourceMappingURL=input.js.map",
     "<bar />"
-  ]
+  ],
+  "mappings": "AAAA,KAAI"
 }

packages/babel-core/test/fixtures/transformation/source-maps/input-source-map/source-map.json

@@ -1,11 +1,13 @@
 {
   "version": 3,
-  "mappings": "AAAA,UAAU,Y;SAAM,C;CAAC",
-  "names": [],
+  "names": [
+    "foo"
+  ],
   "sources": [
     "original.js"
   ],
   "sourcesContent": [
     "var foo = () => 4;"
-  ]
+  ],
+  "mappings": "AAAA,IAAAA,GAAA,GAAU,SAAAA,CAAA,E;SAAM,C;CAAC"
 }

packages/babel-generator/package.json

@@ -21,12 +21,12 @@
   "dependencies": {
     "@babel/types": "workspace:^",
     "@jridgewell/gen-mapping": "^0.3.2",
+    "@jridgewell/trace-mapping": "^0.3.17",
     "jsesc": "condition: BABEL_8_BREAKING ? ^3.0.2 : ^2.5.1"
   },
   "devDependencies": {
     "@babel/helper-fixtures": "workspace:^",
     "@babel/parser": "workspace:^",
-    "@jridgewell/trace-mapping": "^0.3.8",
     "@types/jsesc": "^2.5.0",
     "charcodes": "^0.2.0"
   },