If you run your CLJS on NodeJS, you can use some NodeJS library. If you run it in a browser, you simply can't.

I’m using browser unfortunately, so what are the alternatives for this?

• Use the variables available at compile time and embed the values in the resulting JS code • Use the variables available at run time on the server and serve them in some way to the frontend

> Use the variables available at run time on the server and serve them in some way to the frontend Can you elaborate pls?

You have two kinds of processes running when having a web app - server processes and client processes (browsers). Typically, then run in different environments, on different machines, with different environment variables. So the server can grab those variables from its own environment and serve them to the requesting client. E.g. embed the values in the HTML with a <meta> tag or put them in a response to some AJAX request or something else.

But you cannot have a browser have a value of an environment value that comes from the same machine where the browser is running.

ok I see what you mean here. I’m trying to use env variable to point it to my back-end server so I think I’ll need to go with the first option. What would be the best format to do this? config.edn? And how could I inject it into shadow build process?

Not sure I follow. If a client contacts your server, doesn't it already know where your backend server is?

I’m trying to use env to specify API_URL for my front-end. I often use env variables for this in javascript, and I believe this is a good practice. So I’m trying to do the same thing here cljsj

No clue what you did in JS, but it certainly would work in the same exact way in CLJS simply because it ends up in executing JS just the same.

in JS I could use process to get env, but now when I come to think of it there is probably a nodejs program running and read the env then inject to my JS at compile time.

I just found a way to achieve what I want. If we use shadow-js, it can read the env var at compile time. But it needs extra steps which is specified in this link: https://cljs.github.io/api/compiler-options/closure-defines

it is kinda hard to follow your gist since you already abstracted way too much

why not just translate the absolute minimum you need via regular interop and once that is working abstract it away with some helper functions or so

@U05224H0W Sorry, this Gist is not mine. I'm just trying to get inspiration from it 🙂

ah

I'm trying to just translate the absolute minimum I need though that seems above my competences thus why I was asking whether someone else had gone through the task.

(defn template [args]
  [YourComponent (js->clj args)])

(def ^:export LoggedIn
  (doto (.bind template #js {})
    (set! -args #js {:primary true
                     :label "Foo"})))

sort of I guess. dunno what the template bind is supposed to do though

I don't use storybook so I don't know much about it but this would be the translation of something like

const Primary = ButtonStory.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
}

@U5ZHHMZSQ Check out https://davidvujic.blogspot.com/2021/09/clojurescript-amplified.html @U018VMC8T0W wrote a few recent blogposts on this.

Thanks @U05224H0W @U07GPFFAS I was definitely doing something more complex than it should be!

There's also a link in the blog post to my example repo using Storybook that might give you some ideas. Here's some more info too: https://davidvujic.blogspot.com/2021/08/component-driven-clojurescript-with-storybook.html

Very nice @U018VMC8T0W thanks.

Great, thanks! 🙂

I’m not sure if this is proper templating - but here’s an example I just pushed to my example repo 😄 https://github.com/DavidVujic/clojurescript-amplified/blob/main/src/stories/app/stories/top_bar_stories.cljs

we have given you advice on how to debug this yourself. you need to learn to use those things and how to deconstruct problems into smaller ones. we cannot give you solutions for everything.

the way I would approach this is: does the update even trigger when I think it should? verify by logging something or so. if it doesn't trigger figure out why. if it does trigger go to the next step

you continue doing that until solved

I know this one id different because I now use events more and I cannot test this in repl as far as I know

then do whatever in the browser and prn will be visible in the browser console

the process is the same really just the place you look for print output is different

oke

thanks

To expand a bit on the "figure out why" part. For any X to happen, you usually have some chain of conditions that all need to be satisfied. For example, you want a label that just reflects some input field's value. "The label having the same value as the input" is your X. Now, the needed steps: 1. The input's change must be triggered 2. That change must be communicated to your code 3. Your code must get the value after the change 4. Your code must get hold of the right label 5. Your code must set that value to the label's text If that X doesn't work, then it means that any of the above steps could potentially be the issue - so you have to check them all. For more complex Xs, the steps will be more complex as well, and more numerous. But the approach is just the same.

@U0EGWJE3E Videos also help. And pair programming. Ask around for someone to pair up with you, so you can hear others reason through the code. Unfortunately I'm super busy at the moment but maybe this weekend or next week I can pair - and most people are super busy, obviously, so keep asking around on different forums for pairing.

hmm, got a some data back but I do not see why it happens but it looks like this :

(defn get-input-target[]
  (.-value input-target))

more wierd things In the hrml I have

<input type="number" class="form-control" id="inputDegree" name="inputDegree" placeholder="Enter Degree" value="0" />

(def temp-input (gdom/getElement "degreeInput"))

(defn get-input-temp []
  (js/parseInt (.-value temp-input)))

but when I do

(prn (get-input-temp))

or I see this :

Uncaught TypeError: learn_cljs.temp_converter.temp_input is null

sorry, I gave up on clojurescript. This gives me too much confusion

You write (gdom/getElement "degreeInput") along with id="inputDegree". Do you see the issue here?

@U0EGWJE3E programming is hard. there is not going to be an easy language i think. after all how can one translate easily real life into 0 and 1? no way. try to relax and come back to it. if cljs doesnt work for you pick another one but use more patience.

got it working after a hint here on the chat. I used a wrong name for one of the tags.

shadow-cljs already has it