JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<input type='text' id='myInputVisiblea' />
<input type='button' value='set value' id="testSet1" />
<input type='button' value='get value' id="testSet5" />
<hr>
<input type='checkbox' id='myInputVisibleb' />
<input type='button' value='checked' id="testSet2" />
<input type='button' value='unchecked' id="testSet3" />
<input type='button' value='getchecked' id="testSet4" />
<hr>
<input type='radio' name="radios" id='radio-a' value="a" />
<input type='radio' name="radios" id='radio-b' value="b" />
<input type='button' value='radio 1 checked' id="radio1" />
<input type='button' value='radio 2 checked' id="radio2" />
<input type='button' value='radio 1 unchecked' id="radio3" />
<input type='button' value='radio 2 unchecked' id="radio4" />
<input type='button' value='radio 1 getchecked' id="radio5" />
<input type='button' value='radio 2 getchecked' id="radio6" />
<hr>
<select id="select">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<input type='button' value='get value' id="selectget" />
<input type='button' value='set value 1' id="selectset1" />
<input type='button' value='set value 2' id="selectset2" />
<hr>
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
<br>
<input type='button' value='get value' id="textareaget" />
<input type='button' value='set value' id="textareaset" />

JavaScript

Object.defineProperty(Object.prototype, "watchDomObject", {
    enumerable: false,
    configurable: true,
    writable: false,
    value: function(prop, callbackFn) {
        try{
            var originalDescriptor;

            if (this.tagName.toUpperCase() === 'INPUT') {
                originalDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, prop);
            } else if (this.tagName.toUpperCase() === 'SELECT') {
                originalDescriptor = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, prop);
            } else if (this.tagName.toUpperCase() === 'TEXTAREA') {
                originalDescriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, prop);
            }
        }catch(e){}

        var oldval = this[prop],
            newval = oldval,
            getter = function() {
                try{
                    return originalDescriptor.get.call(this, newval);
                }catch(e){}
            },
            setter = function(val) {
                oldval = newval;
                try{
                    originalDescriptor.set.call(this, val);
                }catch(e){}

                try{
                    callbackFn.call(this,prop, val);
                }catch(e){}
            };

        if (delete this[prop]) { // can't watch constants
            Object.defineProperty(this, prop, {
                get: getter,
                set: setter,
                enumerable: true,
                configurable: true
            });
        }
    }
});

//debounce function picked from http://underscorejs.org/
function debounce(func, wait, immediate) {
    var timeout, args, context, timestamp, result;
    var later = function() {
        var last = Date.now - timestamp;
        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context,...