Experimental support for cherry for compiling viewer fns (#446)

This is a first step towards supporting compiling Clerk viewer functions using https://github.com/squint-cljs/cherry. This is is currently experimental so subject to change.

Fixes #441.

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

Author: borkdude

.gitignore

@@ -21,3 +21,4 @@ clerk.iml
 .clj-kondo/marick
 .clj-kondo/nextjournal/clerk
 .secrets.env
+report.html

bb.edn

@@ -31,6 +31,11 @@
   build:static-app {:doc "Builds a static app with default notebooks"
                     :task (apply clojure "-X:demo:nextjournal/clerk" *command-line-args*)}
 
+  build:static-app-test-release
+  {:doc "Builds static app which uses output of build:js.
+         Run with additional --paths notebooks/cherry.clj to test single notebook."
+   :task (apply clojure "-M:demo:nextjournal/clerk:test-release-js" *command-line-args*)}
+
   -check {:depends [lint test:clj]}
 
   check {:doc "Check to run before pushing"

deps.edn

@@ -26,7 +26,7 @@
 
  :aliases {:nextjournal/clerk {:extra-deps {org.clojure/clojure {:mvn/version "1.11.1"} ;; for `:as-alias` support in static build
                                             org.slf4j/slf4j-nop {:mvn/version "1.7.36"}
-                                            org.babashka/cli {:mvn/version "0.5.40"}}
+                                            org.babashka/cli {:mvn/version "0.6.50"}}
                                :extra-paths ["notebooks"]
                                :exec-fn nextjournal.clerk/build!
                                :exec-args {:paths-fn nextjournal.clerk.builder/clerk-docs}
@@ -75,4 +75,9 @@
                           io.github.clojure/tools.build {:git/tag "v0.6.1" :git/sha "515b334"}
                           io.github.slipset/deps-deploy {:git/sha "b4359c5d67ca002d9ed0c4b41b710d7e5a82e3bf"}}
                    :extra-paths ["bb" "src" "resources"] ;; for loading lookup-url in build
-                   :ns-default build}}}
+                   :ns-default build}
+
+           :test-release-js {:jvm-opts ["-Dclerk.resource_manifest={\"/js/viewer.js\" \"/viewer.js\"}"]
+                             :exec-args {:out-path "build"}
+                             :main-opts ["-m" "babashka.cli.exec"]}
+}}

notebooks/cherry.clj

@@ -0,0 +1,144 @@
+;; # Compile viewer functions using cherry
+(ns notebooks.cherry
+  #_{:nextjournal.clerk/visibility {:code :hide}
+     :nextjournal.clerk/auto-expand-results? true}
+  (:require [nextjournal.clerk :as clerk]
+            [nextjournal.clerk.viewer :as viewer]))
+
+(comment
+  (clerk/clear-cache!))
+
+(clerk/with-viewer
+  {:render-fn
+   '(fn [value]
+      [:pre (time (do (dotimes [_ 100000]
+                        (js/Math.sin 100))
+                      (pr-str (interleave (cycle [1]) (frequencies [1 2 3 1 2 3])))))])}
+  (+ 1 2 3 5))
+
+;; Better performance:
+
+(clerk/with-viewer
+  {:render-fn
+   '(fn [value]
+      [:pre
+       (time (do (dotimes [_ 100000]
+                   (js/Math.sin 100))
+                 (pr-str (interleave (cycle [1]) (frequencies [1 2 3 1 2 3])))))])
+   :evaluator :cherry}
+  (+ 1 2 3 5))
+
+;; Let's use a render function in the :render-fn next
+
+(clerk/with-viewer
+  {:render-fn
+   '(fn [value]
+      [nextjournal.clerk.render/render-code "(+ 1 2 3)"])
+   :evaluator :cherry}
+  (+ 1 2 3 5))
+
+;; Recursive ...
+
+(clerk/with-viewer
+  {:render-fn
+   '(fn [value]
+      [nextjournal.clerk.render/inspect {:a (range 30)}])
+   :evaluator :cherry}
+  nil)
+
+;; cherry vega viewer!
+
+(def cherry-vega-viewer (assoc viewer/vega-lite-viewer :evaluator :cherry))
+
+(clerk/with-viewer
+  cherry-vega-viewer
+  {:width 700 :height 400 :data {:url "https://vega.github.io/vega-datasets/data/us-10m.json"
+                                 :format {:type "topojson" :feature "counties"}}
+   :transform [{:lookup "id" :from {:data {:url "https://vega.github.io/vega-datasets/data/unemployment.tsv"}
+                                    :key "id" :fields ["rate"]}}]
+   :projection {:type "albersUsa"} :mark "geoshape" :encoding {:color {:field "rate" :type "quantitative"}}})
+
+;; ## Input text and compile on the fly with cherry
+
+(clerk/with-viewer
+  {:evaluator :cherry
+   :render-fn
+   '(fn [value]
+      (let [default-value "(defn foo [x] (+ x 10))
+(foo 10)"
+            !input (reagent.core/atom default-value)
+            !compiled (reagent.core/atom (nextjournal.clerk.cherry-env/cherry-compile-string @!input))
+            click-handler (fn []
+                            (reset! !compiled (nextjournal.clerk.cherry-env/cherry-compile-string @!input)))]
+        (fn [value]
+          [:div
+           [:div.flex
+            [:div.viewer-code.flex-auto.w-80.mb-2 [nextjournal.clerk.render.code/editor !input]]
+            [:button.flex-none.bg-slate-100.mb-2.pl-2.pr-2
+             {:on-click click-handler}
+             "Compile!"]]
+           [:div.bg-slate-50
+            [nextjournal.clerk.render/render-code @!compiled]]
+           [nextjournal.clerk.render/inspect
+            (try (js/eval @!compiled)
+                 (catch :default e e))]])))}
+  nil)
+
+;; ## Functions defined with `defn` are part of the global context
+
+;; (for now) and can be called in successive expressions
+
+(clerk/eval-cljs-str {:evaluator :cherry}
+                     "(defn foo [x] x)")
+
+(clerk/eval-cljs-str {:evaluator :cherry}
+                     "(foo 1)")
+
+;; ## Async/await works cherry
+
+;; Here we dynamically import a module, await its value and then pull out the
+;; default function, which we expose as a global function. Because s-expressions
+;; serialized to the client currently don't preserve metadata in clerk, and
+;; async functions need `^:async`, we use a plain string.
+
+
+^::clerk/no-cache
+(clerk/eval-cljs
+ {:evaluator :cherry}
+ '(defn emoji-picker
+    {:async true}
+    []
+    (js/await (js/import "https://cdn.skypack.dev/emoji-picker-element"))
+    (nextjournal.clerk.viewer/html [:div
+                                    [:p "My cool emoji picker:"]
+                                    [:emoji-picker]])))
+
+;; In the next block we call it:
+
+^::clerk/no-cache
+(clerk/with-viewer
+  {:evaluator :cherry
+   :render-fn '(fn [_]
+                 [nextjournal.clerk.render/render-promise
+                  (emoji-picker)])}
+  nil)
+
+;; ## Macros
+
+^::clerk/no-cache
+(clerk/eval-cljs
+ {:evaluator :cherry}
+ '(defn clicks []
+    (reagent.core/with-let [!s (reagent.core/atom 0)]
+      [:button {:on-click (fn []
+                            (swap! !s inc))}
+       "Clicks: " @!s])))
+
+^::clerk/no-cache
+(clerk/with-viewer
+  {:evaluator :cherry
+   :render-fn '(fn [_]
+                 [clicks])
+   }
+  nil)
+

render/deps.edn

@@ -2,9 +2,11 @@
  :deps {applied-science/js-interop {:mvn/version "0.3.3"}
         binaryage/devtools {:mvn/version "1.0.3"}
         cider/cider-nrepl {:mvn/version "0.28.3"}
-        org.babashka/sci {:git/sha "4ab93c2530f174491a03083b0f15b76f8a176178" :git/url "https://github.com/babashka/sci"}
+        org.babashka/sci {:mvn/version "0.7.39"}
         reagent/reagent {:mvn/version "1.2.0"}
         io.github.babashka/sci.configs {:git/sha "0702ea5a21ad92e6d7cca6d36de84271083ea68f"}
         io.github.nextjournal/clojure-mode {:git/sha "ac038ebf6e5da09dd2b8a31609e9ff4a65e36852"}
         metosin/reitit-frontend {:mvn/version "0.5.15"}
-        thheller/shadow-cljs {:mvn/version "2.22.7"}}}
+        thheller/shadow-cljs {:mvn/version "2.22.7"}
+        io.github.squint-cljs/cherry {;; :local/root "/Users/borkdude/dev/cherry"
+                                      :git/sha "ac27030016e5ae8f5280a62eaf81dfe0dc83924b"}}}

shadow-cljs.edn

@@ -10,4 +10,6 @@
                    :modules {:viewer {:entries [nextjournal.clerk.sci-env
                                                 nextjournal.clerk.static-app
                                                 nextjournal.clerk.trim-image]}}
-                   :js-options {:output-feature-set :es8}}}}
+                   :js-options {:output-feature-set :es8}
+                   :build-hooks [(shadow.cljs.build-report/hook
+                                  {:output-to "report.html"})]}}}

src/nextjournal/clerk.clj

@@ -349,8 +349,9 @@
 
 (defn eval-cljs-str
   "Evaluates the given ClojureScript `code-string` in the browser."
-  [code-string]
-  (v/eval-cljs-str code-string))
+  ([code-string] (eval-cljs-str code-string nil))
+  ([opts code-string]
+   (v/eval-cljs-str opts code-string)))
 
 (defn eval-cljs
   "Evaluates the given ClojureScript forms in the browser."

src/nextjournal/clerk/builder.clj

@@ -58,7 +58,8 @@
          "viewers/plotly"
          "viewers/table"
          "viewers/tex"
-         "viewers/vega"]))
+         "viewers/vega"
+         "cherry"]))
 
 
 (defn strip-index [path]
@@ -361,3 +362,7 @@
                       :index "notebooks/rule_30.clj"
                       :paths ["notebooks/hello.clj"
                               "notebooks/markdown.md"]})
+#_(build-static-app! {;; test against cljs release `bb build:js`
+                      :resource->url {"/js/viewer.js" "/viewer.js"}
+                      :paths ["notebooks/cherry.clj"]
+                      :out-path "build"})

src/nextjournal/clerk/cherry_env.cljs

@@ -0,0 +1,78 @@
+(ns nextjournal.clerk.cherry-env
+  (:refer-clojure :exclude [time])
+  (:require [applied-science.js-interop :as j]
+            [cherry.embed :as cherry]
+            [cljs.math]
+            [cljs.reader]
+            [clojure.string :as str]
+            [goog.object]
+            [nextjournal.clerk.parser]
+            [nextjournal.clerk.render :as render]
+            [nextjournal.clerk.render.code]
+            [nextjournal.clerk.render.hooks]
+            [nextjournal.clerk.render.navbar]
+            [nextjournal.clerk.trim-image]
+            [nextjournal.clerk.viewer :as viewer]
+            [nextjournal.clojure-mode.commands]
+            [nextjournal.clojure-mode.extensions.eval-region]
+            [nextjournal.clojure-mode.keymap]
+            [reagent.core :as reagent]
+            [reagent.ratom :as ratom]
+            [sci.configs.reagent.reagent :as sci.configs.reagent]))
+
+(cherry/preserve-ns 'cljs.core)
+(cherry/preserve-ns 'nextjournal.clerk.render)
+(cherry/preserve-ns 'nextjournal.clerk.render.code)
+(cherry/preserve-ns 'nextjournal.clerk.render.hooks)
+(cherry/preserve-ns 'nextjournal.clerk.render.navbar)
+
+(j/assoc-in! js/globalThis [:reagent :core :atom] reagent/atom)
+
+(def reagent-ratom-namespace
+  #js {:with-let-values ratom/with-let-values
+       :reactive? ratom/reactive?
+       :-ratom-context sci.configs.reagent/-ratom-context
+       :atom reagent.ratom/atom
+       :make-reaction reagent.ratom/make-reaction
+       :make-track reagent.ratom/make-track
+       :track! reagent.ratom/track!})
+
+(defn munge-ns-obj [m]
+  (.forEach (js/Object.keys m)
+            (fn [k i]
+              (unchecked-set m (munge k) (unchecked-get m k))
+              (js-delete m k)))
+  m)
+
+(j/update-in! js/globalThis [:reagent :ratom] j/extend! (munge-ns-obj reagent-ratom-namespace))
+(j/assoc! js/globalThis :global_eval (fn [x]
+                                       (js/eval.apply js/globalThis #js [x])))
+
+(def cherry-macros {'reagent.core {'with-let sci.configs.reagent/with-let}})
+
+(declare eval-form)
+
+(defn ->viewer-fn-with-error [form]
+  (try (binding [*eval* eval-form]
+         (viewer/->viewer-fn form))
+       (catch js/Error e
+         (viewer/map->ViewerFn
+          {:form form
+           :f (fn [_]
+                [render/error-view (ex-info (str "error in render-fn: " (.-message e)) {:render-fn form} e)])}))))
+
+(defn ->viewer-eval-with-error [form]
+  (try (eval-form form)
+       (catch js/Error e
+         (js/console.error "error in viewer-eval" e)
+         (ex-info (str "error in viewer-eval: " (.-message e)) {:form form} e))))
+
+(defn ^:export cherry-compile-string [s]
+  (cherry/compile-string
+   s
+   {:macros cherry-macros}))
+
+(defn ^:export eval-form [f]
+  (js/global-eval (cherry/compile-string
+                   (str f)
+                   {:macros cherry-macros})))