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/js
 
 # This and that
 .nrepl-port

.prettierignore

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

.vscodeignore

@@ -9,6 +9,7 @@
 !clojure.tmLanguage.json
 !assets/**
 !out/**
+!repl-output-ui/**
 !package.json
 !README.md
 !CHANGELOG.md

deps-clj-version

@@ -1 +1 @@
-v1.12.0.1517
+v1.12.0.1530

deps.edn

@@ -8,6 +8,11 @@
         org.clojars.liverm0r/dartclojure {:mvn/version "0.2.23-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"}
+        tortue/spy {:mvn/version "2.15.0"}
         #_#_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

@@ -178,7 +178,8 @@
                 "enum": [
                   "repl-window",
                   "output-channel",
-                  "terminal"
+                  "terminal",
+                  "webview"
                 ],
                 "default": "repl-window",
                 "markdownDescription": "Destination for evaluation results. (Clojure data returned from an evaluation)."
@@ -188,7 +189,8 @@
                 "enum": [
                   "repl-window",
                   "output-channel",
-                  "terminal"
+                  "terminal",
+                  "webview"
                 ],
                 "default": "repl-window",
                 "markdownDescription": "Destination for evaluation output (stdout/stderr from an evaluation)."
@@ -198,7 +200,8 @@
                 "enum": [
                   "repl-window",
                   "output-channel",
-                  "terminal"
+                  "terminal",
+                  "webview"
                 ],
                 "default": "repl-window",
                 "markdownDescription": "Destination for other output (Calva messages, out-of-band stdout/stderr, etcetera)."
@@ -1356,6 +1359,11 @@
         "category": "Calva",
         "enablement": "editorLangId == clojure"
       },
+      {
+        "command": "calva.clearReplOutputWebview",
+        "title": "Clear REPL Output Webview",
+        "category": "Calva"
+      },
       {
         "command": "calva.interruptAllEvaluations",
         "title": "Interrupt Running Evaluations",
@@ -1428,7 +1436,7 @@
       },
       {
         "command": "calva.printLastStacktrace",
-        "title": "Print Last Stacktrace to REPL Window",
+        "title": "Print last stacktrace to result output destination",
         "enablement": "calva:connected",
         "category": "Calva"
       },
@@ -1955,6 +1963,11 @@
         "command": "calva.showResultOutputDestination",
         "title": "Show/Open the result output destination"
       },
+      {
+        "category": "Calva",
+        "command": "calva.showReplOutputWebview",
+        "title": "Show/Open the REPL output webview"
+      },
       {
         "category": "Calva",
         "command": "calva.showReplWindow",
@@ -3311,16 +3324,16 @@
   },
   "scripts": {
     "watch-docs": "mkdocs serve",
-    "clean": "rimraf ./out && rimraf ./tsconfig.tsbuildinfo && rimraf ./cljs-out",
+    "clean": "rimraf ./out ./tsconfig.tsbuildinfo ./cljs-out ./repl-output-ui/js",
     "update-grammar": "node ./src/calva-fmt/update-grammar.js ./src/calva-fmt/atom-language-clojure/grammars/clojure.cson clojure.tmLanguage.json",
     "precompile": "npm i && npm run clean && npm run update-grammar",
-    "compile-cljs": "npx shadow-cljs compile :calva-lib :test",
+    "compile-cljs": "npx shadow-cljs compile :calva-lib :test :repl-output-ui",
     "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-cljs": "npx shadow-cljs release :calva-lib :test :repl-output-ui",
     "release": "webpack --mode production",
     "prerelease": "npm run precompile && npm run release-cljs",
     "compile-test": "tsc -p ./",

repl-output-ui/css/main.css

@@ -0,0 +1,2 @@
+/* This file is linked in the repl output webview. It's not currently used, but I'm leaving it so if we want
+   to add styles in the future it's easy to do so. */

shadow-cljs.edn

@@ -22,10 +22,23 @@
                              :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
+                             :appendToReplOutputWebview calva.repl.webview.core/append
+                             :appendStackTraceToReplOutputWebview calva.repl.webview.core/append-stacktrace
+                             :clearReplOutputWebview calva.repl.webview.core/clear-webview}
                  :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,226 @@
+(ns calva.repl.webview.core
+  (:require
+   [calva.util :as util]
+   [clojure.string :as str]))
+
+(defonce repl-output-webview-panel (atom nil))
+
+(defn dispose-repl-output-webview-panel
+  [webview-panel-atom]
+  (reset! webview-panel-atom nil))
+
+(defn post-message-to-webview [^js webview-panel message]
+  (when webview-panel
+    (.. webview-panel
+        -webview
+        (postMessage (pr-str (merge
+                              {:id (str (random-uuid))} ;; Provide an id if one wasn't provided by the caller
+                              message))))))
+
+;; The connect-src and unsafe-eval are only needed in development mode for the shadow-cljs
+;; dev workflow to function properly
+(defn get-webview-html
+  [{:env/keys [is-debug]} {:keys [js-source css-href csp-source]}]
+  (str "
+<!DOCTYPE html>
+<html lang=\"en\">
+  <head>
+    <meta charset=\"UTF-8\" />
+
+    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
+
+    <meta http-equiv=\"Content-Security-Policy\"
+          content=\"default-src 'none';
+                    style-src https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css
+                              https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css
+                              https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/windows-high-contrast.min.css
+                              https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/windows-high-contrast-light.min.css
+                              " csp-source ";
+                    script-src https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js
+                               https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/clojure.min.js
+                               " (when is-debug " 'unsafe-eval' ") csp-source ";
+                    " (when is-debug "connect-src ws://localhost:9630/api/remote-relay;") "
+                    base-uri 'none';
+                    form-action 'none';\">
+
+    <title>REPL Output</title>
+
+    <link rel=\"stylesheet\" href=\"" css-href "\" />
+
+    <!-- Should these stylesheets and scripts be saved and referenced locally so that if users are offline the webview still functions as expected? -->
+    <link
+      rel=\"stylesheet\"
+      href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css\"
+      data-code-theme=\"dark\"
+      disabled
+    />
+    <link
+      rel=\"stylesheet\"
+      href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css\"
+      data-code-theme=\"light\"
+      disabled
+    />
+    <link
+      rel=\"stylesheet\"
+      href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/windows-high-contrast.min.css\"
+      data-code-theme=\"high-contrast\"
+      disabled
+    />
+    <link
+      rel=\"stylesheet\"
+      href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/windows-high-contrast-light.min.css\"
+      data-code-theme=\"high-contrast-light\"
+      disabled
+    />
+
+    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js\"></script>
+    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/clojure.min.js\"></script>
+
+  </head>
+  <body>
+    <div id=\"output\"></div>
+
+    <script src=\"" js-source "\"></script>
+  </body>
+</html>"))
+
+(defn get-js-source
+  [{:keys [vscode/vscode]
+    vscode-context :vscode/context}
+   {:keys [^js webview-panel]}]
+  (let [extension-uri (.. ^js vscode-context -extensionUri)
+        js-path (.. ^js vscode -Uri (joinPath extension-uri "repl-output-ui" "js" "main.js"))]
+    (.. ^js webview-panel -webview (asWebviewUri js-path))))
+
+(defn get-css-path
+  [{:keys [vscode/vscode]
+    vscode-context :vscode/context}]
+  (let [extension-uri (.. ^js vscode-context -extensionUri)]
+    (.. ^js vscode -Uri (joinPath extension-uri "repl-output-ui" "css" "main.css"))))
+
+(defn set-webview-html!
+  [context
+   {:keys [^js webview-panel]}]
+  (let [js-source (get-js-source context {:webview-panel webview-panel})
+        css-path (get-css-path context)
+        css-href (.. ^js webview-panel -webview (asWebviewUri css-path))
+        csp-source (.. ^js webview-panel -webview -cspSource)
+        webview-html (get-webview-html context {:js-source js-source :css-href css-href :csp-source csp-source})]
+    (set! (.. webview-panel -webview -html) webview-html)))
+
+(defn set-code-theme!
+  "Takes a context, a webview panel and a vscode.ColorThemeKind enum value and sets the code theme in the webview based
+   on the given color theme kind."
+  [{:keys [vscode/vscode]} {:keys [color-theme-kind webview-panel]}]
+  (let [color-theme-kind-enum (.. ^js vscode -ColorThemeKind)
+        code-theme (condp = color-theme-kind
+                     (.. color-theme-kind-enum -Dark)  "dark"
+                     (.. color-theme-kind-enum -Light) "light"
+                     (.. color-theme-kind-enum -HighContrast) "high-contrast"
+                     (.. color-theme-kind-enum -HighContrastLight) "high-contrast-light"
+                     nil)]
+    (if code-theme
+      (post-message-to-webview webview-panel {:command/name "set-code-theme"
+                                              :content code-theme})
+      (util/log-to-console
+       :error
+       "Cannot set code theme in output webview. There is no code theme set for the ColorThemeKind enum value of"
+       color-theme-kind))))
+
+(defn create-color-theme-change-listener
+  [{:keys [^js vscode/vscode] :as context}
+   {:keys [webview-panel]}]
+  (.. vscode -window
+      (onDidChangeActiveColorTheme
+       (fn [e]
+         (set-code-theme! context {:color-theme-kind (.. e -kind)
+                                   :webview-panel webview-panel})))))
+
+(defn add-subscriptions []
+  (let [context {:vscode/vscode @util/vscode}
+        subscriptions [(create-color-theme-change-listener context {:webview-panel @repl-output-webview-panel})]]
+    (run! (fn [subscription]
+            (.. ^js @util/vscode-context -subscriptions (push subscription)))
+          subscriptions)))
+
+(defn create-repl-output-webview-panel
+  [context]
+  (let [webview-panel (.. ^js @util/vscode -window
+                          (createWebviewPanel
+                           "calva:repl-output"
+                           "REPL Output"
+                           #js {:preserveFocus true
+                                :viewColumn (.. ^js @util/vscode -ViewColumn -Beside)}
+                           #js {:enableScripts true
+                                ;; If performance or memory consumption becomes a problem, we can use the setState
+                                ;; and getState to manually retain the context of the webview when it's hidden.
+                                ;; See https://code.visualstudio.com/api/extension-guides/webview#persistence
+                                :retainContextWhenHidden true
+                                :enableFindWidget true}))]
+    (.. ^js webview-panel (onDidDispose (fn [] (dispose-repl-output-webview-panel repl-output-webview-panel))))
+    (set-webview-html! context {:webview-panel webview-panel})
+    (reset! repl-output-webview-panel webview-panel)
+    (add-subscriptions)
+    webview-panel))
+
+;; TODO: Write spec/schema for context
+(defn ^:export show-repl-output-webview-panel []
+  (let [context {:env/is-debug (if (= js/process.env.IS_DEBUG "true") true false)
+                 :vscode/vscode @util/vscode
+                 :vscode/context @util/vscode-context}
+        ^js webview-panel (or @repl-output-webview-panel (create-repl-output-webview-panel context))
+        active-code-theme-kind (.. ^js @util/vscode -window -activeColorTheme -kind)]
+    (.. webview-panel (reveal nil true))
+    (set-code-theme! context {:color-theme-kind active-code-theme-kind
+                              :webview-panel webview-panel})))
+
+;; TODO: Add tests
+;; TODO: Refactor this to use a mapping of output category -> command name
+(defn ^:export append
+  [^js options message]
+  (let [output-category (.-outputCategory options)]
+    (case output-category
+      "otherOut" (post-message-to-webview @repl-output-webview-panel {:command/name "show-stdout"
+                                                                      :content message})
+      "evalOut" (post-message-to-webview @repl-output-webview-panel {:command/name "show-stdout"
+                                                                     :content message})
+      "evalResults" (post-message-to-webview @repl-output-webview-panel {:command/name "show-result"
+                                                                         :content message})
+      ;; TODO: Make this show differently?
+      "evalErr" (post-message-to-webview @repl-output-webview-panel {:command/name "show-stdout"
+                                                                     :content message})
+      "otherErr" (post-message-to-webview @repl-output-webview-panel {:command/name "show-stdout"
+                                                                      :content message})
+      "clojure" (post-message-to-webview @repl-output-webview-panel {:command/name "show-result"
+                                                                     :content message})
+      (util/log-to-console
+       :error
+       (str "Cannot append content to output webview. No outputCategory matches \"" output-category "\"")))))
+
+(def stacktrace-classes-to-ignore
+  #{"clojure.lang.RestFn"
+    "clojure.lang.AFn"})
+
+(defn stacktrace-entry->string
+  [{:keys [var name file line]}]
+  (let [name (or var name)]
+    (str name " (" file ":" line ")")))
+
+(defn ^:export append-stacktrace
+  [^js stacktrace]
+  (let [stacktrace (js->clj stacktrace :keywordize-keys true)
+        stacktrace-message (->> stacktrace
+                                (filter (fn [{:keys [flags class]}]
+                                          (and (not (some #{"dup"} flags))
+                                               (not (contains? stacktrace-classes-to-ignore class)))))
+                                (map stacktrace-entry->string)
+                                (str/join "\n"))]
+    (post-message-to-webview @repl-output-webview-panel {:command/name "show-stdout"
+                                                         :content stacktrace-message})))
+
+(defn ^:export clear-webview []
+  (post-message-to-webview @repl-output-webview-panel {:command/name "clear-webview"}))
+
+;; 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