JSFiddle - React, Tailwind, and code Playground

by blesh

JavaScript

function observable(x) {
    var obj = x;

    var watches = [];

    for (var propName in obj) {
       setUpObservation(propName);
    }
    
    function setUpObservation(n) {
        var currentValue = obj[propName];
            var type = Object.prototype.toString.call(currentValue);
            if (type !== '[object Function]') {
                if (type === '[object Object]') {
                    currentValue = observable(currentValue);
                }
                console.log('SETUP: ', propName);
                obj.__defineGetter__(propName, function() {
                    console.log('get ' + n);
                    return obj['$$$' + n];
                });
                obj.__defineSetter__(propName, function(x) {
                    console.log('set ' + n + ' ' + x);
                    obj['$$$' + n] = x;
                });

                obj['$$$' + propName] = currentValue;
            }
    };
    
    return obj;
}

var foo = observable({
    a: 1,
    b: 2,
    c: 3,
    A: {
        x: 'x',
        y: 'y',
        z: 'z'
    }
});

foo.a = 'test';
foo.b = 'asf';
foo.A.x = 'xx';