Experiment to render viewers to html string (#778)

This is an experiment to find out what's required to support rendering to HTML strings via hiccup, using an alternative viewer stack. If this is feasible, it could be the basis for a much smaller client-side bundle in combination with a morphing lib while moving some of the viewers implementation to custom elements.

Author: mk

notebooks/hello.clj

@@ -6,8 +6,9 @@
   (:require [nextjournal.clerk :as clerk]))
 
 ;; Here's a visualization of unemployment in the US.
-(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"}
-                                            :key "id" :fields ["rate"]}}]
-           :projection {:type "albersUsa"} :mark "geoshape" :encoding {:color {:field "rate" :type "quantitative"}}})
+#_(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"}
+                                              :key "id" :fields ["rate"]}}]
+             :projection {:type "albersUsa"} :mark "geoshape" :encoding {:color {:field "rate" :type "quantitative"}}})
+

notebooks/html_string.clj

@@ -0,0 +1,97 @@
+;; # HTML String Rendering
+
+;; This is an experiment to find out what's required to support
+;; rendering to HTML strings via hiccup, using an alternative viewer
+;; stack. If this is feasible, it could be the basis for a much
+;; smaller client-side bundle in combination with a morphing lib while
+;; moving some of the viewers implementation to custom elements.
+
+(ns html-string
+  (:require [nextjournal.clerk :as clerk]
+            [nextjournal.clerk.eval :as eval]
+            [nextjournal.clerk.view :as view]
+            [nextjournal.clerk.viewer :as viewer]
+            [clojure.repl.deps :as deps]))
+
+(defn render-cell [xs]
+  (apply list xs))
+
+(defn render-notebook [{xs :blocks :keys [package doc-css-class sidenotes? toc toc-visibility header footer]}
+                       #_{:as render-opts :keys [!expanded-at]}]
+  [:div.flex
+   [:div.flex-auto.w-screen.scroll-container
+    (into
+     [:div
+      (merge
+       {#_#_:key "notebook-viewer"
+        :class (cond-> (or doc-css-class (mapv name [:flex :flex-col :items-center :notebook-viewer :flex-auto]))
+                 sidenotes? (conj :sidenotes-layout))})]
+     (concat (when header [header]) xs (when footer [footer])))]])
+
+(defn render-html [html]
+  html)
+
+(defn render-code-block [code-string #_{:as opts :keys [id]}]
+  [:div.viewer.code-viewer.w-full.max-w-wide #_{:data-block-id id}
+   code-string
+   #_
+   [code/render-code code-string (assoc opts :language "clojure")]])
+
+(defn render-toc [_])
+
+(def modified-viewers
+  [(assoc viewer/cell-viewer :render-fn `render-cell)
+   (assoc viewer/notebook-viewer :render-fn `render-notebook)
+   (assoc viewer/code-block-viewer :render-fn `render-code-block)
+   (assoc viewer/html-viewer :render-fn `render-html)
+   (assoc viewer/toc-viewer :render-fn `render-toc)])
+
+(defn doc->viewer [doc]
+  (viewer/present
+   (viewer/with-viewers (viewer/add-viewers modified-viewers)
+     (viewer/notebook doc))))
+
+(def viewer-doc
+  (doc->viewer (eval/eval-file "notebooks/hello.clj")))
+
+(defn extract-viewers [viewer-doc]
+  (into []
+        (keep :nextjournal/viewer)
+        (tree-seq coll? seq viewer-doc)))
+
+(sort (keys (frequencies (mapv (comp :form :render-fn) (extract-viewers viewer-doc)))))
+
+(defn ->fn [sym]
+  (cond
+    (simple-symbol? sym) (ns-resolve 'clojure.core sym)
+    (qualified-symbol? sym) (requiring-resolve sym)
+    :else (throw (ex-info "->fn expected symbol, got" {:sym sym}))))
+
+(defn eval-viewers [viewer-doc]
+  (clojure.walk/postwalk (fn [x]
+                           (if (and (map? x)
+                                    (contains? x :nextjournal/viewer)
+                                    (contains? x :nextjournal/value))
+                             ((->fn (get-in x [:nextjournal/viewer :render-fn :form]))
+                              (:nextjournal/value x))
+                             x))
+                         viewer-doc))
+#_
+(clerk/present! (viewer/html
+                 (eval-viewers viewer-doc)))
+
+(defonce html
+  (do
+    (deps/add-lib 'io.github.escherize/huff)
+    @(requiring-resolve 'huff2.core/html)))
+
+(defn ->html [viewer-doc]
+  (nextjournal.clerk.view/->html {:exclude-js? true
+                                  :html (html (eval-viewers viewer-doc))}))
+
+(doto "test.html"
+  (spit (->html viewer-doc))
+  (clojure.java.browse/browse-url))
+
+
+

src/nextjournal/clerk/viewer.cljc

@@ -793,7 +793,7 @@
    {:name :nextjournal.markdown/heading
     :transform-fn (into-markup
                    (fn [{:keys [attrs heading-level]}]
-                     [(str "h" heading-level) attrs]))}
+                     [(keyword (str "h" heading-level)) attrs]))}
    {:name :nextjournal.markdown/image
     :transform-fn (fn [{node :nextjournal/value}]
                     (with-viewer `html-viewer

test/nextjournal/clerk/viewer_test.clj

@@ -241,7 +241,7 @@
 (deftest present
   (testing "only transform-fn can select viewer"
     (is (match? {:nextjournal/value [:div.viewer.markdown-viewer.w-full.max-w-prose.px-8 {}
-                                     ["h1" {:id "hello-markdown!"} [:<> "👋 Hello "] [:em [:<> "markdown"]] [:<> "!"]]]
+                                     [:h1 {:id "hello-markdown!"} [:<> "👋 Hello "] [:em [:<> "markdown"]] [:<> "!"]]]
                  :nextjournal/viewer {:name `v/markdown-node-viewer}}
                 (v/present (v/with-viewer {:transform-fn (comp v/md v/->value)}
                              "# 👋 Hello _markdown_!")))))