Enhance selectors and templating when dealing with js/DocumentFragment

src/dommy/macros.clj

@@ -70,8 +70,12 @@
          #(= "body" %) `js/document.body
          #(= "head" %) `js/document.head
          #(and (= 'js/document base) (id-selector? %)) `(by-id ~data)
-         class-selector? `(aget (by-class ~base ~data) 0)
-         tag-selector? `(aget (by-tag ~base ~data) 0)
+         class-selector? `(if (= js/DocumentFragment (type ~base))
+                            (.querySelector (node ~base) ~(selector-form data))
+                            (aget (by-class ~base ~data) 0))
+         tag-selector? `(if (= js/DocumentFragment (type ~base))
+                          (.querySelector (node ~base) ~(selector-form data))
+                          (aget (by-tag ~base ~data) 0))
          (query-selector base data))
        (query-selector base data)))
   ([data]
@@ -81,8 +85,12 @@
   ([base data]
      (if (constant? data)
        (condp #(%1 %2) (name data)
-         class-selector? `(by-class ~base ~data)
-         tag-selector? `(by-tag ~base ~data)
+         class-selector? `(if (= js/DocumentFragment (type ~base))
+                            (.querySelectorAll (node ~base) ~(selector-form data))
+                            (by-class ~base ~data))
+         tag-selector? `(if (= js/DocumentFragment (type ~base))
+                          (.querySelectorAll (node ~base) ~(selector-form data))
+                          (by-tag ~base ~data))
          (query-selector-all base data))
        (query-selector-all base data)))
   ([data]

src/dommy/template.cljs

@@ -102,6 +102,9 @@
   js/Text
   (-elem [this] this)
 
+  js/Comment
+  (-elem [this] this)
+
   js/Document
   (-elem [this] this)
 

test/dommy/core_test.cljs

@@ -5,7 +5,8 @@
   (:require
    [cljs-test.core :as test]
    [dommy.utils :as utils]
-   [dommy.core :as dommy]))
+   [dommy.core :as dommy]
+   [dommy.template :as template]))
 
 (def body js/document.body)
 
@@ -121,6 +122,42 @@
   ;; Simple
   (dommy/append! body (node [:div#foo]))
   (is= (.-tagName (sel1 :#foo)) "DIV")
+  ;; Simple id selector on DocumentFragment
+  (is=
+   "<div id=\"id1\"></div>"
+   (.-outerHTML
+    (sel1
+     (template/->node-like
+      (template/html->nodes
+       "<div id=\"id1\"></div>"))
+     :#id1)))
+  ;; Simple class unique-selector on DocumentFragment
+  (is=
+   "<div class=\"class1\"></div>"
+   (.-outerHTML
+    (sel1
+     (template/->node-like
+      (template/html->nodes
+       "<div class=\"class1\"></div>"))
+     :.class1)))
+  ;; Simple tagname unique-selector on DocumentFragment
+  (is=
+   "<div class=\"class1\"></div>"
+   (.-outerHTML
+    (sel1
+     (template/->node-like
+      (template/html->nodes
+       "<div class=\"class1\"></div>"))
+     :div)))
+  ;; Simple class selector on DocumentFragment
+  (is=
+   2
+   (.-length
+    (sel
+     (template/->node-like
+      (template/html->nodes
+       "<div class=\"class1\"></div><div class=\"class1\"></div>"))
+     :.class1)))
   ;; Evaluated
   (let [bar :#bar
         bar-el (node bar)]

test/dommy/template_test.cljs

@@ -189,7 +189,15 @@
    (.-outerHTML
     (doto (template/node [:div])
       (.appendChild
-       (template/->node-like (list :.class1 :.class2 :.class3)))))))
+       (template/->node-like (list :.class1 :.class2 :.class3))))))
+  (is=
+   "<div><!-- commented out <div class=\"class3\"></div>--></div>"
+   (.-outerHTML
+    (.querySelector
+     (template/->node-like
+      (template/html->nodes
+       "<div><!-- commented out <div class=\"class3\"></div>--></div>"))
+     "div"))))
 
 (deftemplate span-wrapper [content]
   [:span content])