properly handle ##NaN and ##Inf (close #54)

The problem seems to be devtools JSON-ML implementation. They
seem to coerce javascript's NaN and Infinity to null display.

We would prefer clojure notation anyways, hence we force pr-str printing
of these weird numbers. Also added custom styling options for those
cases.

Author: darwin

examples/lein/src/tests/devtools_sample/tests/issue54.cljs

@@ -0,0 +1,13 @@
+(ns devtools-sample.tests.issue54
+  (:require-macros [devtools-sample.logging :refer [log info]])
+  (:require [devtools-sample.boot :refer [boot!]]))
+
+(boot! "/src/tests/devtools_sample/tests/issue54.cljs")
+
+(enable-console-print!)
+
+; --- MEAT STARTS HERE -->
+(js/console.log ##NaN ##Inf ##-Inf)
+(js/console.log [##NaN ##Inf ##-Inf])
+
+; <-- MEAT STOPS HERE ---

src/lib/devtools/defaults.clj

@@ -27,6 +27,8 @@
    :keyword                     [136 19 145]
    :integer                     [28 0 207]
    :float                       [28 136 207]
+   :float-nan                   [213 60 27]
+   :float-infinity              [28 80 207]
    :string                      [196 26 22]
    :expanded-string             [255 100 100]
    :symbol                      [0 0 0]

src/lib/devtools/defaults.cljs

@@ -153,6 +153,8 @@
      :symbol-tag                                         [:span :symbol-style]
      :integer-tag                                        [:span :integer-style]
      :float-tag                                          [:span :float-style]
+     :float-nan-tag                                      [:span :float-nan-style]
+     :float-infinity-tag                                 [:span :float-infinity-style]
      :string-tag                                         [:span :string-style]
      :expanded-string-tag                                [:span :expanded-string-style]
      :circular-reference-tag                             [:span :circular-reference-wrapper-style]
@@ -246,6 +248,8 @@
      :keyword-style                                      (css (str "color: " (named-color :keyword) ";"))
      :integer-style                                      (css (str "color: " (named-color :integer) ";"))
      :float-style                                        (css (str "color: " (named-color :float) ";"))
+     :float-nan-style                                    (css (str "color: " (named-color :float-nan) ";"))
+     :float-infinity-style                               (css (str "color: " (named-color :float-infinity) ";"))
      :string-style                                       (css (str "color: " (named-color :string) ";"))
      :symbol-style                                       (css (str "color: " (named-color :symbol) ";"))
      :bool-style                                         (css (str "color: " (named-color :bool) ";"))

src/lib/devtools/formatters/markup.cljs

@@ -79,9 +79,13 @@
   [:symbol-tag (str symbol)])
 
 (defn <number> [number]
-  (if (integer? number)
-    [:integer-tag number]
-    [:float-tag number]))
+  (if (js/isFinite number)
+    (if (integer? number)
+      [:integer-tag number]
+      [:float-tag number])
+    (if (js/isNaN number)
+      [:float-nan-tag (pr-str number)]
+      [:float-infinity-tag (pr-str number)])))
 
 ; -- string markup ----------------------------------------------------------------------------------------------------------
 

test/src/tests/devtools/tests/format.cljs

@@ -1031,3 +1031,42 @@
                 [:meta-body-tag
                  [:header-tag
                   CIRCULAR]]))))))))
+
+(deftest test-issue-54
+  (testing "properly handle ##NaN and ##Inf"
+    (let [nan ##NaN
+          wrapped-nan [##NaN]
+          p-inf ##Inf
+          n-inf ##-Inf
+          wrapped-infs [##Inf ##-Inf]]
+      (is-header nan
+        [:cljs-land-tag
+         [:header-tag
+          [:float-nan-tag "##NaN"]]])
+      (has-body? nan false)
+      (is-header wrapped-nan
+        [:cljs-land-tag
+         [:header-tag
+          "["
+          [:float-nan-tag "##NaN"]
+          "]"]])
+      (has-body? wrapped-nan false)
+      (is-header p-inf
+        [:cljs-land-tag
+         [:header-tag
+          [:float-infinity-tag "##Inf"]]])
+      (has-body? p-inf false)
+      (is-header n-inf
+        [:cljs-land-tag
+         [:header-tag
+          [:float-infinity-tag "##-Inf"]]])
+      (has-body? n-inf false)
+      (is-header wrapped-infs
+        [:cljs-land-tag
+         [:header-tag
+          "["
+          [:float-infinity-tag "##Inf"]
+          :spacer
+          [:float-infinity-tag "##-Inf"]
+          "]"]])
+      (has-body? wrapped-infs false))))