Repository: parcel-bundler/parcel
File: packages/reporters/sourcemap-visualiser/src/SourceMapVisualiser.js (JavaScript)

Code before:
// @flow
import path from 'path';
import nullthrows from 'nullthrows';
import {Reporter} from '@parcel/plugin';
import {relativePath} from '@parcel/utils';

export default (new Reporter({
  async report({event, options, logger}) {
    if (event.type === 'buildSuccess') {
      let bundles = [];
      for (let bundle of event.bundleGraph.getBundles()) {
        let p = bundle.filePath;
        if (p) {
          let mapFilePath = p + '.map';
          let hasMap = await options.outputFS.exists(mapFilePath);
          if (hasMap) {
            let map = JSON.parse(
              await options.outputFS.readFile(mapFilePath, 'utf-8'),
            );

            let mappedSources = await Promise.all(
              map.sources.map(async (sourceName, index) => {
                let sourceContent =
                  (map.sourcesContent && map.sourcesContent[index]) || '';

                if (!sourceContent) {
                  try {
                    sourceContent = await options.inputFS.readFile(
                      path.resolve(options.projectRoot, sourceName),
                      'utf-8',
                    );
                  } catch (e) {
                    logger.warn({
                      message: `Error while loading content of ${sourceName}, ${e.message}`,
                    });
                  }
                }

                return {
                  name: sourceName,
                  content: sourceContent,
                };
              }),
            );

            let fileName = relativePath(options.projectRoot, p);
            bundles.push({
              name: fileName,
              mappings: map.mappings,
              names: map.names,
              sources: mappedSources,

Review comment (bug):
This doesn't handle empty contents correctly, maybe something like this?

```js
let content = map.sourcesContent?.[index];

if(content != null} {
	try ...
}

return content ?? '';
...

Code after:
// @flow
import path from 'path';
import nullthrows from 'nullthrows';
import {Reporter} from '@parcel/plugin';
import {relativePath} from '@parcel/utils';

export default (new Reporter({
  async report({event, options, logger}) {
    if (event.type === 'buildSuccess') {
      let bundles = [];
      for (let bundle of event.bundleGraph.getBundles()) {
        let p = bundle.filePath;
        if (p) {
          let mapFilePath = p + '.map';
          let hasMap = await options.outputFS.exists(mapFilePath);
          if (hasMap) {
            let map = JSON.parse(
              await options.outputFS.readFile(mapFilePath, 'utf-8'),
            );

            let mappedSources = await Promise.all(
              map.sources.map(async (sourceName, index) => {
                let sourceContent = map.sourcesContent?.[index];
                if (sourceContent != null) {
                  try {
                    sourceContent = await options.inputFS.readFile(
                      path.resolve(options.projectRoot, sourceName),
                      'utf-8',
                    );
                  } catch (e) {
                    logger.warn({
                      message: `Error while loading content of ${sourceName}, ${e.message}`,
                    });
                  }
                }

                return {
                  name: sourceName,
                  content: sourceContent ?? '',
                };
              }),
            );

            let fileName = relativePath(options.projectRoot, p);
            bundles.push({
              name: fileName,
              mappings: map.mappings,
              names: map.names,
              sources: mappedSources,
              content: await options.outputFS.readFile(
                nullthrows(bundle.filePath),