v0.18~preview.130.26+1192

Author: public-release

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2024 Jane Street Group, LLC <opensource-contacts@janestreet.com>
+Copyright (c) 2024--2025 Jane Street Group, LLC <opensource-contacts@janestreet.com>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

accordion/main.ml

@@ -83,5 +83,5 @@ let component graph =
 
 let () =
   Async_js.init ();
-  Bonsai_web.Start.start component
+  Bonsai_web.Start.start component ~enable_bonsai_telemetry:Enabled
 ;;

animation/main.ml

@@ -67,4 +67,4 @@ let component graph =
     ]
 ;;
 
-let () = Bonsai_web.Start.start component
+let () = Bonsai_web.Start.start component ~enable_bonsai_telemetry:Enabled

beforeunload/main.ml

@@ -11,4 +11,4 @@ let component _graph =
        [ Vdom.Node.text "attempting to leave this page will show a warning" ])
 ;;
 
-let () = Bonsai_web.Start.start component
+let () = Bonsai_web.Start.start component ~enable_bonsai_telemetry:Enabled

bonsai_examples.opam

@@ -27,9 +27,9 @@ depends: [
   "virtual_dom"
   "cohttp"              {>= "2.5.6"}
   "cohttp-async"        {>= "2.5.7" & < "3.0.0" | >= "5.1.1" & < "6.0.0"}
-  "dune"                {>= "3.11.0"}
-  "js_of_ocaml"         {>= "5.1.1" & < "5.7.0"}
-  "js_of_ocaml-ppx"     {>= "5.1.1" & < "5.7.0"}
+  "dune"                {>= "3.17.0"}
+  "js_of_ocaml"         {>= "6.0.0"}
+  "js_of_ocaml-ppx"     {>= "6.0.0"}
   "uri"                 {>= "3.0.0"}
 ]
 available: arch != "arm32" & arch != "x86_32"

bonsai_guide_code/best_practices_examples.ml

@@ -8,13 +8,13 @@ let compute_magic_number a b = a * b
 let a_typical_function (input : int Bonsai.t) graph =
   (* Declare your state *)
   let num_input_changes, incr_num_input_changes =
-    Bonsai.state_machine0
+    Bonsai.state_machine
       ~default_model:0
       ~apply_action:(fun _ model () -> model + 1)
       graph
   in
   let (logs : string Bonsai.t), (write_log_line : (string -> unit Effect.t) Bonsai.t) =
-    Bonsai.state_machine0
+    Bonsai.state_machine
       ~default_model:""
       ~apply_action:(fun _ logs new_log_line ->
         match logs with

bonsai_guide_code/bonsai_types.ml

@@ -3,12 +3,14 @@ module Bonsai = Bonsai.Cont
 
 let assoc = Bonsai.assoc
 
-let state_machine0 ~default_model ~apply_action graph =
-  Bonsai.state_machine0 ~default_model ~apply_action graph
+let state_machine ~default_model ~apply_action graph =
+  Bonsai.state_machine ~default_model ~apply_action graph
 ;;
 
 let peek = Bonsai.peek
 
 module Url_var = Bonsai_web_ui_url_var
 
 let mirror = Bonsai_extra.mirror
+
+module Apply_action_context = Bonsai.Apply_action_context

bonsai_guide_code/bonsai_types.mli

@@ -10,15 +10,15 @@ module Url_var := Bonsai_web_ui_url_var
 (* $MDX part-begin=assoc *)
 val assoc
   :  ?here:Stdlib.Lexing.position
-  -> ('k, 'cmp) Bonsai.comparator
+  -> ('k, 'cmp) Comparator.Module.t
   -> ('k, 'v, 'cmp) Map.t Bonsai.t
   -> f:('k Bonsai.t -> 'v Bonsai.t -> Bonsai.graph -> 'result Bonsai.t)
   -> Bonsai.graph
   -> ('k, 'result, 'cmp) Map.t Bonsai.t
 (* $MDX part-end *)
 
-(* $MDX part-begin=state_machine0 *)
-val state_machine0
+(* $MDX part-begin=state_machine *)
+val state_machine
   :  default_model:'model
   -> apply_action:
        (('action, unit) Bonsai.Apply_action_context.t -> 'model -> 'action -> 'model)
@@ -80,32 +80,32 @@ module Url_var : sig
 end
 
 (* $MDX part-begin=mirror *)
-
-(** [mirror] is used to reflect state back and forth between locations.
-    Frequently this will be used to back up a components model in a more
-    persistent form of storage, such as the URL, or local-storage.
-
-    The gist of this combinator is that if you have two states that you'd
-    like to be synchronized, you can feed the "current value" and "set
-    value" functions for both states into [mirror] and they'll
-    automatically be kept up to date. Either of these can be backed by any
-    kind of structure, but there are some important differences in their
-    symmetry.
-
-    When the component is first loaded, [store] has priority, so if the
-    values are different, [store] wins, and [interactive] has its value
-    "set". From that point on, if either incoming value changes, the
-    opposite setter is called. In the case that both [store] and
-    [interactive] change at the same time, the tie is broken in favor of
-    [interactive], and [store_set] is called. *)
 val mirror
   :  ?sexp_of_model:('m -> Sexp.t)
   -> equal:('m -> 'm -> bool)
   -> store_set:('m -> unit Effect.t) Bonsai.t
   -> store_value:'m Bonsai.t
   -> interactive_set:('m -> unit Effect.t) Bonsai.t
   -> interactive_value:'m Bonsai.t
-  -> unit
   -> Bonsai.graph
-  -> unit Bonsai.t
+  -> unit
+(* $MDX part-end *)
+
+(* $MDX part-begin=apply_action_context *)
+module Apply_action_context : sig
+  (** A value with the type [('action, 'response) Apply_action_context.t] is provided to
+      all state-machine's [apply_action] functions. It can be used to do a variety of
+      things that are only legal inside of [apply_action]:
+      1. Access the application time source directly. This is most likely useful to read
+         the current time or sleep for some time span
+      2. "inject" a value corresponding to the state-machine's action type into an effect
+         that can be scheduled.
+      3. Directly schedule effects. *)
+
+  type ('action, 'response) t
+
+  val inject : ('action, 'response) t -> 'action -> 'response Effect.t
+  val schedule_event : _ t -> unit Effect.t -> unit
+  val time_source : _ t -> Bonsai.Time_source.t
+end
 (* $MDX part-end *)

bonsai_guide_code/control_flow_examples.ml

@@ -10,7 +10,7 @@ let maybe_show_naive show graph =
   let counter = counter ~step:(return 1) graph in
   let%arr counter and show in
   match show with
-  | false -> Vdom.Node.none_deprecated [@alert "-deprecated"]
+  | false -> Vdom.Node.none
   | true -> counter
 ;;
 
@@ -34,7 +34,7 @@ let () = Util.run (show_control maybe_show_naive) ~id:"maybe_show_naive"
 let maybe_show show graph =
   let counter = counter ~step:(return 1) graph in
   match%sub show with
-  | false -> Bonsai.return (Vdom.Node.none_deprecated [@alert "-deprecated"])
+  | false -> Bonsai.return Vdom.Node.none
   | true -> counter
 ;;
 
@@ -56,7 +56,7 @@ let maybe_show_2 show graph =
   match%sub show with
   | `Count_by_1 -> counter ~step:(return 1) graph
   | `Count_by_2 -> counter ~step:(return 2) graph
-  | `No -> Bonsai.return (Vdom.Node.none_deprecated [@alert "-deprecated"])
+  | `No -> Bonsai.return Vdom.Node.none
 ;;
 
 (* $MDX part-end *)
@@ -84,7 +84,7 @@ let () = Util.run (show_control_2 maybe_show_2) ~id:"maybe_show_2"
 let maybe_show_var show graph =
   match%sub show with
   | `Count_by step -> counter ~step graph
-  | `No -> Bonsai.return (Vdom.Node.none_deprecated [@alert "-deprecated"])
+  | `No -> Bonsai.return Vdom.Node.none
 ;;
 
 (* $MDX part-end *)
@@ -94,7 +94,7 @@ let maybe_show_var_guard show graph =
   | `Count_by step when Int.equal step 1 -> counter ~step graph
   | `Count_by step when Int.equal step 4 -> counter ~step graph
   | `Count_by step -> counter ~step graph
-  | `No -> Bonsai.return (Vdom.Node.none_deprecated [@alert "-deprecated"])
+  | `No -> Bonsai.return Vdom.Node.none
 ;;
 
 (* $MDX part-end *)
@@ -108,7 +108,7 @@ let maybe_show_var_scope_model show graph =
       ~on:step
       ~for_:(fun graph -> counter ~step graph)
       graph
-  | `No -> Bonsai.return (Vdom.Node.none_deprecated [@alert "-deprecated"])
+  | `No -> Bonsai.return Vdom.Node.none
 ;;
 
 (* $MDX part-end *)
@@ -150,7 +150,7 @@ let maybe_show_dynamic_count show graph =
   match%sub show with
   | `Count_by_1 -> counter ~step:(return 1) graph
   | `Count_by_2 -> counter ~step:(return 2) graph
-  | `No -> Bonsai.return (Vdom.Node.none_deprecated [@alert "-deprecated"])
+  | `No -> Bonsai.return Vdom.Node.none
 ;;
 
 (* $MDX part-end *)
@@ -183,6 +183,7 @@ let multiple_counters (input : unit Int.Map.t Bonsai.t) graph =
       input
       ~f:(fun key (_ : unit Bonsai.t) graph ->
         let%arr key
+        (* [counter_ui] is like [counter] but only returns the view. *)
         and counter = State_examples.counter_ui graph in
         Vdom.Node.tr
           [ Vdom.Node.td [ Vdom.Node.textf "counter #%d:" key ]

bonsai_guide_code/css_examples.ml

@@ -6,12 +6,11 @@ open! Bonsai.Let_syntax
 let view =
   Vdom.Node.div
     ~attrs:
-      [ [%css
-          {|
-            background-color: tomato;
-            min-width: 2rem;
-            min-height: 2rem;
-          |}]
+      [ {%css|
+          background-color: tomato;
+          min-width: 2rem;
+          min-height: 2rem;
+        |}
       ]
     [ Vdom.Node.text "Very Red Background" ]
 ;;
@@ -23,7 +22,7 @@ let () = Util.run_vdom view ~id:"ppx_css_inline"
 (* $MDX part-begin=ppx_css_inline_interpol *)
 let box_with_border (color : Css_gen.Color.t) (width : Css_gen.Length.t) =
   Vdom.Node.div
-    ~attrs:[ [%css {|border: %{width#Css_gen.Length} solid %{color#Css_gen.Color};|}] ]
+    ~attrs:[ {%css|border: %{width#Css_gen.Length} solid %{color#Css_gen.Color};|} ]
     [ Vdom.Node.text "Nice Borders!" ]
 ;;
 
@@ -38,21 +37,20 @@ let hoverable_blocks =
   let block =
     Vdom.Node.div
       ~attrs:
-        [ [%css
-            {|
-              background-color: green;
-              min-width: 2rem;
-              min-height: 2rem;
-              border: 1px solid black;
-
-              &:hover {
-                background-color: tomato;
-              }
-
-              &:not(:nth-child(odd)):hover {
-                background-color: purple;
-              }
-            |}]
+        [ {%css|
+            background-color: green;
+            min-width: 2rem;
+            min-height: 2rem;
+            border: 1px solid black;
+
+            &:hover {
+              background-color: tomato;
+            }
+
+            &:not(:nth-child(odd)):hover {
+              background-color: purple;
+            }
+          |}
         ]
       [ Vdom.Node.text "Hoverable" ]
   in
@@ -66,9 +64,9 @@ let () = Util.run_vdom hoverable_blocks ~id:"ppx_css_inline_nesting"
 (* $MDX part-begin=ppx_css_inline_multiple *)
 let multiple_ppx_css =
   Vdom.Node.div
-    ~attrs:[ [%css {|color: red;|}] ]
+    ~attrs:[ {%css|color: red;|} ]
     [ Vdom.Node.text "Foo"
-    ; Vdom.Node.div ~attrs:[ [%css {|color: blue;|}] ] [ Vdom.Node.text "Bar" ]
+    ; Vdom.Node.div ~attrs:[ {%css|color: blue;|} ] [ Vdom.Node.text "Bar" ]
     ]
 ;;
 
@@ -98,7 +96,7 @@ module Style =
           font-size: 20px;
         }
       }
-      |}]
+    |}]
 
 let stylesheet_demo = Vdom.Node.div ~attrs:[ Style.container ] [ Vdom.Node.text "Hello" ]
 
@@ -124,7 +122,7 @@ let stylesheet_interpol small_bg large_bg =
             background-color: %{large_bg#Css_gen.Color};
           }
         }
-        |}]
+      |}]
   in
   Vdom.Node.div ~attrs:[ Style.container ] [ Vdom.Node.text "Hello" ]
 ;;
@@ -154,7 +152,7 @@ module _ = struct
             background-color: var(--large-bg);
           }
         }
-        |}]
+      |}]
 
   let stylesheet_vars =
     Vdom.Node.div