JSFiddle - React, Tailwind, and code Playground

by masbicudo

HTML

<div id="output"></div>

CSS

body {
    font-family: sans-serif;
}
table {
    border-collapse: collapse;
    margin: 5px;
    font-size: 12px;
}
td {
    border: 1px solid gray;
    padding: 4px;
    text-align: center;
}

JavaScript

// Deep cloning JSON or data objects 
// that may contain unknown object types
// frozen objects and objects that
// implement a clone or deepClone method
function deepClone(o, opts) {
    if (typeof o === 'undefined' || o == null)
        return o;

    var r, isCloned = false;
    if (Array.isArray(o)) r = [];
    else if (o instanceof Object && !(opts && Object.isFrozen(o) && opts.ignoreFrozen === true)) {
        if (o.__proto__ === {}.__proto__) r = {};
        else {
            var fnClone = o.deepClone || o.clone;
            if (fnClone) {
                r = fnClone.call(o);
                isCloned = true;
                if (!opts || typeof opts.ignoreCloneableProps === 'undefined') return r;
                if (opts.ignoreCloneableProps === true)
                    return r;
            }
        }
    }

    if (r) {
        for (var k in o)
            if (!isCloned || r[k] === o[k])
                r[k] = deepClone(o[k], opts);
        //r.cloned = true;
        return r;
    }

    return o;
}




function DeepCloneable(a) { this.a = a; };
DeepCloneable.prototype = {
    deepClone: function() {
        return new DeepCloneable(deepClone(this.a));
    },
    clone: function() {
        return new DeepCloneable(this.a);
    }
};

function OnlyDeepCloneable(a) { this.a = a; };
OnlyDeepCloneable.prototype = {
    deepClone: function() {
        return new OnlyDeepCloneable(deepClone(this.a));
    }
};

function Cloneable(a) { this.a = a; };
Cloneable.prototype = {
    clone: function() {
        return new Cloneable(this.a);
    }
};

function NotCloneable(a) { this.a = a; };

var fn = function () {};
fn.mmm = "mmm";

var any = {x:1};
var frozen = Object.freeze({x:2});
var notCloneable = new NotCloneable({x:3});
var cloneable = new Cloneable({y:{x:4}});
var deepCloneable = new DeepCloneable({y:{x:5}});
var onlyDeepCloneable = new OnlyDeepCloneable({y:{x:6}});

window.obj = {
    str: "abc1",
    num: 1,
    bl: false,
    dt: new Date(),
    rgx:...