Bump clerk (#20)

* Simplify dictionary notebook with Clerk synced atoms and viewer-eval viewer
* Fix zipper notebook
* Bump slideshow viewer
* Pass at dropping unnecessary v/html

Co-authored-by: Martin Kavalar <[email protected]>
Co-authored-by: Philippa Markovics <[email protected]>

Author: 3 people

deps.edn

@@ -1,6 +1,7 @@
 {:paths ["dev" "notebooks" "resources"]
- :deps {io.github.nextjournal/clerk {:git/sha "fa0ddcf000bbcd211008c93d8bd0b3047629f6b6"}
-        io.github.nextjournal/clerk-slideshow {:git/sha "ea9b27e5ec2e5ad57e889060521451ed9138325b"}
+ :deps {io.github.nextjournal/clerk {:git/sha "5620618c378be87b6b7c695c145424dded1ef080"
+                                     #_#_:local/root "../clerk"}
+        io.github.nextjournal/clerk-slideshow {:git/sha "562f634494a1e1a9149ed78d5d39fd9486cc00ba"}
 
         ;; keep 1.10 until `kixi/stats` and `sicmutils` fix warnings
         org.clojure/clojure {:mvn/version "1.10.3"}

notebooks/controls.clj

@@ -1,8 +1,7 @@
 ;; # Controls! 🎛
 ^{:nextjournal.clerk/visibility {:code :hide}}
 (ns ^:nextjournal.clerk/no-cache controls
-  (:require [clojure.string :as str]
-            [nextjournal.clerk :as clerk]))
+  (:require [nextjournal.clerk :as clerk]))
 
 ;; As we've seen in other notebooks, anyone using Clerk can extend the
 ;; viewers however they like without changing the source code of Clerk
@@ -12,14 +11,14 @@
 ;; number as a slider like this:
 
 (def slider
-  {:pred ::clerk/var-from-def
+  {:var-from-def? true
    :transform-fn (comp clerk/mark-presented
                        (clerk/update-val (fn [{::clerk/keys [var-from-def]}]
                                            {:var-name (symbol var-from-def) :value @@var-from-def})))
    :render-fn '(fn [{:keys [var-name value]}]
-                 (v/html [:input {:type :range
-                                  :initial-value value
-                                  :on-change #(v/clerk-eval `(reset! ~var-name (Integer/parseInt ~(.. % -target -value))))}]))})
+                 [:input {:type :range
+                          :initial-value value
+                          :on-change #(v/clerk-eval `(reset! ~var-name (Integer/parseInt ~(.. % -target -value))))}])})
 
 ;; And then assign is to a particular atom like this:
 ^{::clerk/viewer slider}
@@ -38,10 +37,9 @@
 ;; with comments inline to help explain how everything works:
 
 (def text-input
-  ;; We assign a predicate (i.e. `:pred`) function for this viewer,
-  ;; which in this case just checks to see if there's a `var-from-def`
-  ;; (that is, the form Clerk is evaluating defines a var).
-  {:pred ::clerk/var-from-def
+  ;; We're telling Clerk to opt-out of the default behaviour (acting on the value held by
+  ;; the var) and return a map containing the actual var object instead.
+  {:var-from-def? true
 
    ;; When we specify a `:transform-fn`, it gets run on the JVM side
    ;; to pre-process our value before sending it to the front-end. In
@@ -70,11 +68,11 @@
    ;; front- and back- ends of the system is extremely
    ;; powerful — thanks, Lisp!
    :render-fn '(fn [{:keys [var-name value]}]
-                 (v/html [:input {:type :text
-                                  :placeholder "⌨️"
-                                  :initial-value value
-                                  :class "px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full"
-                                  :on-input #(v/clerk-eval `(reset! ~var-name ~(.. % -target -value)))}]))})
+                 [:input {:type :text
+                          :placeholder "⌨️"
+                          :initial-value value
+                          :class "px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full"
+                          :on-input #(v/clerk-eval `(reset! ~var-name ~(.. % -target -value)))}])})
 
 ^{::clerk/viewer text-input}
 (defonce text-state (atom ""))

notebooks/data_science.clj

@@ -182,7 +182,7 @@
 (clerk/table world-happiness)
 
 ;; Next, we're computing a linear regression for this dataset using [kixi.stats](https://github.com/MastodonC/kixi.stats).
-^{::clerk/viewer kixi-p/parameters}
+^{::clerk/viewer {:transform-fn (clerk/update-val kixi-p/parameters)}}
 (def linear-regression
   (transduce identity (kixi-stats/simple-linear-regression :score :gdp) world-happiness))
 

notebooks/dictionary.clj

@@ -1,11 +1,11 @@
 ;; # 📔️ Regex Dictionary
-^{:nextjournal.clerk/visibility {:code :hide :result :hide}}
 (ns dictionary
+  {:nextjournal.clerk/visibility {:code :hide :result :hide}}
   (:require [clojure.string :as str]
             [clojure.java.io :as io]
             [wordnet.core :as wordnet]
             [nextjournal.clerk :as clerk]
-            [controls :refer [text-input]]))
+            [nextjournal.clerk.viewer :as v]))
 
 (def dict
   (try
@@ -21,13 +21,24 @@
        str/split-lines
        (filter #(seq (dict %)))))
 
+(def text-input
+  (assoc v/viewer-eval-viewer
+         :render-fn
+         '(fn [text-state]
+            [:input {:type :text :placeholder "⌨️" :value @text-state
+                     :class "px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full"
+                     :on-input #(reset! text-state (.. % -target -value))}])))
+
+(comment
+  @text-state)
+
 {::clerk/visibility {:result :show}}
 
-(clerk/html [:div [:span {:class "font-bold"} "Type three or more letters of a regex!"]])
-^{:nextjournal.clerk/viewer text-input}
+^{::clerk/sync true ::clerk/viewer text-input}
 (defonce text-state (atom ""))
 
-^::clerk/no-cache
+(clerk/html [:div [:span {:class "font-bold"} "Type three or more letters of a regex!"]])
+
 (clerk/html
  (let [pat (re-pattern @text-state)
        filtered-words (if (> 3 (count @text-state)) []

notebooks/elements.clj

@@ -24,7 +24,7 @@
                                             "bg-black")
                                    :style {:width 16 :height 16}}))
              row (fn [r] (into [:div.flex.inline-flex] (map cell) r))]
-         (v/html (into [:div.flex.flex-col] (map row) board))))
+         (into [:div.flex.flex-col] (map row) board)))
     (->> g1 (iterate evolve) (take 17))))
 
 ;; Clerk uses static analysis and a tiny bit of data flow to avoid needless recomputation.

notebooks/git.clj

@@ -19,13 +19,12 @@
 {:nextjournal.clerk/visibility {:result :show}}
 
 (clerk/with-viewer
- {:transform-fn (comp v/mark-presented
-                      (v/update-val (partial map
-                                             (fn [c]
-                                               (update (select-keys c [:id :changed_files :time])
-                                                       :time #(subs (str %) 4 10))))))
-  :render-fn '(fn [commits]
-                (v/html
+  {:transform-fn (comp v/mark-presented
+                       (v/update-val (partial map
+                                              (fn [c]
+                                                (update (select-keys c [:id :changed_files :time])
+                                                        :time #(subs (str %) 4 10))))))
+   :render-fn '(fn [commits]
                  [:div.min-h-screen.py-6.flex.flex-col.justify-center.sm:py-12.font-sans
                   [:div.py-3.sm:max-w-xl.sm:mx-auto.w-full.px-2.sm:px-0
                    (into
@@ -54,5 +53,5 @@
                                                               :else "black")} filename [:br]])
                                        (:changed_files c)))]]]])
                           (range)
-                          commits))]]))}
+                          commits))]])}
  commits)

notebooks/images.clj

@@ -32,7 +32,7 @@
 
 ;; On the other hand, smaller images are centered and shown using
 ;; their intrinsic dimensions:
-(ImageIO/read (URL. "https://etc.usf.edu/clipart/36600/36667/thermos_36667_sm.gif"))
+(ImageIO/read (URL. "https://nextjournal.com/data/QmeyvaR3Q5XSwe14ZS6D5WBQGg1zaBaeG3SeyyuUURE2pq?filename=thermos.gif&content-type=image/gif"))
 
 ;; If you find yourself using a library that returns images as a
 ;; `ByteArray`, you can read the image into a `BufferedImage` by

notebooks/introduction.clj

@@ -183,16 +183,16 @@
 ;; to any form. Here we make our own little viewer to greet James
 ;; Clerk Maxwell:
 
-(clerk/with-viewer '#(v/html [:div "Greetings to " [:strong %] "!"])
+(clerk/with-viewer '(fn [name] [:div "Greetings to " [:strong name] "!"])
   "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 (clerk/add-viewers [{:pred number?
-                                         :render-fn '#(v/html [(keyword (str "h" %)) (str "Heading " %)])}
+                                         :render-fn '(fn [n] [(keyword (str "h" n)) (str "Heading " n)])}
                                         {:pred string?
-                                         :render-fn '#(v/html [:p %])}])
+                                         :render-fn '(fn [s] [:p s])}])
   [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,"
@@ -202,8 +202,8 @@
 ;; Or you could use black and white squares to render numbers:
 ^::clerk/no-cache
 (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")}])}])
+                                         :render-fn '(fn [n] [:div.inline-block {:style {:width 16 :height 16}
+                                                                                 :class (if (pos? n) "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:
@@ -214,11 +214,12 @@
                                      (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 %}}])}])
+                       :render-fn '(fn [color-str]
+                                     [:div.inline-block.rounded-sm.shadow
+                                      {:style {:width 16
+                                               :height 16
+                                               :border "1px solid rgba(0,0,0,.2)"
+                                               :background-color color-str}}])}])
   ["#571845"
    "rgb(144,12,62)"
    "rgba(199,0,57,1.0)"
@@ -246,7 +247,7 @@
                                       {:nextjournal/presented? true
                                        :nextjournal/content-type "image/png"
                                        :nextjournal/value bytes})
-                      :render-fn '(fn [blob] (v/html [:img {:src (v/url-for blob)}]))}])
+                      :render-fn '(fn [blob] [:img {:src (v/url-for blob)}])}])
 
 
 (.. (HttpClient/newHttpClient)