Fork me on GitHub
Shuky Badeer04:05:22

Hi guys! I'm trying to test calling a clojurescript function compiled into js by shadow-js. On the js side i'm providing a json object, and trying to parse it as clojure map on the CLJS side. It's printed as

#js {:name #js {:first John, :last Doe}, :email }
How to do access it beyond the "#js" at the beginning? If I use js-&gt;clj then the keys become strings instead of keywords, which is not desired.


you can call (js->clj m :keywordize-keys true) if you want keywords

Andreas S.07:05:00

Hi everyone 👋 whats the best/latest tutorial/repo to get started with clojurescript?

Andreas S.07:05:12

If I wanted to start a new project and use a js lib like this: what would be the best, build tool setup? lein? tool deps?

Shuky Badeer10:05:56

Hi guys, there is a javascript library for Pusher (realtime websocket connection) that I wanna use in clojurescript. How do i integrate and use an npm library in clojurescript syntax? For example

var pusher = new Pusher("APP_KEY", {
  cluster: "APP_CLUSTER",
Not clear how to use in cljs Thank you!


You need to learn about JS interop. There's a cheatsheet here and there's plenty of articles and videos on the topic.


So that code above would be

(def pusher (Pusher. "APP_KEY" #js {:cluster "APP_CLUSTER"}))

Shuky Badeer10:05:43

Right i'm beginning to understand how it works! @U2FRKM4TW going with this logic, can you please give an example for how to transfer the following code?

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {

Shuky Badeer10:05:24

First line would be something like this i guess?

(def channel (.-subscribe pusher) "my-channel")


Yes, but "my-channel" has to be in the inner parantheses.


And all global JS values can be access by adding js/ in front of all. Also, for such values you can leave the . usage as it is. So e.g. JSON.stringify(data) will be either (-stringify js/JSON data) or even (js/JSON.stringify data). Oh, also a correction on my previous message - that - is not needed in your CLJS code. Use . instead of .-.


How do you add code in the componentDidMount lifecyle in reagent, other than the verbose form-3 ?


A slightly less verbose solution is to add :component-did-mount metadata on the returned Hiccup. But I'd stick to a form-3 component - I myself don't like using metadata when there are alternatives.


Another solution would be to use a form-2 component, add a ref function to the top level Hiccup item, and do the work in that function. But it's quite "dirty" since that's not what the refs are for.

☝️ 1

Is the first approach ever documented?


Right in the README. :)


Although my bad - not to the Hiccup vector but to an extra function, so it'll be a form-2 component.


No, I mean the README, the file in the root of Reagent's source code repo.


nothing dirty about using :ref for that IMO


Quoting > Avoid using refs for anything that can be done declaratively. And :component-did-mount is, I would argue, a more declarative approach. The next section at the link above is also relevant. Apart from that: > ref updates happen before componentDidMount or componentDidUpdate lifecycle methods. which might create issues with nested form-3 components which will be hard to debug.

👍 1

Took the @thheller repo next-cljs upgraded to nextjs 12. Then modified the output hook a bit. And now got nextjs + serverSideProps working 😎

👍 1

Going to take the code and modify it a bit soon to be able to support Remix. Then we have a good isomorphic / ssr solution for clojurescript It's promising.


I wonder if the nextjs edge runtime could run in graaljs and therefore make normal clojure interop possible from serversideprops


It all sounds like a great material for a proper article. :) People have been asking before about using NextJS with CLJS for SSR.