BetterThanTomorrow · bpringe · Aug 20, 2023 · Sep 3, 2023 · Sep 3, 2023 · Sep 3, 2023
diff --git a/.eslintignore b/.eslintignore
@@ -7,3 +7,4 @@
 /.clj-kondo
 /site
 /test-data
+/repl-output-ui
diff --git a/.gitignore b/.gitignore
@@ -50,6 +50,7 @@ jspm_packages
 lib/
 cljs-out/
 test-out/
+repl-output-ui/
 
 # This and that
 .nrepl-port

diff --git a/.prettierignore b/.prettierignore
@@ -9,3 +9,4 @@
 **/.shadow-cljs/
 **/out/
 clojure.tmLanguage.json
+/repl-output-ui
diff --git a/deps.edn b/deps.edn
@@ -4,6 +4,7 @@
         org.clojars.liverm0r/dartclojure {:mvn/version "0.2.22-SNAPSHOT"}
         vvvvalvalval/supdate {:mvn/version "0.2.3"}
         camel-snake-kebab/camel-snake-kebab {:mvn/version "0.4.3"}
+        reagent/reagent {:mvn/version "1.2.0"}
         #_#_org.clojars.liverm0r/dartclojure {:local/root "../DartClojure"}}
  :paths ["src/cljs-lib/src"
-         "src/cljs-lib/test"]}
+         "src/cljs-lib/test"]}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3212,7 +3212,7 @@
     "compile-ts": "npx tsc --project ./tsconfig.json",
     "compile": "npm run compile-cljs && npm run compile-ts",
     "watch-ts": "npx tsc --watch --project ./tsconfig.json",
-    "watch-cljs": "npx shadow-cljs -d cider/cider-nrepl:0.28.5 watch :calva-lib :test",
+    "watch-cljs": "npx shadow-cljs -d cider/cider-nrepl:0.28.5 watch :calva-lib :test :repl-output-ui",
     "watch-ts-with-strict-nulls": "npx tsc --watch --project ./tsconfig.json --strictNullChecks",
     "release-cljs": "npx shadow-cljs release :calva-lib :test",
     "release": "webpack --mode production",
@@ -3254,6 +3254,7 @@
     "open": "^6.3.0",
     "parinfer": "^3.12.0",
     "posthtml-parser": "^0.11.0",
+    "react-dom": "^18.2.0",
     "semver": "^7.3.7",
     "tree-kill": "^1.2.2",
     "uuidv4": "6.2.12",

diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -22,10 +22,20 @@
                              :js2cljs calva.js2cljs.converter/convert-bridge
                              :dart2clj calva.dartclojure/convert-bridge
                              :readConfigEdn calva.read-config/config-edn->js-bridge
-                             :html2hiccup calva.html2hiccup/html->hiccup-convert-bridge}
+                             :html2hiccup calva.html2hiccup/html->hiccup-convert-bridge
+                             :initializeCljs calva.util/initialize-cljs
+                             :showReplOutputWebviewPanel calva.repl.webview.core/show-repl-output-webview-panel}
                  :output-to "out/cljs-lib/cljs-lib.js"}
                 :test
                 {:target    :node-test
                  :output-to "out/cljs-lib/test/cljs-lib-tests.js"
                  :ns-regexp "-test$"
-                 :autorun   true}}}
+                 :autorun   true}
+                :repl-output-ui
+                {:target :browser
+                 ;; TODO: Do the asset-path and output-dir values make sense?
+                 :asset-path "js"
+                 :output-dir "repl-output-ui/js"
+                 :modules {:main {:init-fn calva.repl.webview.ui/main}}
+                 :devtools {:loader-mode :eval
+                            :devtools-url "http://localhost:9630"}}}}
diff --git a/src/cljs-lib/src/calva/repl/webview/core.cljs b/src/cljs-lib/src/calva/repl/webview/core.cljs
@@ -0,0 +1,97 @@
+(ns calva.repl.webview.core
+  (:require
+   [calva.util :as util]))
+
+(defonce repl-output-webview-panel (atom nil))
+
+(defn dispose-repl-output-webview-panel []
+  (println "Disposing repl-output-webview-panel")
+  (reset! repl-output-webview-panel nil))
+
+;; TODO: See if there's a way to not have to use ^js in so many places without shadow-cljs warnings
+(defn create-or-get-repl-output-webview-panel []
+  (or @repl-output-webview-panel
+      (let [webview-panel (.. ^js @util/vscode -window
+                              (createWebviewPanel "calva:repl-output"
+                                                  "REPL Output"
+                                                  (.. ^js @util/vscode -ViewColumn -Two)
+                                                  #js {:enableScripts true}))]
+        (.. ^js webview-panel (onDidDispose dispose-repl-output-webview-panel))
+        (reset! repl-output-webview-panel webview-panel))))
+
+(defn get-webview-html
+  [js-src]
+  (str "
+<!DOCTYPE html>
+<html lang=\"en\">
+  <head>
+    <meta charset=\"UTF-8\" />
+    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
+    <title>REPL Output</title>
+    <link
+      rel=\"stylesheet\"
+      href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"
+    />
+    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\"></script>
+    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/clojure.min.js\"></script>
+    <script>
+      hljs.highlightAll();
+    </script>
+  </head>
+  <body>
+    <!-- TODO: Disable inline scripts - see security section in webview docs -->
+    <div id=\"output\"></div>
+
+    <script src=\"" js-src "\"></script>
+  </body>
+</html>"))
+
+(defn post-message-to-webview [message]
+  (.. ^js @repl-output-webview-panel
+      -webview
+      (postMessage (clj->js (merge
+                             {:id (str (random-uuid))} ;; Provide an id if one wasn't provided by the caller
+                             message)))))
+
+(defn show-repl-output-webview-panel []
+  (let [^js repl-output-webview-panel (create-or-get-repl-output-webview-panel)
+        js-path (.. ^js @util/vscode
+                    -Uri
+                    (joinPath (.. ^js @util/context -extensionUri) "repl-output-ui" "js" "main.js"))
+        js-src (.. repl-output-webview-panel -webview (asWebviewUri js-path))
+        webview-html (get-webview-html js-src)]
+    (set! (.. ^js repl-output-webview-panel -webview -html) webview-html)
+    (let [interval-id (js/setInterval post-message-to-webview
+                                      1000
+                                      {:command-name "show-result"
+                                       :result "Hello world!!!"})]
+      (js/setTimeout #(js/clearInterval interval-id)
+                     11000))))
+
+;; TODO: See if can send repl output to webview when it's hidden and see it once unhidden
+;; "You cannot send messages to a hidden webview, even when retainContextWhenHidden is enabled."
+;; https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content
+
+(comment
+  (show-repl-output-webview-panel)
+
+  ;; TODO: Implement this interface for communicating with the webview
+  ;; Message
+  {;; This message contains a command
+   :command {;; Command name
+             :name "show-result"
+             ;; Command args
+             :args {:result "Hello world"}}
+   ;; Message id
+   :id "1234"}
+
+  (post-message-to-webview {:command-name "show-result"
+                            :result "send while hidden"})
+
+  (post-message-to-webview {:command "clear-output"})
+
+  @repl-output-webview-panel
+
+  ;; TODO: Don't worry about scrolling yet. We know we can do that. Explore other important unknowns first.
+
+  :rcf)
diff --git a/src/cljs-lib/src/calva/repl/webview/ui.cljs b/src/cljs-lib/src/calva/repl/webview/ui.cljs
@@ -0,0 +1,72 @@
+(ns calva.repl.webview.ui
+  (:require
+   [reagent.dom.client :as rdom.client]
+   [reagent.core :as r]))
+
+(defn output-element
+  [element-data]
+  (merge element-data
+         {:output-element/id (random-uuid)}))
+
+(defonce output-elements
+  (r/atom [(output-element {:output-element/type :output-element.type/eval-result
+                            :output-element/content "{:a 1}"})
+           (output-element {:output-element/type :output-element.type/stdout
+                            :output-element/content "Hello world"})]))
+
+(defn add-output-element
+  [element]
+  (swap! output-elements conj element))
+
+(defn add-eval-result
+  [content]
+  (add-output-element (output-element {:output-element/type :output-element.type/eval-result
+                                       :output-element/content content})))
+
+(defn add-stdout
+  [content]
+  (add-output-element (output-element {:output-element/type :output-element.type/stdout
+                                       :output-element/content content})))
+
+(defn repl-output []
+  (let [elements @output-elements]
+    [:div
+     (for [{:output-element/keys [content id]} elements]
+       [:p {:key id} content])]))
+
+(defn main []
+  (.. js/window
+      (addEventListener "message"
+                        (fn [^js message]
+                          (js/console.log "message" message)
+                          ;; TODO: Convert message data to CLJ before accessing its properties
+                          (let [id (.. message -data -id)
+                                command (aget message "data" "command-name")
+                                data (.. message -data -result)]
+                            (js/console.log "id" id)
+                            (js/console.log "command" command)
+                            (case command
+                              "show-result" (add-eval-result data)
+                              "show-stdout" (add-stdout data))))))
+  (rdom.client/render (rdom.client/create-root (js/document.getElementById "output")) [repl-output]))
+
+(comment
+  (set! *print-namespace-maps* false)
+
+  (binding [*print-namespace-maps* false]
+    @output-elements)
+
+  (println {:user/a 1, :user/b 2})
+
+  (reset! output-elements [])
+
+  (print)
+
+  @output-elements
+
+  ;; For some reason this is not causing the UI to update...
+  ;; Reason: It was because I was connected to the calva-lib (node) build and not the repl-output-ui (browser) build
+  (swap! output-elements conj {:output-element/type :output-element.type/eval-result
+                               :output-element/content "{:a 1}"})
+
+  :rcf)
diff --git a/src/cljs-lib/src/calva/state.cljs b/src/cljs-lib/src/calva/state.cljs
@@ -17,4 +17,4 @@
 (comment
   (set-state-value! "hello" "world")
   (get-state)
-  (remove-state-value! "hello"))
+  (remove-state-value! "hello"))