Fork me on GitHub
#clojurescript
<
2017-04-21
>
romain03:04:53

Well, if I require cljs.test in my figwheel REPL and I load my test namespace I can get test results. What are the advantage of using JS environment (apart from autoreload test) ?

thatismatt08:04:23

Hi, can anyone help me with an issue with targeting nodejs? My issue is that the generated cljs.core.load_file calls have the wrong path for required libs from cljsjs. From my initial investigation it looks like perhaps the asset-path isn't obeyed for the nodejs target. Any help appreciated 🙂

cmal12:04:44

Hi,what is the best way to work with svg with cljs and react? Are there any libraries? Thanks.

noisesmith13:04:35

@cmal ymmv but I just put svg tags in my hiccup in reagent and it just worked

noisesmith13:04:44

perhaps you want something with a friendlier UI though

cmal13:04:25

so a tag is just a react component?

cmal13:04:32

Are there any repos so I can learn from them? such as a demo?

qqq14:04:21

it literally "just works"

qqq14:04:30

[:svg .... [:line .... ] [:rect ... ]]

mrchance14:04:30

Pretty simple code

mrchance14:04:03

(The ugly-filter function is not needed in newer versions of reagent 😉 )

qqq15:04:50

say my cljs app needs to load up 20 different fonts + css + js files

qqq15:04:01

is there a way to compress this inot a single *.gz/zip file, have the browser download it, unzip it, and load it ?

spinningtopsofdoom15:04:54

Here's a library for unzipping in the browser https://gildas-lormeau.github.io/zip.js/

timgilbert17:04:25

@qqq: I'd wager the more common solution to this problem is to try to minify and combine them into very few files, and then use gzip compression on the web server when you serve them, which the browser will natively decompress

timgilbert17:04:33

So like ClojureScript can output a single .js file. Possibly you could use webpack to minify/combine the css + fonts

tbaldridge17:04:17

@qqq Once the files are downloaded once they should be cached by the browser, so I don't think you should care about trying to bundle them.

qqq17:04:55

@timgilbert @tbaldridge : I'm trying to minimize load time

tbaldridge17:04:52

Right, but once they visit your site once, the file are cached and they're super fast.

tbaldridge17:04:07

Any gzipping is going to ruin that caching and make load times worse.

timgilbert17:04:25

I'm not entirely convinced that having the js side of things unzip files in memory before they can be used will help you re: load time

tbaldridge17:04:54

Right, and for JS files Closure advanced compilation will get you the most bang for the buck

qqq17:04:07

Okay, I'm optimizing for the wrong thing. Thanks for explaining.

juhoteperi18:04:31

Huh, gzip doesn't prevent caching and it is usually beneficial for text files (html, js, css). Loading gzipped content + decompressing is usually faster then loading uncompressed content.

juhoteperi18:04:54

But this is not something that application usually needs to implement. Nginx or varnish or such can take care of this.

tbaldridge18:04:35

@juhoteperi right, but what was begin discussed was bundling all your css, fonts, images etc into a single tarball and shipping that as one file.

tbaldridge18:04:06

Not only does that not help with caching at all (change one file the whole bundle changes), but I'm not even sure it's possible.

juhoteperi18:04:29

Okay, I missed the context

tbaldridge18:04:58

but yes, I agree, almost all text traffic should be compressed at the HTTP level.

qqq18:04:44

Yeah, the bug in my reasoning was: 1) Loading 20 different files? We're bottlencked by slowest one. Let's bundle it into one zip file. However, the end result of this is that we lose caching, since if one of the 20 file changes, the entire zip changes.

juhoteperi18:04:54

If you have 15 JS files, concat them into 1, If you have 5 css files concat them into 1, then you have 2 files

qqq18:04:18

Im writing a math equation editor. I depend on 20 different LaTeX fonts.

rauh18:04:23

@qqq if you can, make sure you're using HTTP/2. It's a big difference when you request many files. And obviously gz or brotli. Openresty FTW

juhoteperi18:04:25

Though this has the same problem with caching

qqq18:04:26

They're all ttfs. Not sure how to deal with that.

john18:04:05

Download them in the background. Store them in local storage.

juhoteperi18:04:12

Well, probably those fonts don't change often (or ever) so just make sure they have very long http cache max-age so users only load them once. With proper cache options the browser doesn't even need to ask server if the files have been changed.

qqq18:04:37

These files change every time Knuth adds a new digit to the version of TeX.

juhoteperi18:04:09

well, use the version in the url so new version gets loaded each time the version changes

juhoteperi18:04:09

or calculate hash for the files and use that as url, so if it happens that only some of the files change in TeX update, only the changed files need to be loaded

qqq18:04:59

(I was joking about how infrequently TeX fonts update) 🙂

atroche18:04:11

hello! I’m trying to consume a npm dependency using :npm-deps and ClojureScript 1.9.521. When I run this:

(b/build "src"
         {:optimizations :simple
          :target :nodejs
          :npm-deps {"bcrypt-pbkdf" "1.0.1"}
          :infer-externs true
          :output-to "main.js"})
I get:
Caused by: java.lang.RuntimeException: INTERNAL COMPILER ERROR.
Please report this problem.

null
  Node(NAME BCRYPT_HASHSIZE): /Users/alistair/Code/clj/alphabay/node_modules/bcrypt-pbkdf/index.js:469:4
    BCRYPT_HASHSIZE = 32;
  Parent(VAR): /Users/alistair/Code/clj/alphabay/node_modules/bcrypt-pbkdf/index.js:468:0
var BCRYPT_BLOCKS = 8,

atroche18:04:56

even though the same process works fine for e.g. left-pad (I’ve been following along with https://anmonteiro.com/2017/03/requiring-node-js-modules-from-clojurescript-namespaces/)

atroche18:04:25

and the reason I care about this bcrypt library is because “request” depends on it 🙂

atroche18:04:19

interestingly, the file that’s giving errors compiles fine in the web interface to the closure compiler: http://bit.ly/2p43aXJ

juhoteperi18:04:07

@atroche The problem could be caused by module processing pass, which is not used if you pass the file directly to Closure

atroche18:04:00

aha, and I can pass the file to Closure using :foreign-libs ?

juhoteperi18:04:50

Yeah, something like :foreign-libs [{:file "src" :module-type :commonjs}] and create test JS file in the folder

atroche18:04:27

cheers! I wonder why it breaks the module processing pass? does that happen a lot?

anmonteiro18:04:40

@atroche still some rough edges in Closure

atroche18:04:14

gotcha. is there any use in my trying to get the cljs compiler to use a newer version of closure? or is that playing with fire?

juhoteperi18:04:59

Cljs compiler already uses the latest Closure release

atroche18:04:34

oh, interesting, what’s with google-closure-library vs closure-compiler-unshaded? the former at least seems to be on an older version?

anmonteiro18:04:04

closure library is just a JS core library

anmonteiro18:04:24

closure compiler is what actually compiles & optimizes JS

anmonteiro18:04:31

(in the JVM)

atroche18:04:04

cool, thanks for being patient

anmonteiro18:04:48

np, happy to help

anmonteiro18:04:05

@atroche you can try building Closure from master too

anmonteiro18:04:41

though I recommend keeping whatever CLJS ships with

juhoteperi18:04:08

Seems to be caused somehow by deffing two vars and exposing those on module.exports:

❯ cat foozz/bar.js 
var BCRYPT_BLOCKS = 8,
    BCRYPT_HASHSIZE = 32;

module.exports = {
      BLOCKS: BCRYPT_BLOCKS,
      HASHSIZE: BCRYPT_HASHSIZE,
};

~/tmp master*
❯ java -jar closure-compiler-v20170409.jar --js foozz/bar.js --process_common_js_modules  

juhoteperi18:04:55

if both vars have their own var it works

juhoteperi18:04:32

I'll report this to closure-compiler repo

atroche18:04:08

awesome, thanks, I was just looking up the command line arguments for the compiler

atroche18:04:31

cheers mate

atroche18:04:28

if I fork that bcrypt library, and specify it as an npm-dep, can I make it so that my other dep (“request”) uses mine instead? kinda like :exclusions?