imported fixes

- fix cells error infinite loop - fix localStorage debouncing - improve dev build dx - improve menubar formatting - improve list formatting (tight)
mhuebert · Feb 9, 2024 · 988168c · 988168c
1 parent 8ca06d5
commit 988168c
Show file tree

Hide file tree

Showing 31 changed files with 998 additions and 878 deletions.
diff --git a/cells/src/cells/lib.cljs b/cells/src/cells/lib.cljs
@@ -112,4 +112,4 @@
                                     (cell/complete! self)
                                     (reset! self (f @self))) n)]
      (cell/on-dispose self #js{} #(js/clearTimeout clear-key))
-     initial-value)))
+     initial-value)))
diff --git a/editor2/.nvmrc b/editor2/.nvmrc
@@ -1 +1 @@
-16.14
+20.0
diff --git a/editor2/bb.edn b/editor2/bb.edn
@@ -1,12 +1,15 @@
 {:deps {}
  :tasks
- {dev (shell "yarn shadow-cljs -A:local watch editor")
+ {dev (shell "yarn shadow-cljs -A:build clj-run build/watch")
+  ;; use dev-local to test local versions of libs, as specified in deps.edn
+  dev-local (shell "yarn shadow-cljs -A:local:build clj-run build/watch")
+
   server (shell "yarn shadow-cljs -A:local server")
   copy-curriculum (do
                     (shell "mkdir -p public/curriculum")
                     (shell "rsync -av src/main/maria/curriculum/ public/curriculum"))
-  css (shell "npx tailwindcss -i src/maria.cloud.css -o public/maria.cloud.css")
+  css (shell "npx tailwindcss -i src/editor.css -o public/editor.css")
   release (do (run 'copy-curriculum)
-              (shell "yarn shadow-cljs release editor")
+              (shell "yarn shadow-cljs -A:build release editor")
               (run 'css))
   debug (shell "yarn shadow-cljs release editor --debug")}}
diff --git a/editor2/deps.edn b/editor2/deps.edn
@@ -1,12 +1,12 @@
 {:paths ["src/main"]
- :deps {thheller/shadow-cljs {:mvn/version "2.24.1"}
+ :deps {thheller/shadow-cljs {:mvn/version "2.27.1"}
         org.clojure/clojure {:mvn/version "1.12.0-alpha3"}
         applied-science/js-interop {#_#_:mvn/version "0.4.1"
                                     :git/url "https://github.com/applied-science/js-interop"
                                     :git/sha "e29e17b2a647006ac0e96307bbc893b01b99c3e9"}
         nextjournal/clojure-mode {:git/url "https://github.com/nextjournal/clojure-mode"
                                   :git/sha "8248736f7afb12fcd8e03439ff02703174dd0de6"}
-        org.babashka/sci {:mvn/version "0.8.40"}
+        org.babashka/sci {:mvn/version "0.8.41"}
         babashka/fs {:mvn/version "0.3.17"}
         babashka/process {:mvn/version "0.4.16"}
         io.github.babashka/sci.configs {:git/sha "bf8d209e4aeabb92cb1be04e3d8f789583d5f449"}
@@ -20,10 +20,11 @@
         maria/tools {:local/root "../tools"}
         maria/shapes {:local/root "../shapes"}
         maria/friendly {:local/root "../friendly"}
+        com.lambdaisland/glogi {:mvn/version "1.3.169"}
 
         io.github.applied-science/shapes {:git/sha "da44031cf79a649932cb502f17388db23f2b8ace"}
-        io.github.mhuebert/re-db {:git/sha "066439e228ae4a48383055970af74b2600b48050"}
-        io.github.mhuebert/yawn {:git/sha "4fee46087eb907b1e2cd62aea9f05549d08e11a8"}
+        io.github.mhuebert/re-db {:git/sha "ede6df195088a70217a07c5f6a04b36692ea8842"}
+        io.github.mhuebert/yawn {:git/sha "68285f6c132f26a2ff3cc2f7dffc3fe68c9856d9"}
 
         ;; emmy / clerk
         io.github.mhuebert/emmy #_org.mentat/emmy {:git/url "https://github.com/mhuebert/emmy"
@@ -44,4 +45,5 @@
                        #_#_applied-science/js-interop {:local/root "../../js-interop"}
                        #_#_nextjournal/clojure-mode {:local/root "../../clojure-mode"}
                        #_#_io.github.mhuebert/yawn {:local/root "../../yawn"}
-                       #_#_io.github.mhuebert/re-db {:local/root "../../re-db"}}}}}
+                       #_#_io.github.mhuebert/re-db {:local/root "../../re-db"}}}
+  :build {:extra-paths ["dev"]}}}
diff --git a/editor2/src/main/maria/cloud/build.clj → editor2/dev/build.clj b/editor2/src/main/maria/cloud/build.clj → editor2/dev/build.clj
@@ -1,13 +1,16 @@
-(ns maria.cloud.build
+(ns build
   (:require [babashka.fs :as fs]
             [babashka.process :as bp]
+            [cljs-static.assets :as assets]
             [cljs-static.page :as page]
             [cljs-static.shadow :as shadow]
-            [cljs-static.assets :as assets]
+            [clojure.java.browse :as browse]
+            [clojure.java.io :as io]
             [clojure.string :as str]
             [edamame.core :as eda]
+            [maria.editor.util :as u]
             [re-db.schema :as schema]
-            [maria.editor.util :as u]))
+            [shadow.cljs.devtools.api :as shadow.api]))
 
 (defn parse-meta [file]
   (let [src (slurp file)
@@ -49,7 +52,7 @@
 (defn index-html []
   (page/root "Maria"
              {:meta {:viewport "width=device-width, initial-scale=1"}
-              :styles [{:href (assets/path "/maria.cloud.css")}]
+              :styles [{:href (assets/path "/editor.css")}]
               :scripts/head [{:src "https://polyfill.io/v3/polyfill.min.js?version=3.111.0&features=URLSearchParams%2CURL"}]
               :props/html {:class "bg-neutral-100"}
               :body [:div#maria-live]
@@ -64,18 +67,35 @@
                                             :git/sha (current-sha)})}
                              {:src (shadow/module-path :editor :core)}]}))
 
+(def child-process
+  "Run a shell command which terminates with the current one, and streams output to stdout"
+  (partial bp/process
+           {:in :inherit
+            :out :inherit
+            :err :inherit
+            :shutdown bp/destroy-tree}))
+
 (defn tailwind-watch!
   {:shadow.build/stage :flush}
   [state]
-  (defonce _tailwind (bp/process
-                       {:in :inherit
-                        :out :inherit
-                        :err :inherit
-                        :shutdown bp/destroy-tree}
-                       "npx tailwindcss -w -i src/maria.cloud.css -o public/maria.cloud.css"))
+  (defonce _tailwind
+           (child-process "npx tailwindcss -w -i src/editor.css -o public/editor.css"))
   state)
 
 (defn copy-curriculum! {:shadow.build/stage :flush}
   [state]
   (bp/sh "bb" "copy-curriculum")
-  state)
+  state)
+
+(defn watch
+  {:shadow/requires-server true}
+  [& args]
+  (shadow.api/watch :editor))
+
+(defonce browse-url (memoize browse/browse-url))
+
+(defn browse!
+  {:shadow.build/stage :flush}
+  [build-state url]
+  (browse-url url)
+  build-state)
diff --git a/editor2/package.json b/editor2/package.json
@@ -23,10 +23,12 @@
     "@nextjournal/lezer-clojure": "^1.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.6",
     "@radix-ui/react-menubar": "^1.0.3",
     "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
@@ -42,6 +44,7 @@
     "jszip": "^3.10.1",
     "katex": "^0.16.2",
     "leva": "^0.9.35",
+    "lodash.debounce": "^4.0.8",
     "mafs": "^0.17.1",
     "markdown-it": "^12.3.2",
     "markdown-it-block-image": "^0.0.3",
@@ -70,15 +73,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
-    "shadow-cljs": "^2.24.1",
-    "tailwindcss": "^3.3.1",
+    "shadow-cljs": "^2.26.5",
+    "spark-md5": "^3.0.2",
+    "tailwindcss": "^3.4.1",
     "three": "^0.154.0",
     "threestrap": "0.5.1",
     "use-sync-external-store": "^1.2.0",
     "vh-sticky-table-header": "1.2.1",
     "w3c-keyname": "^2.2.6"
   },
   "devDependencies": {
-    "firebase-tools": "^11.8.0"
+    "firebase-tools": "^13.1.0"
   }
 }
diff --git a/editor2/shadow-cljs.edn b/editor2/shadow-cljs.edn
@@ -6,10 +6,11 @@
    :asset-path "/js"
    :build-hooks [(cljs-static.shadow/write-assets!
                    {:public-path "public"
-                    "/index.html" (maria.cloud.build/index-html)})]
-   :dev {:build-hooks [(maria.cloud.build/tailwind-watch!)
-                       (maria.cloud.build/copy-curriculum!)]}
-   :release {:build-hooks [(shadow.cljs.build-report/hook {:output-to "public/build-report.html"})]}
+                    "/index.html" (build/index-html)})]
+   :dev {:build-hooks [(build/tailwind-watch!)
+                       (build/copy-curriculum!)
+                       (build/browse! "http://localhost:8000")]}
+   :release {:build-hooks [#_(shadow.cljs.build-report/hook {:output-to "public/build-report.html"})]}
    :devtools {:http-root "public"
               :http-port 8000
               :preloads [yawn.view.refresh-preload]}

diff --git a/editor2/src/maria.cloud.css → editor2/src/editor.css b/editor2/src/maria.cloud.css → editor2/src/editor.css
@@ -16,25 +16,53 @@
     --code-bool: #987aa0;
     --code-brackets: #9f9f9f;
 }
+
 @layer base {
     .prose code::before, .prose code::after {
         content: none;
     }
+
     a {
         @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-700
     }
+    body.dragging-prose .value-viewer {
+        @apply select-none
+    }
 }
+
 @layer components {
+    .icon-zinc {
+        @apply text-zinc-500 hover:text-zinc-700 cursor-default
+    }
+
+    .menu-trigger {
+        @apply
+        px-1 my-2 bg-transparent rounded whitespace-nowrap
+        hover:bg-zinc-200
+        text-zinc-500 visited:text-zinc-500 hover:text-zinc-700
+        data-[highlighted]:bg-zinc-200
+        data-[delayed-open]:bg-zinc-200
+        data-[state*=open]:bg-zinc-200
+        cursor-default
+        flex items-center
+    }
 
+    .value-viewer {
+        @apply
+        w-full px-4 md:pl-0 md:w-1/2 font-mono text-sm md:ml-3 mt-3 md:mt-0 max-h-screen min-h-14 overflow-auto relative
+    }
 }
+
 @layer utilities {
 
     ::placeholder, .placeholder {
         @apply text-black/50
     }
+
     .gap-list {
         @apply gap-[6px]
     }
+
     .rotate-4s {
         animation: rotation 4s infinite linear;
     }
@@ -74,6 +102,10 @@
     @apply list-disc;
 }
 
+.ProseMirror li > p:first-child, .ProseMirror li > ul {
+    @apply mt-0;
+}
+
 
 .ProseMirror > *:not(.NodeView) {
     @apply md:w-1/2 leading-relaxed pl-4;
@@ -102,6 +134,7 @@ p code {
     font-size: 1.1rem;
     line-height: 1.5rem;
 }
+
 h1 {
     @apply text-4xl;
 }
@@ -244,7 +277,7 @@ button {
 
 .MenubarContent,
 .MenubarSubContent {
-    @apply shadow rounded bg-white z-20 p-[2px];
+    @apply shadow rounded bg-white z-[60] p-[2px];
     min-width: 220px;
     animation-duration: 400ms;
     animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

diff --git a/editor2/src/main/cells/async.cljc b/editor2/src/main/cells/async.cljc
@@ -1,20 +1,21 @@
 (ns cells.async
   (:require [re-db.reactive :as r]))
 
-(defn init [] {`status (r/atom nil)})
-
-(defn !status
-  "Async metadata is stored in a ratom containing `true` for loading-state,
-   or an instance of js/Error."
-  [x]
-  (get (meta x) `status))
-
-(defn error! [cell e] (reset! cell (cond-> e
-                                           (string? e)
-                                           (ex-info {:cell cell}))))
-(defn loading! [cell] (reset! (!status cell) {:loading true}))
+(defn init [] {`loading? (r/atom nil)})
+
+(defn !loading? [x]
+  (get (meta x) `loading?))
+
+(defn error! [cell e]
+  (reset! cell (cond-> e
+                 (string? e)
+                 (ex-info {}))))
+
+(defn loading! [cell]
+  (reset! (!loading? cell) true))
+
 (defn complete!
-  ([cell] (reset! (!status cell) nil))
+  ([cell] (reset! (!loading? cell) nil))
   ([cell value]
    (reset! cell value)
    (complete! cell)))

diff --git a/editor2/src/main/cells/core.cljc b/editor2/src/main/cells/core.cljc
@@ -50,7 +50,7 @@
 #?(:cljs
    (defn interval
      "Calls `f` on interval of n milliseconds, with previous value, starting with optional init value."
-     ([n f] (interval n f nil))
+     ([n f] (interval n f (f nil)))
      ([n f init]
       (hooks/use-interval n f init))))
 
@@ -60,7 +60,7 @@
      []
      (hooks/use-geo-location)))
 
-(def loading? (comp async/loading? deref async/!status))
+(def loading? (comp async/loading? deref async/!loading?))
 (def message (comp first r/deref-result))
 (def error? (comp some? message))
 

diff --git a/editor2/src/main/cells/hooks.cljc b/editor2/src/main/cells/hooks.cljc
@@ -79,10 +79,9 @@
                                                                        (parse))]
                                            (v! formatted-value)
                                            (a/complete! self))
-
                                          :else
                                          (if-let [error-message (xhrio-error-message XhrIo)]
-                                           (a/error! self (ex-info error-message {:cell self}))
+                                           (a/error! self (js/Error. error-message))
                                            (v! "No error message")))))]
              #(j/call XhrIo :abort)))
          [url])

diff --git a/editor2/src/main/maria/cloud/core.cljs b/editor2/src/main/maria/cloud/core.cljs
@@ -5,7 +5,7 @@
             [maria.clerkify]
             [maria.cloud.github :as gh]
             [maria.cloud.menubar :as menu]
-            [maria.cloud.persistence]
+            [maria.cloud.github]
             [maria.cloud.routes :as routes]
             [maria.cloud.sidebar :as sidebar]
             [maria.cloud.views]