JSFiddle - React, Tailwind, and code Playground

by Hugeen

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://rawgit.com/hugeen/lebab-experiment/master/lebab.js"></script>
<textarea id="source">[1, 2, 3].map(function(n) { return n * 2; }, this);</textarea>
<button id="transpile">Transpile 5to6</button>
<pre id="destination"></pre>

CSS

textarea {
  display: block;
  width: 100%;
}

pre {
  background: white;
  padding: 10px;
}

JavaScript

var transformers = {
  classes: false,
  stringTemplates: false,
  arrowFunctions: true,
  let: false,
  defaultArguments: false,
  objectMethods: false,
  objectShorthands: false,
  noStrict: false,
  importCommonjs: false,
  exportCommonjs: false,
};

var transformer = new Lebab.Transformer({transformers: transformers});

var source = $('#source');
var destination = $('#destination');

$('#transpile').on('click', function () {
	transpile(source.val())
});

function transpile(code) {
  transformer.read(code);
  transformer.applyTransformations();
  destination.html(transformer.out());
}