Merge pull request #811 from anmonteiro/om-799

OM-799: Make a new public function, `dom/create-element`

src/devcards/om/devcards/bugs.cljs

@@ -1018,6 +1018,12 @@
    (fn [_ node]
      (om/add-root! om-779-reconciler OM-779-Root node))))
 
+(defcard om-799-card
+  (dom/svg #js {:viewBox "0 0 400 100"}
+    (dom/rect #js {:id "rectangle" :x "100" :y "20"
+                   :width "50" :height "50" :fill "#29e"})
+    (dom/create-element "use" #js {:xlinkHref "#rectangle"
+                                   :x "150"})))
 
 (comment
 

src/main/om/dom.cljc

@@ -609,3 +609,16 @@
      ([component name]
       {:pre [(satisfies? p/IReactComponent component)]}
       (some-> @(p/-refs component) (get name) p/-render))))
+
+#?(:clj
+   (defn create-element
+     "Create a DOM element for which there exists no corresponding function.
+      Useful to create DOM elements not included in React.DOM. Equivalent
+      to calling `js/React.createElement`"
+     ([tag]
+      (create-element tag nil))
+     ([tag opts & children]
+      (element {:tag tag
+                :attrs (dissoc opts :ref :key)
+                :react-key (:key opts)
+                :children children}))))

src/main/om/dom.cljs

@@ -64,3 +64,12 @@
    (js/ReactDOM.findDOMNode component))
   ([component name]
    (some-> (.-refs component) (gobj/get name) (js/ReactDOM.findDOMNode))))
+
+(defn create-element
+  "Create a DOM element for which there exists no corresponding function.
+   Useful to create DOM elements not included in React.DOM. Equivalent
+   to calling `js/React.createElement`"
+  ([tag]
+   (create-element tag nil))
+  ([tag opts & children]
+   (js/React.createElement tag opts children)))

src/test/om/dom_test.clj

@@ -534,3 +534,21 @@
                                           :dangerouslySetInnerHTML {:__html "'foo bar'"}})
       (volatile! 0) sb)
     (is (= (str sb) "<script type=\"text/javascript\" data-reactid=\"0\">'foo bar'</script>"))))
+
+(deftest test-om-799
+  (let [elem (dom/create-element "use")
+        sb (StringBuilder.)]
+    (is (instance? om.dom.Element elem))
+    (p/-render-to-string elem (volatile! 0) sb)
+    (is (= (str sb) "<use data-reactid=\"0\"></use>")))
+  (let [sb (StringBuilder.)]
+    (p/-render-to-string (dom/create-element "use" nil "use-child") (volatile! 0) sb)
+    (is (= (str sb) "<use data-reactid=\"0\">use-child</use>")))
+  (let [elem (dom/create-element "use"
+               #js {:key "foo"
+                    :x "50" :y "10"
+                    :xlinkHref "#Port"}
+               "use-child")
+        sb (StringBuilder.)]
+    (p/-render-to-string elem (volatile! 0) sb)
+    (is (= (str sb) "<use x=\"50\" y=\"10\" xlink:href=\"#Port\" data-reactid=\"0\">use-child</use>"))))