ordering of classes in html tags

[stephanbuys]

Description

bug report

Currently the order in which classes are added to the DOM in the browser do not reflect the same order in which they were added in the Renderable -> View function using the html! macro.

Expected Results

html!(<div class="three wide column",></div>) should result in <div class="three wide column"></div> in the DOM.

Actual Results

html!(<div class="three wide column",></div>) should result in <div class="wide column three"></div> in the DOM.

Context (Environment)

• Rust: nightly-2018-08-24

• yew: git/master e6fc66e

• target: wasm32-unknown-unknown

• cargo-web 0.6.15

• firefox nightly

[stephanbuys]

This matter because of frameworks such as Semantic UI: Semantic-Org/Semantic-UI#5484

[davidkna]

Found the reason: https://github.com/DenisKolodin/yew/blob/e6fc66e185c83bb9bb08a86750a57a3558bc9a18/src/virtual_dom/mod.rs#L42-L43
Would need to switch to a different data structure that preservers order, maybe Vec. Arguably worth the loss in performance because the DOM preserves the order.

[hgzimmerman]

BTreeSet<String> may be more desirable than HashSet, given how its iter() method returns an iterator that preserves order, but the datastructure still has the properties of deduplication that HashSet<String> has, making it better than Vec<String>.

Ordered iterator: https://doc.rust-lang.org/std/collections/struct.BTreeSet.html#method.iter
No duplicate entries: https://doc.rust-lang.org/std/collections/struct.BTreeSet.html#method.insert

[stephanbuys]

@hgzimmerman agreed, and going from HashSet to BTreeSet would preserve the Set API.

[stephanbuys]

I tried a quick test, just replacing all occurrences, the classes seem to be disordered still, but at least deterministic.

[davidkna]

It would be hard to implement the Ord trait for insertion order with BTreeSet. I think it would need a wrapper struct.
The js-native Set or and outside crate might do the job. The advantages of a set in general are also dimished here because the number of classes is usually very low. I think going with plain Vec might be most simple.

[hgzimmerman]

Oh, I'm dumb. The BTreeSet will order them, but in no relation to insertion order (alphabetical).
@davidkna is right in that Vec should be the optimal datastructure for this task.

It may make sense to wrap Vec in a VecSet wrapper that prevents duplicate entries and implements the common set operations, but given how this is going to only be used as a list, it probably isn't worth the effort, unless deduplication is absolutely required.