lynaghk / singult Goto Github PK

Hello,

I may be doing something wrong, but I don't understand what.

I use c2 (and consequently singult) to create an <svg> element, which contains a <path> with <animate> in it. <path> is displayed just fine, however the newly-created <animate> element is not recognised by Chrome as an SVGElement and (consequently?) the animation doesn't happen at all.

I found out that if add the animate into re_svg_tags, like that:

re_svg_tags = /^(animate|svg|g|rect|circle|clipPath|path|line|polygon|polyline|text|textPath)$/;

it works really well.

Do you think it's a singult's issue, or I'm mis-using it somehow?

Thank you!

SingultJS.coffee does not appear to have compiled, so the helper functions are not there. Using the singult.coffee namespaced works fine though :).

Really sweet library btw. Having to work with JS it's really nice to have something like this where I can just declare what the HTML is supposed to look like with data structures instead of strings. Big thumbs up!

An implicit contract on unify is that its output should be the only child of its parent hiccup vector. Currently, if this contract is violated, then Singult trips over an undefined value. Instead, Singult should throw an exception that clearly indicates that unify's contract is being violated in this way.

I've been using singult/c2, and I'm loving it so far, but I recently ran into a snag.
Digging through the comments, I see this is something you're still actively contemplating, re: "else if string_p m #TODO: how to handle raw html?"

Just wondering if you have any insights for stopgaps in the meanwhile.

Rather than walk everything all the time when merging, since everything is data-driven it may be faster to hash the vectors representing each element, attach that to the live DOM node, and then on future merges only descend and merge when the hash changes.

Hiccup supports plopping lazy sequences that contain child vectors into a hiccup vector. I think you're aware of the semantics, since you use them in your C2 bullets example. It would be great if Singult supported this as well, so I don't have to do perform unwieldy workarounds with vec and concat. If I try to insert lazy sequences, then singult.coffee.canonicalize_hiccup throws an Uncaught TypeError, with the message that Object div.child,[object Object] has no method 'match'.

Singult has some extra sugar to expand :style or :properties attributes on elements.
This breaks compatibility with JVM Clojure's Hiccup library.

To make sure that templates/markup can be shared between the clientside and serverside, write a fn to walk Singult vectors and expand the sugar into something Hiccup can eat:

• :style maps need to be flattened into strings
• :properties maps need to be expanded into toplevel attributes (checked=true)

I.e., in the same place as the default enter/update/exit fns. Right now key-fn default is provided in CLJS API only.

If you compile

[:div {:style {:left 14}}]

the browser will reject the left style property because it has no units.
Should Singult automatically append "px" in cases like these?

Hi!

I'm getting TypeError: m.tag is undefined ... (in FF) on (merge! container (render ...)). In Chrome it is Uncaught TypeError: Cannot call method 'toLowerCase' of undefined.
It seems that https://github.com/lynaghk/singult/blob/master/src/coffee/Singult.coffee#L259 should be like m.tagName.toLowerCase.

Thanks in advance :)

Hi,

I've found that render does not add attrubutes to tags like hiccup does.
So the following

(singult/render [:div
            {:style "background-color:lightblue"}
            [:h2 {:style "color:green"} "I should be green."]
            [:p {:style "color:orange"} "I should be orange."]
        ]))

produces

<div><h2>I should be green.</h2><p>I should be orange.</p></div>

Do I do smth wrong or it is an error in the library?

Thanks in advance :)

  :dependencies [
    [org.clojure/clojure "1.4.0"]
    [com.keminglabs/singult "0.1.5"]]

Currently merge only projects attributes from hiccup to the DOM---that'll overwrite any existing attributes, but it doesn't clear out attributes that aren't in the Hiccup representation.

Image a data set of (cljs) maps with an :id key. One may want to use

(unify @data some-fn
       :key-fn :id)

But the coffee implementation calls the key-fn directly key_fn(d,i). Clojurescript implements keywords-as-functions by adding the #call method: key_fn.call(null, d, i).

https://github.com/lynaghk/singult/blob/master/src/coffee/Singult.coffee#L223

(One can get around this by specifying an anonymous function instead:

(unify @data some-fn
       :key-fn #(:id %))

)

Currently [:div.a.b.c] will render as <div class="a b.c"></div>.

It appears that the re_svg_tags regexp is incorrectly matching img tags, probably due to its matching unanchored SVG g tags. It may be that adding start/end anchors to the regexp will work, i.e.:

re_svg_tags = /^(svg|g|rect|circle|clipPath|path|line|polygon|polyline|text|textPath)$/

instead of

re_svg_tags = /(svg|g|rect|circle|clipPath|path|line|polygon|polyline|text|textPath)/

but I haven't tested it yet. I'll submit a patch or pull request if I get the chance.

Singult renders the following snippet differently than Hiccup:

[:span (list "Hello" [:br] "World")]

Hiccup:

<span>Hello<br>World</span>

Singult:

<span><hello><br>World</hello></span>

Is this the intended behavior? If so, what kind of singult code would generate output like Hiccup's?

BTW, other than this nit, singult appears to be a drop-in replacement for Crate in my app (at least for rendering; Crate has a bunch of utilities for building Hiccup-style vectors, e.g. crate.element, etc). Which is pretty cool.

singult determines the namespace of a tag, but not the namespace of a tag attribute. This is a problem with XML attributes that also require a specific namespace to work. For example, browsers refuse rendering an svg:image when the href is not from the xlink namespace i.e. <svg:image xlink:href="..." ... /> This of course requires internally parsing the attributes for namespace like with tags and calling setAttributeNS with the proper namespace. Please consider adding this feature.