Fork me on GitHub

Will need to improve docs on how to use but the code is live! 🥳


You will need the latest version of portal 0.16.0 to use the extension


Then do (p/open {:launcher :vs-code})


You should probably upload it to Open-VSX as well, or it won’t work in Gitpod and other open source VS Code versions:

👍 1

Sweet. So I see the UI if I click the image in the readme - is this where the UI is meant to be used from, or is it a demo/playground area? What does the VS Code extension offer, versus using the library on its own? Thanks for creating this tool! The UI is slick!


If you click the image, it takes you into the standalone version. The vs-code extension allows vs-code to host the UI in a webview which is nice because you can organize the portal window like all your other tabs. Also, I can leverage the vs-code theme vars to make it feel more integrated.

👍 2

Very cool. Great work!

❤️ 1

I've updated my to include Portal start & Portal clear commands via VS Code. With Portal 0.16.0 on your classpath (and using VS Code), once you have started a REPL and connected to it, ctrl-; shift+p will start a Portal view panel in VS Code and everything tap>'d will automatically appear in it. I've also updated my files so there is an (install-portal-extras) function in the dev namespace -- which the above Clover configuration expects -- that adds four more commands to the Portal context menu.

💯 2
awesome 1
aw_yeah 1

My next biggest priority is docs, will make sure to link to these 👌


I'll try to find time to do another short screencast (much as I hate doing them) soon that shows my new workflow with Portal embedded in VS Code. It really is very slick -- thank you!

❤️ 3

If you get the time, that would be amazing. I really enjoyed the previous ones you've done!

Luke Johnson15:10:18

I’d love to see this too! Make sure it’s posted in this channel, please!


Wow, this is exciting! I’ll try to figure out a nice workflow with Calva.


Let me know how it's goes. I think @UNUGB8G91 might have some tips and tricks.


I’m having pretty good success using a Clojure REPL, but in a shadow-cljs I don’t know how to add a tap from the ClojureScript REPL. Should I be able to do that?

Luke Johnson15:10:39

I could be wrong, but I think the extension only works on the JVM currently. But it would be awesome to get JS/web taps in the extension too.


Also in a vanilla ClojureScript project I get this when requiring portal:

; Unexpected error (ExceptionInfo) compiling at (REPL:1).
; No such namespace: http, could not locate http.cljs, http.cljc, or JavaScript source providing "http" in file file:/Users/pez/.m2/repository/djblue/portal/0.16.0/portal-0.16.0.jar!/portal/runtime/node/launcher.cljs
(Might be like you say @UNUGB8G91, that it is not supposed to work, but the REDME of the extension has examples for how to include the portal dependency for both web and node ClojureScript…)


It seems the extension does not handle the case when VS Code does not have a folder opened.

Activating extension 'djblue.portal' failed: Cannot read property '0' of undefined.


The portal.api namespace will only work in node, if you have a web environment you need portal.web which isn't supported in the extension


Yeah, it needs a folder to stash off info for the repl process. In the future I'm hoping to leverage an existing repl connection calva/clover when a repl API becomes available to other extensions.


Is there an example how to use portal (and VSCode extension) with Calva in a shadow-cljs project? I was able to start a browser portal popup using portal.web namespace (as mentioned but I would like have it inside VSCode rather than as a popup in browser.


Afaiu there is no support (yet?) for portal.web in the extension.


This isn't currently supported. The web version does rpc via parent/child window messages. This was the best way I could find to make portal.web work without coupling to any particular cljs repl implementation.


I am experimenting with the concept of remote runtimes, in which the jvm/node backends could host the ui and proxy messages to the web js runtime.


Having that feature would enable the ui to be available in vs-code


Got it! It becomes messy with popup windows on browser. It would be great to start portal once within the IDE, and then keep working with it without the need for the browser. A little bit background: I was thinking to switch to portal and use it instead of re-frame-10x for tracing re-frame events. Of course on top of that, having a portal will mean, we can tap> instead of printing to the browser console.


Meanwhile you can keep tapping and use the shadow-cljs inspector.


I wasn’t aware of shadow-cljs inspector. Still in browser but could be useful. Thanks for pointing out!


I sort of guessed that you had missed it from what you wrote. 😃 Anyway, it is pretty awesome. I just wish I had it in vscode. That can probably be achieved, but I feel like Portal is closer to that.


Yeah, it’s strange that inspect is not mentioned in the shadow-cljs docs. Also, says shadow.remote.runtime.cljs.browser needs to be loaded for inspect to work but I am not loading it and it is still working. Does Calva load it or maybe the post I am looking is outdated?


Calva does not load it to my knowledge. Probably fixed. shadow-cljs is a batteries included thing, so it makes sense.


I’ve been planning to add something about the Dev tools UI to the Shadow User Guide a while, but never found the right time and inspiration.


Hmm, it doesn’t mention as inspect but as UI in the I looks like it is included when the regular shadow-cljs nREPL is started.