portal 2022-08-20 | Slack Archive

Lidor Cohen20:08:42

Hello, this is probably already been answered but I could make that work so I'm resorting to asking (probably again 😅) I was successful on getting portal to work with my shadow-cljs project with these configurations:

;; shadow-cljs configuration
{:source-paths ["src"]

 :dependencies [[djblue/portal "0.29.1"]
                [com.github.jpmonettas/flow-storm-inst "2.2.114"]
                [meander/epsilon "0.0.650"]
                [camel-snake-kebab "0.4.3"]
                [kezban "0.1.94"]
                [medley "1.4.0"]]

 :builds {:export-lenses {:target    :node-script
                          :main      cljs.export-lenses/main
                          :output-to "out/export-lenses.js"}}}

And then:

(portal/open)
(add-tap #'portal/submit)

But I couldn't get portal to open in vs-code:

(portal/open {:launcher :vs-code})
;; this just opens portal as chrome window
;; I read in the docs that it should be possible through a node-repl, so I'm guessing :node-script target on shadow-cljs should be ok

And I wasn't able to get the nREPL wrapper to work:

;; shadow-cljs configuration
{:source-paths ["src"]

 :dependencies [[djblue/portal "0.29.1"]
                [com.github.jpmonettas/flow-storm-inst "2.2.114"]
                [meander/epsilon "0.0.650"]
                [camel-snake-kebab "0.4.3"]
                [kezban "0.1.94"]
                [medley "1.4.0"]]

 :builds {:export-lenses {:target    :node-script
                          :main      cljs.export-lenses/main
                          :output-to "out/export-lenses.js"}}
 :nrepl {:middleware [portal.nrepl/wrap-portal]}} ;; this didn't make all evaluated expressions be sent to portal

I really enjoy using portal and it was immediately useful to me so what I have now is really rich people's problems, but I'm not sure what I'm doing wrong and if it's just a quick fix to make that work I'd be even happier 😄

djblue21:08:38

I would go through https://cljdoc.org/d/djblue/portal/0.29.1/doc/guides/shadow-cljs if you haven't already

seancorfield22:08:05

A quick sanity check @U8RHR1V60: You have installed Portal as a VS Code extension (as well as adding the dependency)?

Lidor Cohen22:08:39

Thanks for the quick replies! @U1G869VNV I read the page about shadow-cljs but I was under the impression that: 1. It was for the preload setup. 2. It was aimed at solving browser target issues, the remote option (edn strings) seemed at a disadvantage compared to the conventional (cljs values) approach But it is most certainly possible I misunderstood, I only have few hours of experience with portal. @U04V70XH6 sure did 😊, the dependency is visible in my shadow-cljs.edn and the extension is installed on my vs-code editor. Maybe I need to restart the editor? It didn't require it but I believe I haven't so it's a possible explanation.

djblue23:08:42

Ohh, I think the issue is the portal.web doesn't work with any of the extensions. You have to use a remote portal (jvm/node) if you want extension support.

Lidor Cohen09:08:03

I didn't share this snippet, but I'm not using portal.web:

(ns cljs.lenses.hawkr
  (:require [cljs.utils :refer [create-gradients read-edn]]
            [cljs.utils :refer-macros [smart-map]]
            clojure.data
            [portal.api :as portal]))

portal.api should work with the extension right?

👍 1

Lidor Cohen19:08:00

Does it look like I did everything right? I should get my portal in a vs pane with that setup? Or did anyone noticed anything wrong with my setup?

djblue19:08:49

Ohh, I didn't realize you were using cljs in node. I think I need to port the extension interaction code to node 💯

djblue20:08:54

Should be an easy port 🤞

djblue21:08:42

@U8RHR1V60 https://github.com/djblue/portal/commit/3119a24deba91c69dedf25a7048581d6c75ab3f6 should enable extensions for node in the next release :thumbsup:

Lidor Cohen05:08:02

Wow! Thank you! I started investigating the code myself to try and understand what influences the vs-code extension. Next time I'll write the PR 😉

plexus20:08:53

How do people handle styling when rendering hiccup components through portal? I imagine you can add a style tag to the hiccup, or resort to online style attributes, just wondering to what extent folks have experimented with these approaches and if there are any takeaways.

Lidor Cohen20:08:08

I was wondering the same thing :thinking_face:

djblue21:08:18

Currently, I inline styles into hiccup, which would probably make customizing styles harder. What mechanism would you prefer for customizing hiccup?

plexus01:08:45

Good question, I think portal could be great for prototyping components, but those are typically styled separately, so you'd have to get the styling into the page somehow, which may than also interfere with portal's own styling. I think I may just have to play with it a bit to get a feeling for how well it works or what limitations you run into.

2022-08-20

Channels