The ability to create Doc element of hypertext in Websharper.UI.Next

Question

I have the string with html markup, an I want to cretae Doc elment from it like this:

Doc.FromHtm "<div><p>.....</p>.....</div>"

As I understand that this is not possible right now. Ok, what is not possible to accurately sew, I tried to roughly nail using jquery:

JQuery.JQuery.Of( "." + class'name ).First().Html(html'content)

But to call this code, I need to specify an event handler for the Doc element. But it is not implemented in UI.Next. I tried to track changes of a model with a given CSS class asynchronously:

let inbox'post'after'render = MailboxProcessor.Start(fun agent -> 
        let rec loop (ids'contents : Map<int,string>) : Async<unit> = async {
            // try to recive event with new portion of data
            let! new'ids'contents = agent.TryReceive 100
            // calculate the state of the agent
            let ids'contents = 
                // merge Map's
                (   match new'ids'contents with
                    | None -> ids'contents
                    | Some (new'ids'contents) -> 
                        new'ids'contents @ (Map.toList ids'contents)
                        |> Map.ofList )                    
                |> Map.filter( fun id content ->
                    // calculate CSS class name
                    let class'name = post'text'view'class'name id
                    // change it's contents of html
                    JQuery.JQuery.Of( "." + class'name ).First().Html(content).Size() = 0)
            // accept the state of the agent
            return! loop ids'contents }
        loop Map.empty )         

and then, for example for one element:

inbox'post'after'render.Post [id, content]

But it is too difficult, unreliable and not really working. Please give me an idea how to solve the problem if possible. Thanks in advance!

Answer 1

Just in case someone needs to use static HTML in WebSharper on the server (I needed to add some javascript to the WebSharper generated HTML page), there is fairly new Doc.Verbatim usable e.g. like

let Main ctx action title body =
    Content.Page(
        MainTemplate.Doc(
            title = title,
            menubar = MenuBar ctx action,
            body = body,
            my_scripts = [ Doc.Verbatim JavaScript.Content ]
        )
    )

Answer 2

Already answered this on https://github.com/intellifactory/websharper.ui.next/issues/22 but copying my answer here:

If all you want is to create a UI.Next Doc from static html you can do the following:

let htmlElem = JQuery.JQuery.Of("<div>hello</div>").Get(0)
let doc = Doc.Static (htmlElem :?> _)

This is not very nice but should work and I don't think there's a better way to do it at the moment. Or maybe you could use templating but that's not documented yet and I'm not sure it would fit your use case.

Obviously if you want to change the rendered element dynamically you can make it a Var and use Doc.EmbedView together with Doc.Static.