Add "Transpile" option to es6-fiddle

[netpoetica]

Improvement maybe, would be interesting when toying with ES6 in the browser to also see the transpiled version of the code

[jeffrifwald]

I thought about that, but there are 2 issues:

1. Space on the page.
2. The transpiled code uses the Traceur runtime, so the magic will still be hidden. It won't translate to vanilla JS like coffescript, so I'd have to be convinced that it would be useful.

[jaydson]

You mean something like Traceur Transcoding demo page? http://google.github.io/traceur-compiler/demo/repl.html We can do that in the backend.

[jeffrifwald]

@jaydson There should be a way to pull this off without contacting the backend. I'd need to look a bit more at Traceur's API, but I am sure the transpiled code can be grabbed.

But back to my original point, showing the transpiled code doesn't seem particularly useful.

class MyClass {
}

yields

$traceurRuntime.ModuleStore.getAnonymousModule(function() {
  "use strict";
  var MyClass = function MyClass() {};
  ($traceurRuntime.createClass)(MyClass, {}, {});
  return {};
});

[jaydson]

Indeed. I don't see any advantage showing the transpiled code.

[netpoetica]

@jaydson There isn't any major advantage, the only thing that it does is help someone who is learning about how to use an ES6 transpiler to get a better view of what's going on under the hood. For me, I would just run the transpiler locally, but I think people who are not interested in the command line (unfortunately) may also benefit from being able to see the transformation in browser

[jeffrifwald]

@netpoetica I think you have a valid point, but I can see it being more confusing than useful for es6fiddle. I image most people don't care what is happening under the hood, as long as they see the results they are expecting. I think it would detract from the goal of the site: let people play with the new syntax without having to set up their own environment. I do encourage you to fork the project and turn it into a target low-level educational site. I will close this issue for now, but I do appreciate your feedback.

[kimgysen]

Might this be relevant again with the switch from Traceur to Babel? Regarding the space in the page; I see that there are already three buttons available: "run", "lint" and "save". Having a supplementary button added to show the transpiled code would hide the interface from people who are not interested with minimum disadvantage. Or perhaps a button in the header of the console itself to "switch" between the transpiled code and the output. Perhaps it's true that this could mainly be important for educational purpose, but nevertheless it 'could' propagate a significant increase of traffic to your website since many people are yet to learn the ES6 syntax and it becomes increasingly relevant. Also, the very first question that popped my mind when I arrived on the website was which transpiler was used to make the transpilation, might be useful for pure informative purpose. Just my two cents.