const scopeHandler = {
set: function(obj, prop, value) {
console.log(`${prop} changed from ${obj[prop]} to ${value}`);
obj[prop] = value;
return true;
}
};
const scopeProxy = new Proxy(window.app, scopeHandler);
So I'm trying to detect any changes whenever app or any of its children app.reports changes, but it doesn't log anything. What am I doing wrong?
A Proxy will only appear to do anything if the Proxy itself is the value that's "changed" later (via property assignment or whatever traps you have).
If you have an existing object, create a Proxy wrapper for it, and then other parts of an app use the existing object, you won't see anything happen with the Proxy; the other parts of the object would have to have the Proxy instead of the original object.
Here, you might be able to reassign window.app to the Proxy, so that other references to window.app now reference the Proxy instead.
window.app = new Proxy(window.app, scopeHandler);