JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

JavaScript

/* setup */
const fieldValues = {
  'foo:foo': true,
  'foo:bar': false,
  'foo:arr': [1, 2, 3],
  'foo:arr2': [],
  'foo:obj1': {
    a: 'a'
  },
  'foo:obj2': {}
}

const fieldValuesHandler = {
  eventListeners: [],
  get(target, key) {
    console.log(key)
    return target[key]
  },
  set(target, prop, value) {
    console.log(`changed from ${target[prop]} to ${value}`, );
    
    this.eventListeners.forEach(callback => callback(target, prop, value))
    // how do we emit these changes to outside?
    target[prop] = value;
  }
}

const fieldValuesProxy = new Proxy(fieldValues, fieldValuesHandler)

fieldValuesHandler.eventListeners.push((target, prop, value) => {
  console.log('a', prop, value)
})

fieldValuesHandler.eventListeners.push((target, prop, value) => {
  console.log('b', prop, value)
})


/* On Change */
fieldValuesProxy['foo:foo'] = false;