ocsigen / eliom

Multi-tier framework for programming web and mobile applications in OCaml.
http://eliom.org
Other
306 stars 53 forks source link

Shared reactive nodes don't update when started as pcdata server-side #494

Open mfp opened 7 years ago

mfp commented 7 years ago

If you have a reactive node like the following that is initially rendered as a PCDATA server-side, the node doesn't update correctly afterwards (observed in both 6.1 and 6.2).

             Html.R.node @@
             Eliom_shared.React.S.map
               [%shared function
                 | 0 -> pcdata "foo"    (* works:  span [pcdata "foo"] *)
                 | n -> pcdata @@ string_of_int n
               ]
               s; (* is 0 at the beginning *)

Self-contained example (drop into eliom-distillery dir):

[%%shared
    open Eliom_lib
    open Eliom_content
    open Html.D
]

module Shared_react_bug_app =
  Eliom_registration.App (
    struct
      let application_name = "shared_react_bug"
      let global_data_path = None
    end)

let main_service =
  Eliom_service.create
    ~path:(Eliom_service.Path [])
    ~meth:(Eliom_service.Get Eliom_parameter.unit)
    ()

let s, f = Eliom_shared.React.S.create 0

let () =
  Shared_react_bug_app.register
    ~service:main_service
    (fun () () ->
      Lwt.return
        (Eliom_tools.F.html
           ~title:"shared_react_bug"
           ~css:[["css";"shared_react_bug.css"]]
           Html.F.(body [
             h1 [pcdata "Shared react bug"];
             button
               ~a:[a_onclick
                     [%client fun _ ->
                       ~%f (Eliom_shared.React.S.value ~%s + 1)]]
               [ pcdata "CLICK ME" ];
             pcdata " ";
             Html.R.node @@
             Eliom_shared.React.S.map
               [%shared function
                 | 0 -> pcdata "foo"    (* works:  span [pcdata "foo"] *)
                 | n -> pcdata @@ string_of_int n
               ]
               s;
           ])))
vasilisp commented 7 years ago

I guess we are trying to locate the pcdata (to start updating it) and that fails, because it doesn't have an ID.

We could possibly locate the wrapper span element instead.

An immediate workaround would be to add another span inside your [%shared ...].