- Command: jump to next code cell (shift-tab)

- Use yawn for hiccup compiling/interpreting
- Render shapes using yawn's IElement protocol
- Add a React error boundary to the value-viewer

editor2/deps.edn

@@ -2,21 +2,21 @@
  :deps {org.clojure/clojure {:mvn/version "1.11.1"}
         org.clojure/clojurescript {:mvn/version "1.11.60"}
         thheller/shadow-cljs {:mvn/version "2.20.1"}
-        reagent/reagent {:mvn/version "1.1.1"}
         applied-science/js-interop {#_#_:mvn/version "0.3.3"
                                     :git/url "https://github.com/applied-science/js-interop"
                                     :git/sha "d4c7bbcfd37c1418855e3c794fb0cd9adb6ad5a3"}
-        nextjournal/clojure-mode {#_#_:local/root "../../clojure-mode"
-                                  :git/url "https://github.com/nextjournal/clojure-mode"
+        nextjournal/clojure-mode {:git/url "https://github.com/nextjournal/clojure-mode"
                                   :git/sha "35fb41584e3e071b6f68f2e2185e2fd2bc6a0693"}
-        mhuebert/re-db {:git/url "https://github.com/mhuebert/re-db"
-                        :git/sha "5b682571945d0e88de64376bcb3cc16504e9bf16"}
         com.teknql/shadow-cljs-tailwind-jit {:mvn/version "1.0.0"}
         org.babashka/sci {:mvn/version "0.4.33"}
+        funcool/promesa {:mvn/version "8.0.450"}
+
         maria/tools {:local/root "../tools"}
         maria/shapes {:local/root "../shapes"}
         maria/friendly {:local/root "../friendly"}
-        funcool/promesa {:mvn/version "8.0.450"}}
+
+        io.github.mhuebert/yawn {:git/sha "1613f394e1dfd508c8f043501a9157dad1fa0bfb"}}
  :aliases
  {:local {:extra-deps {applied-science/js-interop {:local/root "../../js-interop"}
-                       nextjournal/clojure-mode {:local/root "../../clojure-mode"}}}}}
+                       nextjournal/clojure-mode {:local/root "../../clojure-mode"}
+                       io.github.mhuebert/yawn {:local/root "../../yawn"}}}}}

editor2/package.json

@@ -33,6 +33,7 @@
     "prosemirror-view": "^1.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-refresh": "^0.14.0",
     "shadow-cljs": "^2.20.1",
     "tailwindcss": "^3.1.8",
     "w3c-keyname": "^2.2.4"

editor2/shadow-cljs.edn

@@ -10,6 +10,7 @@
    :release {:build-hooks [(teknql.tailwind/compile-release!)
                            (shadow.cljs.build-report/hook {:output-to "public/report.html"})]}
    :devtools {:http-root "public"
-              :http-port 8000}
-   :modules {:main {:init-fn maria.live/render}}
+              :http-port 8000
+              :preloads [yawn.view.refresh-preload]}
+   :modules {:main {:init-fn maria.live/init}}
    :tailwind/output "public/css/tailwind.css"}}}

editor2/src/main/maria/code/NodeView.cljs

@@ -10,15 +10,14 @@
             ["@codemirror/commands" :as cmd]
             ["react-dom/client" :as react.client]
             ["react" :as react]
-            [reagent.core :as reagent]
-            [tools.maria.react-roots :as roots]
             [nextjournal.clojure-mode.util :as u]
             [nextjournal.clojure-mode :as clj-mode]
             [maria.style :as style]
             [maria.keymap :as keys]
             [maria.eval.sci :as sci]
             [maria.code.commands :as commands]
-            [maria.code.views :as views]))
+            [maria.code.views :as views]
+            [yawn.view.dom :as dom]))
 
 
 (j/js
@@ -139,18 +138,19 @@
     (let [eval-modifier "Alt"
           dom (js/document.createElement "div")
           this (j/obj)]
+      (dom/mount dom #(#'views/code-row this))
       (j/extend! this
         {:getPos getPos
          :proseView proseView
          :proseNode proseNode
-         :root (doto (react.client/createRoot dom)
-                 (roots/init! #(reagent/as-element ^:clj [views/code-row this])))
          :mounted! (fn [el]
-                     (.appendChild (.-firstChild el)
-                                   (.. this -codeView -dom))
+                     (.appendChild (.-firstChild el) (.. this -codeView -dom))
                      (set-initial-focus! this)
-                     (j/!set this :mounted? true)
-                     ^:clj (doseq [f (j/get this :on-mounts)] (f)))
+                     (when-not (j/get this :mounted?)
+                       (j/!set this :mounted? true)
+                       ^:clj (doseq [f (j/get this :on-mounts)] (f))
+                       (j/delete! this :on-mounts)
+                       ))
          :codeView (new EditorView
                         {:state
                          (.create EditorState
@@ -207,6 +207,6 @@
          :stopEvent (fn []
                       #_(j/log :stopEvent)
                       true)
-         :destroy #(let [{:keys [codeView root]} this]
+         :destroy #(let [{:keys [codeView]} this]
                      (.destroy codeView)
-                     (roots/unmount! root))}))))
+                     (dom/unmount dom))}))))

editor2/src/main/maria/code/commands.cljs

@@ -152,7 +152,6 @@
     (code:eval-string! this (.. codeView -state -doc (toString)))
     true)
 
-
   )
 (defn prose:eval-doc! [^js prose-view]
   ;; TODO
@@ -164,3 +163,19 @@
                          (keep (j/get :spec))
                          (filterv (j/get :codeView)))]
     (code:eval-block! code-view nil)))
+
+(j/defn prose:next-code-cell [proseView]
+  (when-let [index (.. proseView -state -selection -$anchor (index 0))]
+    (when-let [next-node (->> proseView
+                              .-docView
+                              .-children
+                              (drop (inc index))
+                              (keep (j/get :spec))
+                              first)]
+      (j/js (let [{:keys [codeView dom]} next-node]
+              (.dispatch codeView
+                         {:selection {:anchor 0
+                                      :head 0}})
+              (.focus codeView)
+              (.scrollIntoView dom {:block :center})))
+      true)))

editor2/src/main/maria/code/views.cljs

@@ -1,7 +1,32 @@
 (ns maria.code.views
   (:require [applied-science.js-interop :as j]
+            [yawn.view :as v]
+            [yawn.convert :as c :refer [IElement]]
+            [shapes.core :as shapes]
             ["react" :as react]
-            [reagent.core :as reagent]))
+            [shadow.cljs.modern :refer [defclass]]))
+
+(v/defview render-error-boundary [this]
+  (j/let [^js {{[error-view body] :children} :props
+               {:keys [error]} :state} this]
+    (if error
+      [error-view error]
+      [:div body])))
+
+(defclass ErrorBoundary
+  (extends react/Component)
+  (constructor [this] (super))
+  Object
+  (render [^js this] (render-error-boundary this)))
+
+(j/!set ErrorBoundary :getDerivedStateFromError (fn [error]
+                                                  (j/log :found-error error)
+                                                  #js{:error error}))
+
+(extend-protocol IElement
+  shapes/Shape
+  (to-element [this]
+    (v/x (shapes/to-hiccup this))))
 
 (defn use-watch [ref]
   (let [[value set-value!] (react/useState [nil @ref])]
@@ -11,20 +36,23 @@
        #(remove-watch ref set-value!)))
     value))
 
-(defn value-viewer [!result]
-  (when-let [result (second (use-watch !result))]
-    (if-let [error (:error result)]
-      (str "Error: " error) ;; TODO  format error
-      (pr-str (:value result)))))
+(v/defview error-viewer [error]
+  (ex-message error))
+
+(v/defview value-viewer [!result]
+  (when-let [{:as result :keys [value error]} (second (use-watch !result))]
+    [:...
+     (if error
+       [error-viewer error]
+       (j/lit [ErrorBoundary {:key result} error-viewer value]))]))
 
-(j/defn code-row [^js {:keys [!result mounted!]}]
+(v/defview code-row [^js {:keys [!result mounted!]}]
   (let [ref (react/useCallback (fn [el]
                                  (when el (mounted! el))))]
-          [:div.-mx-4.mb-4.md:flex
-           {:ref ref}
-           [:div {:class "md:w-1/2 text-base"
-                  :style {:color "#c9c9c9"}}]
-
-           [:div
-            {:class "md:w-1/2 text-sm"}
-            [value-viewer !result]]]))
+    [:div.-mx-4.mb-4.md:flex
+     {:ref ref}
+     [:div {:class "md:w-1/2 text-base"
+            :style {:color "#c9c9c9"}}]
+     [:div
+      {:class "md:w-1/2 text-sm"}
+      [value-viewer !result]]]))

editor2/src/main/maria/keymap.cljs

@@ -33,7 +33,8 @@
                                             (pm.cmd/scrollIntoView))))
                             true))]
       (pm.keymap/keymap
-       (j/extend! {:Mod-Alt-Enter
+       (j/extend! {:Shift-Tab (fn [_ _ proseView] (commands/prose:next-code-cell proseView))
+                   :Mod-Alt-Enter
                    (fn [state dispatch view]
                      (commands/prose:eval-doc! view)
                      true)
@@ -121,6 +122,9 @@
           {:key :Mod-Alt-Enter
            :doc "Evaluate doc"
            :run (fn [_] (commands/prose:eval-doc! (.. this -proseView))
-                  true)}])))
+                  true)}
+          {:key :Shift-Tab
+           :doc "Next Code Cell"
+           :run #(commands/prose:next-code-cell (j/get this :proseView))}])))
 
 

editor2/src/main/maria/live.cljs

@@ -1,20 +1,12 @@
 (ns maria.live
   (:require ["react-dom/client" :as react.client]
-            [applied-science.js-interop :as j]
             [maria.prose.editor :as prose]
-            [tools.maria.dom :as dom]
-            [reagent.core :as reagent]
             [clojure.string :as str]
             [maria.style :as style]
             maria.scratch
-            [tools.maria.react-roots :as roots]
-            [shadow.resource :as rc]))
-
-(defonce !root (delay (react.client/createRoot
-                       (dom/find-or-create-element :maria-live))))
-
-(defonce fn-compiler (doto (reagent/create-compiler {:function-components true})
-                       (reagent/set-default-compiler!)))
+            [shadow.resource :as rc]
+            [yawn.view.dom :as dom]
+            [yawn.view :as v]))
 
 (defn link [title href]
   [:a (cond-> {:href href}
@@ -54,13 +46,17 @@
 ;; Three")
 
 (def example
-  [prose/editor {:source (rc/inline "curriculum/Learn Clojure with Shapes.cljs")}])
+  [prose/editor {:source "{1 2}\n(circle 10)" #_(rc/inline "curriculum/Learn Clojure with Shapes.cljs")}])
 
-(defn landing []
+(v/defview landing []
   [:div
    example
-   style/tailwind]
-  )
+   style/tailwind])
+
+(macroexpand '(v/defview landing []
+                [:div
+                 example
+                 style/tailwind]))
 
-(defn render []
-  (roots/init! @!root #(reagent/as-element [landing])))
+(defn init []
+  (dom/mount :maria-live #(v/x [landing])))

editor2/yarn.lock

@@ -3926,9 +3926,9 @@ ora@^5.4.1:
     wcwidth "^1.0.1"
 
 orderedmap@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.0.0.tgz#12ff5ef6ea9d12d6430b80c701b35475e1c9ff34"
-  integrity sha512-buf4PoAMlh45b8a8gsGy/X6w279TSqkyAS0C0wdTSJwFSU+ljQFJON5I8NfjLHoCXwpSROIo2wr0g33T+kQshQ==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.0.tgz#819457082fa3a06abd316d83a281a1ca467437cd"
+  integrity sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA==
 
 os-browserify@^0.3.0:
   version "0.3.0"
@@ -4186,9 +4186,9 @@ promise-retry@^2.0.1:
     retry "^0.12.0"
 
 prosemirror-commands@^1.0.0, prosemirror-commands@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.3.0.tgz#361b2e2b2a347ce7453386459f97c3f549a1113b"
-  integrity sha512-BwBbZ5OAScPcm0x7H8SPbqjuEJnCU2RJT9LDyOiiIl/3NbL1nJZI4SFNHwU2e/tRr2Xe7JsptpzseqvZvToLBQ==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.3.1.tgz#926c88801eebaa50363d4658850b41406d375a31"
+  integrity sha512-XTporPgoECkOQACVw0JTe3RZGi+fls3/byqt+tXwGTkD7qLuB4KdVrJamDMJf4kfKga3uB8hZ+kUUyZ5oWpnfg==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
@@ -4279,9 +4279,9 @@ prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1:
     orderedmap "^2.0.0"
 
 prosemirror-schema-list@^1.0.0, prosemirror-schema-list@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.2.1.tgz#3de9fb2482ace2a83f90b2c128873b343b0d778a"
-  integrity sha512-rYT4azRBZboxl54a4dRSiW0wXBEIZcMCCM9z9x0TD1jqJMm89GR16UgPNYb5+pKZ8qyti5enYN1Hhztq3KvqrQ==
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.2.2.tgz#bafda37b72367d39accdcaf6ddf8fb654a16e8e5"
+  integrity sha512-rd0pqSDp86p0MUMKG903g3I9VmElFkQpkZ2iOd3EOVg1vo5Cst51rAsoE+5IPy0LPXq64eGcCYlW1+JPNxOj2w==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
@@ -4303,9 +4303,9 @@ prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transfor
     prosemirror-model "^1.0.0"
 
 prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.2:
-  version "1.27.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.27.2.tgz#7f1e9b73698ba2622c515e2a617fd49232d214c4"
-  integrity sha512-RE2GLUaYXUyrpUl58vHoznZ3wKAj7z8f1ZZolivljwwOe1yiSzsEsuJPZmm3mpBXRgHGk7LWh5v+uhdDXAbjkA==
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.28.2.tgz#e997ef9dc623d01afd170e328fc924e6f4382003"
+  integrity sha512-uK28mJbu0GI8Oz7Aclt6BKL4g+C59EBShBXDB0Y9Y71H25p4bQgmLQLfDWjsT1J9XOw0bR8QQajZmdK8RvXI9g==
   dependencies:
     prosemirror-model "^1.16.0"
     prosemirror-state "^1.0.0"
@@ -4522,6 +4522,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-refresh@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
+  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"