How to bridge the gap between dynamic back-end data and front-end output?
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?