Implement :<> hiccup tag for fragments

Fixes #319

src/reagent/impl/template.cljs

@@ -10,6 +10,8 @@
             [reagent.debug :refer-macros [dbg prn println log dev?
                                           warn warn-unless]]))
 
+(declare as-element)
+
 ;; From Weavejester's Hiccup, via pump:
 (def ^{:doc "Regular expression that parses a CSS-style id and class
              from a tag name."}
@@ -342,6 +344,16 @@
       ($! jsprops :key key))
     (react/createElement c jsprops)))
 
+(defn fragment-element [v]
+  (let [jsprops #js{:children (reduce (fn [acc c]
+                                        (.push acc (as-element c))
+                                        acc)
+                                      #js []
+                                      (rest v))}]
+    (when-some [key (key-from-vec v)]
+      ($! jsprops :key key))
+    (react/createElement react/Fragment jsprops)))
+
 (defn adapt-react-class
   ([c {:keys [synthetic-input]}]
    (let [on-update (:on-update synthetic-input)
@@ -383,8 +395,6 @@
     s
     (aset tag-name-cache x (parse-tag x))))
 
-(declare as-element)
-
 (defn native-element [parsed argv first]
   (let [comp ($ parsed :name)
         synthetic-input ($ parsed :syntheticInput)]
@@ -429,6 +439,9 @@
   (let [tag (nth v 0 nil)]
     (assert (valid-tag? tag) (hiccup-err v "Invalid Hiccup form"))
     (cond
+      (keyword-identical? :<> tag)
+      (fragment-element v)
+
       (hiccup-tag? tag)
       (let [n (name tag)
             pos (.indexOf n ">")]

test/reagenttest/testreagent.cljs

@@ -252,7 +252,7 @@
       (is (= 2 @ran)))))
 
 (defn as-string [comp]
-  (server/render-to-string comp))
+  (server/render-to-static-markup comp))
 
 (deftest to-string-test []
   (let [comp (fn [props]
@@ -1125,3 +1125,22 @@
     (fn [c div]
       (is (= "parent,child,bar"
              (.-innerText div))))))
+
+
+(deftest test-fragments
+  (when (>= (js/parseInt react/version) 16)
+    (testing "Fragment as array"
+      (let [comp (fn []
+                   #js [(r/as-element [:div "hello"])
+                        (r/as-element [:div "world"])])]
+        (is (= "<div>hello</div><div>world</div>"
+               (as-string [comp])))))
+
+    (testing "Fragment element, :<>"
+      (let [comp (fn []
+                   [:<>
+                    [:div "hello"]
+                    [:div "world"]
+                    [:div "foo"] ])]
+        (is (= "<div>hello</div><div>world</div><div>foo</div>"
+               (as-string [comp])))))))