I have the following situation:

• I have two Vanilla JS components.
• The first component, Alpha, can make changes to a window variable, e.g. window.App.messages.
• The second component, Beta, needs to execute a given function but only after window.App.messages has changed.

We have the following constraints:

• [A] We don't want the two components to communicate to each other in any other way other than through window.
• [B] We don't want Beta to change window.App.messages in any way.
• [C] window.App.messages should be agnostic with regards to which component is going to set and get its data.

I found a number of relevant Stack Overflow threads, but they all seem to suggest solutions that don't actually work to solve this use case. Specifically:

• Use Proxy (example 1, example 2). The problem with Proxy is that you then need to listen to changes to the proxy and not the original object. This implementation wouldn't work as it would require Alpha and Beta to communicate directly. It breaks [A].
• Overwrite setters and getters via defineProperty (example). This solution requires Beta to change the original object and that's not okay. It breaks both [B] and [C].
• Create the object with custom setters and getters. This too doesn't work since it breaks [C].

What I would need is something like this:

var window.App.messages = ["Hello, world!"];

function logChange(variable) {
  console.log(`New value: ${variable.at(-1)}`)
};

var varListener = Listener(window.App.messages, logChange);

window.app.messages.push("The answer is 42.");

>> New value: The answer is 42.