Visualize source maps in tests

[nicolo-ribaudo]

Q	A
Fixed Issues?	Fixes #1, Fixes #2
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

Source maps are difficult to debug, especially because our current snapshots are useless. I built a small tool that is like source-map-visualizer, but based on text rather than interactive.

I only enabled it for one test, but I could also enable it automatically for all the tests that use source maps.

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/55392/

[nicolo-ribaudo]

The format is (line:column) SOURCE <-- (line:column) OUTPUT

[nicolo-ribaudo]

What format would you prefer?

(a) mappings point at a character

    (1:4) var t = x     <--     (1:4) var t = f
              ^                           ^

    (1:5) ar t = x      <--     (1:5) ar t = fu
              ^                           ^

(b) mappings point between two characters (note: this inserts a | in the code)

    (1:4) var |t =      <--     (1:4) var |t = 
              |                           |

    (1:5) ar t| = x     <--     (1:5) ar t| = f
              |                           |

(c) mappings point between two characters, adding · between each two characters in the code

    (1:4) v·a·r· ·t· ·=·      <--     (1:4) v·a·r· ·t· ·=· 
                 ^                                   ^

    (1:5) a·r· ·t· ·=· ·x     <--     (1:5) a·r· ·t· ·=· ·f
                 ^                                 ^

(d) mappings point between two characters, adding between each two characters in the code and replacing spaces with ·

    (1:4) v a r · t · = ·     <--     (1:4) v a r · t · = ·
                 ^                                   ^

    (1:5) a r · t · = · x     <--     (1:5) a r · t · = · f
                 ^                                 ^

The spec defines columns in mappings as follows:

The zero-based starting column of the line in the generated code that the segment represents.

[nicolo-ribaudo]

Actually, I prefer this with ranges rather than just markers:

  (1:0-4) var t =                 <--    (1:0-4) var t = 
          ^^^^                                   ^^^^

  (1:4-5) var t = x               <--    (1:4-5) var t = f
              ^                                      ^

  (1:5-8) ar t = x =>             <--    (1:5-8) ar t = func
              ^^^                                    ^^^

  (1:8-8) t = x =>                <--   (1:8-17) t = function (x) 
             ><                                      ^^^^^^^^^

  (1:8-8) t = x =>                <--  (1:17-18) ion (x) {
             ><                                      ^

  (1:8-9) t = x =>                <--  (1:18-19) on (x) {
              ^                                      ^

 (1:9-13)  = x => x *             <--  (1:19-22) n (x) {
              ^^^^                                   ^^^

 (1:9-13)  = x => x *             <--    (2:2-9)   return x * 
              ^^^^                                 ^^^^^^^

(1:13-14)  => x * x               <--   (2:9-10) urn x * x
              ^                                      ^

(1:14-17) => x * x;               <--  (2:10-13) rn x * x;
              ^^^                                    ^^^

(1:17-18) x * x;                  <--  (2:13-14) x * x;
              ^                                      ^

(1:18-19)  * x;                   <--  (2:14-15)  * x;
              ^                                      ^

(1:18-19)  * x;                   <--    (3:0-2) };
              ^                                  ^^

[armano2]

this is actually really interesting, looks like source map is not correct here

---

not a bug in this PR tho

[nicolo-ribaudo]

Yep, this file is all very weird. It's the result of merging the generated source map with an existing one, so the problem might be there.

[liuxingbaoyu]

Amazing!
Perhaps we can add visualization of identifier names in the future.