ckirkendall / kioo

Enlive/Enfocus style templating for Facebook's React and Om in ClojureScript.
Eclipse Public License 1.0
404 stars 39 forks source link

Multiple transformations on one node? #21

Closed asmala closed 10 years ago

asmala commented 10 years ago

It appears that kioo cannot do two transformations on the same node. Doing so produces a rather spectacular parse error during cljs compilation.

Take for example /example/om/src/kioo_example/core.cljs and add a transformation targeting all divs:

(deftemplate my-page "main.html"
  [data]
  {[:header] (substitute (my-header data))
   [:.content] (content (:content data)) ; Targets a div with class content
   [:div] (set-attr :style "color: red;")}) ; ADDED - Targets all divs

The offending piece of code in the generated JavaScript appears to be:

// kioo.core.node is not a valid function parameter name
(function (kioo.core.node) { /* Transformations targeting div.content */ })

The README doesn't seem to mention multiple transformations on one node as a limitation, but I may be missing something. In some cases, (do-> …) is an acceptable workaround, but in other cases this leads to rather verbose code. Here's a case that could benefit from multiple transformations on one node:

(defsnippet login-template "templates/login.html" [:#content]
  [login-disabled? login-fn]
  {[:#email-field]       (set-attr :ref "emailField")
   [:#password-field]    (set-attr :ref "passwordField")
   [:#login-button]      (set-attr :onClick login-fn)
   #{[:input] [:button]} (set-attr :disabled login-disabled?)})
ckirkendall commented 10 years ago

@asmala Kioo does support attaching two transforms to the same node so I suspect something odd is going on here.

ckirkendall commented 10 years ago

This is fixed in the 0.4.1-SNAPSHOT out on clojars now. On smaller note, you should be using set-style vs setting the attribute.

asmala commented 10 years ago

Thanks for the fast fix. And yes, you're quite right about set-style over set-attr. Good to set that straight for posterity. :-)