Will the output of the HTML-to-Fable/Elmish tool also work for Giraffe's ViewEngine?

Question

If I paste the output of an HTML-based design tool into Mangel Maxime's (or, Maxime Mangel's?) HTML-to-Fable/Elmish Convertor, will that output work if provided to Giraffe's ViewEngine (i.e. HTML DSL)?

Superficially, both formats look very similar, and it would be great if this happened to work.

score 3 · Accepted Answer · answered Nov 03 '20 at 10:29

no it wont work the DSL are differents: For exemple for this HTML page:

<!DOCTYPE html>
<html lang="en-EN">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://an_url/file.css">
    <link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body>
    <div id="elmish-app"></div>
    <script>var __INIT_STATE__ = "{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}"</script><script src="http://localhost:8080/app.js"></script>
    <script src="http://localhost:8080/style.js"></script>
    <script src="http://localhost:8080/vendors~app.js"></script>
    <script src="http://localhost:8080/vendors~app~style.js"></script>
</body>
</html>

The elmish counterpart would be:

html [ Lang "en-EN" ] [ 
    head [] [ 
        meta [ CharSet "utf-8" ]
        link [ Rel "stylesheet"; Href "https://an_url/file.css" ]
        link [ Rel "shortcut icon"; Type "image/png"; Href "/favicon.png" ] ]
    body [] [ 
      div [ Id "elmish-app" ]
        [ ]
      script [ ] [ str "var __INIT_STATE__ = \"{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}\"" ]
      script [ Src "http://localhost:8080/app.js" ] [ ]
      script [ Src "http://localhost:8080/style.js" ] [ ]
      script [ Src "http://localhost:8080/vendors~app.js" ] []
      script [ Src "http://localhost:8080/vendors~app~style.js"] [] 
    ] 
]

the GiraffeViewEngine counterpart would be:

html [ _lang lang] [
        head [] [
            meta [ _charset "utf-8"]
            meta [ _data "data-virtualpath" virtualPath ]
            link [ _rel "stylesheet"; _href (sprintf "%O" portfolioUrl) ]
            link [ _rel "shortcut icon"; _type "image/png"; _href "/favicon.png" ]
        ]
        body [] [
            div [_id "elmish-app"] []
            script [] [ rawText "var __INIT_STATE__ = \"{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}\"" ]
            script [ _src (sprintf "%O%s" assetsBaseUrl "app.js") ] []
            script [ _src (sprintf "%O%s" assetsBaseUrl "style.js") ] []
            script [ _src (sprintf "%O%s" assetsBaseUrl "vendors~app.js") ] []
            script [ _src (sprintf "%O%s" assetsBaseUrl "vendors~app~style.js") ] []
        ]
    ]

Still it is very close, you should be able to adapt it very quickly by adding _ to all attributes and convert them to lowercase.

Will the output of the HTML-to-Fable/Elmish tool also work for Giraffe's ViewEngine?

1 Answers1