HTML reader output hiccup compatibility

[brandonstubbs]

The HTML reader has differing outputs compared with https://github.com/weavejester/hiccup:

#html [:h1 {:data-title nil} "bar"]
;; hiccup => <h1>bar</h1>
;; squint => error Uncaught TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

#html [:h1 {:data-title true} "bar"]
;; hiccup => <h1 data-title="data-title">bar</h1>
;; squint => <h1 data-title="true">bar</h1>

#html [:h1 {:data-title {:a 1}} "bar"]
;; hiccup => <h1 data-title="a:1;">bar</h1>
;; squint => <h1 data-title="[object" object]="">bar</h1>

#html [:h1 {:data-title [1 2 3]} "bar"]
;; hiccup => <h1 data-title="1 2 3">bar</h1>
;; squint => <h1 data-title="123">bar</h1>

[borkdude]

Thanks, but not all of this makes sense to me. If you want to have the attribute to be "1 2 3" why not just write that?

[borkdude]

It does seem to be intentional: https://github.com/weavejester/hiccup/blob/f19700e1414aad75e2103b48ebbc81e8fe715768/src/hiccup/compiler.clj#L68-L75

I'm fine with going with that approach

[brandonstubbs]

Yeah I was just testing parity, I had noticed this from trying to use a style map attribute and tested all the scenarios

[brandonstubbs]

I ran into another scenario:

#html [:h1 {:class (str "test" " test2"} "bar"]
;; squint => <h1 class="test" test2="">bar</h1>

[borkdude]

Thanks! Indeed it seems like the string resulting from the expression should be pr-str-ed instead:

https://squint-cljs.github.io/squint/?src=I2h0bWwgWzpoMSB7OmNsYXNzIChzdHIgInRlc3QiICIgdGVzdDIiICkgfSAiYmFyIl0%3D

[borkdude]

I fixed the attribute bug with HTML rendering since that was the most obvious bug. The rest I'll address later.

[borkdude]

I think it makes more sense to take JSX as a reference perhaps than hiccup since #html is really derived from the #jsx behavior. Given that, this:

(prn (test-jsx* "<div data-foo={[1,2,3]}></div>"))

renders to "<div data-foo=\"1,2,3\"></div>" so perhaps the vector behavior should render comma-separated values rather than space-separated values?

[borkdude]

CSS works now: https://squint-cljs.github.io/squint/?src=KG5zIG15aHRtbCkKCihkZWYgYXBwIChvciAoanMvZG9jdW1lbnQucXVlcnlTZWxlY3RvciAiI2FwcCIpCiAgICAgICAgICAgKGRvdG8gKGpzL2RvY3VtZW50LmNyZWF0ZUVsZW1lbnQgImRpdiIpCiAgICAgICAgICAgICAoc2V0ISAtaWQgImFwcCIpCiAgICAgICAgICAgICAoanMvZG9jdW1lbnQuYm9keS5wcmVwZW5kKSkpKQoKKHNldCEgKC4taW5uZXJIVE1MIGFwcCkKICAjaHRtbCBbOmRpdiB7OnN0eWxlIHs6Y29sb3IgOndoaXRlCiAgICAgICAgICAgICAgICAgICAgICAgOmJhY2tncm91bmQtY29sb3IgOmJsYWNrCiAgICAgICAgICAgICAgICAgICAgICAgOndpZHRoICIxMDBweCJ9fQogICAgICAgICAiSGVsbG8hIl0p

I want to wait with the rest until I have come across compelling examples to choose either the JSX or the hiccup behavior.

[brandonstubbs]

Great thank you! I also haven't found a need for the other behaviours yet