Fork me on GitHub
#clojurescript
<
2018-08-09
>
abdullahibra14:08:27

when i make (def app-state (reagent/atom {}) is this version for each client ?

abdullahibra14:08:33

or just one app-state for full app ?

abdullahibra14:08:46

so it's a one version for all clients?

john14:08:15

It's a client side version

john14:08:08

As an "SPA" thing, the identity of most things are going to be specific to a particular client

john14:08:48

There's some "server side rendering" stuff that has been done and you can run CLJS on the server, but most reagent apps you'll see are "Single Page Apps" where most logic is being run on the client.

idiomancy14:08:54

so, you know how re-frame projects are set up with 2 source directories (`clj` and cljs)? Well, in the project.clj, how do you refer to a symbol in the clj sources? I'm trying to get lein-garden to work, but I'm suppose to point it to the my-project.core/style where I have a defstyles defined... but I don't know how to šŸ˜…

felipebarros15:08:21

Check out the lein templates for reagent and re-frame, if you haven't. They helped me to understand things a bit better. lein new re-frame project-name +garden

idiomancy15:08:36

the :source-paths argument

idiomancy15:08:32

anyone have any idea how to do this with garden?

*,
*::before,
*::after {
  box-sizing: inherit;
}

idiomancy16:08:47

ah, figured it out. you can roll your own selector.

Aleh Atsman16:08:10

[:* :*:before :*:after {:box-sizing "border-box"}]

Aleh Atsman16:08:35

that how we do it in our project

idiomancy16:08:55

does that work? is *:after equivalent to *::after?

Aleh Atsman16:08:24

:after is css2 and ::after is css3 but both work

Aleh Atsman16:08:31

try to use ::after in the same way

Aleh Atsman16:08:55

but everything works for us

idiomancy16:08:04

nice! cheers!

Forrest18:08:01

Hey everyone. Iā€™m building a Reagent app and Iā€™m noticing that my compiled JS file is pretty big (> 2MB). This is with advanced compilation too. Does anyone know of a code analyzer in the CLJS ecosystem, similar to what Webpack has? https://www.npmjs.com/package/webpack-bundle-analyzer

lilactown18:08:02

@forrest.thomas what build tool are you using?

thheller18:08:05

@forrest.thomas shadow-cljs can generate reports like this one: https://code.thheller.com/demos/build-report/huge.html but it currently only works for shadow-cljs.

Forrest18:08:53

interesting. im just using Leiningen right now

Forrest18:08:31

that build report from shadow-cljs is what im looking for

Forrest18:08:06

it looks like there isnā€™t anything analogous for Lein though šŸ˜ž

thheller18:08:38

you could try https://www.npmjs.com/package/source-map-explorer but it won't be very accurate

Forrest18:08:29

well, its better than nothing i suppose, lol

thheller18:08:07

problem is that all cljsjs deps won't be properly source mapped. so you end up with one big undefined blob

Forrest18:08:19

well, its a start. it really just seems like 2mb is too big and its just not clear to me where all that bloat could be coming from

Forrest18:08:25

thanks for the links! :thumbsup:

Forrest18:08:18

yeah, as you said, thereā€™s really just one big blob, probably from my cljsjs deps

kurt-o-sys22:08:34

I'm trying to make js promises synchronous, but I seem to fail:

(let [ch (async/chan)]
                                (go
                                  (.then js-promise
                                         (fn [success]
                                           (async/>! ch {:status :success
                                                         :result success}))
                                         (fn [error]
                                           (async/>! ch {:status :errors
                                                         :result error})))
                                  (let [{:keys [status result]} (async/<! ch)]
                                    (if (= status :success)
                                      ...
                                      ...))))
When I run this, I get this error:
Uncaught (in promise) Error: >! used not in (go ...) block
    at Object.cljs$core$async$_GT__BANG_ [as _GT__BANG_] (async.cljs:113)

kurt-o-sys22:08:29

So, apparently, when using a channel in a callback in the go-block, it's not in the right scope?

isak22:08:24

@kurt-o-sys maybe you have to wrap your callback function bodies in (go ...)

kurt-o-sys22:08:29

solved... right šŸ™‚

kurt-o-sys22:08:35

just found it šŸ˜›

šŸ‘ 4
kurt-o-sys22:08:52

thx šŸ˜›

kurt-o-sys22:08:32

can I actually wait until the go-block is finished? The problem is: I have this js promise and I need that value and have to do something with it so I can return the result. If I'm not mistaken, that go-block returns nil and is executed async. I actually need to make that promise really synchnronous (= waiting for it's value and do something with it before returning from the function)

isak22:08:47

not in js - you'd need to do it at the end of your go block

kurt-o-sys22:08:36

so, the go-block returns nil, right?

lilactown22:08:52

you canā€™t ā€œmake a promise synchronousā€ in JS. thereā€™s no such thing as <!! in CLJS

lilactown22:08:40

the go will return a channel that will output whatever is returned at the end of the form

kurt-o-sys22:08:29

ok... that's weird. It seems to return nil, I may try again.

hiredman22:08:48

I don't know much about js promises, but I suspect the correct thing to do is to not use >!, but to use put! with the callback that is called when the put! completes

kurt-o-sys22:08:06

oh, now I see... it returns a channel that outputs something. hmmm... too bad. Not sure how I'll solve this one.

michael.heuberger23:08:39

hello guys ā€¦ has anyone every managed to include cljs packages within a pure JS app?

ā“ 4
michael.heuberger23:08:09

like var someCljsPackage = require('someCljsPackage') listed in package.json?

michael.heuberger23:08:20

for me the missing link is how to make the packages in http://cljsjs.github.io accessible for npm or yarn