Fork me on GitHub
#clojurescript
<
2022-05-23
>
Sturm00:05:51

When is it ok to write dotted expressions eg. js/document.alert and when should I use (.alert js/document)? I have a vague feeling there are situations with callbacks and this where it matters, but possibly not otherwise. Is anyone aware of docs on this?

thheller06:05:50

I personally use the js/document.alert variant only when accessing globals. ie. only with js/* or other namespace aliases (eg. (:require ["something" :as x]) (x/whatever.foo)). anything involving locals (eg. this) I only use (.whatever this) variant, so "proper" interop that would work in clojure too.

oly07:05:55

still struggling with open layers in clojurescript, tried just about every style of import from the shadow docs but still get XYZ is not a constructor starting to wonder if the node module is even correctly included in my build is there a way to check that its correctly included in the generated javascript ?

thheller07:05:09

just try logging and see what you get

thheller07:05:37

"is not a constructor" likely means that it is undefined and you are just using the wrong thing

oly07:05:05

okay thank you I will give that a try a bit later spent a few hours trying all sort tried with shadow and figwheel ended up getting no where trying all sorts of combinations of the import statements last night,

thheller08:05:18

note that there may be differences in shadow and figwheel in case you use figwheel with cljsjs

thheller08:05:28

figwheel + webpack should be same as shadow-cljs

thheller08:05:56

also note that it is not uncommon in JS to completely change how a library is used inbetween versions. so make sure the docs you are following match the version you actually use

thheller08:05:20

if you want to setup a repo with a problem I'm happy to take a look at what might be wrong

oly08:05:50

that will likely be my next step to create an example in isolation if nothing else it maybe useful to others 🙂

oly12:05:32

Okay I cloned the shadow quick start added ol and tried to create an instance of XYZ which is enough to see the error I mentioned https://gitlab.com/olymk2/open-layers-example/-/blob/master/src/main/starter/browser.cljs

thheller13:05:14

didn't I tell you that this is wrong? ["ol/source/XYZ" :refer [XYZ]]?

thheller13:05:52

probably needs to be ["ol/source/XYZ$default" :as XYZ]

thheller13:05:38

cloning that repo gave you a rather outdated shadow-cljs version. you should bump that. otherwise $default won't work there

thheller13:05:30

I bumped that template to the latest version

oly13:05:48

okay yeah you did say that I tried them all before but as this was a new repo I just used the layout I have seen others use, I don't think I tried the $default one though at least not in that format perhaps I misunderstood that I shall give it a try and report back

oly13:05:20

okay that does appear to work, sorry for wasting your time not sure I get $default but perhaps I need to read up on what that does, I will try on my bigger project a bit later. Thanks for taking the time to guide me 🙂

oly14:05:21

oh thanks for that link that's cleared up a lot 🙂

oliver marks20:05:01

@U05224H0W thanks again for the help got there in the end, got a reagent component with update working here https://gitlab.com/olymk2/open-layers-example/-/blob/master/src/main/starter/browser.cljs so very pleased with that 🙂

👍 1
Muhammad Hamza Chippa12:05:07

I am using AntSlider in my clojurescript UI and applying reframe dispatch function on-change but the slider loses focus on every change this is what I am doing in my UI. What I am doing wrong in that?

[:> Slider {:min 0
                   :max MAX_ENGLISH_LEVEL
                   :value @english-scale-atom
                   :on-change (fn [number]
                               (rf/dispatch [:apply-filter-english-proficiency number]))
                   :tip-formatter nil}]]]

p-himik12:05:05

Try using rf/dispatch-sync instead.

p-himik12:05:32

If that doesn't work, add (reagent.core/flush) right after it.

Muhammad Hamza Chippa13:05:18

I have added this still losing focus

(rf/dispatch-sync [:apply-filter-english-proficiency number])
(r/flush)

p-himik13:05:08

Maybe the parent component is fully re-rendered? In any case, you can use React DevTools to help you figure out what's re-rendered and why.

🙌 1
👆 1
West13:05:22

Is anybody working on a non-react solution for doing ClojureScript? I'm redoing my site in Svelte using SvelteKit's Static Site Generation simply because I don't want a JavaScript bundle when I'm not even doing any DOM manipulation. I miss hiccup as my template language, and being able to use ClojureScript for any logic. The closest thing I've seen is shadow arborist, but I haven't seen any work done on it recently.

zakkor13:05:59

I also greatly desire this too. I think something like Svelte except done entirely through macros is going to be the next big thing

augustl13:05:22

what about using Clojure and something like https://github.com/magnars/stasis?

West13:05:42

Haven't seen this! Thanks for sharing! @U0MKRS1FX

augustl13:05:31

there are probably more than a handful of static site generators for Clojure, so maybe Clojure is a better fit than clojurescript when you don't wany any JS to be involved 🙂

augustl13:05:15

I believe https://jamstack.org/ is the fancy term for this sort of static site setup

West13:05:43

The ones on the list here are super old, but I didn't look very far to find Clojure SSGs. https://jamstack.org/generators/

augustl11:05:25

yeah maybe there's no thriving community here, I'm not sure. Statis has been serving my needs for the last ~decade or so 🙂

thheller13:05:56

shadow-grove is working pretty well, just need to make a proper release and write documentation. https://github.com/thheller/shadow-experiments

thheller13:05:18

however server-side rendering is a complete non-goal so it won't help you there 😉

p-himik13:05:02

How did you come up with the names, "arborist" and "grove"? Is it because of the DOM tree? :)

zakkor13:05:00

@U05224H0W are there any recent examples of what arborist components look like? Specifically wanted to look at how updating state/reactivity within components looks like

thheller13:05:25

a bit all over the place but those I wrote most recently