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.

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?

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

let alpacaUrl = new URL('');
alpacaUrl.searchParams.set('response_type', 'code');
alpacaUrl.searchParams.set('state', state);

(let [url (js/URL. "")]
  (doseq [[k v] [["response_type" "code"]
                 ["state" "state"]]]
    (.. url -searchParams (set k v)))
  url)
#object[URL ]

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. "")
                (.. url -searchParams (set "response_type" "code")
                (.. url -searchParams (set "state" "state"))]
  ,,,)

(doto (js/URL. "")
              (.. -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