Clojurians Log v2

Hi 👋, I'm new to Clojurescript and I've written a neat little reagent app that makes a call to an API, stores the result in an ratom and renders the information accordingly. super-cool stuff. I'm loving it. I've become accustomed to storing things like the BASE_URL to any given API within process.env.VARIABLES how do I access these from cljs ? or is there a better way to do this ? is it build-tool specific ?

Has anyone worked with https://github.com/recharts/recharts in Clojurescript/Reagent? Looking for a way to draw custom graphs. I looked at react-vis (it works) but it isn't maintained anymore. Can't find any examples with recharts.

take a look at https://github.com/metasoarous/oz

very nice looking charts

(and I’ll look at recharts)

I also am curious for an answer to your question (if anyone has looked at recharts in cljs) and and/or if there are other D3 type integrations for cljs.

I looked around and it seemed like there were a couple options that weren’t too current (but maybe they just still work).

recharts looks really nice.

if you try Oz and get the example project running, let me know the steps to get it running…

running into errors starting the project (due to my lack of knowledge, I’m sure)

I'm trying to learn re-frame and having a bit of issue with the basics. I have a little hello, world style app that lets me increment / decrement some numbers. Then when I click Start I want it to show the selected number and make the selector part dissappear: I have this for my selector bit:

(defn countdown-initiator []
  (let [time-entered (reagent.core/atom 0)
        visible @(rf/subscribe [:initiator-visible])]
    (fn []
      [:div.initiator {:style {:visibility (if visible :visible :hidden)}} ;; <<< I don't understand why this isn't triggering it to be invisible.
       [:div.timer @time-entered]
       [:div
        [:button.btn.up
         {:on-click #(swap! time-entered inc)}
         [:i.fas.fa-chevron-up]]
        [:button.btn.down
         {:on-click #(if (> @time-entered 0)
                       (swap! time-entered dec))}
         [:i.fas.fa-chevron-down]]]
       [:div
        [:button.btn.btn-danger {:on-click #(rf/dispatch [:start @time-entered]) ;; <<< On Clicking start, fire the :start event (I've put this below)
                                 :style    {:margin-top 10}} "Start"]]])))

(rf/reg-sub
 :initiator-visible
 (fn [db _]
   (db :initiator-visible)))

(rf/reg-event-db
  :start
  (fn [db [_ time]]
    (-> db 
        (assoc :time-remaining time)
        (assoc :countdown-visible true)
        (assoc :initiator-visible false)))) ;; << Set initiator-visible to false.

Have a gist of the full page https://gist.github.com/stuartstein777/a1e9e40146489392cca4af97b7bfb23d

OK, have it working. Rather than doing

(let [visible @(rf/subscribe [:initiator-visible])]
    ,,,
    {style {:visibility (if visible ,,,)}})

(let [visible (rf/subscribe [:initiator-visible])]
    ,,,
    {style {:visibility (if @visible ,,,)}})

I guess the de-ref has to happen in the render to make re-frame realise that render function needs re-run ???

Yes, that’s it exactly.

You can also put the @(rf/subscribe [:initiator-visible]) inside your rendering function and skip the let completely.

Ah ok, I thought if had a re-agent form that had state I should use this let and fn to make it a form-2

btw, re-frame-10x is wonderful for debugging as a beginner in this framework!

Originally that was the idea, but re-frame now has a caching scheme for subscriptions that makes it work correctly if you throw the @(subscribe ,,,) directly in a form-1

Simplifies things a bit

cool, thank you! I didn't know that.

And yeah, 10x is great 😄

How are people writing big cljs apps testing them? Any open source examples out there? I’m curious what people have found works well. Some things I want/need for my cljs test suite: • easy to run (either a keyboard shortcut to run them in a repl, like I do for clj, or a watcher I can spin up that will auto-run any tests that change) • runner for CI (could be the same way the tests run in development but doesn’t have to be, but either way need a way to run a single command and get an exit code indicating test suite pass/fail) I guess that’s really all. I’ve cobbled together some things from random blog posts and docs, but so far everything’s still very janky. I’m trying to fix this and find a way to develop a large cljs project that’s not painful to test, so curious about others’ experiences.

@kiraemclean I just use the built-in reactive test runner in shadow-cljs and always have a tab open with my tests. When the favicon turns the wrong colour I go and check which test is failing.

that sounds pretty ideal.. what do you mean by “built-in” to shadow-cljs? the browser tests as described here? https://shadow-cljs.github.io/docs/UsersGuide.html#target-browser-test

and do you run the tests in ci?

Our clojurescript tests are all integration tests; we don’t have any unit cljs tests.

do you mean using etoain against a server running your whole app?

that's exactly the guide that I followed

then npx shadow-cljs watch test to start the test in another tab.

Hi everyone, what's the CLJS equivalent for the following:

let alpacaUrl = new URL('<https://app.alpaca.markets/oauth/authorize>');
alpacaUrl.searchParams.set('response_type', 'code');
alpacaUrl.searchParams.set('state', state);

(let [url (js/URL. "<https://app.alpaca.markets/oauth/authorize>")]
  (doseq [[k v] [["response_type" "code"]
                 ["state" "state"]]]
    (.. url -searchParams (set k v)))
  url)
#object[URL <https://app.alpaca.markets/oauth/authorize?response_type=code&amp;state=state>]

And if you need to set only two parameters, then use doto instead of doseq.

yeah imo this is slightly more idiomatic:

(let [alpaca (doto (js/URL. "<https://app.alpaca.markets/oauth/authorize>")
                (.. url -searchParams (set "response_type" "code")
                (.. url -searchParams (set "state" "state"))]
  ,,,)

(doto (js/URL. "<https://app.alpaca.markets/oauth/authorize>")
              (.. -searchParams (set "response_type" "code"))
              (.. -searchParams (set "state" "state")))

is there something special I have to watch out for when using macros in cljc? I created a macro and used it in the same file, however shadow-cljs tells me

31 | (def-styled-component  page [contents]
--------^-----------------------------------------------------------------------
 Can't take value of macro azzurite.web.content.homepage/def-styled-component
--------------------------------------------------------------------------------

looks to me like I'm not "taking the value" but actually using the macro

@azzurite is this a CLJC file?

whoops skimmed your message sorry

in your namespace, you'll want to require-macros the macro namespace in a reader conditional

(ns azzurite.web.content.homepage
  ,,,
  #?(:cljs (:require-macros [azzurite.web.content.homepage])))

,,,

I think that if you :refer [def-styled-component] you can use them without namespace qualifying them too

We have an acceptance version of our app up on the web and we use selenium tests. Our clojurescript is all webpage/js code, so we have the tests click around there.