Extract ns with render-fns and refer to them by full name (#237)

This is a first big step towards making the render-fn part of the viewer api more self-explanatory. We're splitting up the sci-viewer into sci-env and render. Also consistently prefix all render functions and refer to them in viewer using their fully-qualified names so folks can actually jump to definition.

Also start getting rid of most confusing where the exposed var in the sci context would carry a different name than in the defining ns. More cleanup will still follow here.

notebooks/cards.clj

@@ -132,18 +132,18 @@
 
 ;; ## Notebook Viewer
 (c/card
-  (v/with-viewer {:render-fn v/notebook-viewer
-                  :transform-fn v/mark-presented}
-                 {:blocks (map v/present
-                               [(v/with-viewer :markdown "# Hello Markdown\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit nulla, sodales eu lorem ut, tincidunt consectetur diam. Donec in scelerisque risus. Suspendisse potenti. Nunc non hendrerit odio, at malesuada erat. Aenean rutrum quam sed velit mollis imperdiet. Sed lacinia quam eget tempor tempus. Mauris et leo ac odio condimentum facilisis eu sed nibh. Morbi sed est sit amet risus blandit ullam corper. Pellentesque nisi metus, feugiat sed velit ut, dignissim finibus urna.")
-                                (v/code "(shuffle (range 10))")
-                                (v/with-viewer :clerk/code-block {:text "(+ 1 2 3)"})
-                                (v/md "# And some more\n And some more [markdown](https://daringfireball.net/projects/markdown/).")
-                                (v/code "(shuffle (range 10))")
-                                (v/md "## Some math \n This is a formula.")
-                                (v/tex "G_{\\mu\\nu}\\equiv R_{\\mu\\nu} - {\\textstyle 1 \\over 2}R\\,g_{\\mu\\nu} = {8 \\pi G \\over c^4} T_{\\mu\\nu}")
-                                (v/plotly {:data [{:y (shuffle (range 10)) :name "The Federation"}
-                                                  {:y (shuffle (range 10)) :name "The Empire"}]})])}))
+ (v/with-viewer {:render-fn 'nextjournal.clerk.render/render-notebook
+                 :transform-fn v/mark-presented}
+   {:blocks (map v/present
+                 [(v/with-viewer :markdown "# Hello Markdown\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit nulla, sodales eu lorem ut, tincidunt consectetur diam. Donec in scelerisque risus. Suspendisse potenti. Nunc non hendrerit odio, at malesuada erat. Aenean rutrum quam sed velit mollis imperdiet. Sed lacinia quam eget tempor tempus. Mauris et leo ac odio condimentum facilisis eu sed nibh. Morbi sed est sit amet risus blandit ullam corper. Pellentesque nisi metus, feugiat sed velit ut, dignissim finibus urna.")
+                  (v/code "(shuffle (range 10))")
+                  (v/with-viewer :clerk/code-block {:text "(+ 1 2 3)"})
+                  (v/md "# And some more\n And some more [markdown](https://daringfireball.net/projects/markdown/).")
+                  (v/code "(shuffle (range 10))")
+                  (v/md "## Some math \n This is a formula.")
+                  (v/tex "G_{\\mu\\nu}\\equiv R_{\\mu\\nu} - {\\textstyle 1 \\over 2}R\\,g_{\\mu\\nu} = {8 \\pi G \\over c^4} T_{\\mu\\nu}")
+                  (v/plotly {:data [{:y (shuffle (range 10)) :name "The Federation"}
+                                    {:y (shuffle (range 10)) :name "The Empire"}]})])}))
 
 ;; ## Layouts
 ;; **FIXME**:  `v/html` cannot be nested
@@ -178,9 +178,9 @@
 
 ;; ## Parser API
 (c/card
-  (v/html
-   [v/inspect
-    (->> ";; # 👋 Hello CLJS
+ (v/html
+  [v/inspect
+   (->> ";; # 👋 Hello CLJS
 ;; This is `fold`
 ;;
 ;; $$(\\beta\\rightarrow\\alpha\\rightarrow\\beta)\\rightarrow\\beta\\rightarrow [\\alpha] \\rightarrow\\beta$$
@@ -200,13 +200,13 @@
 ;; html
 (v/html [:h1 \"🧨\"])
 "
-         (p/parse-clojure-string {:doc? true})
-         (v/with-viewer :clerk/notebook)
-         (v/with-viewers (v/add-viewers [{:name :clerk/result-block
-                                          :transform-fn (v/update-val (comp v/read-string :text))
-                                          :render-fn '(fn [form]
-                                                        (let [data (eval form)]
-                                                          (try
-                                                            (if (v/valid-react-element? data) data (v/html [v/inspect data]))
-                                                            (catch js/Error e
-                                                              (v/html [:div.red (.-message e)])))))}])))]))
+        (nextjournal.clerk.parser/parse-clojure-string {:doc? true})
+        (v/with-viewer :clerk/notebook)
+        (v/with-viewers (v/add-viewers [{:name :clerk/result-block
+                                         :transform-fn (v/update-val (comp v/read-string :text))
+                                         :render-fn '(fn [form]
+                                                       (let [data (eval form)]
+                                                         (try
+                                                           (if (nextjournal.clerk.render/valid-react-element? data) data (v/html [v/inspect data]))
+                                                           (catch js/Error e
+                                                             (v/html [:div.red (.-message e)])))))}])))]))

notebooks/cards_macro.clj

@@ -4,6 +4,8 @@
 (def card-viewer
   {:transform-fn (comp v/mark-presented (v/update-val v/->viewer-eval))
    :render-fn '(fn [data]
-                 (if (v/valid-react-element? data) data (v/html [v/inspect data])))})
+                 (if (nextjournal.clerk.render/valid-react-element? data)
+                   data
+                   (v/html [nextjournal.clerk.render/inspect data])))})
 
 (defmacro card [body] `(v/with-viewer card-viewer '~body))

notebooks/render_fns.cljs

@@ -1,6 +1,6 @@
 (ns render-fns
   "An illustration on how to write Clerk render functions in a cljs file."
-  (:require [nextjournal.clerk.sci-viewer :as v]))
+  (:require [nextjournal.clerk.viewer :as v]))
 
 (defn heading [text]
   (v/html [:h3 text "!"]))

notebooks/trim_image.clj

@@ -23,9 +23,9 @@
                                                        result-padding (js/document.getElementById "result-padding")
                                                        img (.-target event)]
                                                    (j/assoc! result :innerHTML "")
-                                                   (.appendChild result (js/nextjournal.clerk.sci_viewer.trim_image img))
+                                                   (.appendChild result (js/nextjournal.clerk.trim_image.trim_image img))
                                                    (j/assoc! result-padding :innerHTML "")
-                                                   (.appendChild result-padding (js/nextjournal.clerk.sci_viewer.trim_image img {:padding 20}))))}]
+                                                   (.appendChild result-padding (js/nextjournal.clerk.trim_image.trim_image img {:padding 20}))))}]
        [:h4 "Trimmed"]
        [:div.flex
         [:div#result.border.border-red-500]]

notebooks/viewers/vega.clj

@@ -3,7 +3,6 @@
   (:require [nextjournal.clerk :as clerk]))
 
 ;; ## Geoshape example with requesting data
-
 (clerk/vl {: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"}

resources/viewer-js-hash

@@ -1 +1 @@
-4LtMefJsASaLYuZpTLonG5wdcgmn
+3DSZc3mWAXAE3VqH95woLzeGZaCi

shadow-cljs.edn

@@ -6,8 +6,9 @@
                    :release {:output-dir "build/"}
                    :runtime :custom ;; needed when developing ssr, node errors without it
                    :build-options {:ns-aliases {nextjournal.devcards nextjournal.devcards-noop}}
-                   :modules {:viewer {:entries [nextjournal.clerk.sci-viewer
-                                                nextjournal.clerk.static-app]}}
+                   :modules {:viewer {:entries [nextjournal.clerk.sci-env
+                                                nextjournal.clerk.static-app
+                                                nextjournal.clerk.trim-image]}}
                    :dev {:modules {:viewer {:entries [devtools]}}}
 
                    :js-options {:output-feature-set :es8}}}}