I wish to allow people to extend my system in any way they want while maintaining its integrity. For example, I have a component in my plugin called Notifications. These notifications are output to the front-end when the user clicks a small button.

Here's the thing. For the back-end, I have my API, as well as apply_filters so that people can add / remove their content from my output and so on...but...assuming my front-end script goes to see that data (dynamic, remember, any key can exist with any type of content) like this:

for(let key in dataPassedFromLocalizingScript), there is no do_action for JS.

What I'm saying is, even if I provide additional data from the back-end, the front-end doesn't really know it's there or has no way of hooking inside that for, there's no concise API like WordPress' $wp_filter to be able to work with that data because your JS script code never changes. Sure, I can do dispatchEvent but it'll be very, very ugly.

How can I fix this? How can I make sense of that extendability I have in the back-end when dealing with views that use that data to build markup?

A crude example of this would be the main main.js script looking for a specific key notifications from the data that was localized from the back-end and is where the DOM insertions happen. Now, in this data, there might be another key buttons which a developer has added to be passed down but unfortunately, the DOM inserts have already been done, how does the same developer that extended the back-end data now make use of it so that he can also output things alongside mine?