website icon indicating copy to clipboard operation
website copied to clipboard

Published 20 hours ago • verified publisher icon babel

WIP: Add a sourcemap interactive mapping to the REPL

Open giles-v opened this issue 6 years ago • 5 comments

Closes https://github.com/babel/website/issues/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 💯 .

giles-v avatar May 11 '18 19:05 giles-v

Deploy preview for babel-new ready!

Built with commit a4f7a513429d6d655de56b1cbcc7ac4c8e60c656

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

hzoo avatar May 11 '18 19:05 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)

hzoo avatar May 11 '18 21:05 hzoo

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?

loganfsmyth avatar May 11 '18 21:05 loganfsmyth

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

giles-v avatar May 11 '18 22:05 giles-v

Deploy preview for babel ready!

Built with commit deff78836c88027d4215de036a6a17ee6d9a9ea9

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

babel-bot avatar Jun 25 '18 11:06 babel-bot