Fork me on GitHub
#clojurescript
<
2020-10-28
>
tjb00:10:48

hello everyone! does anyone have experience setting up a cljs project with shadow-cljs + sass + bulma? i am a bit lost on how to get bulma to work. i have installed the package and imported in my scss file but am not seeing the classes work in the UI

tjb00:10:40

i have this in my <head>

<link href="/css/style.scss" rel="stylesheet">
and this at the top of my scss file (pls disregard the /css folder i know it is incorrect)
@import "./node_modules/bulma/bulma.sass"

thheller08:10:34

you need to run node-sass or so to process the scss file. html can only load the resulting actual css

tjb04:10:08

this is what i ended up doing as well! thanks for the heads up @U05224H0W!

seqable11:10:54

Having major issues with figwheel (I think?). Setup has been acting strangely the entire project but now it's just completely borked. Right now code that runs fine on heroku and certainly compiles with lein cljsbuild once app at first wasn't working properly on my box, after a lein clean won't even run under figwheel citing string.cljs not existing. I'm basically at the point where I need to obsessively restart and run lein clean or even nuke my .m2 every so often. What might be causing something like that?

seqable11:10:27

It's like it has a mind of its own and will never act consistently.

victorb11:10:10

Sounds like either something been broken from day 1 or your environment is borked. Try creating a new project from scratch to see if you can reproduce the issue in a smaller scope. If everything is still funky, I'd start looking around in my own OS. If everything works, try adding more stuff from your main project into the new one until it starts breaking

seqable11:10:53

Yeah evidently. But can't wrap my head around how tho. Redo of m2 did the trick afa compiling (as usual) but just got me back to the earlier point of re-frame subs suddenly not doing my bidding. I've completely cleaned out my profiles.clj so there shouldn't, really couldn't, be anything left hmm.

seqable12:10:37

I suppose answer is dockerize the fucker and if not properly pin down what exactly changes and where, at least have an easier time getting clean slate. But then slate is supposed to be your deps and your code so, uhh.

victorb12:10:01

you're having the same issue with multiple projects or just this one?

uosl12:10:25

Have you tried clearing your browser's cache or opening the webapp in incognito mode? Sometimes the caching messes with me badly.

seqable12:10:22

yup i'm in incognito. The caching is horrible, agreed. But sadly not my current issue 😕

seqable12:10:34

seems incognito not enough, went for disabling cache and at least code is current now haha. just not working anyways

seqable15:10:54

yup turns out suspicions correct, something about figwheel... with cljsbuild straight and a bunch of fiddling I finally managed to get what what's supposed to work working and what isn't, not. Hurray! Probably time to look towards moving away from sidecar since it's not seeing updates.

kah0ona12:10:25

Hi folks, It seems for some reason reagent can’t find React anymore, and I get these kind of messages:

Uncaught TypeError: $reagent$impl$component$$.$node$module$react$ is undefined
With figwheel locally it works, also the compiled minified bundle (with :psuedo-names true) shows that React / ReactDOM are in there. Any pointers in how to debug this? I’ve tried many things, can’t for the life of me figure out why it happens. No webpack or any form of bundling, and some other projects with similar deps I run run just fine. My build config:
:cljsbuild
  {:builds {:uberjar {:source-paths ["src/cljs" "src/cljc"]
                      :compiler     {:main            aviationglass.core
                                     :optimizations   :advanced
                                     :asset-path      "/js/compiled/out"
                                     :output-dir      "resources/public/js/compiled"
                                     :source-map      "resources/public/js/compiled/main.js.map"
                                     :output-to       "resources/public/js/compiled/app-min.js"
                                     :pseudo-names    true
                                     :pretty-print    true
                                     :source-map-path "/assets/js/compiled"
                                     :externs         ["resources/public/js/uppy.extern.js"]
                               
                                     :infer-externs   true
                                     :install-deps    true
                                     :closure-defines {goog.DEBUG false}

kah0ona12:10:57

Reagent 1.0.0-alpha2, and clojurescript 1.10.597 and also tried the latest

kah0ona13:10:53

In the app-min.js there’s React in there, in the browser console React.version shows 16.13.0

kah0ona13:10:59

tried different :optimizations as well, and this projects ‘used to work’ with older reagent version, but i have another similar projet with 1.0.0-alpha2 that runs just fine

kah0ona13:10:03

any pointers? 🙂

Ian Fernandez13:10:51

anyone knows how to make github actions (node) with cljs?

victorb13:10:43

but, I'd probably go for something like babashka if you're just doing smaller scripts. Way faster startup

Ian Fernandez18:10:26

but yeah, I know about babashka 😃

dnolen15:10:09

@kah0ona the error makes it seem like React is coming from node_modules

dnolen15:10:53

so need more details on how you are supplying React to the build

kah0ona15:10:00

Thanks for your response, already shedding some light. I was going trying the :target :bundle route, but that yielded some other problems, so was going to go back. But now it’s just vanilla clojurescript from a leiningen project with lein-cljsbuild with above parameters. There is a node_modules directory, but afaik all explicit mentions of it are removed. Can I tell if/how the cljs compiler is looking in the node_modules dir when compiling? Could it be through transative dependencies?

kah0ona15:10:47

(defproject aviationglass "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.10.0"]
                 [org.clojure/core.async "0.4.490"]
                 [org.clojure/clojurescript "1.10.597"]
                 [re-dnd "0.1.19"]
                 [re-val  "0.1.3"]
                 [sweet-crud "0.1.2"]
                 [reagent "1.0.0-alpha2"]
                 [reagent-utils "0.3.1"] ; cookie/session mgmt
                 [re-datagrid "0.1.10"]
                 [cljs-ajax "0.8.0"] ;
                 [re-frame "1.1.1"] ;client-side reagent framework
                 [re-frame-utils "0.1.0"]
                 [clj-commons/secretary "1.2.4"] ;client-side routing
                 [compojure "1.6.1"]
                 [metosin/compojure-api "2.0.0-alpha20"] 
                 [ring "1.7.1"] ;ring + midddleware
                 [ring/ring-defaults "0.3.2" ]
                 [ring/ring-json "0.4.0"]
                 [http-kit "2.3.0"] ; high performance HTTP server
                 [day8.re-frame/http-fx "0.1.6"]
                 [day8.re-frame/async-flow-fx "0.0.11"]
... snip ...            

kah0ona15:10:21

Or does the cljs compiler nowadays just ‘notice’ an node_modules directory and do something with it implicitely?

dnolen15:10:44

yes it looks there

dnolen15:10:04

I believe reagent now does not depend on the CLJSJS one?

dnolen15:10:19

so it it will try to get it from node_modules

kah0ona15:10:37

because it is the 1.0.0-alpha, and that has changed? :thinking_face:

dnolen15:10:44

I don't know

dnolen15:10:20

this should be documented in Reagent itself

dnolen15:10:14

if the CLJSJS one exports react as a namespace

kah0ona15:10:16

but how come the React is in the final artefact? Maybe reagent requires it differently now because it somehow thinks it should be in node_modules?

dnolen15:10:42

then you should be able to explicitly refer to the CLJSJS dep in your list of deps

dnolen15:10:51

and carry on like before

👍 3
kah0ona15:10:02

aah yeah so i just got it working by simply removing node_modules dir…..

kah0ona15:10:13

and then recompile

kah0ona15:10:25

at least I think that’s why it works now… ok will investigate more

kah0ona15:10:32

will get to the bottom of this, thanks for your help 🙂

dnolen15:10:48

right switching back and forth between bundle and the old way will likely create a confusing state

dnolen16:10:29

:npm-deps false

dnolen16:10:42

should also work, it will force ignoring of node_modules

kah0ona16:10:04

is it true by default?

kah0ona16:10:20

ok but this all will pan out, thanks a whole bunch for your time sir!

dnolen16:10:25

pretty sure it isn't

dnolen16:10:31

in general the old way is not desirable

dnolen16:10:48

:bundle is superior in my opinion for typical things

kah0ona16:10:01

the issue, btw, i head with :bundle is, it seemed to hang with :advanced

dnolen16:10:01

since you don't have to go hunting for deps

dnolen16:10:07

externs inferences work etc.

kah0ona16:10:15

yeah i loved that approach tbh

dnolen16:10:50

would have to dig into your :advanced problem

kah0ona16:10:52

i backtraced to this state because of somehow a hanging build (and a nearing deadline making me do things the old way) But that’s a story for another day; at least i can show my customer something now 🙂

dnolen16:10:57

never seen that

kah0ona16:10:25

either it hangs or it would take so very long that i didn’t wait that out

dnolen16:10:44

sure, it could be a variety of things

dnolen16:10:46

JVM settings etc.

kah0ona16:10:52

but yeah , there wasn’t any output

kah0ona16:10:58

it just said: compiling clojurescript…

kah0ona16:10:02

and then blank

kah0ona16:10:08

for like, long, way longer than before

kah0ona16:10:12

so most of time i killed it

kah0ona16:10:18

all of time* after a few minutes

dnolen16:10:31

but like I said - can't help w/o more info, I've never seen it

dnolen16:10:43

we're using :bundle and :advanced and lots of deps

kah0ona16:10:09

sure, not asking you to either 😉 you’ve already been of enough help for today, will try that again later! 🙂

kah0ona16:10:18

ah ok good to know

kaffein16:10:29

hi all, is there an idiomatic cljs way of handling long-press events instead of translating the js equivalent please ? (cljs noob here)

dnolen16:10:32

like only fire the event if the press last longer than some time T?

kaffein16:10:47

yep something like that

dnolen16:10:36

would be pretty easy with core.async - but you need to read up on it

kaffein16:10:04

I have played a little bit with it already but can you elaborate on the idea ?

dnolen16:10:15

alts + timeout

👍 3
🙏 3
kaffein16:10:22

oohhhh okay

kaffein16:10:53

thanks a lot @dnolen I will check that out

dnolen16:10:26

(let [long-press-chan (timeout 1000) [c _] (alts! [long-press-chan mouse-release-chan])] ...)

💯 3
👍 3
dnolen16:10:49

something like that, you can check whether c is a long-press or a mouse-release and then do whatever

dnolen16:10:59

that's just my first idea, probably other code-golfy ways

kaffein16:10:14

thanks a lot ... I will take it from there

dnolen16:10:23

@kaffein alt! is probably cleaner for something this simple

👍 3
🙏 3
dnolen16:10:29

since it has the shape of cond

dnolen16:10:56

(alt! long-press ... release ...)

kaffein16:10:07

oh okay thanks for the tip

Stuart20:10:52

Has anyone any experience of this course ? https://www.learnreframe.com/#course ?

Nathan21:10:09

I'm almost finishing it. It's a good course. Gives a good overview of reframe, but it's a more hands-on in my opinion which is good depending on your purpose. It helped me a lot as I didn't have any experience with Reframe before. If you really want to understand the different parts of reframe I can recommend https://purelyfunctional.tv/courses/understanding-re-frame/

Stuart00:10:11

Thank you, that was the other one I was considering too 🙂

Stuart20:10:06

It's pretty expensive, worth it?