For context:
- https://discord.com/channels/804672552348680192/804672553095528470/945174401807179776
- https://discord.com/channels/804672552348680192/945555514438344744/945560251632058379
graph TD
viewEvent["view event"]
viewEvent -->|"dispatch"| Action
init(("init:"))
init ---|"is set as"| j0[ ] --- j1[ ] --- j2[ ] --> oneOf
userInteraction(("user<br>interaction"))
userInteraction -->|"onclick"| viewEvent
userInteraction -->|"onmousemove"| subscription
externalEvents(("external<br>events"))
externalEvents -->|"onEvent"| subscription
subscription -->|"dispatch"| Action
Action ---|"returns"| j3[ ] --> oneOf
oneOf{"one of"}
oneOf -->|"Action<br/>[Action, payload?]"| Action
oneOf -->|"{state}"| nextState
oneOf ---|"[state, effect(s)]"| j4[ ]
j4 --> nextState
j4 --> effect
nextState["set next<br>state"]
nextState --- j5[ ] -->|"view(state)"| renderDom
nextState -->|"subscriptions(state)"| refreshSubs
renderDom(("(re)render<br>DOM"))
effect["effect(s)"]
effect -->|"upon execution"| runEffect
runEffect(("run<br>effect(s)"))
runEffect -.-|"dispatch"| j6
refreshSubs["refresh<br>subscription(s)"]
refreshSubs -->|"upon cancellation"| cleanSubs
cleanSubs(("clean<br>cancelled<br>subscription(s)"))
cleanSubs -.-|"dispatch"| j6
j6[ ] -.-> Action
style j0 height:0;
style j1 height:0;
style j2 height:0;
style j3 height:0;
style j4 height:0;
style j5 height:0;
style j6 height:0;