diff --git a/.eslintignore b/.eslintignore index c42749513..1c96db0f4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,3 +7,4 @@ /.clj-kondo /site /test-data +/repl-output-ui diff --git a/.gitignore b/.gitignore index 6f835751f..2a5f80680 100644 --- 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 index 0c9ccac56..a2d094dc5 100644 --- a/.prettierignore +++ b/.prettierignore @@ -9,3 +9,4 @@ **/.shadow-cljs/ **/out/ clojure.tmLanguage.json +/repl-output-ui diff --git a/deps-clj-version b/deps-clj-version index 58f1900bb..dabab0a6b 100644 --- a/deps-clj-version +++ b/deps-clj-version @@ -1 +1 @@ -v1.11.2.1446 \ No newline at end of file +v1.11.3.1463 \ No newline at end of file diff --git a/deps.clj.jar b/deps.clj.jar index a86fbd28b..94e9f9f79 100644 Binary files a/deps.clj.jar and b/deps.clj.jar differ diff --git a/deps.edn b/deps.edn index 2e8928ff9..84a968955 100644 --- a/deps.edn +++ b/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"]} \ No newline at end of file + "src/cljs-lib/test"]} diff --git a/package-lock.json b/package-lock.json index 51334bc43..7e8728e1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,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", @@ -6776,8 +6777,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "4.1.0", @@ -7073,6 +7073,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -8845,6 +8856,30 @@ "node": ">=0.10.0" } }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -9082,6 +9117,14 @@ "node": ">=10" } }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -16169,8 +16212,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "4.1.0", @@ -16405,6 +16447,14 @@ "is-unicode-supported": "^0.1.0" } }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, "lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -17817,6 +17867,24 @@ } } }, + "react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0" + } + }, + "react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "requires": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -17993,6 +18061,14 @@ "xmlchars": "^2.2.0" } }, + "scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "requires": { + "loose-envify": "^1.1.0" + } + }, "semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", diff --git a/package.json b/package.json index d0fb9aeb2..6d443dcbc 100644 --- a/package.json +++ b/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", diff --git a/shadow-cljs.edn b/shadow-cljs.edn index e977707a9..63a5df038 100644 --- 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 new file mode 100644 index 000000000..64079ab06 --- /dev/null +++ b/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 " + + + + + + + + + + + REPL Output + + + + + + + + + +
+ + + +")) + +(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 new file mode 100644 index 000000000..84e903a18 --- /dev/null +++ b/src/cljs-lib/src/calva/repl/webview/ui.cljs @@ -0,0 +1,108 @@ +(ns calva.repl.webview.ui + (:require + + [replicant.dom :as replicant])) + +(def output-dom-element (js/document.getElementById "output")) + +(defmulti run-command + "Runs a given command with the given args." + (fn [_replicant-data command & _args] + command)) + +(defmethod run-command :repl-output/highlight-code + [_replicant-data _command _args] + (.. js/window -hljs (highlightAll))) + +(defn dispatch + [replicant-data hook-data] + (doseq [[command-name & args] hook-data] + (apply run-command replicant-data command-name args))) + +(replicant/set-dispatch! dispatch) + +(defn repl-output-element + [element-data] + (merge element-data + {:output-element/id (random-uuid)})) + +(defonce state + (atom {:repl-output/elements + [(repl-output-element {:output-element/type :output-element.type/eval-result + :output-element/content "{:a 1}"}) + (repl-output-element {:output-element/type :output-element.type/stdout + :output-element/content "Hello world"})]})) + +(defn clojure-code-hiccup + "Accepts a string of Clojure code and returns hiccup for rendering it in the output view." + [clojure-code] + [:pre [:code {:class "language-clojure"} clojure-code]]) + +(defmulti repl-output-element-hiccup + "Returns hiccup for rendering a given output element." + :output-element/type) + +(defmethod repl-output-element-hiccup :output-element.type/eval-result + [element] + (clojure-code-hiccup (:output-element/content element))) + +(defmethod repl-output-element-hiccup :output-element.type/stdout + [element] + [:p (:output-element/content element)]) + +(defn repl-output-hiccup + [state] + (into [:div {:replicant/on-render [[:repl-output/highlight-code]]}] + (map repl-output-element-hiccup (:repl-output/elements state)))) + +(defn render [state] + (replicant/render output-dom-element (repl-output-hiccup state))) + +(defn render-repl-output + "The watch function for the output elements that renders the output elements." + [_key _atom _old-state new-state] + (render new-state)) + +(defn scroll-to-bottom + "Scrolls to the bottom of the output view if a new output element was added." + [_key _atom old-state new-state] + (when (> (count (:repl-output/elements new-state)) + (count (:repl-output/elements old-state))) + (.. output-dom-element (scrollTo 0 (.. output-dom-element -scrollHeight))))) + +;; TODO: Use this map to add watches to the state atom +(def state-watchers + {:render-repl-output render-repl-output + :scroll-to-bottom scroll-to-bottom}) + +(add-watch state :render-repl-output render-repl-output) + +(defn add-repl-output-element + [element] + (swap! state update :repl-output/elements conj element)) + +(defn add-eval-result + [content] + (add-repl-output-element (repl-output-element {:output-element/type :output-element.type/eval-result + :output-element/content content}))) + +(defn add-stdout + [content] + (add-repl-output-element (repl-output-element {:output-element/type :output-element.type/stdout + :output-element/content 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)))))) + (render @state)) diff --git a/src/cljs-lib/src/calva/state.cljs b/src/cljs-lib/src/calva/state.cljs index cee0a2caf..fcc4b8e2e 100644 --- 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")) \ No newline at end of file + (remove-state-value! "hello")) diff --git a/src/cljs-lib/src/calva/util.cljs b/src/cljs-lib/src/calva/util.cljs new file mode 100644 index 000000000..483888410 --- /dev/null +++ b/src/cljs-lib/src/calva/util.cljs @@ -0,0 +1,34 @@ +(ns calva.util + (:require [calva.state :as state])) + +(defonce vscode (atom nil)) +(defonce context (atom nil)) + +(def project-root-uri-key "connect.projectDirNew") + +(defn get-first-workspace-folder-uri [] + (-> (.. ^js @vscode -workspace -workspaceFolders) + first ;; Handle nil here? + (.. -uri))) + +(defn get-project-root-uri + ([] + (get-project-root-uri true)) + ([use-cache] + (if use-cache + (if-let [project-directory-uri (state/get-state-value project-root-uri-key)] + project-directory-uri + (get-first-workspace-folder-uri)) + (get-first-workspace-folder-uri)))) + +(defn initialize-cljs + "This is meant to be called upon extension activation, and will store the vscode api reference and the context in atoms. + + This allows the cljs code to access the vscode API, without having to require it, which can cause testing issues. + + We cannot run unit tests on code that imports the vscode API, because it's only available at runtime. + All cljs code is bundled into a single file and required by the TypeScript code, which means we cannot + write unit tests for any TypeScript code that imports the cljs code, if any of the cljs code requires the VS Code API." + [^js vsc ^js ctx] + (reset! vscode vsc) + (reset! context ctx)) diff --git a/src/extension.ts b/src/extension.ts index 31bd4af25..56e524f13 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -30,7 +30,11 @@ import * as replHistory from './repl-window/repl-history'; import * as config from './config'; import * as snippets from './custom-snippets'; import * as whenContexts from './when-contexts'; -import { setStateValue } from '../out/cljs-lib/cljs-lib'; +import { + setStateValue, + initializeCljs, + showReplOutputWebviewPanel, +} from '../out/cljs-lib/cljs-lib'; import * as edit from './edit'; import * as nreplLogging from './nrepl/logging'; import * as converters from './converters'; @@ -77,6 +81,12 @@ function initializeState() { async function activate(context: vscode.ExtensionContext) { console.info('Calva activate START'); + // Store a reference to the vscode API in the cljs so it can call the API using that reference, + // because requiring the vscode API poses issues with being able to test the cljs lib. + // We cannot run unit tests on code that imports the vscode API, because it's only available at runtime. + initializeCljs(vscode, context); + showReplOutputWebviewPanel(); + const testController = vscode.tests.createTestController('calvaTestController', 'Calva'); const clientProvider = lsp.createClientProvider({ context,