How events works inside the virtual dom

[felipegchi]

I was trying to read the elm/virtual-dom but i cant understand how elm handles events inside the virtual dom and where it gets the Msg to patch the virtual dom tree?

[john-kelly]

@felipegchi

to patch the virtual dom

You may want to look at elm/Browser for that (in addition to elm/virtual-dom). Here’s a line which has to do with applying the patches: browser/src/Elm/Kernel/Browser.js at 1.0.2 · elm/browser · GitHub

To understand how the msgs flow through the system would require looking at elm/core Platform. Here’s a starting point for that: core/src/Elm/Kernel/Platform.js at 1.0.5 · elm/core · GitHub

Hopefully this helps in your explorations.

If anyone knows more, please chime in! I’d love to learn more myself.

[lydell]

I’ve noticed that sometimes it’s easier to look at the compiled JS of a small app than at the source code, because then you get all of it at once instead of having to jump between multiple repos. Another good thing to know is that Elm’s Kernel code is very complicated. It usually takes me multiple attempts to understand it.

[romper]

To put it simple:

There is a special platform function sendToApp, when called (with a msg as an argument) it causes the application to jump to the next state so that it applies message to update - gets new model state, applies new model to subscriptions, and sends new effects instructions (cmds and subs) to effect mangers. Effect managers in turn are able to call sendToApp (when something happens “inside”) to dispatch their msg.

This is a general scheme for effects. Elm browser can be viewed as an effect, it just doesn’t have explicit effect manager implementation, but actually does the same, on each msg tick it receives new model, calculates view, virtual-dom diff patches, and applies them, it puts on elements event handlers that call sendToApp.