Creating the html in a functional way

[nojaf]

I did a quick experiment with using /~https://github.com/SuaveIO/suave/blob/master/src/Experimental/Html.fs to construct the html.

let webApp = 
    choose [
        GET >=>
            choose [
                route "/" >=> razorView "Index.cshtml" { Text = "Hello, Giraffe world!" } ;
                route "/test" >=> setBodyAsString (Suave.Html.samplePage |> Suave.Html.htmlToString)
            ]

        setStatusCode 404 >=> text "Not Found" ]

Including the single Html.fs file in your project is enough to make this work. No need to reference the full Suave.Experimental nuget package.

Should Giraffe include something similar by default as alternative to Razor/dotliquid?

[dustinmoris]

Hi, that is an interesting alternative indeed. I wonder how useful this is in its current form beyond a hello-world example. Looks like Suave was working on it but deemed it experimental. Is this something you need personally for your projects?

When I look at the currently supported html tags and attributes then there's still lots of gaps. If we want to include this into Giraffe, then there needs to be an easy way for people to extend this without much difficulty, because I doubt we will ever be able to satisfy everyone's needs. My understanding is that I can easily create more tags outside the library and it will work, but am I correct that a tag can only have one attribute with this engine at the moment?

EDIT:
Oh, just seen that it already accepts an array of attributes: type Element = string * Attribute[]

Hmm.. yeah that looks really interesting...

[dustinmoris]

It's kind of cool.. and yeah it looks that it would be easily extendable. If you want to prepare a pull request for it then go for it!

Could you please make sure that we don't violate any copyright on Suave though and probably should let them know that we would like to borrow their code or at least heavily attribute it to the original author and give them credit!

[nojaf]

Ok, I'll try to create a pul request and check with Suave for copyright.
I want to use this in a hobby project.
Another reason I'm found of this way of working is that it is similar to how Elm creates html.

view : Model -> Html Msg
view model =
  div []
    [ input [ type_ "text", placeholder "Name", onInput Name ] []
    , input [ type_ "password", placeholder "Password", onInput Password ] []
    , input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
    , viewValidation model
    ]

[dustinmoris]

Hey, I wanted to let you know I've made the following changes:

• Named it Giraffe.HtmlEngine
• Renamed Text to EncodedText
• Renamed WhiteSpace to RawText
• Also renamed textContent to encodedText and added another function called rawText

I think encodedText and rawText are more representative of what they are doing and also WhiteSpace was really more something like RawText as it wasn't limited to just white space and I can see how someone would need both (generating encoded content but also maybe embedding an already generated HTML string with rawText).

Apart from that I made a few minor semantic changes and named the HttpHandler renderHtml.

What do you think?

[nojaf]

Thanks for letting me know. It all makes sense to me. WhiteSpace was indeed a bit misleading.
Looks like it's ready to merged.

[dustinmoris]

@nojaf Hey I just wanted to let you know that I've made a few improvements to the functional engine in the last two releases. Apart from the name change to reflect better that it can be used beyond just HTML I have also made a few changes so it can be used for rendering XML and other content like SVG for example. I started using this engine in another side project now and as I was using it more I was hitting issues that led me to making those changes. Let me know if you encounter any issues with the latest version or if you have any other questions!

[nojaf]

Hi Dustin, thanks for the heads up. It's on my bucket list to update my projects to the latest Giraffe. I'll let you know if there are any issues,