Clerk's new viewer API centered around :transform-fn

Author: zampino

deps.edn

@@ -1,5 +1,5 @@
 {:paths ["dev" "notebooks" "resources"]
- :deps {io.github.nextjournal/clerk {:mvn/version "0.7.418"}
+ :deps {io.github.nextjournal/clerk {:git/sha "88b1df4607d9612678012cde4fea98cfbc0871fe"}
 
         ;; input various external data formats
         com.github.seancorfield/next.jdbc  {:mvn/version "1.2.659"}

notebooks/introduction.clj

@@ -182,16 +182,17 @@
 ;; In addition to these defaults, you can also attach a custom viewer
 ;; to any form. Here we make our own little viewer to greet James
 ;; Clerk Maxwell:
+
 (clerk/with-viewer '#(v/html [:div "Greetings to " [:strong %] "!"])
   "James Clerk Maxwell")
 
 ;; But we can do more interesting things, like using a predicate
 ;; function to match numbers and turn them into headings, or
 ;; converting string into paragraphs.
-(clerk/with-viewers [{:pred number?
-                      :render-fn '#(v/html [(keyword (str "h" %)) (str "Heading " %)])}
-                     {:pred string?
-                      :render-fn '#(v/html [:p %])}]
+(clerk/with-viewers (clerk/add-viewers [{:pred number?
+                                         :render-fn '#(v/html [(keyword (str "h" %)) (str "Heading " %)])}
+                                        {:pred string?
+                                         :render-fn '#(v/html [:p %])}])
   [1 "To begin at the beginning:"
    2 "It is Spring, moonless night in the small town, starless and bible-black,"
    3 "the cobblestreets silent and the hunched,"
@@ -200,24 +201,24 @@
 
 ;; Or you could use black and white squares to render numbers:
 ^::clerk/no-cache
-(clerk/with-viewers [{:pred number?
-                      :render-fn '#(v/html [:div.inline-block {:style {:width 16 :height 16}
-                                                               :class (if (pos? %) "bg-black" "bg-white border-solid border-2 border-black")}])}]
+(clerk/with-viewers (clerk/add-viewers [{:pred number?
+                                         :render-fn '#(v/html [:div.inline-block {:style {:width 16 :height 16}
+                                                                                  :class (if (pos? %) "bg-black" "bg-white border-solid border-2 border-black")}])}])
   (take 10 (repeatedly #(rand-int 2))))
 
 ;; Or build your own colour parser and then use it to generate swatches:
-(clerk/with-viewers
-  [{:pred #(and (string? %)
-                (re-matches
-                 (re-pattern
-                  (str "(?i)"
-                       "(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|"
-                       "(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\))")) %))
-    :render-fn '#(v/html [:div.inline-block.rounded-sm.shadow
-                          {:style {:width 16
-                                   :height 16
-                                   :border "1px solid rgba(0,0,0,.2)"
-                                   :background-color %}}])}]
+(clerk/with-viewers (clerk/add-viewers
+                     [{:pred #(and (string? %)
+                                   (re-matches
+                                    (re-pattern
+                                     (str "(?i)"
+                                          "(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|"
+                                          "(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\))")) %))
+                       :render-fn '#(v/html [:div.inline-block.rounded-sm.shadow
+                                             {:style {:width 16
+                                                      :height 16
+                                                      :border "1px solid rgba(0,0,0,.2)"
+                                                      :background-color %}}])}])
   ["#571845"
    "rgb(144,12,62)"
    "rgba(199,0,57,1.0)"
@@ -230,23 +231,24 @@
 ;; what it sends to the browser, you can specify a `:transform-fn`
 ;; that will be called before the data is sent over the wire.
 
-#_ "TODO example of using a :transform-fn"
-
 ;; #### 🏞 Customizing Data Fetching
 
 ;; Sometimes you might want to create a custom viewer that overrides
 ;; Clerk's automatic paging behavior. In this example, we use a custom
-;; `fetch-fn` that specifies a `content-type` to tell Clerk to serve
+;; `transform-fn` that specifies a `content-type` to tell Clerk to serve
 ;; arbitrary byte arrays as PNG images.
 
 ;; Notice that the image is conveyed out-of-band using the `url-for`
 ;; function to get a URL from which to fetch the blob.
 
-(clerk/set-viewers! [{:pred bytes?
-                      :fetch-fn (fn [_ bytes] {:nextjournal/content-type "image/png"
-                                               :nextjournal/value bytes})
+(clerk/add-viewers! [{:pred bytes?
+                      :transform-fn (fn [{bytes :nextjournal/value}]
+                                      {:nextjournal/presented? true
+                                       :nextjournal/content-type "image/png"
+                                       :nextjournal/value bytes})
                       :render-fn '(fn [blob] (v/html [:img {:src (v/url-for blob)}]))}])
 
+
 (.. (HttpClient/newHttpClient)
     (send (.build (HttpRequest/newBuilder (URI. "https://upload.wikimedia.org/wikipedia/commons/5/57/James_Clerk_Maxwell.png")))
           (HttpResponse$BodyHandlers/ofByteArray)) body)

notebooks/rule_30.clj

@@ -18,7 +18,7 @@
 ;; `html` viewer, which allows us to emit arbitrary hiccup to
 ;; represent a value.
 
-(clerk/set-viewers!
+(clerk/add-viewers!
  [{:pred number? :render-fn '#(v/html [:div.inline-block {:style {:width 16 :height 16}
                                                           :class (if (pos? %) "bg-black" "bg-white border-solid border-2 border-black")}])}
   {:pred list? :render-fn '#(v/html (into [:div.flex.flex-col] (v/inspect-children %2) %1))}