V-DOM Example

Simple VDOM implementation written on pure JS and typescript

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 text-center">
            <h2>Stream HTML Parser + VDOM implementation</h2>
            <small>Press "Parse" and change HTML at the left</small>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h3>Put HTML here:</h3>
            <fieldset class="form">
                <div class="form-group">
                    <textarea class="form-control" id="htmlText" rows="25">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</textarea>

                </div>
                <div class="form-group">
                    <div>
                        <button type="submit" class="btn btn-default" id="doParse">Parse</button>
                        <button type="submit" class="btn btn-default" id="doDiff">Diff</button>
                        <button type="submit" class="btn btn-default" id="doUpdate">Update</button>                        
                    </div>
                </div>
            </fieldset>


        </div>
        <div class="col-md-8">
            <h2>Watch the result:</h2>
            <div id="content" style="border: 1px solid darkgray; border-radius: 3px;...

JavaScript

var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
    }
    Greeter.prototype.parseHtml = function () {
        var parser = new Reinforced.Lattice.Html.HtmlParser(Reinforced.Lattice.Html.DOMConstructor);
        var txt = document.getElementById('htmlText');
        var r = parser.parse(txt.value);
        this.element.innerHTML = '';
        for (var i = 0; i < r.Roots.length; i++) {
            this.element.appendChild(r.Roots[i]);
        }
    };
    Greeter.prototype.diffHtml = function () {
        var parser = new Reinforced.Lattice.Html.HtmlParser(Reinforced.Lattice.Html.VDOMConstructor);
        var txt = document.getElementById('htmlText');
        var r = parser.parse(txt.value);
        Reinforced.Lattice.Html.DomDiffer.diff(this.element, r.Roots, new Reinforced.Lattice.Html.CompareCache());
    };
    Greeter.prototype.updateHtml = function () {
        var parser = new Reinforced.Lattice.Html.HtmlParser(Reinforced.Lattice.Html.VDOMConstructor);
        var txt = document.getElementById('htmlText');
        var r = parser.parse(txt.value);
        Reinforced.Lattice.Html.DomDiffer.update(this.element, r.Roots, new Reinforced.Lattice.Html.CompareCache());
    };
    return Greeter;
}());

    var el = document.getElementById('content');
    var g = new Greeter(el);
    var btn = document.getElementById('doParse');
    var btn2 = document.getElementById('doDiff');
    var btn3 = document.getElementById('doUpdate');
    var txt = document.getElementById('htmlText');
    btn.onclick = function (e) {
        g.parseHtml();
    };
    btn2.onclick = function (e) {
        g.diffHtml();
    };
    btn3.onclick = function (e) {
        g.updateHtml();
    };
    txt.onkeyup = function (e) {
        g.updateHtml();
    };

var Reinforced;
(function (Reinforced) {
    var Lattice;
    (function (Lattice) {
        var Html;
        (function (Html) {
            /**
             * Comparison cache for speeding up...