datascript reactive

• {{roam/cljs-render: yj2HtwWYh a b c}}

• (ns async-stuff
    (:require
     [datascript.core :as d]
     [roam.datascript.reactive :as dr]))
  
  (defn test [{:keys [block-uid]} & args]
    (let [*b (dr/f-entity d/touch [:block/uid block-uid])]
      (js/console.log args)
      (fn [& args]
        [:div "helo"
          (pr-str @*b)
          (with-out-str (prn @*b))])))
  
  

• Example 2

  • ;; Me me me
    (ns example2
      (:require
       [datascript.core :as d]
       [roam.datascript.reactive :as dr]))
    
    

  • 
    (def color ["#2EE115" "rgb(0,244,255)" "#F44336"])
    
    

  • (defn all-descendents-as-cards [block-entity]
    [:div 
            (doall (for [block (rest (tree-seq :block/uid :block/children block-entity))]
              [:button.bp3-card
                {:style {:background-color (rand-nth color)}
                 :on-click (fn [e] (js/alert (:block/uid block)))}
               (:block/string block)]))
            ]
    )
    

  • 
    (defn test [{:keys [block-uid]} & args]
      (let [*my-children (dr/pull '[{:block/children ...} 
                          :block/string 
                          :block/uid] 
                                  [:block/uid block-uid])]
        (js/console.log args)
        (fn [& args]
          [:div 
            (doall (for [block (rest (tree-seq :block/uid :block/children @*my-children))]
              [:button.bp3-card
                {:style {:background-color (rand-nth color)}
                 :on-click (fn [e] (js/alert (:block/uid block)))}
               (:block/string block)]))
            ])))
    
    (defn test2 [{:keys [block-uid]} & args]
      (let [*my-children (dr/pull '[{:block/_refs ...}
                                    {:block/children ...} 
                          :block/string 
                          :block/uid] 
                          [:node/title "TODO"])]
        (js/console.log args)
        (fn [& args]
          [:div 
            (doall (for [block (rest (tree-seq :block/uid :block/_refs @*my-children))]
              [:button.bp3-card.green
                {:style {:background-color (rand-nth color)}
                 :on-click (fn [e] (js/alert (:block/uid block)))}
               (:block/string block)]))
            ])))
    

  • {{roam/render:

    
    (defn test [{:keys [block-uid]} & args]
      (let [*my-children (dr/pull '[{:block/children ...} 
                          :block/string 
                          :block/uid] 
                                  [:block/uid block-uid])]
        (js/console.log args)
        (fn [& args]
          [:div 
            (doall (for [block (rest (tree-seq :block/uid :block/children @*my-children))]
              [:button.bp3-card
                {:style {:background-color (rand-nth color)}
                 :on-click (fn [e] (js/alert (:block/uid block)))}
               (:block/string block)]))
            ])))
    
    (defn test2 [{:keys [block-uid]} & args]
      (let [*my-children (dr/pull '[{:block/_refs ...}
                                    {:block/children ...} 
                          :block/string 
                          :block/uid] 
                          [:node/title "TODO"])]
        (js/console.log args)
        (fn [& args]
          [:div 
            (doall (for [block (rest (tree-seq :block/uid :block/_refs @*my-children))]
              [:button.bp3-card.green
                {:style {:background-color (rand-nth color)}
                 :on-click (fn [e] (js/alert (:block/uid block)))}
               (:block/string block)]))
            ])))
    

    }}
    • Block
      • A
      • B
      • C
    • Me
      • me
      • me
        • me

  • {{TODO}} TODO this one

    • a
    • b