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,107 @@
+(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 bottomg 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>
+    <pre><code class=\"language-clojure\">:hello-world</code></pre>
+
+    <!-- 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)