JSFiddle - React, Tailwind, and code Playground

by a_robson

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="https://github.com/ifandelse/postal.js/blob/master/build/output/browser/postal.js"></script>
<div id="person">
    <!--<span id="firstname"></span>-->
    <!--<span id="lastname"></span>-->
    <input type="text" id="firstname" />
    <input type="text" id="lastname" />
    <ul id="hobbies">
        <li></li>
    </ul>
    <ul id="relatives">
        <li>
            <span id="firstname"></span>
            <span id="lastname"></span>
        </li>
    </ul>
</div>

JavaScript

var coalesce = function( value, defaultValue ) {
    return typeof(value) != 'undefined' ? 
        value : defaultValue;
};

var isObject = function( value ) {
    return typeof(value) === 'object';
};

var whoami = function( thingy ) {
    _(thingy)
        .chain()
        .keys()
        .each( function( key ) {
           document.write( key + "<br>" ); 
        });
};

var crawl = function( namespace, element, callback ) {
    _(element)
        .chain()
        .keys()
        .each( function( key ) {
            var child = element[key];
            var fqn = namespace == "" ? 
                key : namespace + "." + key;
            callback( namespace, key, child );
            if( !_.isNull( child ) && isObject( child ) ) {
                crawl( fqn, child, callback );
            }
    });
};

var alex = 
    {
        "firstname" : "Alex ",
        "lastname" : "Robson",
        "hobbies" :
        [
            "CODE ALL THE THINGS",
            "Watching my stories",
            "Reading about economics"
        ],
        "relatives":
        [
            {"firstname" : "Ian", "lastname" : "Robson" },
            {"firstname" : "Sean", "lastname" : "Robson" },
        ]
    };

var DomWriter = function (target, namespace) {
    var instance = this;
    var template = namespace;
    
    this.crawl = function( namespace, element, callback ) {
        _(element)
            .chain()
            .keys()
            .each( function( key ) {
                var child = element[key];
                var fqn = namespace === "" ? 
                    key : namespace + "." + key;
                callback( fqn, key, child );
                if( !_.isNull( child ) && isObject( child ) ) {
                    instance.crawl( fqn, child, callback );
                }
        });
    };
    
    this.domCrawl = function( namespace, element, callback ) {
        var id = coalesce( element["id"], "" );
        var fqn = namespace == "" ?
            id : ( id...