v0.17~preview.129.07+242

CHANGES.md

@@ -1,3 +1,13 @@
+- `Bonsai_web_ui_form` and `Bonsai_web_ui_form2` were merged into `Bonsai_web_ui_form` under
+submodules `With_automatic_view` and `With_manual_view`, respectively.
+
+- Added `always_update_when_focused` to text inputs to make the current behavior (text value can't be updated if the input is focused) optional.
+
+- Remove the first-class Action module from
+  * `Bonsai_extra.state_machine0_dynamic_model` and
+  * `Bonsai_extra.state_machine1_dynamic_model`
+  in favor of an optional `sexp_of_action: 'action -> Sexp.t` parameter.
+
 ## Release v0.16.0
 
 - Formatting improvements:

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2019--2023 Jane Street Group, LLC <[email protected]>
+Copyright (c) 2019--2024 Jane Street Group, LLC <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

bench/example/dune

@@ -1,3 +1,6 @@
-(executables (names main)
+(executables
+ (modes byte exe)
+ (names main)
  (libraries bonsai bonsai_bench incr_dom.javascript_profiling js_of_ocaml)
- (preprocess (pps ppx_bonsai ppx_jane js_of_ocaml-ppx)))
+ (preprocess
+  (pps ppx_bonsai ppx_jane js_of_ocaml-ppx)))

bench/src/dune

@@ -1,4 +1,7 @@
-(library (name bonsai_bench) (public_name bonsai.bench)
+(library
+ (name bonsai_bench)
+ (public_name bonsai.bench)
  (libraries bonsai bonsai_driver core_bench.js incr_dom.javascript_profiling
-  js_of_ocaml)
- (preprocess (pps ppx_jane js_of_ocaml-ppx ppx_pattern_bind)))
+   js_of_ocaml)
+ (preprocess
+  (pps ppx_jane js_of_ocaml-ppx ppx_pattern_bind)))

bench/src/profile.ml

@@ -243,10 +243,10 @@ let profile (T { clock; component; get_inject; interaction; name } : Config.t) =
   in
   let component =
     Graph_info.iter_graph_updates
-      (Bonsai.Private.reveal_computation component)
+      (Bonsai.Private.top_level_handle component)
       ~on_update:(fun gi -> graph_info := gi)
-    |> Bonsai.Private.conceal_computation
   in
+  let component graph = Bonsai.Private.perform graph component in
   let performance_entries = ref [] in
   let performance_observer =
     if PerformanceObserver.is_supported ()

bindings/dygraph/src/dune

@@ -1,7 +1,8 @@
-(library (name dygraph)
+(library
+ (name dygraph)
  (preprocess
   (pps ppx_jane js_of_ocaml-ppx gen_js_api.ppx ppx_bonsai ppx_pattern_bind))
  (js_of_ocaml
   (javascript_files ../dist/dygraph.min.js ../dist/lodash_merge.js))
  (libraries base bonsai_extra bonsai_web bonsai_web_ui_widget core
-  virtual_dom.css_gen gen_js_api js_of_ocaml timezone ppx_css.inline_css))
+   virtual_dom.css_gen gen_js_api js_of_ocaml timezone ppx_css.inline_css))

bindings/feather_icon/src/dune

@@ -1,88 +1,96 @@
-(library (name feather_icon) (public_name bonsai.feather_icon)
- (libraries core bonsai_web) (preprocess (pps ppx_jane)))
+(library
+ (name feather_icon)
+ (public_name bonsai.feather_icon)
+ (libraries core bonsai_web)
+ (preprocess
+  (pps ppx_jane)))
 
-(rule (targets paths.ml paths.mli)
+(rule
+ (targets paths.ml paths.mli)
  (deps %{bin:ocaml-embed-file} paths/activity.svg paths/corner-down-left.svg
-  paths/link.svg paths/shopping-bag.svg paths/airplay.svg
-  paths/corner-down-right.svg paths/list.svg paths/shopping-cart.svg
-  paths/alert-circle.svg paths/corner-left-down.svg paths/loader.svg
-  paths/shuffle.svg paths/alert-octagon.svg paths/corner-left-up.svg
-  paths/lock.svg paths/sidebar.svg paths/alert-triangle.svg
-  paths/corner-right-down.svg paths/log-in.svg paths/skip-back.svg
-  paths/align-center.svg paths/corner-right-up.svg paths/log-out.svg
-  paths/skip-forward.svg paths/align-justify.svg paths/corner-up-left.svg
-  paths/mail.svg paths/slack.svg paths/align-left.svg
-  paths/corner-up-right.svg paths/map-pin.svg paths/slash.svg
-  paths/align-right.svg paths/cpu.svg paths/map.svg paths/sliders.svg
-  paths/anchor.svg paths/credit-card.svg paths/maximize-2.svg
-  paths/smartphone.svg paths/aperture.svg paths/crop.svg paths/maximize.svg
-  paths/smile.svg paths/archive.svg paths/crosshair.svg paths/meh.svg
-  paths/speaker.svg paths/arrow-down-circle.svg paths/database.svg
-  paths/menu.svg paths/square.svg paths/arrow-down-left.svg paths/delete.svg
-  paths/message-circle.svg paths/star.svg paths/arrow-down-right.svg
-  paths/disc.svg paths/message-square.svg paths/stop-circle.svg
-  paths/arrow-down.svg paths/divide-circle.svg paths/mic-off.svg
-  paths/sunrise.svg paths/arrow-left-circle.svg paths/divide-square.svg
-  paths/mic.svg paths/sunset.svg paths/arrow-left.svg paths/divide.svg
-  paths/minimize-2.svg paths/sun.svg paths/arrow-right-circle.svg
-  paths/dollar-sign.svg paths/minimize.svg paths/tablet.svg
-  paths/arrow-right.svg paths/download-cloud.svg paths/minus-circle.svg
-  paths/tag.svg paths/arrow-up-circle.svg paths/download.svg
-  paths/minus-square.svg paths/target.svg paths/arrow-up-left.svg
-  paths/dribbble.svg paths/minus.svg paths/terminal.svg
-  paths/arrow-up-right.svg paths/droplet.svg paths/monitor.svg
-  paths/thermometer.svg paths/arrow-up.svg paths/edit-2.svg paths/moon.svg
-  paths/thumbs-down.svg paths/at-sign.svg paths/edit-3.svg
-  paths/more-horizontal.svg paths/thumbs-up.svg paths/award.svg
-  paths/edit.svg paths/more-vertical.svg paths/toggle-left.svg
-  paths/bar-chart-2.svg paths/external-link.svg paths/mouse-pointer.svg
-  paths/toggle-right.svg paths/bar-chart.svg paths/eye-off.svg paths/move.svg
-  paths/tool.svg paths/battery-charging.svg paths/eye.svg paths/music.svg
-  paths/trash-2.svg paths/battery.svg paths/facebook.svg
-  paths/navigation-2.svg paths/trash.svg paths/bell-off.svg
-  paths/fast-forward.svg paths/navigation.svg paths/trello.svg paths/bell.svg
-  paths/feather.svg paths/octagon.svg paths/trending-down.svg
-  paths/bluetooth.svg paths/figma.svg paths/package.svg paths/trending-up.svg
-  paths/bold.svg paths/file-minus.svg paths/paperclip.svg paths/triangle.svg
-  paths/bookmark.svg paths/file-plus.svg paths/pause-circle.svg
-  paths/truck.svg paths/book-open.svg paths/file.svg paths/pause.svg
-  paths/tv.svg paths/book.svg paths/file-text.svg paths/pen-tool.svg
-  paths/twitch.svg paths/box.svg paths/film.svg paths/percent.svg
-  paths/twitter.svg paths/briefcase.svg paths/filter.svg paths/phone-call.svg
-  paths/type.svg paths/calendar.svg paths/flag.svg paths/phone-forwarded.svg
-  paths/umbrella.svg paths/camera-off.svg paths/folder-minus.svg
-  paths/phone-incoming.svg paths/underline.svg paths/camera.svg
-  paths/folder-plus.svg paths/phone-missed.svg paths/unlock.svg
-  paths/cast.svg paths/folder.svg paths/phone-off.svg paths/upload-cloud.svg
-  paths/check-circle.svg paths/framer.svg paths/phone-outgoing.svg
-  paths/upload.svg paths/check-square.svg paths/frown.svg paths/phone.svg
-  paths/user-check.svg paths/check.svg paths/gift.svg paths/pie-chart.svg
-  paths/user-minus.svg paths/chevron-down.svg paths/git-branch.svg
-  paths/play-circle.svg paths/user-plus.svg paths/chevron-left.svg
-  paths/git-commit.svg paths/play.svg paths/users.svg paths/chevron-right.svg
-  paths/github.svg paths/plus-circle.svg paths/user.svg
-  paths/chevrons-down.svg paths/gitlab.svg paths/plus-square.svg
-  paths/user-x.svg paths/chevrons-left.svg paths/git-merge.svg paths/plus.svg
-  paths/video-off.svg paths/chevrons-right.svg paths/git-pull-request.svg
-  paths/pocket.svg paths/video.svg paths/chevrons-up.svg paths/globe.svg
-  paths/power.svg paths/voicemail.svg paths/chevron-up.svg paths/grid.svg
-  paths/printer.svg paths/volume-1.svg paths/chrome.svg paths/hard-drive.svg
-  paths/radio.svg paths/volume-2.svg paths/circle.svg paths/hash.svg
-  paths/refresh-ccw.svg paths/volume.svg paths/clipboard.svg
-  paths/headphones.svg paths/refresh-cw.svg paths/volume-x.svg
-  paths/clock.svg paths/heart.svg paths/repeat.svg paths/watch.svg
-  paths/cloud-drizzle.svg paths/help-circle.svg paths/rewind.svg
-  paths/wifi-off.svg paths/cloud-lightning.svg paths/hexagon.svg
-  paths/rotate-ccw.svg paths/wifi.svg paths/cloud-off.svg paths/home.svg
-  paths/rotate-cw.svg paths/wind.svg paths/cloud-rain.svg paths/image.svg
-  paths/rss.svg paths/x-circle.svg paths/cloud-snow.svg paths/inbox.svg
-  paths/save.svg paths/x-octagon.svg paths/cloud.svg paths/info.svg
-  paths/scissors.svg paths/x-square.svg paths/codepen.svg paths/instagram.svg
-  paths/search.svg paths/x.svg paths/codesandbox.svg paths/italic.svg
-  paths/send.svg paths/youtube.svg paths/code.svg paths/key.svg
-  paths/server.svg paths/zap-off.svg paths/coffee.svg paths/layers.svg
-  paths/settings.svg paths/zap.svg paths/columns.svg paths/layout.svg
-  paths/share-2.svg paths/zoom-in.svg paths/command.svg paths/life-buoy.svg
-  paths/share.svg paths/zoom-out.svg paths/compass.svg paths/link-2.svg
-  paths/shield-off.svg paths/copy.svg paths/linkedin.svg paths/shield.svg)
- (action (bash "%{deps} -output paths")))
+   paths/link.svg paths/shopping-bag.svg paths/airplay.svg
+   paths/corner-down-right.svg paths/list.svg paths/shopping-cart.svg
+   paths/alert-circle.svg paths/corner-left-down.svg paths/loader.svg
+   paths/shuffle.svg paths/alert-octagon.svg paths/corner-left-up.svg
+   paths/lock.svg paths/sidebar.svg paths/alert-triangle.svg
+   paths/corner-right-down.svg paths/log-in.svg paths/skip-back.svg
+   paths/align-center.svg paths/corner-right-up.svg paths/log-out.svg
+   paths/skip-forward.svg paths/align-justify.svg paths/corner-up-left.svg
+   paths/mail.svg paths/slack.svg paths/align-left.svg
+   paths/corner-up-right.svg paths/map-pin.svg paths/slash.svg
+   paths/align-right.svg paths/cpu.svg paths/map.svg paths/sliders.svg
+   paths/anchor.svg paths/credit-card.svg paths/maximize-2.svg
+   paths/smartphone.svg paths/aperture.svg paths/crop.svg paths/maximize.svg
+   paths/smile.svg paths/archive.svg paths/crosshair.svg paths/meh.svg
+   paths/speaker.svg paths/arrow-down-circle.svg paths/database.svg
+   paths/menu.svg paths/square.svg paths/arrow-down-left.svg paths/delete.svg
+   paths/message-circle.svg paths/star.svg paths/arrow-down-right.svg
+   paths/disc.svg paths/message-square.svg paths/stop-circle.svg
+   paths/arrow-down.svg paths/divide-circle.svg paths/mic-off.svg
+   paths/sunrise.svg paths/arrow-left-circle.svg paths/divide-square.svg
+   paths/mic.svg paths/sunset.svg paths/arrow-left.svg paths/divide.svg
+   paths/minimize-2.svg paths/sun.svg paths/arrow-right-circle.svg
+   paths/dollar-sign.svg paths/minimize.svg paths/tablet.svg
+   paths/arrow-right.svg paths/download-cloud.svg paths/minus-circle.svg
+   paths/tag.svg paths/arrow-up-circle.svg paths/download.svg
+   paths/minus-square.svg paths/target.svg paths/arrow-up-left.svg
+   paths/dribbble.svg paths/minus.svg paths/terminal.svg
+   paths/arrow-up-right.svg paths/droplet.svg paths/monitor.svg
+   paths/thermometer.svg paths/arrow-up.svg paths/edit-2.svg paths/moon.svg
+   paths/thumbs-down.svg paths/at-sign.svg paths/edit-3.svg
+   paths/more-horizontal.svg paths/thumbs-up.svg paths/award.svg
+   paths/edit.svg paths/more-vertical.svg paths/toggle-left.svg
+   paths/bar-chart-2.svg paths/external-link.svg paths/mouse-pointer.svg
+   paths/toggle-right.svg paths/bar-chart.svg paths/eye-off.svg
+   paths/move.svg paths/tool.svg paths/battery-charging.svg paths/eye.svg
+   paths/music.svg paths/trash-2.svg paths/battery.svg paths/facebook.svg
+   paths/navigation-2.svg paths/trash.svg paths/bell-off.svg
+   paths/fast-forward.svg paths/navigation.svg paths/trello.svg
+   paths/bell.svg paths/feather.svg paths/octagon.svg paths/trending-down.svg
+   paths/bluetooth.svg paths/figma.svg paths/package.svg
+   paths/trending-up.svg paths/bold.svg paths/file-minus.svg
+   paths/paperclip.svg paths/triangle.svg paths/bookmark.svg
+   paths/file-plus.svg paths/pause-circle.svg paths/truck.svg
+   paths/book-open.svg paths/file.svg paths/pause.svg paths/tv.svg
+   paths/book.svg paths/file-text.svg paths/pen-tool.svg paths/twitch.svg
+   paths/box.svg paths/film.svg paths/percent.svg paths/twitter.svg
+   paths/briefcase.svg paths/filter.svg paths/phone-call.svg paths/type.svg
+   paths/calendar.svg paths/flag.svg paths/phone-forwarded.svg
+   paths/umbrella.svg paths/camera-off.svg paths/folder-minus.svg
+   paths/phone-incoming.svg paths/underline.svg paths/camera.svg
+   paths/folder-plus.svg paths/phone-missed.svg paths/unlock.svg
+   paths/cast.svg paths/folder.svg paths/phone-off.svg paths/upload-cloud.svg
+   paths/check-circle.svg paths/framer.svg paths/phone-outgoing.svg
+   paths/upload.svg paths/check-square.svg paths/frown.svg paths/phone.svg
+   paths/user-check.svg paths/check.svg paths/gift.svg paths/pie-chart.svg
+   paths/user-minus.svg paths/chevron-down.svg paths/git-branch.svg
+   paths/play-circle.svg paths/user-plus.svg paths/chevron-left.svg
+   paths/git-commit.svg paths/play.svg paths/users.svg
+   paths/chevron-right.svg paths/github.svg paths/plus-circle.svg
+   paths/user.svg paths/chevrons-down.svg paths/gitlab.svg
+   paths/plus-square.svg paths/user-x.svg paths/chevrons-left.svg
+   paths/git-merge.svg paths/plus.svg paths/video-off.svg
+   paths/chevrons-right.svg paths/git-pull-request.svg paths/pocket.svg
+   paths/video.svg paths/chevrons-up.svg paths/globe.svg paths/power.svg
+   paths/voicemail.svg paths/chevron-up.svg paths/grid.svg paths/printer.svg
+   paths/volume-1.svg paths/chrome.svg paths/hard-drive.svg paths/radio.svg
+   paths/volume-2.svg paths/circle.svg paths/hash.svg paths/refresh-ccw.svg
+   paths/volume.svg paths/clipboard.svg paths/headphones.svg
+   paths/refresh-cw.svg paths/volume-x.svg paths/clock.svg paths/heart.svg
+   paths/repeat.svg paths/watch.svg paths/cloud-drizzle.svg
+   paths/help-circle.svg paths/rewind.svg paths/wifi-off.svg
+   paths/cloud-lightning.svg paths/hexagon.svg paths/rotate-ccw.svg
+   paths/wifi.svg paths/cloud-off.svg paths/home.svg paths/rotate-cw.svg
+   paths/wind.svg paths/cloud-rain.svg paths/image.svg paths/rss.svg
+   paths/x-circle.svg paths/cloud-snow.svg paths/inbox.svg paths/save.svg
+   paths/x-octagon.svg paths/cloud.svg paths/info.svg paths/scissors.svg
+   paths/x-square.svg paths/codepen.svg paths/instagram.svg paths/search.svg
+   paths/x.svg paths/codesandbox.svg paths/italic.svg paths/send.svg
+   paths/youtube.svg paths/code.svg paths/key.svg paths/server.svg
+   paths/zap-off.svg paths/coffee.svg paths/layers.svg paths/settings.svg
+   paths/zap.svg paths/columns.svg paths/layout.svg paths/share-2.svg
+   paths/zoom-in.svg paths/command.svg paths/life-buoy.svg paths/share.svg
+   paths/zoom-out.svg paths/compass.svg paths/link-2.svg paths/shield-off.svg
+   paths/copy.svg paths/linkedin.svg paths/shield.svg)
+ (action
+  (bash "%{deps} -output paths")))

bonsai.opam

@@ -40,21 +40,23 @@ depends: [
   "ppx_pattern_bind"
   "ppx_typed_fields"
   "profunctor"
+  "record_builder"
   "sexp_grammar"
   "sexplib0"
   "streamable"
   "textutils"
+  "versioned_polling_state_rpc"
   "virtual_dom"
-  "base64"                   {>= "3.4.0"}
-  "cohttp-async"             {>= "2.5.7" & < "3.0.0" | >= "5.1.1" & < "6.0.0"}
-  "dune"                     {>= "2.0.0"}
-  "gen_js_api"               {>= "1.0.8"}
-  "js_of_ocaml"              {>= "5.1.1"}
-  "js_of_ocaml-ppx"          {>= "5.1.1"}
+  "base64"                      {>= "3.4.0"}
+  "cohttp-async"                {>= "2.5.7" & < "3.0.0" | >= "5.1.1" & < "6.0.0"}
+  "dune"                        {>= "2.0.0"}
+  "gen_js_api"                  {>= "1.0.8"}
+  "js_of_ocaml"                 {>= "5.1.1"}
+  "js_of_ocaml-ppx"             {>= "5.1.1"}
   "ocaml-embed-file"
-  "ppxlib"                   {>= "0.28.0"}
-  "re"                       {>= "1.8.0"}
-  "uri"                      {>= "3.0.0"}
+  "ppxlib"                      {>= "0.28.0"}
+  "re"                          {>= "1.8.0"}
+  "uri"                         {>= "3.0.0"}
 ]
 available: arch != "arm32" & arch != "x86_32"
 synopsis: "A library for building dynamic webapps, using Js_of_ocaml"

docs/blogs/letsub.mdx

@@ -160,7 +160,8 @@ And here's a test that shows that by caching `x` we now only print
     let tripled = map x ~f:(fun i -> i * 3) in
     let y = add doubled tripled in
     printf "y = %d\n" (eval y);
-    [%expect {|
+    [%expect
+      {|
       got here
       y = 15 |}]
   ;;
@@ -261,7 +262,8 @@ does that work?  To see, let's add `sub` to our language:
         add doubled tripled)
     in
     printf "y = %d\n" (eval y);
-    [%expect {|
+    [%expect
+      {|
       got here
       y = 15 |}]
   ;;
@@ -387,7 +389,8 @@ Here it is in action:
         add doubled tripled)
     in
     printf "y = %d\n" (eval y);
-    [%expect {|
+    [%expect
+      {|
       got here
       y = 15 |}]
   ;;

docs/blogs/letsub/src/dune

@@ -1,2 +1,5 @@
-(library (name blog_letsub) (libraries core bonsai)
- (preprocess (pps ppx_bonsai ppx_jane)))
+(library
+ (name blog_letsub)
+ (libraries core bonsai)
+ (preprocess
+  (pps ppx_bonsai ppx_jane)))

docs/blogs/testing.mdx

@@ -139,7 +139,8 @@ let%expect_test "shows hello to a user" =
   [%expect {| <span> hello Bob </span> |}];
   Bonsai.Var.set user_var "Alice";
   Handle.show_diff handle;
-  [%expect {|
+  [%expect
+    {|
     -|<span> hello Bob </span>
     +|<span> hello Alice </span> |}]
 ;;

docs/getting_started/counters.mdx

@@ -242,7 +242,7 @@ monadic `bind`, but with this signature:
 # Bonsai.Let_syntax.Let_syntax.sub
 - : ?here:Lexing.position ->
     'a Bonsai.Computation.t ->
-    f:('a Bonsai.Value.t -> 'b Bonsai.Computation.t) ->
+    f:('a Bonsai.Cont.t -> 'b Bonsai.Computation.t) ->
     'b Bonsai.Computation.t
 = <fun>
 ```
@@ -254,10 +254,10 @@ is:
 ```ocaml
 # Bonsai.assoc
 - : ('key, 'cmp) Bonsai.comparator ->
-    ('key, 'data, 'cmp) Core.Map.t Bonsai.Value.t ->
-    f:('key Bonsai.Value.t ->
-       'data Bonsai.Value.t -> 'result Bonsai.Computation.t) ->
-    ('key, 'result, 'cmp) Core.Map.t Bonsai.Computation.t
+    ('key, 'data, 'cmp) Base.Map.t Bonsai.Cont.t ->
+    f:('key Bonsai.Cont.t ->
+       'data Bonsai.Cont.t -> 'result Bonsai.Computation.t) ->
+    ('key, 'result, 'cmp) Base.Map.t Bonsai.Computation.t
 = <fun>
 ```
 

docs/getting_started/open_source/counters.mdx

@@ -242,7 +242,7 @@ monadic `bind`, but with this signature:
 # Bonsai.Let_syntax.Let_syntax.sub
 - : ?here:Lexing.position ->
     'a Bonsai.Computation.t ->
-    f:('a Bonsai.Value.t -> 'b Bonsai.Computation.t) ->
+    f:('a Bonsai.Cont.t -> 'b Bonsai.Computation.t) ->
     'b Bonsai.Computation.t
 = <fun>
 ```
@@ -254,10 +254,10 @@ is:
 ```ocaml
 # Bonsai.assoc
 - : ('key, 'cmp) Bonsai.comparator ->
-    ('key, 'data, 'cmp) Core.Map.t Bonsai.Value.t ->
-    f:('key Bonsai.Value.t ->
-       'data Bonsai.Value.t -> 'result Bonsai.Computation.t) ->
-    ('key, 'result, 'cmp) Core.Map.t Bonsai.Computation.t
+    ('key, 'data, 'cmp) Base.Map.t Bonsai.Cont.t ->
+    f:('key Bonsai.Cont.t ->
+       'data Bonsai.Cont.t -> 'result Bonsai.Computation.t) ->
+    ('key, 'result, 'cmp) Base.Map.t Bonsai.Computation.t
 = <fun>
 ```
 

docs/guide/04-forms.md

@@ -15,7 +15,7 @@ For the rest of this doc, this module alias will be in effect:
 <!-- $MDX skip -->
 ```
 ``` ocaml
-module Form = Bonsai_web_ui_form
+module Form = Bonsai_web_ui_form.With_automatic_view
 ```
 
 # Form.t