Help Garden

roam/render

This is an "Orphan" page. Its core content has not been shared: what you see below is a loose collection of pages and page snippets that mention this page, as well as snippets of this page that were quoted elsewhere.

Summary of what you need to know

{{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")]
            ])))

}}

single block namespace

{{roam/cljs-render:

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 1)]
    (fn [_]
      [:button
       {:draggable true
        :on-click (fn [evt] (swap! *count inc))}
       @*count])))

}}

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 1)]
    (fn [_]
      [:button
       {:draggable true
        :on-click (fn [evt] (swap! *count inc))}
       @*count])))

{{roam/cljs-render:

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 1)]
    (fn [_]
      [:button
       {:draggable true
        :on-click (fn [evt] (swap! *count inc))}
       @*count])))

}}

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 1)]
    (fn [_]
      [:button
       {:draggable true
        :on-click (fn [evt] (swap! *count inc))}
       @*count])))

multi block namespace (reference file)

{{roam/cljs-render:

code/my file

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 11)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count inc))}
       @*count])))

}}

code/my file

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 11)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count inc))}
       @*count])))

{{roam/cljs-render:

code/my file

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 11)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count inc))}
       @*count])))

}}

code/my file

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 11)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count inc))}
       @*count])))

(ns my-stuff
  (:require
   [reagent.core :as r]))

(defn counter [_]
  (let [*count (r/atom 11)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count inc))}
       @*count])))

multi block namespace (reference single fn)

{{roam/cljs-render:

(defn counter2 [_]
  (let [*count (r/atom 2)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count my-inc))}
       @*count])))

}}

code/my file

(ns my-stuff
  (:require
   [reagent.core :as r]))

```
(defn my-inc [n]
  (* n 2))
```

(defn counter2 [_]
  (let [*count (r/atom 2)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count my-inc))}
       @*count])))

(defn counter [_]
  (let [*count (r/atom 0)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count inc))}
       @*count])))

{{roam/cljs-render:

(defn counter2 [_]
  (let [*count (r/atom 2)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count my-inc))}
       @*count])))

}}

code/my file

(ns my-stuff
  (:require
   [reagent.core :as r]))

```
(defn my-inc [n]
  (* n 2))
```

(defn counter2 [_]
  (let [*count (r/atom 2)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count my-inc))}
       @*count])))

(defn counter [_]
  (let [*count (r/atom 0)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count inc))}
       @*count])))

(ns my-stuff
  (:require
   [reagent.core :as r]))

```
(defn my-inc [n]
  (* n 2))
```

(defn counter2 [_]
  (let [*count (r/atom 2)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count my-inc))}
       @*count])))

(defn counter [_]
  (let [*count (r/atom 0)]
    (fn [_]
      [:button
       {:on-click (fn [evt] (swap! *count inc))}
       @*count])))

js window

{{roam/cljs-render:

(defn my-comp [_]
  [:div (pr-str (.. js/Number -MAX_VALUE))])

}}

(defn my-comp [_]
  [:div (pr-str (.. js/Number -MAX_VALUE))])

{{roam/cljs-render:

(defn my-comp [_]
  [:div (pr-str (.. js/Number -MAX_VALUE))])

}}

(defn my-comp [_]
  [:div (pr-str (.. js/Number -MAX_VALUE))])

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

(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

;; 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

Block
- A
- B
- C
A
B
C
Me
- me
- me
  - me
me
me
- me
me
{{TODO}} TODO this one
- a
- b
a
b

print lines

{{roam/cljs-render:


(println "asdf")
(pr "asdf")
(prn "asdf")
(print "asdf")

(ns my-stuff
  (:require
   [clojure.pprint :as pp]))

(defn test-prints
  [{:keys [block-uid]}]
  (pp/pprint block-uid)
  (println "asdf")
  (pr "asdf")
  (prn "asdf")
  (print "asdf")
  [:div "test print"])

}}


(println "asdf")
(pr "asdf")
(prn "asdf")
(print "asdf")

(ns my-stuff
  (:require
   [clojure.pprint :as pp]))

(defn test-prints
  [{:keys [block-uid]}]
  (pp/pprint block-uid)
  (println "asdf")
  (pr "asdf")
  (prn "asdf")
  (print "asdf")
  [:div "test print"])

{{roam/cljs-render:


(println "asdf")
(pr "asdf")
(prn "asdf")
(print "asdf")

(ns my-stuff
  (:require
   [clojure.pprint :as pp]))

(defn test-prints
  [{:keys [block-uid]}]
  (pp/pprint block-uid)
  (println "asdf")
  (pr "asdf")
  (prn "asdf")
  (print "asdf")
  [:div "test print"])

}}


(println "asdf")
(pr "asdf")
(prn "asdf")
(print "asdf")

(ns my-stuff
  (:require
   [clojure.pprint :as pp]))

(defn test-prints
  [{:keys [block-uid]}]
  (pp/pprint block-uid)
  (println "asdf")
  (pr "asdf")
  (prn "asdf")
  (print "asdf")
  [:div "test print"])

Referenced in

roam/render

{{[[roam/render]]: ((qz-VHQwBC))}}

Demo Videos on [[roam/render]]

February 24th, 2021

[[roam/render]] examples

roam/render

{{[[roam/render]]: ((77PX5-Y0t))}}

December 1st, 2020

{{[[roam/render]]: ((77PX5-Y0t))}}

Roam Change Log

{{[[roam/render]]: ((ZA34Gp1hp))}}

roam/render

roam/render

This is an "Orphan" page. Its core content has not been shared: what you see below is a loose collection of pages and page snippets that mention this page, as well as snippets of this page that were quoted elsewhere.

Referenced in

roam/render

Demo Videos on [[roam/render]]

February 24th, 2021

roam/render

December 1st, 2020

Roam Change Log