Fork me on GitHub
#clojurescript
<
2019-02-25
>
Vesa Norilo09:02:31

Dear cljs folks! I was wondering how the js interop plays with minification. I believe literal #js{} syntax maps directly to js so that strings will not be minified and keywords will. I was wondering how to specify this behavior with aget, ie. whether (aget foo bar) maps to foo[bar] or foo.bar. Thanks for any pointers!

scknkkrer09:02:48

Guys, do you know how to find Clojurescript React and React-Native template to buy ?

darwin10:02:54

@vnorilo_clojure aget is not that flexible (it uses string access) and should be used only for js array access, the only library I know of which allows you to specify the behaviour at each call site is https://github.com/appliedsciencestudio/js-interop

darwin10:02:04

it is a pretty new library, it still might have some rough edges

borkdude11:02:17

It looks very interesting. I noticed that cljs-oops includes cuerdas which has quite an impact on the compiled JS size. As far as I can tell js-interop should also help with this.

darwin11:02:20

@U04V15CAJ valid point, working on a fix

mhuebert15:02:30

@vnorilo_clojure also note that keys in a literal #js{} object are not minified

(let [o #js {:yyyyyy  10
             "zzzzzz" 20}]
  (is (= (j/get o .-yyyyyy) (if advanced? nil 10)))
  (is (= (j/get o :yyyyyy) 10))
  (is (= (j/get o .-zzzzzz) (if advanced? nil 20)))
  (is (= (j/get o :zzzzzz) 20)))

Vesa Norilo16:02:07

thank you very much!

🙂 1
pserrano14:02:37

Have anyone attempted using reakit with clojurescript? https://reakit.io/

henrik14:02:57

No, but if they expose React components, it's relatively straightforward to use them with Reagent.

arwakode17:02:05

Hello, for users of shadow-cljs + reagent, I am working on a long form and was wondering if there was a way to preserve scroll position of the web page on live reload?

thheller17:02:51

you can probably capture the scroll position in a :dev/before-load hook and restore it in a :dev/after-load hook? https://shadow-cljs.github.io/docs/UsersGuide.html#_lifecycle_hooks

valtteri17:02:12

I’m trying to reduce bundle size. I’ve shifted all bloated js-libs (OpenLayers, MaterialUI…) to webpack from cljsjs to get DCE and my foreign libs bundle is now 1.6MB without gzip. Whole bundle with remaining deps and my own code is 3.3MB in total with advanced optimizations, including the webpack bundle. I wonder what could be causing 1.7MB difference here. I’ve 20K LoC in cljc and cljs files.

valtteri17:02:23

I’ve been trying to narrow down what is still causing the cljsbuild size to explode. Any ideas? 😮

thheller17:02:25

my guess would be that some foreign-libs are still being included

valtteri17:02:08

I also think there’s something that shouldn’t but how to debug?

thheller17:02:55

manual guessing by looking at the output file? or :verbose true output maybe?

thheller17:02:26

shadow-cljs has rather detailed build reports but they don't work with cljsbuild builds https://shadow-cljs.github.io/docs/UsersGuide.html#_build_report

valtteri17:02:32

I tried with :verbose true and I saw something suspicious. It’s giving output about deps that belong to re-frame10x which should be there only in dev profile

thheller17:02:14

"cljsjs.react-autosugges" this looks like a typo? that may end up including the foreign-lib instead of the webpack one?

valtteri17:02:04

Oh, nice catch!

valtteri17:02:47

Didn’t affect the bundle size though

thheller18:02:02

do you have this running somewhere?

valtteri18:02:42

This current version no but I can deploy it to a test server

valtteri18:02:56

@thheller https://lipas-dev.cc.jyu.fi and thank you already for being so helpful!

valtteri18:02:07

Don’t mind the self-signed SSL-cert. 😛 … and the Finnish language..

thheller18:02:01

there are definitely some foreign-libs left that weren't part of the webpack build

thheller18:02:14

hard to tell what though

valtteri18:02:32

I’m a bit frustrated since I started this morning with 1023KB bundle (gzipped) and currently I’m at 992KB 😂

valtteri18:02:10

Yeah, my best guesses so far are that there’s either a) something transitively getting pulled to the cljsbuild or b) something leaking from dev-deps to prod build.

valtteri18:02:50

I think I’ll sleep on it and take another look tomorrow. Thanks one more time for support @thheller

thheller18:02:54

/**
 * @license
 * Latitude/longitude spherical geodesy formulae taken from
 * 
 * Licensed under CC-BY-3.0.
 */

thheller18:02:12

maybe thats a clue? that looks like a foreign-lib include that wasn't processed by webpack

valtteri18:02:24

Hmmm could be

valtteri18:02:48

Meh, it’s not proj4, I tried dumping it from the bundle and required it from CDN but didn’t help.

thheller18:02:52

you can identify the start of the generated CLJS :advanced output via

;(function(){
var e,goog=goog||{}

thheller18:02:58

everything before that is foreign libs

thheller18:02:30

it is still quite a lot of CLJS code though. 1.7mb is quite a lot

valtteri18:02:16

It feels massive to me

thheller18:02:34

you can try https://www.npmjs.com/package/source-map-explorer. it will just show a big blank area for the foreign-libs

thheller18:02:45

it looks like there is a huge map of strings (maybe translations?) that alone is 200kb

valtteri18:02:51

Yeah translations are there and there’s also one 150KB file with data

valtteri18:02:16

But not like 1.7Mb

valtteri18:02:02

Or… Actually

du -shk src/
1804	src

valtteri18:02:07

Do I have that much text in the project :thinking_face:

thheller18:02:48

probably want to exclude src/js

thheller18:02:01

the generated externs are pretty large

thheller18:02:20

probably should look into :modules as well

valtteri18:02:12

➜  src git:(dev) ✗ du -shk clj cljc cljs
156	clj
464	cljc
664	cljs

valtteri18:02:58

Do I have too high expectations for :advanced optimizations?

valtteri18:02:20

It can’t do anything for strings and my code is full of those

valtteri18:02:44

@thheller what do you mean by looking into :modules

thheller18:02:10

the problem with storing strings in large maps is that the code to build those maps add a bunch of overhead

thheller18:02:39

if you load the strings at runtime via XHR request to fetch a raw .edn file it will be a whole lot smaller

thheller18:02:09

or if you must have them in the code keep them as a pure #js object. that will also be substantially smaller

cpdean18:02:16

I'm on ubuntu 18.04 and having some trouble getting figwheel up and running. I have not done other clojure/clojurescript development in the past so this might be a bigger issue with my environment in general. After starting a project with lein new re-frame test-app I get the following error when i try to start up the figwheel development environment

lein figwheel dev
Figwheel: Cutting some fruit, just a sec ...
Exception in thread "main" java.lang.RuntimeException: Reader tag must be a symbol, compiling:(/tmp/form-init8827327389273899324.clj:1:1457)
	at clojure.lang.Compiler.load(Compiler.java:7386)
	at clojure.lang.Compiler.loadFile(Compiler.java:7317)
...
	at clojure.lang.Var.applyTo(Var.java:700)
	at clojure.main.main(main.java:37)
Caused by: java.lang.RuntimeException: Reader tag must be a symbol
	at clojure.lang.LispReader$CtorReader.invoke(LispReader.java:1221)
	at clojure.lang.LispReader$DispatchReader.invoke(LispReader.java:684)
	at clojure.lang.LispReader.read(LispReader.java:263)
jdk 10, i think?
0 - ❯❯❯ java -version
openjdk version "10.0.2" 2018-07-17
OpenJDK Runtime Environment (build 10.0.2+13-Ubuntu-1ubuntu0.18.04.4)
OpenJDK 64-Bit Server VM (build 10.0.2+13-Ubuntu-1ubuntu0.18.04.4, mixed mode)
what should I look into for how to fix this?

thheller18:02:23

:modules as in code splitting. delay loading code until required.

valtteri18:02:09

Ahh, ok. The data blobs are in code because they’re needed all around the backend/frontend and the data almost never changes. But maybe it would be a good idea to load them separately.

valtteri19:02:05

Thanks one more time @thheller! You were super helpful. I’ll try the source-map thingie tomorrow and after that I probably have to start thinking about better place for my data than source code 😉

cpdean19:02:19

i figured out my issue -- something about the lein template is out of date and was fixed by using the lein-ancient plugin updating some stuff https://github.com/Day8/re-frame-template/issues/84

idiomancy19:02:38

hey, does anybody here know how to math?

idiomancy19:02:57

how do I javascript this into a number "1e+21"?

Braden Shepherdson20:02:33

+"1e21" suffices if you're working in Javascript.

Braden Shepherdson20:02:00

see also Number.parseInt.

idiomancy20:02:21

I'm only getting 1 from trying to parse that

Braden Shepherdson20:02:28

I'm sure cljs.core has a function for this, but I don't know what that is.

Braden Shepherdson20:02:56

oh, right: parseFloat. the eX syntax is only for doubles.

idiomancy20:02:16

oh how about that. also some friend of mine just informed me that "1e+21" has nothing to do with base e

Lisa21:02:48

Hi. Can someone help me with connecting cider to re-natal on android? I get a timeout when i try cider-jack-in-clj on a hello world app

devo23:02:28

Might try posting in #re-natal as well. Don't have much experience in re-natal so wouldn't be much help without taking a bit of time to dig into it.

cichli23:02:50

Could you share the contents of the *nrepl-server ... buffer after it fails?