Fork me on GitHub
#clojurescript
<
2017-05-30
>
grounded_sage00:05:46

is there any examples on github of someone using cljsjs/vis ?

curlyfry04:05:24

grounded_sage: I just use Github search when I wonder things like that. https://github.com/search?utf8=✓&amp;q=%22cljsjs%2Fvis%22&amp;type=Code

grounded_sage10:05:45

I did and there was very little I could find. Unfortunately it takes it as a partial string I think in the search.

curlyfry11:05:56

I think you get better search result when you quote the search string

gastove05:05:25

Errrr, so: not sure if this is a CLJS-in-general question or a figwheel-in-particular question. It goes: I’m working with Reagent. In my core.cljs I’ve defined an init! method, marked with ^:export. Observing examples around the wobs, I added a <script> tag to my index.html — after pulling in my js bundle, call the init method.

gastove05:05:57

When I work with figwheel, this works just great. When I stop using figwheel and serve it on my own http server, it no longer works. The JS bundle loads, but in the console I see <app name> is not defined.

gastove05:05:00

Currently, I have optimization turned off entirely.

gastove05:05:02

Current hypothesis: I have really made a mess of this upside_down_parrot

gastove05:05:00

yep hypothesis confirmed

gastove05:05:13

I have written an HTTP server that responds to every request by handing back the html template.

gastove05:05:19

That… that’s good.

gastove05:05:25

You’ve been a wonderful audience.

gastove05:05:27

Tip your servers.

danielgrosse06:05:20

I updated the cljsjs.react-bootstrap package locally and installed it. But when I require it in my namespace, figwheel complains about the missing class. The dependency is listed and available. What could be the cause?

djebbz08:05:43

Hello everyone. I need to test some CLJS code that needs to run in a browser-like env (calls js/requestAnimationFrame). I tried using doo (through boot-cljs-test), and Firefox launches but tests don't because ReferenceError: doo is not defined. How do you test CLJS code that's specific to the browser ?

djebbz08:05:00

Karma and Doo are a bit overwhelming

Roman Liutikov08:05:08

@djebbz hey, is that somehow related to scrum? 🙂

djebbz08:05:15

yes : scrum/dispatch-sync! calls js/requestAnimationFrame, so I can't test this code under node.js only.

djebbz08:05:42

I was trying to figure out how to pass another batched-update function, but didn't really find out.

Roman Liutikov08:05:00

it should be under :batched-updates key

Roman Liutikov08:05:02

but the thing is that you can’t provide update cancelation function at the moment, I wanted to change that but never looked 😅

djebbz08:05:58

I don't want to cancel, just to avoid calling rFA so that I can test under node. What's this function signature ?

Roman Liutikov08:05:08

js/requestAnimationFrame(fn)

djebbz08:05:26

yes, but if I provide my own function instead, how should I implement it ? (fn [callback] (js/setTimeout callback 16)) ?

djebbz08:05:39

(approximately)

Roman Liutikov08:05:39

I’d do it synchronously (fn [f] (f)), sync code is easier to test

djebbz08:05:05

Both works ! Youhoo !

djebbz08:05:13

Thanks a lot 😄

djebbz08:05:11

Does it mean that even if I use scrum/dispatch! (async mode) the updates will always be synchronous with (fn [f] (f)) ?

Roman Liutikov08:05:43

This should not be a problem since batching is just an optimization for rendering perf on the client

djebbz08:05:58

Good to know. Thx !

danielgrosse08:05:43

Somehow I have a behaviour of figwheel, which seems strange to me. While requiring cljsjs.react-bootstrap in my namespace, cljsbuild compiles the files correctly. But figwheel complains about a missing namespace.

curlyfry08:05:06

@danielgrosse Could you paste some more code to provide some context? How are you requiring the dependency and how are you using it?

danielgrosse08:05:51

I just test some reduced case

danielgrosse09:05:31

Updating to the latest Clojurescript Version solved the problem

cmal10:05:11

Hi, how can I use webpack to process sass files in clojurescript projects? If I want to pack some home.scss, how could I import/require this scss file in clojurescript for the use of webpack? Thanks!

Roman Liutikov10:05:56

@cmal You can not really hook Webpack loaders into ClojureScript modules, because cljs modules are not supported in Webpack.

cmal10:05:29

Can I pack standalone css/scss files to a single css file with the whole magic sass-loader, post-css, autoprefixer provide?

robert-stuttaford10:05:19

@cmal https://github.com/thheller/shadow-cljs is work that @thheller is doing to bring cljs into the js tooling circus. i mention this because i’m merely aware, not because i use it. good luck 🙂

robert-stuttaford10:05:51

(i had the wrong link initially, sorry)

pesterhazy11:05:43

@cmal, when you're talking about using scss in webpack, do you mean somehow including the css in a js bundle, or in a separate css file?

pesterhazy11:05:06

If the latter, you could just use whatever tooling you're used to, now?

cmal12:05:24

@pesterhazy It is the latter. Can I use webpack to pack separate css files? I am used to use grunt but I used webpack in this project so I wonder whether webpack can do this, if the css files are separate from js or cljs files.

pesterhazy12:05:55

Not sure about the css part

pesterhazy12:05:06

I always thought that was what scss was for?

pesterhazy12:05:04

Does anyone happen to know how to register window "message" event with Google Closure? This works: (.addEventListener js/window "message" handle-message) but this doesn't (events/listen js/window "message" handle-message)

pesterhazy12:05:34

The latter fires but the message's .-data is nil

thheller12:05:08

@cmal shadow-cljs is sort of alpha but you can use it with webpack today if you like

thheller12:05:52

but there are probably some things not quite ready when it comes to the css loaders

thheller12:05:02

only tested the JS part so far but everything is working there

thheller13:05:53

the only issue with css is probably in the relative requires but besides that things should just work

cmal13:05:55

@thheller May I ask you some basic questions? What is the cons if I use webpack to pack the app.js generated by cljsbuild? And what is the difference shadow-cljs made?

thheller13:05:27

sure … usually CLJS (or Closure JS) code assumes there is one global shared scope but node.js or webpack assume there is one scope per file

thheller13:05:48

so what shadow-cljs does is inject some additional code that sort of creates the global scope

thheller13:05:33

while also making the files compatible with the usual require that node or webpack expect (could also do ES6 style import)

thheller13:05:24

is the intro I wrote for JS devs which pretty much applies to any JS tool you may want to use

thheller13:05:49

by default it generates code into node_modules/shadow-cljs/...

thheller13:05:09

which you can then load via require("shadow-cljs/your.app")

thheller13:05:31

or specify that as an entry in webpack

thheller13:05:55

no cons really other than that you need to use webpack to bundle things since you don’t get a single app.js

thheller13:05:14

although you can also still get that if you want

cmal13:05:48

Thank you for answering so much. Btw, https://github.com/thheller/shadow-devtools-example is 404 now.

pesterhazy13:05:23

something you can also do, if you want to work with webpack, is to generate two bundles, webpack-bundle.js and app-bundle.js

thheller13:05:27

oh yeah sorry still restructuring the docs

thheller13:05:02

works out of the box with create-react-app and create-react-native-app or any other js tool

pesterhazy13:05:24

then configure webpack to have, as an entry point, a lib.js with window.React=require("react"); window.ReactDOM=require("react-tom"); and so forth

pesterhazy13:05:55

basically export multiple global vars from the webpack bundle. Clojurescript should work fine like that

thheller13:05:13

yeah the two bundles approach works as well

pesterhazy13:05:34

if you want to be fancy you can concataneate the two bundles 🙂

cmal13:05:35

Not quite understand before I checking the examples. But can I say it in this way: shadow-cljs make it possible for JS developers to import CLJS to a working JS/webpack project?

thheller13:05:07

that is the intent yes

thheller13:05:22

short demo I made for create-react-apphttps://www.youtube.com/watch?v=BLDX5Twt2zk

cmal13:05:30

wahh,that is amazing!

thheller13:05:33

zero configuration use of CLJS in JS project

thheller13:05:26

still need to make the written guide cause there are some gotchas in the most recent create-react-app and their file reloading

thheller13:05:47

but it just works more or less

cmal13:05:37

excellent work! I will dive into that. Thank you both. @pesterhazy @thheller

pesterhazy13:05:32

by the way, is there a way to make create-react-app spit out an actual webpack configuration?

pesterhazy13:05:18

When I saw it last, the webpack.config.js was hidden in some node module, I think

pesterhazy13:05:39

thanks ! 🙂

thheller13:05:08

but after that you are basically on your own. no more create-react-app updates will work

thheller13:05:40

but it copies all the default configs into the config dir

pesterhazy13:05:06

yeah I guess that's sort of to be expected - if you get off the scaffolding, you can't hope that updates will still work

thheller13:05:39

yeah … I think they are going to drop the zero-configuration bit at some point

thheller13:05:57

a little configuration should still be possible without a full eject

pesterhazy13:05:26

creact-react-app seems popular, so we might want to jump on that bandwagon

pesterhazy13:05:50

although a lot of it isn't applicable to cljs (redux, js util libs, ...)

thheller13:05:49

yeah, it is also changing quite rapidly still

thheller13:05:25

but some things they do CLJS just doesn’t need so you’ll always need to work around some stuff I guess

Roman Liutikov13:05:47

@thheller > I think they are going to drop the zero-configuration bit at some point A side note: This wasn’t told in public, but create-react-app is basically a framework.

Roman Liutikov13:05:58

they just don’t promote it as a framework, but looks like keep moving in this direction

thheller13:05:52

frameworks can use some configuration though 😉

thheller13:05:43

not saying that I want access to the full webpack.config.js but adding a tiny adjustment to the ignored in webpack would go a long way

thheller13:05:28

pretty annoying that one little regexp can mess up the whole thing 😛

thheller13:05:09

well I’m working on adding the normal CLJS live-reload so it can work side-by-side with the webpack HMR

thheller13:05:13

seems silly though

Roman Liutikov13:05:12

yeah, I have a feeling that this focus on zero-config without excuses doesn’t lead anywhere

thheller13:05:34

its fine until they have everything figured out

pesterhazy13:05:38

scaffolding is always bitter-sweet

pesterhazy13:05:48

it was the same with rails

pesterhazy13:05:17

it allows you to defer learning about the details, but usually you still have to at some point

thheller13:05:34

yeah I agree … same idea with shadow-cljs .. the defaults should be good enough to get you into a working app with minimal work

thheller13:05:48

worry about the details later

cmal14:05:52

@thheller can shadow-cljs work if I defined some macros in clj/cljc?

thheller14:05:18

it is the normal JVM CLJS compiler under the hood

cmal14:05:34

OK. thanks

pesterhazy14:05:06

If anyone is not aware, http://unpkg.com hosts all files in npm, which is amazing for prototyping

deas14:05:53

I have a dev (`:optimizations :none`) and a devcards build with each one having its own :output-to/`:output-dir`. Both take roughly 2 mins. Now I consider shortcutting. Anyone been there before? Any advice?

qqq16:05:02

:optimizations :none 2 mins seems slow

qqq16:05:14

how many lines of code and what is the machine you're compiling on like ?

jeffmad18:05:07

wow! @thheller impressive

deas19:05:29

@mfikes @qqq It's an 8 core box with 32GB, parallel build already enabled. Little app code, but a ton of libraries. Was considering to use one build for dev and devcards to at least cut things in half. However, it is a bit more tricky than expected due to the way devcards works.

deas19:05:29

@theller "Experimental" ... :thinking_face: ... 2 mins (each) is really terrible. Verbosity seems at max already. Still no clue. Seems I'll have to look real close to figure out what's wrong.

thheller19:05:14

I’d say use shadow-cljs but I’m pretty sure devcards won’t work 😛

deas19:05:10

Still, I think it should be easier to cover dev and devcards compilation in one pass.

jfntn19:05:48

Is there an equivalent of Throwable->map in cljs?

deas19:05:44

@theller Looked at shadown-cljs a few days ago. Sometimes it's not so obvious which route to take with cljs.

thheller19:05:12

@deas yeah I know .. working on the documentation ..

pesterhazy19:05:11

@deas, there's something funky about your setup, and it's hard to tell without seeing the project.clj/build.boot or code

pesterhazy19:05:58

Try bisecting. Start with an empty project. If it's fast, add half your dependencies. Then add stuff bit by bit, noting the build times.

pesterhazy19:05:01

It's tedious but if you can't tell by just looking at the code, it may be a good approach.

qqq19:05:27

@deas : I'm on a weak 8-core + 32GB, and mine hovers between 1sec - 2sec recompile for my optimizations :none; even on :optimizations :adanced, it only takes around 1 min

pesterhazy19:05:31

My guess is that there's something macro-heavy somewhere in your code or dependencies, but it's hard to tell.

qqq19:05:59

spending 2 minutes expanding macros? it better be doing haskell level type checking 🙂

deas19:05:08

@pesterhazy bisecting surely is a good approach. Was hoping to find something even quicker. Like bumping verbosity and being presented with the bottleneck. Or quickly adding profiling to the compiler.

qqq19:05:42

can you paste your build.boot

deas19:05:44

@qqq It's project.clj and I don't have the code in reach right now. :/

pesterhazy19:05:12

@deas, doesn't lein clsbuild once print out the files one by one as it compiles the project?

pesterhazy19:05:25

you should be able to see which ones compile slowly

qqq19:05:43

isn't initial compile supposed to be slow

qqq19:05:02

in my optimizations none compile, first time = 1 min, all incremental recompiles = 1-2 seconds

pesterhazy19:05:50

still, 2min sounds fishy, unless you're compiling hundreds of namespaces

deas19:05:22

@qqq @pesterhazy It's the initial compilation time I am complaining about. And indeed, I feel 2 mins is a bit too much.

qqq19:05:48

@deas: in that case, I don't think it's too bad, my 2K LOC clj project , initial compile time, is 46 seconds

qqq19:05:17

lines of code: 1704 macros: 2 opt none: 43.753 seconds opt advanced: 61.64 seconds 2mins sounds reasonable if yours is more complicated

qqq19:05:47

I have 32GB RAM + vendor_id : AuthenticAMD cpu family : 21 model : 2 model name : AMD FX(tm)-8320 Eight-Core Processor

thheller19:05:51

[:website] Build completed. (192 files, 66 compiled, 0 warnings, 15.62s) fresh build for my work project

thheller19:05:09

dont know how many LOC but probably past 10k

qqq19:05:34

can you share your build.boot ?

thheller19:05:58

its shadow-cljs .. no boot

qqq19:05:24

according to google, you wrote your own build system

thheller19:05:46

still working on the documentation .. that page is a bit outdated 😉

thheller19:05:58

npm install -g shadow-cljs 😉

rauh19:05:16

17k LOC here, non parallel fresh build with :none is exactly 20s. Dependencies are probably killing your performance

rauh19:05:12

In general 1k LOC ~ 1second has been roughly the performance I'm seeing

qqq19:05:23

@thheller : what problem does shadow-* solve ?

qqq19:05:35

@rauh: that may be it, I have a crazy amount of dependencies

thheller19:05:11

@qqq it compiles CLJS with some good configuration presets

qqq19:05:24

that's it? 🙂

qqq19:05:32

I thought it did some crazy speed optimizations or something 🙂

thheller19:05:40

well .. REPL, live-reloading, etc

thheller19:05:11

speed mostly comes from reliable caching and parallel compile by default

thheller19:05:33

also only compiling files you actually use

dnolen19:05:38

@qqq you should also make sure that your Java memory defaults are reasonable - for those machine specs those build times seem unreasonable

qqq19:05:18

@dnolen : this is first build not incremental build // how do I check my java settings ?

deas19:05:25

@rauh Guess you may be right wrt deps. Got quite a lot. Especially due to the fact that I am using react and friends from node modules. @qqq @pesterhazy

thheller19:05:13

@deas ah you are doing :npm-deps? that would explain the 2min

deas19:05:49

@theller Not literally :npm-deps , but doing the same thing technically.

qqq19:05:50

@dnolen: I added a export BOOT_JVM_OPTIONS='-Xmx8g -client' first buid time for opt none is still 19 seconds

qqq19:05:57

oh wow, you just reduced my compile time in half

deas19:05:35

@dnolen JVM memory - good point.

qqq19:05:50

@dnolen: is 20 seconds reasonable for first compile

qqq19:05:54

or should I continue hacking on JVM options ?

dnolen20:05:55

@qqq 20 seconds is reasonable if you have a bunch of deps yes

dnolen20:05:28

I mean I would like it to be faster but we need to spend some time on serial compilation perf

qqq20:05:50

my dependencies are:

[org.clojure/clojure "1.9.0-alpha14"]

                 [com.cognitect/transit-clj "0.8.297"] 
                 [org.clojure/java.jdbc "0.7.0-alpha3"]
                 [org.postgresql/postgresql "9.4.1212.jre7"]
                 [ring/ring-core "1.6.0-RC1"]
                 [ring/ring-jetty-adapter "1.6.0-RC1"]
                 [cider/cider-nrepl "0.15.0-SNAPSHOT"]
                 [org.clojure/core.match "0.3.0-alpha4"]
                 [garden "1.3.2"]
                 [binaryage/oops "0.5.2"]

                 [org.martinklepsch/boot-garden "1.3.2-0"]


                 [org.clojure/clojurescript "1.9.473"]
                 [org.clojure/core.async "0.3.441"]
                 [org.clojure/core.match "0.3.0-alpha4"]

                 ;; client debug
                 [binaryage/devtools "0.9.1"]
                 [powerlaces/boot-cljs-devtools "0.2.0" :scope "test"]

                 ;; repl support
                 [com.cemerick/piggieback "0.2.1" :scope "test"]
                 [weasel "0.7.0" :scope "test"]
                 
                 ;; server
                 [ring-middleware-format "0.7.2"]
                 [com.cognitect/transit-cljs "0.8.239"]
                 [org.martinklepsch/boot-garden "1.3.2-0"]

                 [cljs-ajax "0.6.0"]
                 [binaryage/oops "0.5.2"]
                 [reagent "0.6.0"]

                 [org.clojure/core.match "0.3.0-alpha4"] 

                 [ "0.3.2"]


deas20:05:40

Thanks guys. Fairly sure compilation time will be way better tomorrow.

dnolen20:05:13

@qqq yes - seems about right to me given those deps

qqq20:05:56

@dnolen: cool; thanks for pointing out the jvm issue; very helpful

pesterhazy20:05:59

@deas, if you can reduce your compile time, consider blogging about the experience

mobileink20:05:45

i have a half dozen cljs files, all roughly 20 LOC, no external deps. initial compile ~30+ secs, thereafter less than 1 sec. is that normal?

mobileink20:05:04

using boot-cljs.

juhoteperi20:05:57

@mobileink Some part of that 1sec is probably overhead from Boot, and Cljs compiler is like 250-500ms

juhoteperi20:05:14

But yes, sounds normal

dnolen20:05:18

@mobileink :verbose is a good way to see where all the time is being spent

mobileink20:05:24

thanks. 'nother question: how dependent is that on code size? if my files had kbs of source would it make a diff?

dnolen20:05:36

it’s important to separate what statistic the compiler reports and the total user time

dnolen20:05:46

which is a sum of JVM, Clojure, ClojureScript and whatever tooling you may be using

mobileink20:05:07

@dnolen: hahah! never even occurred to me, will try!

dnolen20:05:13

:compiler-stats is also a thing

qqq20:05:43

everyone, one in a line, report your compile time and ask @dnolen if it's normal 🙂

mobileink20:05:18

no! he's got more importsnt things to do!

mobileink20:05:59

send your reports to @qqq, he will manage them!

mobileink20:05:16

@dnolen: cool - a goid thing to add to the readme of a lib that uses cljs! and when i say goid, i mean good, really good!

puzzler20:05:16

Does anyone happen to know (so I don't need to go do the experiment myself) what the size is of a "Hello World" advanced compilation clojurescript file after compiled to javascript?

thheller20:05:59

console.log("Hello World")

thheller20:05:37

well not exactly but “hello world” isn’t very useful

dnolen20:05:47

@puzzler a couple of bytes, but it’s not that interesting 🙂

puzzler20:05:07

And once you start using some Clojure data structures, does it blow up?

juhoteperi20:05:59

Unless I messed up something, 19KB with just (js/console.log "Hello World"), there seems to be some goog stuff that doesn't get eliminated

puzzler20:05:25

I'm thinking about delivering a relatively simple cljs compiled-to-javascript file to an otherwise js project, and I just am trying to get a rough idea as to what that would add to the filesize.

dnolen20:05:21

@puzzler anything non-trivial will add at least ~20K gzipped to the payload

puzzler20:05:41

Perfect. That's exactly what I needed to know. Thanks.

dnolen20:05:50

in the past one marketing point was that ClojureScript output was consistently comparable to using jQuery

juhoteperi20:05:08

Oops, I was compiling with :pseudo-names true, :anon-fn-naming-policy :unmapped, dropping these reduced the output size to 4.7KB

dnolen20:05:41

it could be quite a bit smaller if it wasn’t for the hack to fix Safari Math.imul bug

juhoteperi20:05:06

Using vectors (conj [1] 2), increases the size to 82KB (these numbers are without gzip)

puzzler20:05:35

That's great information. Much appreciated.

juhoteperi20:05:16

(js/console.log "Hello world"): 4.9KB, 2.0KB gzipped, (conj [1] 2): 82KB, 19KB gzipped

puzzler21:05:34

Is it accurate to say that any Clojure code that deals with trying/catching exceptions will have to be explicitly rewritten in Clojurescript since the exception classes do not align?

darwin21:05:45

@puzzler I wrote a macro to avoid reader conditionals inside try-catch in cljc code: https://github.com/binaryage/env-config/blob/master/src/lib/env_config/impl/macros.clj https://github.com/binaryage/env-config/blob/1d9a2409dad78324ed7ab2984d2b40b081173936/src/lib/env_config/impl/coerce.cljc#L64-L68 not sure if it is a good idea, used it just in this tiny lib, where it allowed me to write cljc code without reader conditionals at all

akiroz21:05:59

hello, anyone know if it's possible to get a nREPL server running on a NodeJS self-host CLJS process easily?

akiroz21:05:03

or some kind of bridge that hosts a nREPL server but passes the forms to a remote clojure socket REPL? (since lumo can host socket REPLs)

darwin22:05:11

AFAIK, nREPL server knows nothing about cljs, you would have to introduce piggieback or something similar, and that is quite complex

darwin22:05:45

so you have a nREPL client and want to evaluate cljs forms in your self-host CLJS NodeJS project, right?

qqq22:05:41

@darwin: did you have to do something similar for dirac, or are these two unrelated

darwin22:05:43

@qqq I’m afraid I cannot answer at this moment, I don’t fully understand the consequences of such setup, likely answer is “unrelated”

darwin22:05:10

I believe “self-host” is the hard piece here. Normally nREPL+piggieback expects cljs compiler on “server” side and it evals compiled js code “remotely” in some javascript context.

darwin22:05:50

I guess @akiroz wants all this action to happen in self-host context, maybe @mfikes could answer this.

mfikes22:05:06

Right. There doesn't yet exist nREPL support for self-hosted environments, AFAIK.

tyler23:05:00

I'm having some trouble getting :npm-deps to work with figwheel. I have added :npm-deps {:left-pad "1.1.3"} to my dev compiler options but when I try to require left-pad:

(ns apollo.core
  (:require left-pad))
I get an error that left-pad.cljs cannot be found. I was following this blog post: https://anmonteiro.com/2017/03/requiring-node-js-modules-from-clojurescript-namespaces/ Am I missing something?

tyler23:05:15

More precisely this is the error: No such namespace: left-pad, could not locate left_pad.cljs, left_pad.cljc, or Closure namespace "left-pad"

rgdelato23:05:30

what's your CLJS version? does your project have a node_modules directory in it?