Problem with conditionals about sablono HOT 15 CLOSED

Please add an example of strange behavior.

from sablono.

The following don't work as I think it should but if I replace when with if (adding nil for else) in the h-bar-s function it works fine. I tried the other conditionals as well and only if is working.

(ns c2-om.core
  (:require [cljs.reader :as reader]
            [goog.dom :as gdom]
            [c2.scale :as scale]
            [ankha.core :as ankha]
            [sablono.core :as html :refer-macros [html]]
            [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(defn h-bar-s
  [[width offset data label] _
   {:keys [data-label dy bar-height labels label-width]}]
  (om/component
   (html
    [:g {:transform (str "translate(0," offset ")")}
     [:g
      {:transform (str "translate(" label-width ",0)")}
      [:rect 
       {:width width
        :height bar-height}]
      (when data-label
        [:text
         {:x (- width 3)
          :y (+ dy (/ 19 2))}
         data])]])))

(defn h-bar-chart-s
  [data owner {:keys [width height bar-height class dy label-width label] :as opts}]
  (let [label-width (or label-width 0)
        g-width (- width label-width)
        s (scale/linear :domain [0 (apply max (vals data))]
                        :range [0 g-width])
        height (or height (* bar-height (count data)))
        bar-height (or bar-height (/ height (count data)))]
    (om/component
     (html
      [:svg
       {:width width :height height :class (name class)}
           (om/build-all h-bar-s
                         (map #(vector (s (second %1)) (* %2 (inc bar-height)) (second %1)
                                       (first %1))
                              data (range))
                         {:opts {:bar-height bar-height
                                 :data-label true
                                 :labels true
                                 :label-width label-width
                                 :dy dy}})]))))

(defn app-view [app owner]
  (om/component
   (html
    [:div 
     (om/build v-bar-chart-s app {:opts {:width 300 :height 300 :class :vbar}})])))

(om/root app-view app-state
  {:target (.getElementById js/document "graphics")})

from sablono.

Can you please provide a minimal example. Thanks.

On Thu, Mar 13, 2014 at 2:25 PM, Marcelo Nomoto [email protected]:

The following don't work as I think it should but if I replace when with
if (adding nil for else) in the h-bar-s function it works fine. I tried
the other conditionals as well and only if is working.

(ns c2-om.core
(:require [cljs.reader :as reader]
[goog.dom :as gdom]
[c2.scale :as scale]
[ankha.core :as ankha]
[sablono.core :as html :refer-macros [html]]
[om.core :as om :include-macros true]
[om.dom :as dom :include-macros true]))
(defn h-bar-s
[[width offset data label] _
{:keys [data-label dy bar-height labels label-width]}](om/component
%28html
[:g {:transform %28str)")}
[:g
{:transform (str "translate(" label-width ",0)")}
[:rect
{:width width
:height bar-height}](when data-label
[:text
{:x %28- width 3%29
:y %28+ dy %28/ 19 2%29%29}
data])]])))
(defn h-bar-chart-s
[data owner {:keys [width height bar-height class dy label-width label] :as opts}](let [label-width %28or label-width 0%29
g-width %28- width label-width%29
s %28scale/linear :domain [0 %28apply max %28vals data%29%29]
:range [0 g-width]%29
height %28or height %28* bar-height %28count data%29%29%29
bar-height %28or bar-height %28/ height %28count data%29%29%29]
%28om/component
%28html
[:svg
{:width width :height height :class %28name class%29}
%28om/build-all h-bar-s
%28map #%28vector %28s %28second %1%29%29 %28* %2 %28inc bar-height%29%29 %28second %1%29
%28first %1%29%29
data %28range%29%29
{:opts {:bar-height bar-height
:data-label true
:labels true
:label-width label-width
:dy dy}}%29]%29%29))
(defn app-view [app owner](om/component
%28html
[:div
%28om/build v-bar-chart-s app {:opts {:width 300 :height 300 :class :vbar}}%29]%29))
(om/root app-view app-state
{:target (.getElementById js/document "graphics")})

Reply to this email directly or view it on GitHubhttps://github.com//issues/23#issuecomment-37531986
.

from sablono.

Not really for now, because I didn't understand the output at all and I'm back to om.dom to do this charts. I may try again in a couple of days.

from sablono.

What's the error message? What do you expect, and what do you see instead?

On Thu, Mar 13, 2014 at 2:25 PM, Marcelo Nomoto [email protected]:

The following don't work as I think it should but if I replace when with
if (adding nil for else) in the h-bar-s function it works fine. I tried
the other conditionals as well and only if is working.

(ns c2-om.core
(:require [cljs.reader :as reader]
[goog.dom :as gdom]
[c2.scale :as scale]
[ankha.core :as ankha]
[sablono.core :as html :refer-macros [html]]
[om.core :as om :include-macros true]
[om.dom :as dom :include-macros true]))
(defn h-bar-s
[[width offset data label] _
{:keys [data-label dy bar-height labels label-width]}](om/component
%28html
[:g {:transform %28str)")}
[:g
{:transform (str "translate(" label-width ",0)")}
[:rect
{:width width
:height bar-height}](when data-label
[:text
{:x %28- width 3%29
:y %28+ dy %28/ 19 2%29%29}
data])]])))
(defn h-bar-chart-s
[data owner {:keys [width height bar-height class dy label-width label] :as opts}](let [label-width %28or label-width 0%29
g-width %28- width label-width%29
s %28scale/linear :domain [0 %28apply max %28vals data%29%29]
:range [0 g-width]%29
height %28or height %28* bar-height %28count data%29%29%29
bar-height %28or bar-height %28/ height %28count data%29%29%29]
%28om/component
%28html
[:svg
{:width width :height height :class %28name class%29}
%28om/build-all h-bar-s
%28map #%28vector %28s %28second %1%29%29 %28* %2 %28inc bar-height%29%29 %28second %1%29
%28first %1%29%29
data %28range%29%29
{:opts {:bar-height bar-height
:data-label true
:labels true
:label-width label-width
:dy dy}}%29]%29%29))
(defn app-view [app owner](om/component
%28html
[:div
%28om/build v-bar-chart-s app {:opts {:width 300 :height 300 :class :vbar}}%29]%29))
(om/root app-view app-state
{:target (.getElementById js/document "graphics")})

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/23#issuecomment-37531986
.

from sablono.

There is no error, it compiles ok, but I see only a bar with labels and other text in the wrong place when there should be four bars with labels inside the bars.

from sablono.

I added some test cases for this issue that actually pass. I can't reproduce this issue. Can someone provide some similar test cases that fail?

from sablono.

I tried to compile code @mynomoto provided, had no compile errors with if, if-not or when.

from sablono.

@r0man @edbond I happened to run into a bug today that may be related. When using a conditional with classes, the strings have spaces inserted between each character. Add the following tests to your new tests, and they will incorrectly pass:

(deftest test-issue-23-conditionals
  (are [form expected]
    (is (= expected form))
    ;;...
    (html-str [:div (if true {:class "test"})]) "<div class=\"t e s t\"></div>"
    (html-str [:div (when true {:class "test"})]) "<div class=\"t e s t\"></div>"
    (html-str [:div (if-not false {:class "test"})]) "<div class=\"t e s t\"></div>"
    (html-str [:div (when-not false {:class "test"})]) "<div class=\"t e s t\"></div>"))

from sablono.

@bostonou Fixed in 0.2.11.

from sablono.

The original problem persists in 0.2.11. I have a smaller example now and what's happening is that when makes a extra span element to appear. It doesn't make a difference (usually) in html text but in svg messes everything.

(ns c2-om.core
  (:require [sablono.core :as html :refer-macros [html]]
            [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(def app-state2 (atom 20))

(defn test-if-when
  [data _]
  (om/component
   (html
    [:div
     (when true [:p data])
     (if true [:p data] nil)])))

(defn app-2 [app owner]
  (om/component
   (html
    [:div (om/build test-if-when app)])))

(om/root app-2 app-state2
  {:target (.getElementById js/document "test")})

from sablono.

Hmm, this is strange. This seems to work in the tests, where I
render everything in PhantomJS, in a browser connected REPL and
even when I use the React renderComponentToString fn 5ac24cd. But it
fails when it's compiled ... No idea at the moment.

from sablono.

I found one more detail. Strings don't cause it, but numbers do. In the state in my previous comment, if I use (atom "a"), it works as it should even in the when case.

from sablono.

@mynomoto It was indeed the numbers that were causing this
problem. Nothing to do with conditionals. I pushed 0.2.14. Can
you verify that this is working now?

from sablono.

@r0man It's working now. Thank you.

from sablono.