Cannot build bonsai from tip of tree

[sidkshatriya]

I am unable to build bonsai from tip of tree.

$ mkdir bonsai-switch; cd bonsai-switch
$ opam switch create . 4.11.2
$ opam repo add janestreet-bleeding-external https://github.com/janestreet/opam-repository.git#external-packages
$ opam repo add janestreet-bleeding https://ocaml.janestreet.com/opam-repository
$ opam update
$ opam install bonsai

(etc. etc)

#=== ERROR while compiling cohttp-async.4.0.0 =================================#
# context     2.1.0 | linux/x86_64 | ocaml-base-compiler.4.11.2 | https://opam.ocaml.org#f2f58c72
# path        ~/bonsai-switch/_opam/.opam-switch/build/cohttp-async.4.0.0
# command     ~/.opam/opam-init/hooks/sandbox.sh build dune build -p cohttp-async -j 7
# exit-code   1                                                   
# env-file    ~/.opam/log/cohttp-async-1115039-13ff06.env       
# output-file ~/.opam/log/cohttp-async-1115039-13ff06.out       
### output ###                                                    
# Error: This expression has type [ `Use_Command_unix ]         
# [...]                                                                                                                             
# (cd _build/default && /home/abcxyz/bonsai-switch/_opam/bin/ocamlc.opt -w -40 -g -bin-annot -I cohttp-async/bin/.cohttp_curl_async.eo
bjs/byte -I /home/abcxyz/bonsai-switch/_opam/lib/angstrom -I /home/abcxyz/bonsai-switch/_opam/lib/astring -I /home/abcxyz/bonsai-switch/_o
pam/lib/async -I /home/abcxyz/bonsai-switch/_opam/lib/async/async_command -I /home/abcxyz/bonsai-switch/_opam/lib/async/async_quickcheck
 [...]
# File "cohttp-async/bin/cohttp_server_async.ml", line 129, characters 2-5:
# 129 |   run
#         ^^^
# Alert deprecated: Async_command.run
# [since 2021-03] Use [Command_unix]
# File "cohttp-async/bin/cohttp_server_async.ml", line 129, characters 2-5:
# 129 |   run
#         ^^^
# Error: This expression has type [ `Use_Command_unix ]
#        but an expression was expected of type 'a -> 'b

[TyOverby]

Building bonsai from tip of tree requires building all its dependent packages from their tip-of-tree as well. This is quite hard to do because there are patches that need to be applied to some packages.

I recently spent the time to do this all correctly, and have published a docker container with a development environment all set up. You can find the package here https://github.com/users/TyOverby/packages/container/package/bonsai and the repository that I used to build the project here: https://github.com/tyoverby/bonsai-docker

[sidkshatriya]

@TyOverby Thanks for the detailed approach (with the dev container above). I was able to get things working in an alternate way by using the bleeding edge janestreet repos (is this the same as tip-of-tree?).

See https://discuss.ocaml.org/t/compiling-bonsai/7107/19?u=sid for details on how I was able to do it.

The current issue that I'm facing is that I'm unable to compile certain bonsai examples because they refer to libraries that don't seem to exist in the bleeding edge repo (e.g. ppx_css). I'm able to compile simpler examples just fine though.

I'm also noticing the minified bc.js above 1.3+ MB -- I built using dune build --profile release abcxyz.bc.js. Is there a way to bring things down further?

[TyOverby]

Oh neat! In the past I ran into issues with external dependencies which in turn depended on Jane street dependencies.

if you were able to do it without much trouble, I’ll give it a shot too!

[TyOverby]

As for the 1.5mb source file, make sure that you’ve configured js_of_ocaml to not inline the source map

[sidkshatriya]

Sorry I'm totally new to jsoo -- probably need to to dig into the documentation to understand all the knobs.

Currently I'm simply doing something like dune build --profile release _build/default/examples/counters/bin/main.bc.js -- not sure where I would need to add those settings. Will appreciate any pointers / hints on what I would need to do.

[TyOverby]

https://dune.readthedocs.io/en/stable/dune-files.html#js-of-ocaml

^ that will tell you how to set jsoo flags

and according to this https://github.com/ocsigen/js_of_ocaml/blob/23b25ca53bd752fe43e956fb59f0630e3fa7b081/compiler/bin-js_of_ocaml/cmd_arg.ml#L97

Sourcemaps can be disabled with “—no-sourcemap”

[sidkshatriya]

Thank you -- this was very useful to me! You tips definitely saved me a lot of trial and error time.

I was playing around with the counters bonsai example. I made changes to the examples/counters/bin/dune to add the js_of_ocaml stanza. FYI information:

main.bc.js counters compiled js size 999K source maps are NOT inline, --profile release (minified output) 6.9M source maps are inline, --profile release (minified output)

So it seems like ~1 M is the minimum size of a small jsoo bonsai program??

[TyOverby]

Huh, that seems way bigger than I’m used to seeing. That said, I don’t really pay much attention to dependency size, so it could have actually gotten that big :( On Monday, I’ll try to see if we’re passing any more options.

[hhugo]

Last time I tried, the counter example was 107k. See https://discuss.ocaml.org/t/jsoo-production-use-and-user-facing-applications-questions/7266/29?u=hhugo.

What change have you done to the dune file ? A common mistake is to add a ppx lib to the library section.

[sidkshatriya]

This is what the current dune file in examples/counters/bin looks like

(executables (names main) (libraries bonsai_web bonsai_web_counters_example)
 (preprocess (pps ppx_jane)))

It is these defaults that give a 999K size when running with build --release. We can add a js_of_ocaml stanza here within (executables ...) and play around with the output. However, I'm very new to jsoo and would need guidance on the exact flags needed to bring this down from 999K to ~100K which was mentioned above.

[sidkshatriya]

P.S. I looked at the thread mentioned by @hhugo above. I think we're both referring to a different "counters" example. I'm referring to the bonsai counters example while the discuss.ocaml.org thread is talking about a different one (possibly https://github.com/LexiFi/ocaml-vdom/tree/master/examples/counters ?)

[sidkshatriya]

Ok so I investigated the code size of ocaml-vdom counters (different from bonsai counters)

When compiling the examples/counter in https://github.com/LexiFi/ocaml-vdom.git I indeed get something in the range of 100K js -- in line with @hhugo 's results.

Steps to repeat:

• Setup the project with the usual switch creation and opam install --deps-only
• Disable fatal warnings in dune
• make all
• dune build --profile release _build/default/examples/counters/counters.js

Results: 107K counters.js -- using dune build --profile release ... 112K counters.js -- using dune build --profile release ... with a setting of (js_of_ocaml (flags --no-inline)) in the examples/counters/dune file

Interestingly no-inline increases the size.

So the general question remain: why is the bonsai counters example almost 1MB (when compiled as dune build --release ...). Bonsai could pulling in a lot of bonsai specific stuff making the JS quite heavy...

P.S. I am aware that ocaml-vdom and bonsai are totally separate projects -- they simply use jsoo as backend. This exercise is just a point of comparison. The main objective of mine is to see if I can get bonsai JS size down.

[sidkshatriya]

@TyOverby any pointers regarding reducing js size in Bonsai would be very useful! Thanks again for all your help so far.

[TyOverby]

I can confirm that I'm getting similarly sized bundles for the counters demo. It's definitely bigger than I expect; I might play around with sourcemap parsing to see if I can find any culprits

[TyOverby]

I've built a "bonsai example" repo here that has much simpler build instructions (read the .devcontainer/DOCKERFILE image in that repo)