JSFiddle - React, Tailwind, and code Playground

by Ukjin Yang

HTML

<div id="out"></div>
<script type="text/html" id="template01">
  <div>Hello @model.name, you are @model.getAge() year(s) old!</div>
</script>
<script>
    var model = {
        name: "Matt",
        getAge: function() { return 27; }
    };
    var result = jazor.parse("Hello @model.name", model);
    document.getElementById('out').innerHTML=result;
</script>

JavaScript

var jazor = (function ($) {

    // Determine if we are running with jQuery.
    var jQ = (typeof ($) !== "undefined");

    // Represents a block of literal text.
    var literalBlock = function (content) {
            this.content = content;
        };
    literalBlock.prototype = {
        toString: function () {
            return "Literal";
        },

        // Render the block.
        render: function (arrName) {
            var c = this.content.replace('\\', '\\\\', 'g').replace('\"', '\\\"', 'g').replace('\'', '\\\'', 'g').replace('\n', '\\n', 'g');

            return (arrName + ".push(\"" + c + "\");");
        }
    };

    // Represents an expression.
    var expressionBlock = function (content) {
            this.content = content;
        };
    expressionBlock.prototype = {
        toString: function () {
            return "Expression";
        },

        // Render the block.
        render: function (arrName) {
            return (arrName + ".push(" + this.content + ");");
        }
    };

    // Represents a code block.
    var codeBlock = function (content) {
            this.content = content;
        };
    codeBlock.prototype = {
        toString: function () {
            return "Code";
        },

        // Render the block.
        render: function (arrName) {
            return this.content;
        }
    };

    // Defines the coordinating parser that manages the code and markup parsers.
    var parser = function (codeParser, markupParser) {
            this.codeParser = codeParser;
            codeParser.parser = this;
            this.markupParser = markupParser;
            markupParser.parser = this;

            // Our output array of template blocks
            this.blocks = [];

            // Our array of helper blocks
            this.helpers = [];
        };
    parser.prototype = {
        // Parses the next code block in the stream.
        parseCodeBlock: function (stream) {
           ...