virtual-dom hooks

[San Gillis]

Hi,

I built a simple integration of Highcarts.js in Elm using virtual-dom hooks. I wrote a blog post about it here:

http://sgillis.github.io/posts/2016-03-25-highcharts-integration-in-elm.html

As I understand Evan is working on an improved Native system for future versions of Elm, but I thought this might be an interesting approach meanwhile. Has anyone else used this? What do you guys think about this approach? Are there any plans to expose virtual-dom hooks at some time in the future?

[debois]

I tried something similar for the elm-mdl port. The problem is, Highchart mutates the dom: on every update, virtual-dom will remove the Nodes inserted by the Highchart JavaScript, then call the hook again, causing Highchart to render again. See this post:

https://groups.google.com/forum/m/#!msg/elm-discuss/tOFOO4uBiNw/xm8PZzzkFQAJ

[San Gillis]

I actually don't have this problem, since I keep track of whether or not highchart was already rendered. That's why I have the distinction between initialize and update in the hook:

https://github.com/sgillis/elm-highcharts/blob/master/src/Native/Highcharts.js#L90-L96

[debois]

But won't virtualdom, when diff'ing its model against the dom, decide that the Highchart elements are not supposed to be there and remove them, only to re-initialize them when it re-executes the hook?

[San Gillis]

That did not happen. I guess virtual-dom must just be looking at the top level element and leave it be?

On Mar 25, 2016 5:38 PM, "debois" <soren....@gmail.com> wrote:

But won't virtualdom, when diff'ing its model against the dom, decide that the Highchart elements are not supposed to be there and remove them, only to re-initialize them when it re-executes the hook?

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/xaF3O6JAwi0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Gabriel Grinberg]

Amazing, just what I needed to properly integrate CodeMirror into Elm, without using regular ports and a CodeMirror instance in my html. Will try it soon and update here if it interests anyone.

Thank you!

[debois]

Huh. I never managed to make that work, but I really need it. Could you link to an example I can play with where there is a Highchart component and some updates to the virtualdom as the application runs?

[Gabriel Grinberg]

Managed to do something similar for CodeMirror https://github.com/GabiGrin/elm-codemirror

It also includes sending info back via a signal (similar to regular input events)

I think that for simple integrations it's useful, but might get complicated with more features, for example - multiple event bindings, styling the element from Elm.

Thanks San Gillis :)

[San Gillis]

 Glad it was helpful to you :)

[San Gillis]

You can find a live demo here:

http://sgillis.github.io/elm-highcharts/

Code can be found here:

https://github.com/sgillis/elm-highcharts/tree/master/examples

[Dmytro Zaienchyk]

Hi,

It works for me with Elm 0.16 (using elm-codemirror). Thanks guys! 

But it is possible to make it workable for Elm 0.17?  Or solution is only to use ports?

Thanks!

[Robert Walter]

I'm also interested to learn if this can be ported to 0.17 and if not, what the reasons are. Looking at the Upgrade site, I couldn't see why this shouldn't be possible, but then again I haven't tried it.

Maybe someone can also help me out why hooks would be a preferable solution integrating something like CodeMirror compared to using ports. Is it that with hooks we can control whether or not a component like code mirror makes changes to the DOM?

Thanks 

[Joe Andaverde]

The rewrite of virtual-dom in 0.17 does not provide any mechanism for knowing when a dom element is created, re-rendered, or removed. Which would be essential for initializing a third party control.

Even in the version used in 0.16 I'm not sure the entire life-cycle for a dom node was available. Therefore, I'm suspicious that the solutions presented in the past have suffered from memory leaks.

I'm wondering if dom node life-cycle events will ever become a priority for this project?

[San Gillis]

Like Joe mentioned, the virtual-dom implementation changed completely in 0.17. I have not had time yet to look into porting this library to 0.17 or look into the new virtual-dom, so unfortunately I can't help you at this time.

But if what Joe says is right (there is no mechanism for creation events), I'm not confident we will be able to do the same in 0.17

[Maxwell Gurewitz]

You can implement post render hooks using requestAnimationFrame.  Elm guarantees that the dom changes corresponding to an update will be rendered after a requestAnimationFrame.  Use https://github.com/elm-lang/animation-frame