Babel ast location, diagnostic, and source location remapping

.flowconfig

@@ -8,6 +8,7 @@
 <PROJECT_ROOT>/packages/core/integration-tests/dist/**
 <PROJECT_ROOT>/packages/core/integration-tests/test/input/**
 <PROJECT_ROOT>/packages/core/integration-tests/test/integration/babel-strip-flow-types/**
+<PROJECT_ROOT>/packages/core/integration-tests/test/integration/diagnostic-sourcemap/**
 
 [untyped]
 .*/node_modules/graphql/error/GraphQLError.js.flow

packages/core/core/src/Transformation.js

@@ -137,10 +137,11 @@ export default class Transformation {
 
     let asset = await this.loadAsset();
 
-    // Load existing sourcemaps
-    if (SOURCEMAP_EXTENSIONS.has(asset.value.type)) {
+    if (!asset.mapBuffer && SOURCEMAP_EXTENSIONS.has(asset.value.type)) {
+      // Load existing sourcemaps, this automatically runs the source contents extraction
+      let existing;
       try {
-        await asset.loadExistingSourcemap();
+        existing = await asset.loadExistingSourcemap();
       } catch (err) {
         logger.verbose([
           {
@@ -158,6 +159,13 @@ export default class Transformation {
           },
         ]);
       }
+
+      if (existing == null) {
+        // If no existing sourcemap was found, initialize asset.sourceContent
+        // with the original contents. This will be used when the transformer
+        // calls setMap to ensure the source content is in the sourcemap.
+        asset.sourceContent = await asset.getCode();
+      }
     }
 
     for (let {moduleSpecifier, resolveFrom} of this.request.invalidDevDeps) {

packages/core/core/src/UncommittedAsset.js

@@ -60,6 +60,7 @@ export default class UncommittedAsset {
   options: ParcelOptions;
   content: ?(Blob | Promise<Buffer>);
   mapBuffer: ?Buffer;
+  sourceContent: ?string;
   map: ?SourceMap;
   ast: ?AST;
   isASTDirty: boolean;
@@ -272,8 +273,15 @@ export default class UncommittedAsset {
   }
 
   setMap(map: ?SourceMap): void {
+    // If we have sourceContent available, it means this asset is source code without
+    // a previous source map. Ensure that the map set by the transformer has the original
+    // source content available.
+    if (map && this.sourceContent != null) {
+      map.setSourceContent(this.value.filePath, this.sourceContent);
+    }
+
     this.map = map;
-    this.mapBuffer = map?.toBuffer();
+    this.mapBuffer = this.map?.toBuffer();
   }
 
   getAST(): Promise<?AST> {

packages/core/core/src/applyRuntimes.js

@@ -14,6 +14,7 @@ import type ParcelConfig from './ParcelConfig';
 import type PluginOptions from './public/PluginOptions';
 import type {RunAPI} from './RequestTracker';
 
+import path from 'path';
 import assert from 'assert';
 import invariant from 'assert';
 import nullthrows from 'nullthrows';
@@ -22,6 +23,7 @@ import BundleGraph from './public/BundleGraph';
 import InternalBundleGraph from './BundleGraph';
 import {NamedBundle} from './public/Bundle';
 import {PluginLogger} from '@parcel/logger';
+import {md5FromString} from '@parcel/utils';
 import ThrowableDiagnostic, {errorToDiagnostic} from '@parcel/diagnostic';
 import {dependencyToInternalDependency} from './public/Dependency';
 import createAssetGraphRequest from './requests/AssetGraphRequest';
@@ -76,9 +78,14 @@ export default async function applyRuntimes({
         if (applied) {
           let runtimeAssets = Array.isArray(applied) ? applied : [applied];
           for (let {code, dependency, filePath, isEntry} of runtimeAssets) {
+            let sourceName = path.join(
+              path.dirname(filePath),
+              `runtime-${md5FromString(code)}.${bundle.type}`,
+            );
+
             let assetGroup = {
               code,
-              filePath,
+              filePath: sourceName,
               env: bundle.env,
               // Runtime assets should be considered source, as they should be
               // e.g. compiled to run in the target environment

packages/core/integration-tests/test/css.js

@@ -7,6 +7,7 @@ import {
   assertBundles,
   distDir,
   removeDistDirectory,
+  inputFS,
   outputFS,
 } from '@parcel/test-utils';
 
@@ -78,7 +79,6 @@ describe('css', () => {
           'css-loader.js',
           'index.js',
           'js-loader.js',
-          'JSRuntime.js',
         ],
       },
       {name: /local\.[0-9a-f]{8}\.js/, assets: ['local.js']},
@@ -332,4 +332,51 @@ describe('css', () => {
   background-image: url('data:image/webp;base64,UklGR`),
     );
   });
+
+  it('should remap locations in diagnostics using the input source map', async () => {
+    let fixture = path.join(
+      __dirname,
+      'integration/diagnostic-sourcemap/index.scss',
+    );
+    let code = await inputFS.readFileSync(fixture, 'utf8');
+    // $FlowFixMe
+    await assert.rejects(
+      () =>
+        bundle(fixture, {
+          defaultTargetOptions: {
+            shouldOptimize: true,
+          },
+        }),
+      {
+        name: 'BuildError',
+        diagnostics: [
+          {
+            message: "Failed to resolve 'x.png' from './index.scss'",
+            origin: '@parcel/core',
+            filePath: fixture,
+            codeFrame: {
+              code,
+              codeHighlights: [
+                {
+                  start: {
+                    line: 5,
+                    column: 3,
+                  },
+                  end: {
+                    line: 5,
+                    column: 3,
+                  },
+                },
+              ],
+            },
+          },
+          {
+            message: "Cannot load file './x.png' in './'.",
+            origin: '@parcel/resolver-default',
+            hints: [],
+          },
+        ],
+      },
+    );
+  });
 });

packages/core/integration-tests/test/elm.js

@@ -38,7 +38,7 @@ describe('elm', function() {
     assertBundles(b, [
       {
         type: 'js',
-        assets: ['HMRRuntime.js', 'Main.elm', 'index.js'],
+        assets: ['Main.elm', 'index.js'],
       },
     ]);
 

packages/core/integration-tests/test/html.js

@@ -140,12 +140,12 @@ describe('html', function() {
 
     assertBundles(b, [
       {
-        name: 'index.html',
+        type: 'js',
         assets: ['index.html'],
       },
       {
-        type: 'js',
-        assets: ['HMRRuntime.js', 'index.html'],
+        name: 'index.html',
+        assets: ['index.html'],
       },
     ]);
   });
@@ -1197,8 +1197,6 @@ describe('html', function() {
           'index.js',
           'index.js',
           'js-loader.js',
-          'JSRuntime.js',
-          'JSRuntime.js',
           'relative-path.js',
         ],
       },
@@ -1282,9 +1280,6 @@ describe('html', function() {
           'get-worker-url.js',
           'index.js',
           'js-loader.js',
-          'JSRuntime.js',
-          'JSRuntime.js',
-          'JSRuntime.js',
           'relative-path.js',
         ],
       },
@@ -1348,9 +1343,6 @@ describe('html', function() {
           'get-worker-url.js',
           'index.js',
           'js-loader.js',
-          'JSRuntime.js',
-          'JSRuntime.js',
-          'JSRuntime.js',
           'relative-path.js',
         ],
       },
@@ -1598,7 +1590,6 @@ describe('html', function() {
           'esmodule-helpers.js',
           'get-worker-url.js',
           'index.js',
-          'JSRuntime.js',
         ],
       },
     ]);

packages/core/integration-tests/test/integration/diagnostic-sourcemap/index.js

@@ -0,0 +1,13 @@
+// @flow
+
+type Test = {|
+  foo: string
+|};
+
+let test: Test = {
+	foo: 'hi'
+};
+
+import foo from 'foo';
+
+console.log(test);

packages/core/integration-tests/test/integration/diagnostic-sourcemap/index.scss

@@ -0,0 +1,6 @@
+$foo: red;
+
+.foo {
+  color: $foo;
+  background: url(x.png);
+}

packages/core/integration-tests/test/integration/diagnostic-sourcemap/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "flow-bin": "*"
+  }
+}

packages/core/integration-tests/test/integration/sourcemap-original-sourcecontents/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react", "@babel/preset-flow"]
+}

packages/core/integration-tests/test/integration/sourcemap-original-sourcecontents/index.js

@@ -0,0 +1,14 @@
+// @flow
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+type Props = {|
+  bar: string,
+|};
+
+function App(props: Props) {
+  return <div>{props.bar}</div>;
+}
+
+ReactDOM.render(<App bar="bar" />, document.getElementById("root"));