Fix #61: allow JS objects in :style prop for "native" components

add test for dynamic js style

static style obj test too

factor style handling, or-defined to separate fns for recursive calls

src/helix/impl/props.cljc

@@ -113,6 +113,28 @@
        ;; not a string or sequential, stringify it
        true (str class))))
 
+
+#?(:cljs
+   (defn or-undefined
+     [v]
+     (if (nil? v)
+       js/undefined
+       v)))
+
+
+(defn native-style
+  [style]
+  (cond
+    ;; React Native allows arrays of styles
+    (vector? style) (into-js-array (map primitive-obj style))
+    ;; when map, convert to an object w/ camel casing
+    (map? style) (primitive-obj style)
+    ;; if anything else, at compile time fall back to runtime
+    ;; at runtime just pass it through and assume it's a JS style obj!
+    true #?(:clj `(native-style ~style)
+            :cljs style)))
+
+
 (defn -native-props
   ([m] #?(:clj (if-let [spread-sym (cond
                                      (contains? m '&) '&
@@ -133,17 +155,9 @@
               (case k
                 :class (set-obj o "className" (normalize-class v))
                 :for (set-obj o "htmlFor" v)
-                :style (set-obj o "style"
-                                (if (vector? v)
-                                  ;; React Native allows arrays of styles
-                                  (into-js-array (map primitive-obj v))
-                                  (primitive-obj v)))
-                :value (set-obj o "value" #?(:clj `(if (nil? ~v)
-                                                     js/undefined
-                                                     ~v)
-                                             :cljs (if (nil? v)
-                                                     js/undefined
-                                                     v)))
+                :style (set-obj o "style" (native-style v))
+                :value (set-obj o "value" #?(:clj `(or-undefined ~v)
+                                             :cljs (or-undefined v)))
                 (set-obj o (camel-case (kw->str k)) v))))
      #?(:clj (list* o)
         :cljs o))))

test/helix/impl/props_test.cljc

@@ -91,9 +91,14 @@
                                   :b :extra-b}]
                  (impl/native-props {:foo-bar :a :b :b :c :c :d :d & extra-props}))
                #js {:fooBar :extra-foo-bar :b :extra-b :c :c :d :d}))
-     (t/is (eq (let [dynamic-style {:color "blue"}]
+     (t/is (eq (let [dynamic-style {:background-color "blue"}]
                  (impl/native-props {:style dynamic-style}))
-               #js {:style #js {:color "blue"}}))
+               #js {:style #js {:backgroundColor "blue"}}))
+     (t/is (eq (impl/native-props {:style #js {:backgroundColor "blue"}})
+               #js {:style #js {:backgroundColor "blue"}}))
+     (t/is (eq (let [dynamic-js-style #js {:backgroundColor "blue"}]
+                 (impl/native-props {:style dynamic-js-style}))
+               #js {:style #js {:backgroundColor "blue"}}))
      (t/is (eq (impl/native-props {:foo "bar"
                                    & #js {:baz "asdf"}})
                #js {:foo "bar" :baz "asdf"}))