release 0.3

Author: rizo

README.md

@@ -41,7 +41,7 @@ let counter () =
 
 let () =
   match Dom.Document.get_element_by_id "root" with
-  | Some root -> Html.render root (counter ())
+  | Some root -> Html.mount root (counter ())
   | None -> failwith "No #root element found"
 ```
 

TODO.md

@@ -7,4 +7,63 @@
 - [ ] Add Js.String module.
 - [ ] Repeated attribute.
 - [ ] View.toggle : on:('a signal -> bool) -> 'a signal -> attr -> attr
-- [ ] Html.Attr.join
+- [ ] Html.Attr.join
+- [ ] Html: append/insert have different insertion orders...
+- [ ] Signal.pair sync/transaction - prevent updates when both are firing sequentially. In the router this currently triggers a double work if both wars are needed as in /a/:int/:string for fetching. We need to sync/step emitting to the route var/args signals and emits should trigger only one pub to subs.
+- [ ] Add ?equal to Helix.show.
+- [ ] Rationale for using ppx: value restriction for route/path combinators.
+- [ ] When rendering links, should each link have vars as signals or is better to render N links at once from a single show?
+- [ ] Consider representing the path vars with Hmap to allow any view to obtain a typed signal var.
+- [ ] Do signals need to be resource aware and clean up subs on exn?
+- [ ] `Signal.sync s1 s2` to fully sync two signals?
+- [ ] When emitting to a routing var signal should we navigate?
+- [x] Is it worth adding `let$`? `let ( let$ ) s f = Helix.show (fun x -> f x) s`.
+- [ ] Should there be a way to create lazy signals? E.g. Mouse.position should only bind mouse events when someone is subbed.
+- [ ] Add prevent default handling to Html.on.
+- [ ] Check if Router.link ~absolute:true sets the active attr with a relative router.
+- [ ] Var from routes with spaces are not %-decoded when emited to signals.
+- [ ] Consider passing `path` instead of `rotuer`. This makes it easier to manage relative links.
+    - Define base path ops for router paths (with prefix/rest).
+- [ ] Consider making Router.link relative by default to avoid having to pass router for absolute routes. Instead expose ~relative:router.
+- [ ] Repurpose Jx to a JS FFI module.
+- [ ] Http.get ~url
+- [ ] BUG? Sharing html references leads to problems (See shared_ref)
+
+
+## shared_ref
+
+```
+    
+
+let format_options_scalar_html =
+  List.map
+    (fun v -> Html.option [ Html.value v ] [ Html.text v ])
+    [ "Int"; "Float"; "String"; "Binary"; "Enum" ]
+
+
+let render_format (format : Api_types.Format.t) =
+  let open Html in
+  let selected_sig = Signal.make format in
+  Ui.column ~gap:`sm div []
+    [
+      Ui.row ~gap:`sm div []
+        [
+          Ui.flex (Ui.label "Type") []
+            [
+              Ui.select
+                [ (*value (Dev_attr_fmt.name format);
+                    on Event.change (fun ev ->
+                        let value = Node.get_value (Event.target ev) in
+                        let new_format = default_format_of_string value |> or_invalid_arg value in
+                        Signal.emit new_format selected_sig
+                    );*) ]
+                format_options_all_html;
+            ];
+    ...
+```
+
+This leads to:
+
+```
+Fatal error: exception Failure("bug: attempting to remove a text node without a parent: Int") 
+```

default.nix

@@ -2,20 +2,16 @@
 
 let
   onix = import (builtins.fetchGit {
-    url = "https://github.com/odis-labs/onix.git";
-    rev = "a5de90d3437848d048ed73b7e9aa18fb57702ae7";
+    url = "https://github.com/rizo/onix.git";
+    rev = "8d3ed79ae8875587a2bdcb9d3cbb445fcfbbf5ce";
   }) { inherit pkgs; verbosity = "warning"; };  
 
 in onix.env {
   path = ./.;
-  env-file = ./.onix.env;
-  deps = {
-    # "stdweb" = ./vendor/stdweb/stdweb.opam;
-    # "jx" = ./vendor/jx/jx.opam;
-  };
+  deps = { "ocaml-base-compiler" = "5.1.0"; };
   vars = {
     with-dev-setup = true;
     with-test = true;
     with-doc = true;
   };
-}
+}

dune-project

@@ -1,4 +1,3 @@
 (lang dune 3.7)
-;(using melange 0.1)
-;(using directory-targets 0.1)
+
 (implicit_transitive_deps false)

examples/7guis/Index.ml

@@ -1,8 +1,6 @@
 open Helix
 open Stdweb.Dom
-open Signal.Syntax
 
-let log = Stdweb.Console.log
 let ( => ) a b = (a, b)
 let ( >> ) g f x = f (g x)
 
@@ -22,7 +20,7 @@ let view_counter () =
           button
             [ on Event.click (fun _ -> Signal.emit (-1) incr) ]
             [ text "-" ];
-          span [ style_list [ "margin-left" => "5px" ] ] [ View.show int count ];
+          span [ style_list [ "margin-left" => "5px" ] ] [ show int count ];
         ];
     ]
 
@@ -47,16 +45,10 @@ let view_temp_conv () =
         [ style_list [ "margin-bottom" => "20px" ] ]
         [ text "Bidirectional temperature converter." ];
       input
-        [
-          View.bind value c_signal;
-          on Event.input (on_temp_input f_of_c f_signal);
-        ];
+        [ bind value c_signal; on Event.input (on_temp_input f_of_c f_signal) ];
       text " Celsius = ";
       input
-        [
-          View.bind value f_signal;
-          on Event.input (on_temp_input c_of_f c_signal);
-        ];
+        [ bind value f_signal; on Event.input (on_temp_input c_of_f c_signal) ];
       text " Fahrenheit";
     ]
 
@@ -117,51 +109,44 @@ let view_flight_booker () =
           input
             [
               placeholder "YYYY-MM-DD";
-              View.bind (fst >> value) dates;
+              bind (fst >> value) dates;
               on Event.input (fun ev ->
                   Signal.update
                     (fun (_, d2) -> (Event.target ev |> Node.get_value, d2))
                     dates
               );
-              View.toggle
-                ~on:(Signal.map (fun (d1, _) -> not (is_valid_date d1)) dates)
-                (style_list [ "outline" => "1px solid red" ]);
+              toggle
+                ~on:(fun (d1, _) -> not (is_valid_date d1))
+                (style_list [ "outline" => "1px solid red" ])
+                dates;
             ];
           input
             [
               placeholder "YYYY-MM-DD";
-              View.bind (snd >> value) dates;
+              bind (snd >> value) dates;
               on Event.input (fun ev ->
                   Signal.update
                     (fun (d1, _) -> (d1, Event.target ev |> Node.get_value))
                     dates
               );
-              View.toggle
-                ~on:(Signal.map (String.equal "oneway") flight_type)
-                disabled;
-              View.toggle
-                ~on:
-                  (Signal.map2
-                     (fun (_, d2) ft ->
-                       String.equal "return" ft && not (is_valid_date d2)
-                     )
-                     dates flight_type
-                  )
-                (style_list [ "outline" => "1px solid red" ]);
+              toggle ~on:(String.equal "oneway") (disabled true) flight_type;
+              toggle
+                ~on:(fun ((_, d2), ft) ->
+                  String.equal "return" ft && not (is_valid_date d2)
+                )
+                (style_list [ "outline" => "1px solid red" ])
+                (Signal.pair dates flight_type);
             ];
           button
             [
               on Event.click click_submit;
-              View.toggle
-                ~on:
-                  (Signal.map2
-                     (fun dates ft -> not (is_valid_book dates ft))
-                     dates flight_type
-                  )
-                disabled;
+              toggle
+                ~on:(fun (dates, ft) -> not (is_valid_book dates ft))
+                (disabled true)
+                (Signal.pair dates flight_type);
             ]
             [ text "Book" ];
-          View.show text msg_signal;
+          show text msg_signal;
         ];
     ]
 
@@ -228,5 +213,5 @@ let main () =
 
 let () =
   match Document.get_element_by_id "root" with
-  | Some root -> Html.render root (main ())
+  | Some root -> Html.mount root (main ())
   | None -> failwith "No #root element found"

examples/7guis/dune

@@ -1,6 +1,6 @@
 (executable
  (name index)
- (libraries helix signal stdweb)
+ (libraries helix jx.jsoo signal html stdweb)
  (modes js))
 
 (alias

examples/demo-jsoo/Demo.ml

@@ -8,7 +8,7 @@ let ( => ) a b = (a, b)
 let view_mouse () =
   (* Mouse position at 60fps *)
   let mouse =
-    Mouse.position
+    Mouse.position ()
     |> Signal.sample ~on:(Time.tick ~ms:(1000 / 60))
     |> Signal.map (fun (x, y) ->
            "x = " ^ string_of_float x ^ ", y = " ^ string_of_float y
@@ -23,7 +23,7 @@ let view_mouse () =
       div
         [ style_list [ "margin-bottom" => "20px" ] ]
         [ text "Render mouse position." ];
-      View.show text mouse;
+      show text mouse;
     ]
 
 let view_timer () =
@@ -35,7 +35,7 @@ let view_timer () =
       div
         [ style_list [ "margin-bottom" => "20px" ] ]
         [ text "Render a timer." ];
-      View.show int timer;
+      show int timer;
     ]
 
 let view_input_bind () =
@@ -56,11 +56,9 @@ let view_input_bind () =
         ];
       ul []
         [
-          li [] [ View.show text input_signal ];
+          li [] [ show text input_signal ];
           li []
-            [
-              View.show text (input_signal |> Signal.map String.uppercase_ascii);
-            ];
+            [ show text (input_signal |> Signal.map String.uppercase_ascii) ];
         ];
     ]
 
@@ -80,7 +78,7 @@ let view_counter () =
           button
             [ on Event.click (fun _ -> Signal.emit (-1) incr) ]
             [ text "-" ];
-          span [ style_list [ "margin-left" => "5px" ] ] [ View.show int count ];
+          span [ style_list [ "margin-left" => "5px" ] ] [ show int count ];
         ];
     ]
 
@@ -92,7 +90,7 @@ let view_show () =
       div
         [ style_list [ "margin-bottom" => "20px" ] ]
         [ text "Render signal value with function." ];
-      div [] [ View.show int (Signal.make 5) ];
+      div [] [ show int (Signal.make 5) ];
     ]
 
 let view_toggle () =
@@ -109,7 +107,9 @@ let view_toggle () =
         [ text "Style/unstyle element!" ];
       div
         [
-          View.toggle ~on:stylish (style_list [ "background-color" => "cyan" ]);
+          toggle ~on:Fun.id
+            (style_list [ "background-color" => "cyan" ])
+            stylish;
         ]
         [ text "This element has show attributes!" ];
     ]
@@ -130,15 +130,15 @@ let view_visibility () =
           );
         ]
         [
-          View.show text
+          show text
             (Signal.map
                (fun (editing, text) -> if editing then "Save!" else text)
                editing_state
             );
         ];
       input
         [
-          View.visible ~on:(Signal.map fst editing_state);
+          visible ~on:(Signal.map fst editing_state);
           style_list [ "margin-left" => "5px" ];
           on Event.input (fun ev ->
               let target = Event.target ev in
@@ -157,8 +157,8 @@ let view_visibility_simple () =
       h2 [ style_list [ "font-family" => "monospace" ] ] [ text "Html.visible" ];
       button
         [ on Event.click (fun _ -> Signal.update not is_visible) ]
-        [ View.show text (Signal.map (bool "Hide" "Show") is_visible) ];
-      span [ View.visible ~on:is_visible ] [ text "HELLO" ];
+        [ show text (Signal.map (bool "Hide" "Show") is_visible) ];
+      span [ visible ~on:is_visible ] [ text "HELLO" ];
     ]
 
 let view_each () =
@@ -182,8 +182,8 @@ let view_each () =
         ]
         [
           li [] [ Html.text "fixed li before 1" ];
-          View.each (fun item -> li [] [ Html.text ("each-1: " ^ item) ]) items;
-          View.each (fun item -> li [] [ Html.text ("each-2: " ^ item) ]) items;
+          each (fun item -> li [] [ Html.text ("each-1: " ^ item) ]) items;
+          each (fun item -> li [] [ Html.text ("each-2: " ^ item) ]) items;
           li [] [ Html.text "fixed li after 2" ];
         ];
     ]
@@ -207,5 +207,5 @@ let main () =
 
 let () =
   match Document.get_element_by_id "root" with
-  | Some root -> Html.render root (main ())
+  | Some root -> Html.mount root (main ())
   | None -> failwith "No #root element found"

examples/demo-jsoo/dune

@@ -1,6 +1,6 @@
 (executable
  (name demo)
- (libraries helix signal stdweb)
+ (libraries helix signal html jx.jsoo stdweb)
  (modes js))
 
 (alias