Bonsai + xmlHttpRequest example?

Learning
1

Short question:

Is there example code anywhere for getting bonsai to work with xmlHttpRequest ?

Detailed question:

  1. I’ve checked the github repo:
rg -i xmlhttp -l
bindings/dygraph/dist/dygraph.js
bindings/dygraph/dist/dygraph.min.js

not much there.

  1. On my own, I have code that does xmlHttpRequest, with a return type of Bar.t Deferred.t (Deferred here referring to janestreet/async).

  2. It is not clear to me how to integrate this Deferred.t with my existing Bonsai app.

Either of the following would be helpful:

4a. Example of bonsai + xmlhttprequest

4b. Example of bonsai + Bar.t Deferred.t

Thanks!

1 Like
2

I do not know if this is the “right” way to do this, or if there are nasty yet to run into side effects, but it appears it is okay (experimentally, n = 1) to start a bonsai app inside a Deferred.t

As a result, we can start the whole process with:

Async_js.init ();
don't_wait_for ( blah );

where blah is a Deferred.t that also starts the bonsai app.

Aside: TIL ' is a valid char in a symbol name in OCaml.

3

Here is a simple example of converting sync and async (deferred) function to Effect. (It is using bonsai v0.15.1). It’s similar to the examples included in the github repo, if you need to see more.

open! Core
open! Bonsai_web

let uppercase s =
  let open Async_kernel in
  let%map () = after (Time_ns.Span.of_sec 0.5) in
  String.uppercase s

(* Effect of deffered. *)
let uppercase_e : string -> string Effect.t =
  Bonsai_web.Effect.of_deferred_fun uppercase

let alert : string -> unit =
 fun s -> Js_of_ocaml.Dom_html.window##alert (Js_of_ocaml.Js.string s)

(* Effect of sync *)
let alert_e : string -> unit Effect.t = Effect.of_sync_fun alert

let on_click : _ -> unit Effect.t =
 fun _ ->
  let%bind.Effect s = uppercase_e "hello, world!" in
  alert_e s

let component : Vdom.Node.t Computation.t =
  Bonsai.const
    (Vdom.Node.button
       ~attr:(Vdom.Attr.on_click on_click)
       [Vdom.Node.text "Click me!"] )

let (_ : _ Start.Handle.t) =
  Start.start Start.Result_spec.just_the_view ~bind_to_element_with_id:"app"
    component

Dune file:

(executable
 (names effect_of)
 (modes js)
 (libraries async_kernel bonsai.web)
 (preprocess
  (pps js_of_ocaml-ppx ppx_jane)))

Html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello, Effects!</title>
    <script defer src="effect_of.bc.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Dune command:

dune build {effect_of.bc.js,effect_of.html}
4

@zeroexcuses If you need to use Lwt instead of Async due to dependencies, it’s easy to define another version of Effect.of_deferred_fun for Lwt, as done here: nittany_market/effect_lwt.ml at main · askvortsov1/nittany_market · GitHub

1 Like