Fork me on GitHub
#clojurescript
<
2018-05-04
>
aleksandr07:05:27

Does anyone use that lib for a css preprocessing: https://github.com/roman01la/cljss ? What do you prefer? This one or garden?

emil0r07:05:03

I prefer less or scss

cmal07:05:30

Hi! My Reagent project page loading time(the period showing progress bar) is long, both because of large app.js file and long react init page time. I found that using async script tag will not work. Are there any advices to decrease page loading time? Thanks very much.

thheller09:05:00

@cmal <script async ...> should work fine in the latest version? assuming you are still using shadow-cljs of course 😉

cmal09:05:37

@thheller Thanks. Of course I am using shadow-cljs. I will upgrade it.

thheller09:05:28

older versions had :devtools {:async-require true}. in newer version it just detects if you are using script async or not.

thheller09:05:30

but those are for dev only. async should just work for release builds.

cmal09:05:41

@thheller I used to use 2.1.16 and async tag does not work. There are a lot of warnings of document.writes(in dev). In 2.1.16 release js script, there are no warnings but the page keeps going into errors. I will try to figure out whether this is a problem of my code. You say new version async should work gives me a direction. Thanks so much.

thheller09:05:11

hang on. are you talking about release builds not working?

cmal09:05:13

warnings are in dev mode, not release.

thheller09:05:39

release builds should never do document.write unless it is done in your code somewhere

thheller09:05:54

if you are using goog.History that might be using document.write

cmal09:05:39

Yes, I am using it.

thheller09:05:40

ok that is most likely the problem then. its setup is possible in async but I forgot how. you have to create an input and iframe elements I think

cmal09:05:32

So does this mean that if I do want to use async with release, I must deal with the goog.History problem?

cmal09:05:33

Yes, I exposes a global var someVar, and do something like someVar.init() when window's load event was triggered. the function runs. but there are some weird errors which do not exist when not using async tag.

thheller09:05:01

yeah those won't exist with async

cmal09:05:23

Does this mean that if I do want to use async with release, I must deal with the goog.History problem?

thheller09:05:12

first of all you need to adjust the way your code is initialized

thheller09:05:41

async means that the browser continues loading your page and if you immediately after calll someVar.init() that won't be loaded yet

thheller10:05:21

you can do window.onload = function() { someVar.init() }; instead or similar ways

thheller10:05:46

goog.History uses document.write to create a few DOM elements which doesn't work in async

thheller10:05:02

so you must create those elements manually and pass them into the constructor

thheller10:05:24

or use goog.history.Html5History which doesn't have that problem

thheller10:05:22

oh .. you are already doing the onload so thats fine

thheller10:05:08

if you run shadow-cljs release app --debug it should be easy to find out what fails exactly

cmal10:05:39

Thank you very much. 🍺👍👍

henrik11:05:37

I’m using https://github.com/r0man/cljs-http to access an API (Contentful). Cljs-http returns a channel, on which the results are returned. What’s not so great, I think, is that I now have to wrap all subsequent functions that use the data (converting and processing it, and what-not) in go blocks, and do (<! (func a1 … an)) instead of straight up calling those functions. go blocks become this contagion that spreads throughout the program, even where they are not strictly needed. I.e., functions now have go blocks for the only reason that they happened to call another function that has a go block. They are otherwise completely synchronous, and the benefit of core.async is lost. If I could wrap a whole section of the program in a go block, the overhead wouldn’t be so bad. But since go blocks terminate at function borders, they have to be stitched into every function separately, which creates the <! ceremony for every function call. One way to mitigate this would be to call as many “normal”, data processing functions as possible from within the function that deals with the returned data from cljs-http, as it already has a go block. Are there other ways to mitigate this?

bhauman12:05:26

@henrik create a helper that turns it into a callback

👍 8
bhauman12:05:15

also keep in mind that you can still chain and actions together in small blocks and have that single block take a callback

bhauman12:05:19

or of course use something else

henrik12:05:49

Right. So, basically, what’s going to happen is: > 1. Get data from API > 2. Process data (through many functions) > 3. Stick the results in an atom, triggering rendering of a webpage So break out step 2 into normal functions, have them trigger on callback instead.

henrik12:05:33

@chadhs Thanks! There’s nothing wrong with cljs-http in itself, it’s a great library. I just need to learn how to manage core.async stuff properly.

bhauman12:05:23

yes its better to use core.async on the periphery to help with series of synchronous actions.

alice13:05:10

I have been pulling my hair out over this issue

alice13:05:37

(defn card-from-image [img]
  "Makes a card for the `img`"
  (let [img_url   (:url img)
        link  (str url "i/" img_url "." (:extension img))
        page  (reagent/atom 0)
        state (reagent/atom false)]
    (fn [img]
      [ui/card
       [ui/card-media
        [:div
         [:a {:href  (str "#/home/")
              :class "lightbox"
              :id    (str "/home/" img_url)}
          [:img {:src  link
                 :href link}]]
         ;;Thumbnail
         [:a {:href (str "#/home/" img_url)}
          [:img {:src   link
                 :class "thumbnail"}]]]]
       [ui/card-actions {:class "card-action"}
        [ui/flat-button {:on-click #(copy-text link)
                         :icon     (ic/content-link)
                         :label    "link"
                         :class    "card-button"}]]])))

alice13:05:47

I'm trying to render an image that you can click to get a lightbox

alice13:05:08

And when i click the image the url changes, but the lightbox doesn't pop up

alice13:05:21

if I hit the "back" button in firefox and then the "forward" button it does render

alice13:05:27

and I can click the image to switch back to the main page

alice13:05:38

but that won't render properly unless I go back and then forward again

alice13:05:11

I guess at the core this would be a reagent problem?

alice13:05:14

not re-rendering

juhoteperi13:05:56

@alice img_url and link are outside the function closure so if the img changes, those won't be updated on re-render

alice13:05:18

The image and link actually do not change per-element

alice13:05:23

Those are static once they're rendered

henrik13:05:11

@alice I can’t see what determines whether the lightbox is rendered or not. Do you change a class on some element?

alice13:05:13

I click the thumbnail image, and the css selector changes

alice13:05:18

then using :target the lightbox is rendered

alice13:05:39

If I get the lightbox to render now, clicking it again will get rid of it like it should

alice13:05:46

but still doesn't render the lightbox itself on click

alice14:05:35

I guess I'll just write my lightbox stuff in cljs instead of using pure css for it

alice14:05:29

Yeah, that worked

alice14:05:42

I hate css @_@

henrik14:05:55

If it’s fairly static, and not too many of them, then flipping a visibility: hidden CSS property is nice because you don’t have to re-render stuff.

henrik14:05:16

Yeah, it’s a mess.

henrik14:05:09

I’m not sure why your code didn’t work. Though in general, I’ve noticed that you tend to get fewer problems by sticking stuff in a single global atom, and avoiding local atoms.

henrik14:05:05

I’ve more or less switched permanently to https://github.com/Day8/re-frame, which has helped reduce weirdness quite a bit.

Macroz14:05:16

so there is Klipse, but is there something like <script language="clojurescript" ... /> where you could pretty much skip the CodeMirror and multiple languages support, bit still have some dependency resolution, so that you can have nice ClojureScript apps embedded in a small html wrapper?

henrik05:05:08

I’ve never seen anything like that, but that sounds cool. Build it!

kwladyka18:05:03

it appears after figwheel reload page. On first load there is no error.

dpsutton18:05:02

any chance you've recently used clj and the cljs getting started page?

john18:05:17

What version of CLJS are you using? Yeah, sounds like the quickstart

kwladyka18:05:04

@dpsutton What do you mean?

kwladyka18:05:39

@john92.walter [org.clojure/clojurescript “1.10.238”] but i was trying also with 1.9

dpsutton18:05:49

i've run into this error by following the clojurescript getting started page in a random directory. clj will make an out directory in cwd and this can cause issues

dpsutton18:05:54

it's a long shot but just wondering

kwladyka18:05:22

hmm lein new re-frame create src/clj/foo/core.clj and i have dev/user.clj <- only this 2 clj files

kwladyka18:05:27

not sure i fallow

dpsutton18:05:30

try deleting the out dir and trying again?

dpsutton18:05:55

well then it sounds like my long shot theory was wrong. sorry

john18:05:30

@kwladyka sounds like you're able to reproduce it fairly easily... Any chance you could put together a simple repro?

john18:05:42

I can see if I can help track it down.

kwladyka18:05:44

ok, I will try do some random things and if it wouldn’t work I will push it. Just I don’t want consume your time too much 😉

john18:05:24

No worries, if you've found a situation where the default quickstart is leaking into projects, I want to track it down.

john18:05:33

hmm, seeing as how it's commented out, I don't see how that could be the culprit... it's possible though

kwladyka18:05:40

Ok i give up… I will push it somewhere

kwladyka18:05:33

https://github.com/kwladyka/cljs-hello-bug I hope i didn’t do something very stupid here 🙂

mfikes18:05:03

@kwladyka It may be worth moving your ~/.cljs aside temporarily to see if it is affecting things

john18:05:13

hmm, doesn't repro for me. at least, not on initial start up of the browser

kwladyka18:05:28

yes, only when you change something

kwladyka18:05:45

[:div "Hi from " @name] <- change word hi for example

john18:05:25

yeah, figwheel is somehow finding a reference to my last project I used

john18:05:33

unrelated to this project

kwladyka18:05:18

make sense, i was using hello in last project

kwladyka18:05:32

But it was irrational to consider…

kwladyka18:05:47

I have no idea what to do with it

john18:05:24

yeah, I'm not yet understanding what's happening.

kwladyka18:05:44

ok i see in incognito chrome I don’t have this issue

john18:05:34

hmm.. yeah, I blasted target and ~/.cljs, hard reloaded the browser and it's working now

kwladyka18:05:42

but bug still exist somewhere and will back soon 😉

john18:05:19

It could be a combo of figwheel and 1.10.238, perhaps not invalidating some compiled cache

kwladyka18:05:21

Can I delete this repo?

kwladyka18:05:38

no, I was trying also with 1.9

kwladyka18:05:52

actually 1.9 was the first version which i tried

john18:05:17

Yeah, unless you want to chase it down in #fighweel. Otherwise we'd need a pure cljs repro.

kwladyka18:05:48

ok, I wouldn’t delete it

john18:05:53

k, yeah, bruce might be interested in seeing it

kwladyka19:05:14

ok, first of all it happens only in chrome. In Safari I don’t have this issue

kwladyka19:05:06

and not in incognito

kwladyka19:05:46

it doesn’t look like it is chrome extensions issue (i turned off all)

mfikes19:05:06

@john I wonder if it is a browser cache issue. I was able to reproduce it as well and even though my connect.js refers to my current project, in the browser it shows a connect.js from my last project.

john19:05:22

Looks like there's a lot of moving parts there with dirac and devtools and external-config.

john19:05:32

in the project.clj

mfikes19:05:47

Yeah, it could be that too, if external-config is writing somewhere odd.

john19:05:48

yeah, and the reframe template may have been updated recently to accommodate the new external-config stuff... only chrome though...

mfikes19:05:27

I repro'd with Safari

john19:05:29

ah, no, they didn't add :external-config to the template recently. ah, Safari too, hmm.

kwladyka19:05:05

not for me, Safari is fine

kwladyka19:05:43

but I have this warning which maybe save me:

kwladyka19:05:55

Do you have it too?

john19:05:00

Yeah, I see those in some projects

mfikes19:05:09

I basically have a line 8 in that looks like

if(cljs.core.truth_(rf1.core.mount_root)){

john19:05:44

Yeah, I have that too

mfikes19:05:04

The rf1 is the bad bit, but it only appears after a change in the source and a reload occurs.

kwladyka19:05:12

@mfikes but it is interesting I don’t have this issue in Safari while you have

john19:05:55

could have to do with the sequence you did the loading

kwladyka19:05:04

what do you mean? I have in the same time opened chrome and Safari. In one webbrowser i see errors while in Safari not…

kwladyka19:05:36

what is even more ridiculous

john19:05:03

Well, it may seem to work the first time, in safari? Did you try it a few times?

kwladyka19:05:49

so the only difference is Safari didn’t load this :formatters feature

kwladyka19:05:54

or other magic 🙂

kwladyka19:05:41

I turned off devtools and diract. The same bug appear.

mfikes19:05:47

If I shut down Figwheel in one project and then start it in another, and then fetch http://localhost:3449/js/compiled/out/figwheel/connect.js in the browser, I get the old project's copy. It seems to really just be a caching issue in the browser (Safari) as far as I can tell.

john19:05:20

bruce apparently "improved the caching situation a bit" in 0.5.16-SNAPSHOT

kwladyka20:05:20

wow i discovered something new

mfikes20:05:34

Yes, 0.5.16-SNAPSHOT makes the issue go away for me.

kwladyka20:05:51

i truned off my rf1 figwheel and runed hello figwheel

kwladyka20:05:58

now i have this error in chrome:

kwladyka20:05:21

while it works in Safari

kwladyka20:05:35

i have turned off all devtools, even re-frame

john20:05:37

try reloading

john20:05:44

or a save/reload cycle

john20:05:53

does it go away?

kwladyka20:05:12

but in chrome incognito it works…

john20:05:37

hmm, when I saw that occur, I did a recompile and reload and it went away immediately

kwladyka20:05:03

Do you mean delete compiled?

john20:05:10

I mean I edited a the namespace and saved, let figwheel do a recompile, then did another chrome hard-reload and that error above disappeared, IIRC

kwladyka20:05:12

0.5.16-SNAPSHOT of which dependency? Sorry I am trying to debug it too long 🙂

john20:05:54

lein-figwheel

kuwze20:05:32

I am following the 'modern cljs' tutorial and I am having this issue: https://gist.github.com/kuwze/160d4b2c6d463c53d34a6debc12441e4

john20:05:42

and figwheel-sidecar

kuwze20:05:42

should I be posting here or on #boot?

kwladyka20:05:55

hmm new ver. solves issue for me too. But still it is very crazy bug. How this can even read this from another project…

kuwze20:05:19

I have no clue how I am supposed to solve this issue if all I have to go on is "Stopping Jetty"

john20:05:21

The old project's files were getting cached in the browser

kwladyka20:05:02

@kuwze I don’t know this tutorial. Write something more

kuwze20:05:58

well it turns out I am an idiot, I had to read the tutorial again. I was supposed to run "boot wait -h" before.

kwladyka20:05:17

Thanks for cooperate in debugging. I need a break…

john20:05:01

@kwladyka Thanks for helping us determine that it wasn't a cljs/core specific bug!

flyboarder22:05:58

Hello everyone, would someone mind helping me sort our how to convert this javascript function to cljs?

flyboarder22:05:02

@U0D4G0Q4U maybe you have an idea here?

crteal23:05:25

I think something like this should work...

(defn promise-serial [fns]
  (reduce
    (fn [p f]
      (.then p (fn [result]
                 (.then (f) #(conj result %)))))
    (js/Promise.resolve [])
    fns))

flyboarder00:05:49

@U6GMQFAUT thanks, looks like that got me on the right track! I was having issues with the second .then

👍 4
thedavidmeister00:05:23

did you get it sorted out?

flyboarder22:05:18

I am trying to use clojure reduce instead of all the js interop

flyboarder23:05:14

I could write a macro but I think I’m over thinking it