add fragment to interpreter

src/daiquiri/compiler.clj

@@ -52,12 +52,6 @@
 
 (declare to-js to-js-map)
 
-(defn fragment?
-  "Returns true if `tag` is the fragment tag \"*\" or \"<>\", otherwise false."
-  [tag]
-  (or (= (name tag) "*")
-      (= (name tag) "<>")))
-
 (defmulti compile-attr (fn [name value] name))
 
 (defmethod compile-attr :class [_ value]

src/daiquiri/interpreter.cljs

@@ -39,13 +39,20 @@
                     (attributes attrs)
                     (interpret-seq content))))
 
+(defn fragment [[type attrs & children]]
+  (let [[attrs children] (if (map? attrs)
+                           [(attributes attrs) (interpret-seq children)]
+                           [nil (interpret-seq (into [attrs] children))])]
+    (create-element js/React.Fragment attrs children)))
+
 (defn- interpret-vec
   "Interpret the vector `x` as an HTML element or a the children of an
   element."
   [x]
-  (if (util/element? x)
-    (element x)
-    (interpret-seq x)))
+  (cond
+    (util/fragment? (nth x 0 nil)) (fragment x)
+    (util/element? x) (element x)
+    :else (interpret-seq x)))
 
 (defn interpret [v]
   (cond

src/daiquiri/util.cljc

@@ -46,6 +46,12 @@
         (update :style camel-case-keys)))
     m))
 
+(defn fragment?
+  "Returns true if `tag` is the fragment tag \"*\" or \"<>\", otherwise false."
+  [tag]
+  (or (= (name tag) "*")
+      (= (name tag) "<>")))
+
 (defn element?
   "Return true if `x` is an HTML element. True when `x` is a vector
   and the first element is a keyword, e.g. `[:div]` or `[:div [:span \"x\"]`."

src/rum/core.clj

@@ -434,7 +434,7 @@
   [attrs & children]
   (let [[attrs children] (if (map? attrs)
                            [attrs children]
-                           [nil (concat [attrs] children)])]
+                           [nil (into [attrs] children)])]
     (if-not (:ns &env)
       `(list ~@children)
       `(.createElement js/React

test/daiquiri/interpreter_test.cljs

@@ -78,3 +78,13 @@
     (is (= "div" (.. c2 -type)))
     (is (= "!Pixel Scout" (.. c2 -props -children)))))
 
+(deftest test-fragment
+  (let [el (interpret [:<> 1 2])]
+    (is (= js/React.Fragment (.. el -type)))
+    (is (= 1 (aget (.. el -props -children) 0)))
+    (is (= 2 (aget (.. el -props -children) 1))))
+  (let [el (interpret [:<> {:key 11}  1 2])]
+    (is (= js/React.Fragment (.. el -type)))
+    (is (= "11" (.-key el)))
+    (is (= 1 (aget (.. el -props -children) 0)))
+    (is (= 2 (aget (.. el -props -children) 1)))))