Make try notebook runnable without custom SCI build (#30)

Co-authored-by: Michiel Borkent <[email protected]>
Co-authored-by: Andrea Amantini <[email protected]>

.dir-locals.el

@@ -1,2 +1,2 @@
 ((clojure-mode
-  (cider-clojure-cli-aliases . ":test:repl")))
+  (cider-clojure-cli-aliases . ":nextjournal/clerk:test:repl")))

.github/workflows/main.yml

@@ -128,14 +128,14 @@ jobs:
             ${{ runner.os }}-shadow-cljs-
 
       - name: 🔐 Google Auth
-        uses: google-github-actions/auth@v0
+        uses: google-github-actions/auth@v2.1.6
         with:
           credentials_json: ${{ secrets.GCLOUD_SERVICE_KEY }}
 
       - name: 🔧 Setup Google Cloud SDK
         uses: google-github-actions/[email protected]
 
-      - name: 🏗 Build Clerk Notebooks with Bundled SCI Context
+      - name: 🏗 Build Clerk Notebooks
         run: bb build:notebooks ${{ github.sha }}
 
       - name: 📠 Copy static build to bucket under SHA

bb.edn

@@ -42,32 +42,17 @@
 
   build:notebooks
   {:doc "builds a Clerk static with notebooks specified in deps.edn given a specified git SHA"
-   :depends [cljs:sci:release]
    :task (clojure (str "-X:dev:nextjournal/clerk :git/sha '\"" (or (first *command-line-args*) "SHASHASHA") "\"' :browse? false"))}
 
   dev
-  {:doc "Boots and watches both shadow browser test and sci builds"
+  {:doc "Boots and watches shadow browser test"
    :depends [yarn-install]
-   :task (clojure "-M:dev:test:nextjournal/clerk:sci watch sci browser-test")}
-
-  cljs:sci
-  {:doc "watches cljs build"
-   :depends [yarn-install]
-   :task (clojure "-M:nextjournal/clerk:sci watch sci")}
-
-  cljs:sci:release
-  {:doc "watches cljs build"
-   :depends [yarn-install]
-   :task (clojure "-M:nextjournal/clerk:sci release sci")}
+   :task (clojure "-M:dev:test:nextjournal/clerk:shadow watch browser-test")}
 
   cljs:compile:tests
   {:doc "compiles tests as node executable"
    :depends [yarn-install]
-   :task (clojure "-M:cljs-test compile test")}
-
-  test:cljs:browser
-  {:doc "runs cljs tests in the browsr"
-   :task (clojure "-M:cljs-test watch browser-test")}
+   :task (clojure "-M:dev:test:shadow compile test")}
 
   test:cljs
   {:doc "runs cljs tests via node"

deps.edn

@@ -10,10 +10,10 @@
  :aliases
  {:nextjournal/clerk
   {:extra-paths ["notebooks" "dev"]
-   :extra-deps {io.github.nextjournal/clerk {:git/sha "f7b47ebb639ea157a0f72d6a63e7f263179c72a9"
+   :extra-deps {io.github.nextjournal/clerk {:git/sha "80b3e0832d08b75e13e3b862bd46660cb1c66d5c"
                                              :exclusions [io.github.nextjournal/markdown]}}
    :jvm-opts ["-Dclojure.main.report=stderr"
-              "-Dclerk.resource_manifest={\"/js/viewer.js\" \"js/viewer.js\"}"] ;;
+              #_"-Dclerk.resource_manifest={\"/js/viewer.js\" \"js/viewer.js\"}"] ;;
    :exec-fn nextjournal.clerk/build!
    :exec-args {:git/url "https://github.com/nextjournal/markdown"
                :paths ["README.md"
@@ -41,19 +41,9 @@
    :extra-deps {nubank/matcher-combinators {:mvn/version "3.8.3"}}
    :exec-fn test-runner/run}
 
-  :cljs-test
-  {:extra-paths ["test"]
-   :main-opts ["-m" "shadow.cljs.devtools.cli"]
-   :extra-deps {thheller/shadow-cljs {:mvn/version "2.18.0"}
-                nubank/matcher-combinators {:mvn/version "3.8.3"}}}
-
-  :sci
-  {:extra-paths ["sci"]
-   :main-opts ["-m" "shadow.cljs.devtools.cli"]
-   :jvm-opts ["-Dclerk.resource_manifest={\"/js/viewer.js\" \"http://localhost:8021/viewer.js\"}"]
-   :extra-deps {io.github.nextjournal/clerk.render {:git/url "https://github.com/nextjournal/clerk"
-                                                    :git/sha "f7b47ebb639ea157a0f72d6a63e7f263179c72a9"
-                                                    :deps/root "render"}}}
+  :shadow
+  {:main-opts ["-m" "shadow.cljs.devtools.cli"]
+   :extra-deps {thheller/shadow-cljs {:mvn/version "2.18.0"}}}
 
   :build
   {:ns-default build

dev/nextjournal/markdown/graaljs.clj

@@ -89,4 +89,4 @@
 ")
 
   ;; launch shadow cljs repl
-  (shadow.cljs.devtools.api/repl :sci))
+  (shadow.cljs.devtools.api/repl :browser-test))

dev/nextjournal/markdown/render.cljs

@@ -0,0 +1,107 @@
+(ns nextjournal.markdown.render
+  (:require
+   ["katex" :as katex]
+   ["@codemirror/language" :refer [defaultHighlightStyle syntaxHighlighting LanguageSupport]]
+   ["@codemirror/state" :refer [EditorState]]
+   ["@codemirror/view" :refer [EditorView keymap]]
+   ["@codemirror/lang-markdown" :as MD :refer [markdown markdownLanguage]]
+   ["react" :as react]
+   [nextjournal.markdown :as md]
+   [nextjournal.clerk.viewer :as v]
+   [nextjournal.clerk.render.hooks :as hooks]
+   [nextjournal.markdown.transform :as md.transform]
+   [nextjournal.clojure-mode :as clojure-mode]
+   [nextjournal.clerk.render.code :as code]
+   [clojure.string :as str]
+   [nextjournal.clerk.render :as render]
+   [reagent.core :as r]))
+
+(def theme #js {"&.cm-editor.cm-focused" #js {:outline "none"}
+                ".cm-activeLine" #js {:background-color "rgb(226 232 240)"}
+                ".cm-line" #js {:padding "0"
+                                :line-height "1.6"
+                                :font-size "15px"
+                                :font-family "\"Fira Mono\", monospace"}})
+
+;; syntax (an LRParser) + support (a set of extensions)
+(def clojure-lang (LanguageSupport. (clojure-mode/syntax)
+                                    (.. clojure-mode/default-extensions (slice 1))))
+(defn on-change-ext [f]
+  (.. EditorState -transactionExtender
+      (of (fn [^js tr]
+            (when (.-docChanged tr) (f (.. tr -state sliceDoc)))
+            #js {}))))
+
+(defn eval-string [source]
+  (when (not-empty (str/trim source))
+    (try {:result  #_:clj-kondo/ignore (load-string source)}
+         (catch js/Error e
+           {:error (str (.-message e))}))))
+
+(defn editor [{:keys [doc lang editable? on-change] :or {editable? true}}]
+  (let [!editor-el (hooks/use-ref)
+        extensions (into-array (cond-> [(syntaxHighlighting defaultHighlightStyle)
+                                        (.. EditorState -allowMultipleSelections (of editable?))
+                                        #_(foldGutter)
+                                        (.. EditorView -editable (of editable?))
+                                        (.of keymap clojure-mode/complete-keymap)
+                                        (.theme EditorView theme)]
+
+                                 on-change
+                                 (conj (on-change-ext on-change))
+
+                                 (= :clojure lang)
+                                 (conj (.-extension clojure-lang))
+
+                                 (= :markdown lang)
+                                 (conj (markdown #js {:base markdownLanguage
+                                                      :defaultCodeLanguage clojure-lang}))))]
+    (hooks/use-effect
+     (fn []
+       (let [editor-view* (code/make-view (code/make-state doc extensions) @!editor-el)]
+         #(.destroy editor-view*))) [doc])
+    [:div {:ref !editor-el}]))
+
+(defn clojure-editor [{:as opts :keys [doc]}]
+  (let [!result (hooks/use-state nil)]
+    (hooks/use-effect (fn [] (reset! !result (eval-string doc))) [doc])
+    [:div
+     [:div.p-2.bg-slate-100
+      [editor (assoc opts :lang :clojure :editable? false)]]
+     [:div.viewer-result.mt-1.ml-5
+      (when-some [{:keys [error result]} @!result]
+        (cond
+          error [:div.red error]
+          (react/isValidElement result) result
+          :else [render/inspect result]))]]))
+
+(def renderers
+  (assoc md.transform/default-hiccup-renderers
+         :code (fn [_ctx node] [clojure-editor {:doc (md.transform/->text node)}])
+         :todo-item (fn [ctx {:as node :keys [attrs]}]
+                      (md.transform/into-markup [:li [:input {:type "checkbox" :default-checked (:checked attrs)}]] ctx node))
+         :formula (fn [_ctx node]
+                    [:span {:dangerouslySetInnerHTML {:__html (.renderToString katex (md.transform/->text node))}}])
+         :block-formula (fn [_ctx node]
+                          [:div {:dangerouslySetInnerHTML {:__html (.renderToString katex (md.transform/->text node) #js {:displayMode true})}}])))
+
+(defn inspect-expanded [x]
+  (r/with-let [expanded-at (r/atom {:hover-path [] :prompt-multi-expand? false})]
+    (render/inspect-presented {:!expanded-at expanded-at}
+                              (v/present x))))
+
+(defn try-markdown [init-text]
+  (let [text->state (fn [text]
+                      (let [parsed (md/parse text)]
+                        {:parsed parsed
+                         :hiccup (nextjournal.markdown.transform/->hiccup renderers parsed)}))
+        !state (hooks/use-state (text->state init-text))]
+    [:div.grid.grid-cols-2.m-10
+     [:div.m-2.p-2.text-xl.border-2.overflow-y-scroll.bg-slate-100 {:style {:height "20rem"}}
+      [editor {:doc init-text :on-change #(reset! !state (text->state %)) :lang :markdown}]]
+     [:div.m-2.p-2.font-medium.overflow-y-scroll {:style {:height "20rem"}}
+      [inspect-expanded (:parsed @!state)]]
+     [:div.m-2.p-2.overflow-x-scroll
+      [inspect-expanded (:hiccup @!state)]]
+     [:div.m-2.p-2.bg-slate-50.viewer-markdown
+      [v/html (:hiccup @!state)]]]))

notebooks/try.clj

@@ -4,29 +4,17 @@
   (:require [nextjournal.clerk :as clerk]))
 ;; _Edit markdown text, see parsed AST and transformed hiccup live. Preview how Clerk renders it._
 ^{::clerk/width :full
-  ::clerk/visibility {:code :fold}
-  ::clerk/viewer {:render-fn '(fn [_]
-                                (let [init-text "# 👋 Hello Markdown
+  ::clerk/visibility {:code :fold}}
+(clerk/with-viewer {:render-fn 'nextjournal.markdown.render/try-markdown
+                    :require-cljs true}
+  "# 👋 Hello Markdown
 
 ```clojure id=xxyyzzww
 (reduce + [1 2 3])
 ```
 ## Subsection
 - [x] type **some**
 - [x] ~~nasty~~
-- [ ] _stuff_ here"
-                                      text->state (fn [text]
-                                                    (let [parsed (md/parse text)]
-                                                      {:parsed parsed
-                                                       :hiccup (md.transform/->hiccup md.demo/renderers parsed)}))
-                                      !state (nextjournal.clerk.render.hooks/use-state (text->state init-text))]
-                                  [:div.grid.grid-cols-2.m-10
-                                   [:div.m-2.p-2.text-xl.border-2.overflow-y-scroll.bg-slate-100 {:style {:height "20rem"}}
-                                    [md.demo/editor {:doc init-text :on-change #(reset! !state (text->state %)) :lang :markdown}]]
-                                   [:div.m-2.p-2.font-medium.overflow-y-scroll {:style {:height "20rem"}}
-                                    [md.demo/inspect-expanded (:parsed @!state)]]
-                                   [:div.m-2.p-2.overflow-x-scroll
-                                    [md.demo/inspect-expanded (:hiccup @!state)]]
-                                   [:div.m-2.p-2.bg-slate-50.viewer-markdown
-                                    [nextjournal.clerk.viewer/html (:hiccup @!state)]]]))}}
-(Object.)
+- [ ] _stuff_ here")
+
+#_(clerk/serve! {:port 8989 :browse true})