Fork me on GitHub
#clojurescript
<
2020-01-24
>
sova-soars-the-sora01:01:12

how can I play an mp3 with a button click in cljs?

sova-soars-the-sora01:01:41

i'm trying to interact with the Audio object ... i don't know how to initialize it, but theoretically there should be a browser default one i could invoke with a constructor (?)

p-himik08:01:01

If it's just a static MP3 file that your web server can serve to your web page, you can just use the <audio> tag. Then, the button to play the file would the, well, Play button: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

p-himik08:01:28

If it's something more complicated, you need to give some details for a correct answer because WebAudio is "fun" at some places.

Varenya04:01:28

hey all I have started of on a new cljs project and I looked at the prod bundle which came to around 3.1Mb

Varenya04:01:38

is that normal ? the app in itself is not that big. If I had built this in plain React and ecosystem it won't be this big.

Varenya04:01:55

or is there any best practices I need to adhere to get the best out of closure compiler, I am hoping its a missing config or something small like that but I searched through google and couldn't find anything too different from the current project setup so I am a bit lost here. any help would be great. Thanks in advnace

orestis06:01:13

Hi @varen90, which tool do you use to build? Are you using advanced optimization? What are your dependencies?

Varenya06:01:47

lein-cljstools and yes we use advanced optimizations

orestis06:01:43

Hm I’m not familiar with lein and cljstools. 3mb looks a bit high, as if something is wrong. My only suggestion would be to browse the compiled bundle and see if there’s something there you don’t expect in terms of dependencies.

orestis06:01:57

I use shadow-cljs and my main module was around 3mb too, but the culprit was Vega - it weighs in at around 1mb of dependencies.

orestis06:01:38

Plus some other JS libraries like React-bootstrap

Varenya06:01:39

ah okay - how hard is it to migrate to shadow-cljs ?

Varenya06:01:58

oh yeah we use React-bootstrap

Varenya06:01:23

are u saying its not getting tree shaken properly?

orestis06:01:37

It supports Leiningen so hopefully not too hard - I’d ask in #shadow-cljs for details.

orestis06:01:59

I don’t think any tool can successfully free-shake JS stuff. For React-bootstrap, I used the “bundle” import instead of the “detailed” ones, which was an issue. Ended up just removing it after too many issues and too little value.

orestis06:01:30

(Typing this on mobile so can’t provide links or details, sorry)

orestis06:01:39

shadow-cljs is definitely the state of the art in build tools, and it has a nice report so you can see why your build is large. But if you use cljsjs you might have to do some legwork first.

👍 4
Varenya06:01:45

no worries, thanks for your help

p-himik08:01:10

shadow-cljs can also generate a build report that says what exactly took that amount of space: https://shadow-cljs.github.io/docs/UsersGuide.html#_build_report

Edmund09:01:05

Hi all. Going through a reagent/material-ui example. I can't get my head around what the caret is being used for here: (defn custom-styles [^js/Mui.Theme theme] .. Full example is here: https://github.com/reagent-project/reagent/blob/master/examples/material-ui/src/example/core.cljs

Edmund09:01:56

I've looked at a few js interop docs but couldn't find this.

thheller09:01:39

^js/Mui.Theme theme that is a type hint. used for externs inference. it basically tells the compiler that this is a JS value and externs are added so that :advanced compilation doesn't rename it

thheller09:01:13

theme is an instance of Mui.Theme class (which is made up in this case but that doesn't really matter much). the important bit is the ^js

Edmund09:01:59

Ahh.. thank you very much @thheller. All clear now. Much appreciated.

optevo10:01:16

Hi - does anyone have an example of how I cat get an AST using self-hosted clojurescript? I'm struggling with how to set up the analyzer / compiler state / other parameters. I'm after the full AST like I can get in Clojure: https://github.com/clojure/tools.analyzer#quickref

Binita Bharati11:01:47

How can I use jquery within cljs alongside shadow-cljs as the build tool ? jquery is residing in CDN. Thanks.

thheller11:01:42

or you can just use the provided global via (js/jQuery "#foo"). then you don't need to tell shadow-cljs about jquery at all

Binita Bharati11:01:58

Thank you ! I tried the second option that is directly accessing (js/jQuery "#foo"). It works.

cjohansen11:01:54

What are everyone's favorite resources for onboarding a JavaScript programmer on a ClojureScript project?

tzzh13:01:48

I just noticed that (cljs.reader/read-string "#(+ 3 %)") throws an exception whereas (read-string "#(+ 3 %)") works in clojure. Is there a way I can get this to work in cljs ?

thheller13:01:48

cljs.reader is pure edn reader, it only reads edn data. the matching clojure variant would be clojure.edn/read-string

thheller13:01:25

if you want read-string with full code capibilities you are entering self-hosted CLJS territory ... which is ... complicated.

tzzh13:01:05

ah OK interesting, thanks :thumbsup:

borkdude14:01:33

@thomas.ormezzano fwiw, edamame can do this:

$ clj -Sdeps '{:deps {org.clojure/clojurescript {:mvn/version "1.10.520"} borkdude/edamame {:mvn/version "0.0.10"}}}' -m cljs.main -re node
ClojureScript 1.10.520
cljs.user=> (require '[edamame.core :as edamame])
nil
cljs.user=> (edamame/parse-string "#(+ 3 %)" {:all :true})
(fn* [%1] (+ 3 %1))

tzzh15:01:40

oh cool cheers 🙂

borkdude15:01:26

if you need actual evaluation instead of just parsing, you can use sci. see example in channel

borkdude15:01:38

for a while I've been getting:

$ clj -Sdeps '{:deps {org.clojure/clojurescript {:mvn/version "1.10.597"}}}' -m cljs.main -re node -e "(require '[sci.impl.interpreter :as sci])"
Unexpected error compiling at (<cljs repl>:1:1).
Not supported: class cljs.repl$init_wrap_fn
in https://github.com/borkdude/sci/ although the project works fine when compiled (the tests run using a compiled version using cljs-test-runner) plk also works fine:
$ plk -e "(require '[sci.impl.interpreter :as sci]) (sci/eval-string \"(+ 1 2 3)\")"
6
Any hints what this could be?

borkdude15:01:08

with an older version of CLJS it also seems to work:

$ clj -Sdeps '{:deps {org.clojure/clojurescript {:mvn/version "1.10.329"}}}' -m cljs.main -re node -e "(require '[sci.impl.interpreter :as sci]) (sci/eval-string \"(+ 1 2 3)\")"
nil
6

borkdude15:01:50

it seems to be related to writing something to transit: [cljs.analyzer$write_analysis_cache invoke "analyzer.cljc" 4593]

borkdude15:01:52

Got it. Continuing in #cljs-dev

anson15:01:14

Hi everyone 🙂 I want to share a library that I just published that helps you write modern React components with CLJS (yet another!). I started on a CLJS/RN project recently and felt that the various frameworks libraries out there didn’t try hard enough to get out of my way - surely it’s a matter of preference, but I really just wanted to define components using defn instead of some DSL or helper. I left state management out of scope, and I think ended up with a nice API that achieves the goal with strong extensibility. Broadcasting here because I’m happy with it and hope someone out there finds it useful 😁 Feedback welcome! Link below https://github.com/anrosent/rct

👏 12
darwin16:01:04

have you looked at uix[1]? that was my pick for my current project and I’ve been very satisfied so far. nice job @U0FR82FU1 [1] https://github.com/roman01la/uix

anson18:01:28

Hey, no I actually don't remember seeing that. It looks really impressive! As an aside looking thru the docs, one thing I think rct gets right is that you can render templates with native components in the same way you do with CLJS components - driving rendering with protocols rather that tag-based template parsing lets you avoid the :> tag that uix and reagent use for interop. Perhaps I over-indexed on these ergonomic points in building a new lib - uix has a long tail of solid features, glad it's working well for you!

Eric Ihli16:01:34

I just expected something to work after reading https://cljs.github.io/api/cljs.core/binding and don't understand why it doesn't. Can anyone shed light?

(ns config)

(def ^:dynamic *flavor* :free)
(ns env.dev.pro.core
  (:require config
            example.core))

(defn init []
  (binding [config/*flavor* :pro]
    (print config/*flavor*)           ;; pro... all good
    (example.core/init)))
(ns example.core
  (:require config))
(defn init []
  (print config/*flavor*)             ;; free... unexpected

Matti Uusitalo18:01:58

Shouldn't those requires be lists?

Eric Ihli16:01:27

For context and to know if there's a totally separate way I should be doing this: I ran into this while trying to figure out a way to have a single codebase for multiple versions of an app. I'm building with shadow-cljs for react native. So I was thinking I'd just point to different init-fn s in the config. For the dev/free version I'd point to env.dev.free.core and for the release/free version env.release.free.core. Those entry-points would bind some globals that I could then branch from in the app. I first tried using an atom to hold a map of config values. That worked fine, but what's the point of an atom there? I don't think I need "uncoordinated synchronous access to a single identity". I'm trying to use the right tool for the right job and understand the why's behind "right".

Eric Ihli17:01:40

Hm. It expands like this.

example.core> (macroexpand '(binding          [config/*flavor* :pro] (example.core/init)))

(let*
 [*flavor*-orig-val__39542
  config/*flavor*
  *flavor*-temp-val__39543
  :pro]
 (set! config/*flavor* *flavor*-temp-val__39543)
 (try
  (example.core/init)
  (finally (set! config/*flavor* *flavor*-orig-val__39542))))
When I replace the binding call with some manual set!, it works as expected.

bfabry16:01:55

probably not the problem but example.core should not get things from config without requiring it

Eric Ihli16:01:10

Aye. Typo in Slack, not the code.

jjttjj17:01:44

I'm struggling to debug these transit handlers: https://gist.github.com/jjttjj/6bc0b62ef1dbf29c1c69ea22f8eb7f55 (for https://github.com/henryw374/time-literals)

(println "printing zdt" (t/in (t/midnight (t/date)) (t/zone)))
(println "type"  (type (t/in (t/midnight (t/date)) (t/zone))))
(println "transit zdt" (time-literals-transit/->transit (t/in (t/midnight (t/date)) (t/zone))))

;;printing zdt #time/zoned-date-time "2020-01-24T00:00-05:00[America/New_York]"
;;type #object[ZonedDateTime]
;;transit zdt ["~#offset-date-time","2020-01-24T00:00-05:00[America/New_York]"]
Things work fine on the clojure side but zoned date times are being written as offset date times on cljs. Anyone see an obvious errors in the gist? Edit: nevermind, I think it's an issue related to an issue in JS joda where OffsetDateTimes are just ZonedDateTimes (https://github.com/js-joda/js-joda/issues/165)

Kamuela22:01:07

Any reason why the REPL I'm using by following this guide is painfully slow? https://clojurescript.org/guides/quick-start

lilactown23:01:21

Slow to start or slow to run code once it's up?