JSFiddle - React, Tailwind, and code Playground

by sparebytes

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<div id="sqlConverterContainer">
    <div>Input:</div>
    <textarea id="sqlIn"></textarea>
    <div>Output:</div>
    <textarea id="sqlOut"></textarea>
    <div class="pull-left">
        <button type="button" id="sqlConvert" class="btn">Convert</button>&nbsp;
    </div>
    <label><input type="checkbox" id="removeLineReturns"> Remove Line Returns</label>
</div>

CSS

html,body { height: 100%; margin: 0px; padding: 0px; }

#sqlIn {
 width: 100%;
 height: 60%;    
}
#sqlOut {
 width: 100%;
 height: 20%;
}
#sqlConverterContainer {
 position: relative;
 width: 90%;
 height: 100%;
 margin: 0 auto;
}

JavaScript

// {foo}
// injects the value of foo into the generated code
// =====================================================================
// { => '+ 
// } => +'
// ----------------------------------------------------------------------
// A.
// select {foo}
//     => N'select '+ foo +N''
//     => select bar
// B.
// select '1 {foo} 2'
//     => N'select ''1 '+ foo +N'2'''
//     => select N'1 bar 2'


// {{foo}}
// injects a reference to foo in the middle of a string
// =====================================================================
// {{ => ''+
// }} => +''
// ----------------------------------------------------------------------
// select '1 {{foo}} 2'
// => 'select ''1 ''+ foo +'' 2';
// => select '1 '+ foo +' 2'




var codeConverter = function(val){return val};
function a(func) {
    codeConverter = _.compose(func, codeConverter);
}

a(function(val) { // strip comments (be careful to ensure that the "--" isn't inside of quotes)
    return _(val.split("\n"))
        .map(function(val){
            return val.match(/^(([^-']{0,1}|'[^']*')*)(--[^\n]*)?$/)[1]
        })
        .join("\n");
})

a(function(val) { // replace ' with '' 
    return val.replace(/'/g, "''");
});

a(function(val) { // {{foo}}
    return val
        .replace(/\{\{/g, "''+")
        .replace(/\}\}/g, "+N''");
});

a(function(val) { // {'foo'}
    return val
        .replace(/\{''/g, "N'''+")
        .replace(/''\}/g, "+'''");
});

// a(function(val) { // '{foo}'
//     return val
//         .replace(/''\{/g, "'+")
//         .replace(/\}''/g, "+N'");
// });

a(function(val) { // {foo}
    return val
        .replace(/\{/g, "'+")
        .replace(/\}/g, "+'");
});


function convertSQL() {
    var cc2 = codeConverter;

    function b(func) {
        cc2 = _.compose(func, cc2);
    }

    if ($('#removeLineReturns').is(':checked')) {
       b(function(val) { // Remove line returns
            return val.replace(/\n/g, " ");
        });
    }

    if (true) { 
        b(function(val) {//...