{{TODO}} Put this at the top of your file

• Code

  • (ns starting-point-for-custom-roam
      (:require
       [reagent.core :as r]
       [datascript.core :as d]
       [roam.datascript.reactive :as dr]))
    

  • (defn *page-with-children-by-node-title [name] 
        (dr/pull '[{:block/children ...}
                   :block/string 
                   :block/uid 
                   :block/props
                  ]
                 [:node/title name])
      )
    

  • (defn block-with-children-by-uid [name] 
        (dr/pull '[
                   {:block/children ...}
                   {:block/path ...}
                   :block/string 
                   :block/uid 
                   :block/props
                  ]
                 [:block/uid name])
      )
    

  • 
    (defn all-children [ent]
        (:block/children ent)
      )
    
    (defn controlled-input [my-local-string]
       [:div 
                  "My local string is controlled by the input" 
                  [:li  @my-local-string]
                  
                 [:input {:value @my-local-string
                          :on-change 
                          (fn [event] 
                            (reset! my-local-string 
                                 (.. event -target -value)))}]
                 
                 ]
      )
    
    (declare color)
    
    (defn counter [my-local-number]
                   [:div "I have been clicked"
                 [:button {:on-click 
                           (fn [e] (swap! my-local-number inc))}
                   @my-local-number]
                  " times"]
      )
    
    

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

  • (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)]))
            ]
    )
    ``` [*](((Fv9oJp3HV)))
    

  • 
    
    (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)]))
            ])))
    

  • (defn page-by-node-title [name] 
        (dr/pull '[{:block/_refs ...}
                   {:block/refs ...}
                   {:block/children ...}
                   {:block/path ...}
                   :block/string 
                   :block/uid 
                   :block/props
                  ]
                 [:node/title name])
      )
    ``` [*](((N5iOmzEp3)))
    

  • 
    (defn my-view [{:keys [:block/uid] :as this-block}]     
      (let [my-local-string (r/atom "hello")
              my-local-number (r/atom 0)]
          (fn [this-block]
                [:div.bp3-card 
                 "I am a div"
    
                 ""
                 (pr-str color)
                 (for [x (range 2)]
                 [counter my-local-number])
                 [controlled-input my-local-string]
                 [controlled-input my-local-string]])))
    
    
    (defn last-render [{:keys [:block/uid] :as this-block}]     
      (let [my-local-string (r/atom "hello")
              my-local-number (r/atom 0)]
          (fn [this-block]
                [:div.bp3-card 
                 "I am a div"
    
                 ""
                 [all-descendents-as-cards 
                  @(*page-with-children-by-node-title "roamhacker")]
                ])))
    
    

  • (defn random-n-refs [n ent]
        (take n (set (:block/_refs ent))
      ))
    

  • (defn *pull-refs [block-uid]
        (dr/pull '[{:block/_refs ...}
                   :node/title
                   :block/string
                   :block/uid]
                 block-uid)
        
      )
    

  • 
    (defn show-refs [component n x]
    [:div  
     (doall (for [y (take @n (:block/_refs @x))]
      [component y]))]
      )
    
    (defn my-item [data]
        [:div.bp3-card (:block/string data)]
      )
    
    (defn my-random-generator [{:keys [:block/uid] :as this-block} n v]     
      (let [my-local-string (r/atom v)
              my-local-number (r/atom (js/parseInt n))]
          (fn [this-block n v]
                [:div.bp3-card 
                 "I am a div"
    
                 ""
                 (pr-str v)
                 [counter my-local-number]
                 [controlled-input my-local-string]
                
                 [show-refs my-item 
                  my-local-number 
                  (*pull-refs [:node/title @my-local-string])]
                 ])))
    
    

• r/atom gives you a local variable
• Final function in your namespace is what gets called with roam-render
  • {{roam/render:

    
    (defn my-view [{:keys [:block/uid] :as this-block}]     
      (let [my-local-string (r/atom "hello")
              my-local-number (r/atom 0)]
          (fn [this-block]
                [:div.bp3-card 
                 "I am a div"
    
                 ""
                 (pr-str color)
                 (for [x (range 2)]
                 [counter my-local-number])
                 [controlled-input my-local-string]
                 [controlled-input my-local-string]])))
    
    
    (defn last-render [{:keys [:block/uid] :as this-block}]     
      (let [my-local-string (r/atom "hello")
              my-local-number (r/atom 0)]
          (fn [this-block]
                [:div.bp3-card 
                 "I am a div"
    
                 ""
                 [all-descendents-as-cards 
                  @(*page-with-children-by-node-title "roamhacker")]
                ])))
    
    

    }}
    • a
    • {{TODO}} Show how to hide all child blocks
    • {{TODO}} Inline components?