general improvements; rework html state/resource management

examples/7guis/Index.ml

@@ -5,8 +5,7 @@ let ( => ) a b = (a, b)
 let ( >> ) g f x = f (g x)
 
 let view_counter () =
-  let incr = Signal.make 0 in
-  let count = incr |> Signal.reduce (fun x y -> x + y) 0 in
+  let count = Signal.make 0 in
   let open Html in
   fragment
     [
@@ -16,9 +15,11 @@ let view_counter () =
         [ text "Increment or decrement a number by 1." ];
       div []
         [
-          button [ on Event.click (fun _ -> Signal.emit 1 incr) ] [ text "+" ];
           button
-            [ on Event.click (fun _ -> Signal.emit (-1) incr) ]
+            [ on Event.click (fun _ -> Signal.update (fun n -> n + 1) count) ]
+            [ text "+" ];
+          button
+            [ on Event.click (fun _ -> Signal.update (fun n -> n - 1) count) ]
             [ text "-" ];
           span [ style_list [ "margin-left" => "5px" ] ] [ show int count ];
         ];
@@ -109,11 +110,9 @@ let view_flight_booker () =
           input
             [
               placeholder "YYYY-MM-DD";
-              bind (fst >> value) dates;
-              on Event.input (fun ev ->
-                  Signal.update
-                    (fun (_, d2) -> (Event.target ev |> Node.get_value, d2))
-                    dates
+              value (fst (Signal.get dates));
+              on_input (fun value ->
+                  Signal.update (fun (_, d2) -> (value, d2)) dates
               );
               toggle
                 ~on:(fun (d1, _) -> not (is_valid_date d1))
@@ -123,11 +122,9 @@ let view_flight_booker () =
           input
             [
               placeholder "YYYY-MM-DD";
-              bind (snd >> value) dates;
-              on Event.input (fun ev ->
-                  Signal.update
-                    (fun (d1, _) -> (d1, Event.target ev |> Node.get_value))
-                    dates
+              value (snd (Signal.get dates));
+              on_input (fun value ->
+                  Signal.update (fun (d1, _) -> (d1, value)) dates
               );
               toggle ~on:(String.equal "oneway") (disabled true) flight_type;
               toggle
@@ -150,6 +147,7 @@ let view_flight_booker () =
         ];
     ]
 
+(* [TODO] Incomplete impl. *)
 let view_timer () =
   let open Html in
   fragment

examples/demo-jsoo/Demo.ml

@@ -27,7 +27,9 @@ let view_mouse () =
     ]
 
 let view_timer () =
-  let timer = Time.tick ~ms:333 |> Signal.const 1 |> Signal.reduce ( + ) 0 in
+  (* [TODO] pass custom equal to prevent dedup *)
+  (* let timer = Time.tick ~ms:333 |> Signal.const 1 |> Signal.reduce ( + ) 0 in *)
+  let timer = Time.tick ~ms:333 |> Signal.reduce (fun t () -> t + 1) 0 in
   let open Html in
   fragment
     [
@@ -63,8 +65,7 @@ let view_input_bind () =
     ]
 
 let view_counter () =
-  let incr = Signal.make 0 in
-  let count = incr |> Signal.reduce (fun x y -> x + y) 0 in
+  let count = Signal.make 0 in
   let open Html in
   fragment
     [
@@ -74,9 +75,11 @@ let view_counter () =
         [ text "Compute a count." ];
       div []
         [
-          button [ on Event.click (fun _ -> Signal.emit 1 incr) ] [ text "+" ];
           button
-            [ on Event.click (fun _ -> Signal.emit (-1) incr) ]
+            [ on Event.click (fun _ -> Signal.update (fun n -> n + 1) count) ]
+            [ text "+" ];
+          button
+            [ on Event.click (fun _ -> Signal.update (fun n -> n - 1) count) ]
             [ text "-" ];
           span [ style_list [ "margin-left" => "5px" ] ] [ show int count ];
         ];

examples/uplot-example/Uplot.ml

@@ -14,5 +14,9 @@ let make ~options ~data target =
 
 let set_data uplot data = Jx.Obj.call1_unit uplot "setData" data_to_js data
 
+let set_size ~w ~h uplot =
+  Jx.Obj.call1_unit uplot "setSize" Jx.Encoder.obj
+    [ ("width", Jx.Encoder.int w); ("height", Jx.Encoder.int h) ]
+
 let mount ~options ~data uplot_ref =
   Html.Attr.on_mount (fun el -> uplot_ref := Some (make ~options ~data el))

examples/uplot-example/Uplot.mli

@@ -7,3 +7,4 @@ val mount :
   options:Jx.Obj.t -> data:float array array -> t option ref -> Html.attr
 
 val set_data : t -> float array array -> unit
+val set_size : w:int -> h:int -> t -> unit

examples/uplot-example/Uplot_example.ml

@@ -2,12 +2,12 @@ open Stdweb
 
 let ( => ) a b = (a, b)
 
-let options =
+let make_options ~w () =
   let open Jx.Encoder in
   obj
     [
       "title" => string "Helix - uPlot";
-      "width" => int 600;
+      "width" => int w;
       "height" => int 400;
       "scales" => obj [ "x" => obj [ "time" => bool false ] ];
       "series"
@@ -41,19 +41,41 @@ let data2 =
 let main () =
   let flag = Signal.make true in
   let uplot = ref None in
+  let uplot_node = ref None in
   let adjust_data flag =
     match !uplot with
     | None -> Console.log "uplot not loaded"
     | Some uplot -> Uplot.set_data uplot (if flag then data1 else data2)
   in
   Signal.sub adjust_data flag;
+
+  Dom.Window.bind Dom.Event.resize (fun _ev ->
+      match !uplot_node with
+      | None -> ()
+      | Some node ->
+        let w = Dom.Node.get_client_width node in
+        Uplot.set_size ~w ~h:400 (Option.get !uplot)
+  );
+
   let open Html in
-  div []
+  div
+    [ id "parent" ]
     [
       button
         [ on Dom.Event.click (fun _ -> Signal.update not flag) ]
         [ text "Toggle data" ];
-      div [ Uplot.mount ~options ~data:data1 uplot ] [];
+      div
+        [
+          id "uplot-container";
+          style_list [ "width" => "100%"; "border" => "2px solid blue" ];
+          Attr.on_mount (fun node ->
+              let w = Dom.Node.get_client_width node in
+              let options = make_options ~w () in
+              uplot := Some (Uplot.make ~options ~data:data1 node);
+              uplot_node := Some node
+          );
+        ]
+        [];
     ]
 
 let () =