Well rounded Proxy observer

proxyObserver.js

const renderManObserver = function renderManObserver(value) {
  console.log('Re-rendering...', `<blink>${value}</blink>`)
}

let state = {
  name: '',
  thisOtherThing: {
    name: '',
    deeper: {
      name: '',
      weMustGoDeeper: {
        name: ''
      }
    }
  },
  ary: []
}

const reactiveHandler = {
  get(obj, key) {
    const prop = obj[key];

    if (typeof prop === 'object') {
      return new Proxy(prop, reactiveHandler)
    }

    return Reflect.get(...arguments)
  },
  set(obj, key, value) {
    if (Array.isArray(obj) && key === "length") {
      return true;
    }
    
    renderManObserver(value)
    return Reflect.set(...arguments)
  }
}

const proxyState = new Proxy(state, reactiveHandler)

proxyState.name = "Dude"

setTimeout(() => {
  proxyState.color = "red" // New property
  proxyState.thisOtherThing.name = "Friend" // Nested assignment
  proxyState.ary.push("Doh") // Array functions
  proxyState.thisOtherThing.deeper.name = "Deeeeeep" // Double nestationings
  proxyState.thisOtherThing.deeper.weMustGoDeeper.name = "Waaaay deeep" // I don't even...
}, 1000)