WIP: Add a sourcemap interactive mapping to the REPL

[giles-v]

Closes #1291.

This is intended to provide a visual view of the sourcemap generated by the compile, so that REPL users can see exactly what transformations map to which generated output.

One immediate impression, having done this work so far, is that the sourcemap is fairly sparse for this purpose: it will correlate specific symbols in the source, but the helper chunks are unrepresented. Having those linkable to the source would be 💯 .

[hzoo]

Deploy preview for babel-new ready!

Built with commit a4f7a51

https://deploy-preview-1655--babel-new.netlify.com

[loganfsmyth]

This logic isn't quite what I'd recommend. If we're going to show mappings, we shouldn't exclude things, especially not based on if there is a name. Along with that:

• Mappings have both a start and an end
• Each original mappings can have multiple generated mappings.

Here is how I would read the mappings:

const originalPositions = [];
smc.eachMapping(
  function (m) {
    if (m.originalLine === null) return;

    const last = originalPositions.length > 0 ? originalPositions[originalPositions.length - 1] : null;

    // Ignore multiple matching original locations.
    if (last && last.line === m.originalLine && last.columnStart === m.originalColumn) return;

    // Set the _end_ of the previous mapping to the start of the new one.
    if (
      last &&
      last.line === m.originalLine
    ) {
      last.columnEnd = m.originalColumn;
    }

    originalPositions.push({
      source: m.source,
      name: m.name,
      line: m.originalLine,
      columnStart: m.originalColumn,
      columnEnd: Infinity,
    });
  },
  null,
  sourceMap.SourceMapConsumer.ORIGINAL_ORDER
);

// Compute the spans on the generated file.
smc.computeColumnSpans();

const results = originalPositions.forEach(origPos => {
  const ranges = smc.allGeneratedPositionsFor({
    source: origPos.source,
    line: origPos.line,
    column: origPos.columnStart,
  });

  const generatedRanges = ranges.map(range => ({
    line: range.line,
    columnStart: range.column,
    columnEnd: range.lastColumn + 1
  }));

  results.push({
    original: origPos,
    generated: generatedRanges,
  });
});

which will give you an array of the original ranges, and for each one of those, the multiple generated ranges they reference.

[hzoo]

From slack:

• discussing the need to hit "Evaluate" to enable sourcemaps with @hzoo in particular.
• Scrolling to code which is offscreen (had a naive implementation which sucked, need to better assess)
• Reviewing highlighting code to look for improvements (e.g. trimming whitespace in selections?)
• Enabling clicking / hovering in the source or compiled views to highlight, so you can click on the symbol you're curious about rather than hunting through the mappings
• remove footer? it makes scrolling weird b/c it hits the edge of the screen
• can trim extra whitespace in the highlights?
• do a lighter highlight (say gray behind the black) over the scope of the code vs individual blocks. So like a class encompasses the whole range of the output function vs just the name?
• how does this work with prettier/minify over the output?

Later:

• Can we use this information in addition to creating recommendations for people? Count # of input to # output line ratio, (say for an async function, it results in 50 lines we could say use the async to generator plugin, or loose mode, or drop a browser version, etc)

[loganfsmyth]

hovering in the source or compiled views to highlight

That'd definitely be my preference UX-wise, and it would also allow us to remove the lower pain and remove the evaluate question. Do we know if that would be hard to do with the code editor we use?

[giles-v]

@loganfsmyth it’s not hard from what I’ve seen. I just didn’t have time today. Coming soon...

[babel-bot]

Deploy preview for babel ready!

Built with commit deff788

https://deploy-preview-1655--babel.netlify.com