WIP: Add webview output experience

.eslintignore

@@ -7,3 +7,4 @@
 /.clj-kondo
 /site
 /test-data
+/repl-output-ui

.gitignore

@@ -50,6 +50,7 @@ jspm_packages
 lib/
 cljs-out/
 test-out/
+repl-output-ui/
 
 # This and that
 .nrepl-port

.prettierignore

@@ -9,3 +9,4 @@
 **/.shadow-cljs/
 **/out/
 clojure.tmLanguage.json
+/repl-output-ui

deps-clj-version

@@ -1 +1 @@
-v1.11.2.1446
+v1.11.3.1463

deps.edn

@@ -4,6 +4,10 @@
         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"}
+        no.cjohansen/replicant {:git/url "https://github.com/cjohansen/replicant.git"
+                                :git/sha "ef2fecbe301cafa8449b74a1e2cbe4fc3ddc18ac"}
+        org.clojars.abhinav/snitch {:mvn/version "0.1.14"}
         #_#_org.clojars.liverm0r/dartclojure {:local/root "../DartClojure"}}
+ :aliases {:dev {:extra-deps {org.clojars.abhinav/snitch {:mvn/version "0.1.14"}}}}
  :paths ["src/cljs-lib/src"
-         "src/cljs-lib/test"]}
+         "src/cljs-lib/test"]}

package.json

@@ -3311,7 +3311,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",

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"}}}}

src/cljs-lib/src/calva/repl/webview/core.cljs

@@ -0,0 +1,105 @@
+(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\" />
+
+    <!-- TODO: Uncomment this and lock it down as much as possible. Remember to disable things that default-src does not. See bottom of this section: https://web.dev/articles/csp#resource-options -->
+    <!-- <meta http-equiv=\"Content-Security-Policy\"
+        content=\"default-src 'none';
+                  style-src https://cdnjs.cloudflare.com;
+                  script-src https://cdnjs.cloudflare.com;\"> -->
+
+    <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>
+
+  </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)