Implement UI event dispatcher/listener

[Tetrax-10]

Implemented events

Now Stash ui client can create events that can be used by both plugins and stash ui client to do stuffs on a event. For now I have only implemented stash:location event which gets triggered on route change.

Plugin side usage for the event stash:location

PluginApi.Event.addEventListener("stash:location", (e) => console.log("Page Changed", e.detail.data.location.pathname))

Stash Userscript library uses setInterval of 100ms to check for page (href) change, which is performance intense they had no other choice. So now plugins like that can use this event which is very performance friendly. Its not just for page change event devs can implement more useful events like this.

Stash ui client usage for creating a event

To create a stash:page:scenes event, put this code here

Event.dispatch("page", "scenes", { scenes: result.data.findScenes.scenes});

Plugin side code for above event

// prints all scenes when page is /scenes
PluginApi.Event.addEventListener("stash:page:scenes", (e) => console.log("scenes page", e.detail.data.scenes))

Note: Stash ui client can also listen for this event by using Event.addEventListener

[WithoutPants]

Putting this on hold until I can determine the necessity of this change. I am not convinced that listening for elements and page changes is the correct approach.

[Tetrax-10]

I don't have a better solution for avoiding this infinite loop, this loop boosts up my CPU usage, memory usage and starts to lag after few hours. Event listeners are basically used to solve these kinds of issues. With this PR that infinite loop code can be replaced with this event listener. Also there is no element listener in my PR. This stash:page:scenes thing was just an example/guide to use PluginApi.Event.

This implementation is very much accepted in Stack Over Flow. If you dont want to use useEffect then the alternative is to implement this one which is recommended by react-router.

<Route path="/" component={App} onEnter={() => Event.dispatch("location", "", { location })} />

[WithoutPants]

I was referring to plugins using event listeners to know when to manipulate the dom. It's not a very react way of doing things. However, I get your point, and we should support someone like this to avoid the hacks you describe. It would be possible to insert something like this into a plug-in, but an officially supported way is probably better. I'll take another look at this on Monday.