Clojurians Log v2

Hey @mjmeintjes, let's see

theoretically I would say it would work like this: https://squint-cljs.github.io/squint/?src=KG5zIG15bGl0CiAgKDpyZXF1aXJlIFtzcXVpbnQuY29yZSA6cmVmZXIgW2RlZmNsYXNzIGpzLXRlbXBsYXRlXV0KICAgWyJodHRwczovL2VzbS5zaC9saXRAMy4wLjAiIDphcyBsaXRdCiAgIFsiaHR0cHM6Ly9lc20uc2gvbGl0QDMuMC4wL2RpcmVjdGl2ZXMvY2xhc3MtbWFwLmpzIiA6cmVmZXIgW2NsYXNzTWFwXV0pKQoKKGpzL2NvbnNvbGUubG9nIChjbGFzc01hcCB7OmVuYWJsZWQgdHJ1ZX0pKQoKKGRlZmNsYXNzIE15RWxlbWVudAogIChleHRlbmRzIGxpdC9MaXRFbGVtZW50KQogICheOnN0YXRpYyBmaWVsZCBwcm9wZXJ0aWVzIHs6Y291bnQge319KQoKICAoY29uc3RydWN0b3IgW3RoaXNdCiAgICAoc3VwZXIpCiAgICAoc2V0ISB0aGlzLmNvdW50IDApCiAgICAoc2V0ISB0aGlzLm5hbWUgIkhlbGxvIikpCgogIE9iamVjdAogIChyZW5kZXIgW3RoaXNdCiAgICAjaHRtbCBebGl0L2h0bWwKICAgIFs6ZGl2CiAgICAgWzpoMSB7OmNsYXNzIChjbGFzc01hcCB7OmVuYWJsZWQgdHJ1ZX0pfQogICAgICB0aGlzLm5hbWVdCiAgICAgWzpidXR0b24geyJAY2xpY2siIHRoaXMub25DbGljawogICAgICAgICAgICAgICA6cGFydCAiYnV0dG9uIn0KICAgICAgIkNsaWNrIGNvdW50ICIgdGhpcy5jb3VudF1dKQoKICAob25DbGljayBbdGhpc10KICAgIChzZXQhIHRoaXMuY291bnQgKGluYyB0aGlzLmNvdW50KSkpKQoKKGRlZm9uY2UgZm9vCiAgKGRvCiAgICAoanMvd2luZG93LmN1c3RvbUVsZW1lbnRzLmRlZmluZSAibXktZWxlbWVudCIgTXlFbGVtZW50KQogICAgdHJ1ZSkpCgooZGVmIGFwcCAob3IgKGpzL2RvY3VtZW50LnF1ZXJ5U2VsZWN0b3IgIiNhcHAiKQogICAgICAgICAgIChkb3RvIChqcy9kb2N1bWVudC5jcmVhdGVFbGVtZW50ICJkaXYiKQogICAgICAgICAgICAgKHNldCEgLWlkICJhcHAiKQogICAgICAgICAgICAgKGpzL2RvY3VtZW50LmJvZHkucHJlcGVuZCkpKSkKCihzZXQhICguLWlubmVySFRNTCBhcHApICNodG1sIFs6ZGl2CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbOm15LWVsZW1lbnRdCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAjX1s6bXktZWxlbWVudF1dKQ%3D%3D

but then the h1 would have to have certain classes and now it's one garbled mess of JS ;)

feel free to file an issue about this

I think the issue may be the quotes in class="${...}"

normally that's what you would want in HTML, so not sure what's a good solution here

(yet)

but issue is welcome to I can think about this a little more

I found the issue

normally when you pass an object to attributes in #html it's interpreted as being CSS so it's converted to a CSS string in squint. This is what the attr function does

and it's being executed here:

if (typeof(v) === 'object') {
    return css(v);

and in this case the result of classMap is just a plain object...

don't know if there is a clever way to skip the attr call

Do we only ever hang css props off a :style key/attr?

@john there's no check on which key this happens but I guess we could make this more amenable to static analysis, like the whole attribute map:

[:div {:class "foo" :& m} ...

[:div {:style {:& styles}]

[:div {:style styles}]

I think that would be a small breaking change but probably worth it. It means that this test:

"(let [m {:color :green}] #html [:div {:style (assoc m :width \"200\")} \"Hello\"])"

"(let [m (assoc {:color :green :width \"200\"}] #html [:div {:style {:& m}} \"Hello\"])"

Fixed and released in 0.8.117 https://squint-cljs.github.io/squint/?src=KG5zIG15bGl0CiAgKDpyZXF1aXJlIFtzcXVpbnQuY29yZSA6cmVmZXIgW2RlZmNsYXNzIGpzLXRlbXBsYXRlXV0KICAgWyJodHRwczovL2VzbS5zaC9saXRAMy4wLjAiIDphcyBsaXRdCiAgIFsiaHR0cHM6Ly9lc20uc2gvbGl0QDMuMC4wL2RpcmVjdGl2ZXMvY2xhc3MtbWFwLmpzIiA6cmVmZXIgW2NsYXNzTWFwXV0pKQoKKGRlZmNsYXNzIE15RWxlbWVudAogIChleHRlbmRzIGxpdC9MaXRFbGVtZW50KQogICheOnN0YXRpYyBmaWVsZCBwcm9wZXJ0aWVzIHs6Y291bnQge319KQoKICAoY29uc3RydWN0b3IgW3RoaXNdCiAgICAoc3VwZXIpCiAgICAoc2V0ISB0aGlzLmNvdW50IDApCiAgICAoc2V0ISB0aGlzLm5hbWUgIkhlbGxvIikpCgogIE9iamVjdAogIChyZW5kZXIgW3RoaXNdCiAgICAjaHRtbCBebGl0L2h0bWwKICAgIFs6ZGl2CiAgICAgWzpoMSB7OmNsYXNzIChjbGFzc01hcCB7OmVuYWJsZWQgdHJ1ZX0pfQogICAgICB0aGlzLm5hbWVdCiAgICAgWzpidXR0b24geyJAY2xpY2siIHRoaXMub25DbGljawogICAgICAgICAgICAgICA6cGFydCAiYnV0dG9uIn0KICAgICAgIkNsaWNrIGNvdW50ICIgdGhpcy5jb3VudF1dKQoKICAob25DbGljayBbdGhpc10KICAgIChzZXQhIHRoaXMuY291bnQgKGluYyB0aGlzLmNvdW50KSkpKQoKKGRlZm9uY2UgZm9vCiAgKGRvCiAgICAoanMvd2luZG93LmN1c3RvbUVsZW1lbnRzLmRlZmluZSAibXktZWxlbWVudCIgTXlFbGVtZW50KQogICAgdHJ1ZSkpCgooZGVmIGFwcCAob3IgKGpzL2RvY3VtZW50LnF1ZXJ5U2VsZWN0b3IgIiNhcHAiKQogICAgICAgICAgIChkb3RvIChqcy9kb2N1bWVudC5jcmVhdGVFbGVtZW50ICJkaXYiKQogICAgICAgICAgICAgKHNldCEgLWlkICJhcHAiKQogICAgICAgICAgICAgKGpzL2RvY3VtZW50LmJvZHkucHJlcGVuZCkpKSkKCihzZXQhICguLWlubmVySFRNTCBhcHApICNodG1sIFs6ZGl2CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbOm15LWVsZW1lbnRdCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAjX1s6bXktZWxlbWVudF1dKQ%3D%3D