Keyed nodes in Html and Svg

[Evan Czaplicki]

I just published minor releases for Html and Svg. They both introduce a Keyed module for when you have a list of child nodes and need to add, remove, and move nodes.

There is more documentation about this here:

• Html.Keyed
• Svg.Keyed

Please give them a try and let me know if you run into any issues!

These modules are necessary for some benchmarking I am working on, so expect a blog post relatively soon that goes more into how this works and how it helps make Elm's virtual-dom implementation particularly fast.

[Martin Bailey]

Thanks Evan. This likely isn't the primary goal but I can confirm keyed nodes fixes all issues with the lifetime of third-party JS handlers in a complex application. Everything looks great on my end.

[Gusztáv Szikszai]

Thanks, I can confirm that this fixes my problem, no issues so far.

[Alexey Shamrin]

Thank you, Evan!

I can finally start migrating from 0.16.

Could you please mention that Html.Keyed is not only about optimizations? I've found that having keys is *essential* when nodes are moved/removed/reordered. Without the keys elm-html could assign stateful DOM nodes (<input>, <select>) to a wrong place, breaking application UI.

I would even argue that stateful DOM nodes should have mandatory keys, to prevent weird bugs. But I don't know how to implement it.

Alexey

[Graham Simkins]

This was holding me back from migrating my 0.16 apps as well. I agree with Alexey, this isn't just an optimization (I don't know about it being mandatory though). I frequently encounter rendering glitches if I don't specify a key. I don't understand how anyone has been writing apps in 0.17 without keys...

Thank you Evan for all your hard work.

Graham

[Alexey Shamrin]

For those wondering how an application can break without keys. Here's the demo:

https://gist.github.com/shamrin/882f734d16103eabcb29167199f52553

* paste it into http://elm-lang.org/try

* compile

* enter different texts into inputs (e.g. "1" into first input, "2" into second, etc.)

* remove the second input with X button

* notice how the second input contains "2", but we've just removed it!

[Ali Sabil]

If you add `value content` to the input attributes your problem disappears. This what React calls controlled vs uncontrolled inputs.

--
You received this message because you are subscribed to the Google Groups "elm-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-dev+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/elm-dev/9724c25f-af3a-4439-9e6d-ce603caa947e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Maxwell Gurewitz]

Maybe non-keyed input elements shouldn't exit.

[José Lorenzo Rodríguez]

This is maybe not the best example to show the error, since you are not making the view a function of the model. A better way of implementing this is by passing the value attribute from the model to each of the inputs

[sylvain....@gmail.com]

I upgraded my code from 0.17 to 0.17.1 and used the Html.Keyed on long <ol> lists. This seems to work well so far.

Thanks!

On Tuesday, June 28, 2016 at 2:44:23 PM UTC-4, Evan Czaplicki wrote:

[Frederick Yankowski]

Svg.Keyed is not working correctly, as pointed out by @ibirrer on Slack in #general: in a simple test case using Svg.Keyed.node "g" the comprised Svg elements do not display at all. I was able to fix it by adding the following attribute:

VirtualDom.property "namespace" (Json.string "http://www.w3.org/2000/svg")

I plan to write an issue at github on this.

​

[Evan Czaplicki]

Ah, great find! Check out how node is defined in Svg. It needs that attribute as well. So if you just do exactly the same kind of implementation, it's good as a PR.