fix problem of number style values; bump 0.13.9

README.md

@@ -7,7 +7,7 @@ Respo: A virtual DOM library in ClojureScript
 [![Respo](https://img.shields.io/clojars/v/respo/respo.svg)](https://clojars.org/respo/respo)
 
 ```clojure
-[respo "0.13.8"]
+[respo "0.13.9"]
 ```
 
 * Home http://respo-mvc.org

package.json

@@ -1,6 +1,6 @@
 {
   "name": "respo",
-  "version": "0.13.8",
+  "version": "0.13.9",
   "description": "Virtual DOM library",
   "main": "index.js",
   "scripts": {
@@ -29,8 +29,8 @@
   "homepage": "https://github.com/Respo/respo#readme",
   "dependencies": {},
   "devDependencies": {
-    "shadow-cljs": "^2.11.15",
+    "shadow-cljs": "^2.11.18",
     "source-map-support": "^0.5.19",
-    "ws": "^7.4.2"
+    "ws": "^7.4.3"
   }
 }

release.edn

@@ -1,4 +1,4 @@
-{:version "0.13.8",
+{:version "0.13.9",
  :group-id "respo",
  :artifact-id "respo",
  :skip-tag true,

src/respo/comp/inspect.cljs

@@ -25,7 +25,7 @@
    :opacity 0.2,
    :font-size "12px",
    :font-family "Avenir,Verdana",
-   :line-height 1.4,
+   :line-height "1.4em",
    :padding "2px 6px",
    :border-radius "4px",
    :max-width 160,

src/respo/render/dom.cljs

@@ -1,7 +1,9 @@
 
 (ns respo.render.dom
   (:require [clojure.string :as string]
-            [respo.util.format :refer [dashed->camel event->prop ensure-string]]
+            [respo.util.format
+             :refer
+             [dashed->camel event->prop ensure-string get-style-value]]
             [respo.util.detect :refer [component?]]))
 
 (defn make-element [virtual-element listener-builder coord]
@@ -21,8 +23,8 @@
         (let [k (dashed->camel (name (first entry))), v (last entry)]
           (if (some? v) (aset element k v))))
       (doseq [entry style]
-        (let [k (dashed->camel (name (first entry))), v (last entry)]
-          (aset (aget element "style") k (if (keyword? v) (name v) v))))
+        (let [style-name (name (first entry)), k (dashed->camel style-name), v (last entry)]
+          (aset (aget element "style") k (get-style-value v style-name))))
       (doseq [event-name (keys (:event virtual-element))]
         (let [name-in-string (event->prop event-name)]
           (comment println "listener:" event-name name-in-string)
@@ -37,5 +39,8 @@
   (->> styles
        (map
         (fn [entry]
-          (let [k (first entry), v (ensure-string (last entry))] (str (name k) ":" v ";"))))
+          (let [k (first entry)
+                style-name (name k)
+                v (get-style-value (last entry) style-name)]
+            (str (name k) ":" v ";"))))
        (string/join "")))

src/respo/render/html.cljs

@@ -3,7 +3,12 @@
   (:require [clojure.string :as string]
             [respo.util.format
              :refer
-             [prop->attr purify-element mute-element ensure-string text->html]]
+             [prop->attr
+              purify-element
+              mute-element
+              ensure-string
+              text->html
+              get-style-value]]
             [respo.util.detect :refer [component? element?]]))
 
 (defn escape-html [text]
@@ -19,8 +24,10 @@
   (->> styles
        (map
         (fn [entry]
-          (let [k (first entry), v (last entry)]
-            (str (name k) ":" (if (string? v) (escape-html v) (ensure-string v)) ";"))))
+          (let [k (first entry)
+                style-name (name k)
+                v (get-style-value (last entry) style-name)]
+            (str style-name ":" (escape-html v) ";"))))
        (string/join "")))
 
 (defn entry->string [entry]

src/respo/render/patch.cljs

@@ -1,7 +1,9 @@
 
 (ns respo.render.patch
   (:require [clojure.string :as string]
-            [respo.util.format :refer [dashed->camel event->prop ensure-string]]
+            [respo.util.format
+             :refer
+             [dashed->camel event->prop ensure-string get-style-value]]
             [respo.render.dom :refer [make-element style->string]]
             [respo.schema.op :as op]))
 
@@ -24,8 +26,10 @@
       (aset target prop-name prop-value))))
 
 (defn add-style [target op]
-  (let [style-name (dashed->camel (name (key op))), style-value (ensure-string (val op))]
-    (aset (.-style target) style-name style-value)))
+  (let [style-name (name (key op))
+        style-prop (dashed->camel style-name)
+        style-value (get-style-value (val op) style-name)]
+    (aset (.-style target) style-prop style-value)))
 
 (defn append-element [target op listener-builder coord]
   (let [new-element (make-element op listener-builder coord)]

src/respo/util/format.cljs

@@ -49,6 +49,16 @@
 
 (defn event->string [x] (subs (name x) 3))
 
+(def pattern-non-dimensional
+  (new js/RegExp "acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera" "i"))
+
+(defn get-style-value [x style-name]
+  (cond
+    (string? x) x
+    (keyword? x) (name x)
+    (number? x) (if (.test pattern-non-dimensional style-name) (str x) (str x "px"))
+    :else (str x)))
+
 (defn mute-element [element]
   (if (component? element)
     (update element :tree mute-element)