How is jsoo-react pulling-in/bundling the react dependency?

Learning
1

Mechanically, how is this working ?

  1. We start out looking at these two lines: jsoo-react/lib/imports.ml at main · ml-in-barcelona/jsoo-react · GitHub

let react : react = Js_of_ocaml.Js.Unsafe.js_expr {|require(“react”)|}
let react_dom : react_dom =
Js_of_ocaml.Js.Unsafe.js_expr {|require(“react-dom”)|}

I believe the interpretation of these lines is that somewhere in the jsoo output, we are going to have something of the form:

blah = require("react");
blah2 = require("react-dom");

  1. Now my question is: what is actually providing react/react-dom ? Is jsoo (compile step ) or jsoo link resolving these? Where is it resolving it from ?

  2. Now, I see these two lines:
    jsoo-react/example/yarn.lock at main · ml-in-barcelona/jsoo-react · GitHub
    jsoo-react/test/yarn.lock at main · ml-in-barcelona/jsoo-react · GitHub

This brings up even more questions – does jsoo-react also work with React 18 ?

Either way, at what step in which dune/Makefile, is the depenedency being take from yarn.lock and being used to resolve

let react_dom : react_dom =
Js_of_ocaml.Js.Unsafe.js_expr {|require(“react-dom”)|}

?

2

Hey @zeroexcuses, it’s much better if those issues are open in the GH issue tracker.

react and react-dom should be available via npm and even using jsoo you would need webpack or a build tool that embeds those packages for you.

We could link it ourselves but then we would be attached to the React version (and users might want to rely on other versions)

In fact many React 18 API’s aren’t binded in jsoo-react, feel free to open an issue and I will have a look.

Thanks!

3

Ah, this is where jsoo-react/example/webpack.config.js at main · ml-in-barcelona/jsoo-react · GitHub comes in right ?

   entry: '../_build/default/example/src/App.bc.js',
  mode: isProd ? 'production' : 'development',
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
  },

The relevant lines here is that AFTER dune build finishes, it generates App.bc.js .

We then run a post-dune step, where we take the App.bc.js (which requires but does not contain react/react-dom), and then we pull it from node_modules.

Is this what’s going on?

Thanks!

2 Likes
4

Yes, that’s correct. Explained in the README here: GitHub - ml-in-barcelona/jsoo-react: js_of_ocaml bindings for ReactJS. Based on ReasonReact.

This means that you will likely need to use a bundler such as Webpack or rollup.js

You would need to run dune and after that your JS bundler, which is very common in jsoo (at least my experience). The JS bundler knows that your dependencies live under node_modules, often by default.

1 Like
5

In my experience, using Webpack or other js tools to bundle after dune has compiled is not very common in the jsoo ecosystem, my impression is that folks will use browserify or some other tool to include the 3rd party js sources inside the jsoo library.

But when investigating and deciding how to model js dependencies for jsoo-react, we decided to go with the approach where the jsoo library delegates to user the downloading and installation of 3rd party js libraries, because it has some advantages. I wrote some of the details in Create bindings for JS library · Issue #718 · ocsigen/js_of_ocaml · GitHub. The approach we used evolved a bit (from using @@js.global to use js_expr) but the trade-offs listed in the comment remain.

2 Likes