switch to Feliz view engine

fslaborg · Oct 27, 2023 · 2d42ffa · 2d42ffa
1 parent fa761ce
commit 2d42ffa
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 26 deletions.
diff --git a/src/NBConvert.NET/API.fs b/src/NBConvert.NET/API.fs
@@ -4,7 +4,7 @@ open NBFormat.NET
 open NBFormat.NET.Domain
 open NBConvert.NET
 
-open Giraffe.ViewEngine
+open Feliz.ViewEngine
 
 type API() =
 
@@ -15,4 +15,4 @@ type API() =
             match converter with
             | HTMLConverter converter ->
                 converter.ConvertNotebook notebook
-                |> RenderView.AsString.htmlDocument
+                |> Render.htmlDocument
diff --git a/src/NBConvert.NET/ConverterTemplates/HTMLConverterTemplates.fs b/src/NBConvert.NET/ConverterTemplates/HTMLConverterTemplates.fs
@@ -1,33 +1,34 @@
 namespace NBConvert.NET
 
-open Giraffe.ViewEngine
+open Feliz.ViewEngine
+open Feliz.Bulma.ViewEngine
 open NBFormat.NET
 open NBFormat.NET.Domain
 open System.Text
 open System.Text.Json
 open System.Text.RegularExpressions
 
 type DocumentTemplate(
-    HeadTags: XmlNode list,
-    ?FooterTags: XmlNode list
+    HeadTags: ReactElement list,
+    ?FooterTags: ReactElement list
 ) =
 
     member val HeadTags = HeadTags with get,set
     member val FooterTags = defaultArg FooterTags [] with get,set
 
     member this.asHtmlNode(
-        bodyNodes: XmlNode list
+        bodyNodes: ReactElement list
     ) = 
-        html [] [
-            head [] this.HeadTags
-            body [] bodyNodes
+        Html.html [
+            Html.head this.HeadTags
+            Html.body bodyNodes
             if this.FooterTags <> [] then
-                footer [] this.FooterTags
+                Html.footer this.FooterTags
         ]
 
 type CellConverter(
-    SourceConverter: CellType -> string list -> XmlNode,
-    OutputConverter: Output -> XmlNode
+    SourceConverter: CellType -> string list -> ReactElement,
+    OutputConverter: Output -> ReactElement
 ) =
 
     member _.ConvertSource(source: string list, cellType: CellType) = SourceConverter cellType source
@@ -59,35 +60,49 @@ type HTMLConverterTemplate(
 
 module HTMLConverterTemplates =
 
+    open type System.Environment
+
     let Default =
         HTMLConverterTemplate(
             DocumentTemplate = DocumentTemplate(
-                HeadTags = []
+                HeadTags = [
+                    Html.link [
+                        prop.rel "stylesheet"
+                        prop.href "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"
+                    ]
+                ]
             ),
             CellConverter = CellConverter(
                 SourceConverter = 
                     (fun cellType source -> 
                         match cellType with
                         | CellType.Markdown -> 
-                            div [] [yield! source |> List.map str]
+                            Bulma.container [yield! source |> List.map prop.text]
                         | CellType.Code ->
-                            code [] [yield! source |> List.map str]
+                            Bulma.container [
+                                prop.children [
+                                    Html.pre (
+                                        source 
+                                        |> List.map Bulma.text.p
+                                    )
+                                ]
+                            ]
                         | CellType.Raw -> 
-                            div [] [yield! source |> List.map str]
+                             Bulma.container [yield! source |> List.map prop.text]
                     ),
                 OutputConverter = 
                     (fun (output) -> 
                         match output.OutputType with
                         | OutputType.DisplayData -> 
-                            div [] [
+                            Bulma.container [
                                 yield! 
                                     output.Data
                                     |> Option.map(fun bundle -> 
                                         bundle 
                                         |> Map.toList
                                         |> List.map(fun (key, value) -> 
-                                            div [] [
-                                                rawText (
+                                            Bulma.container [
+                                                prop.dangerouslySetInnerHTML (
                                                     value
                                                         .EnumerateArray()
                                                         |> Seq.cast<System.Text.Json.JsonElement>
@@ -100,7 +115,7 @@ module HTMLConverterTemplates =
                                     )
                                     |> Option.defaultValue []
                             ]
-                        | _ -> div [] [str "other output type than DisplayData xd"]
+                        | _ -> Bulma.container [prop.text "other output type than DisplayData xd"]
                     )
             )
         )
diff --git a/src/NBConvert.NET/NBConvert.NET.fsproj b/src/NBConvert.NET/NBConvert.NET.fsproj
@@ -13,11 +13,9 @@
     <None Include="playground.fsx" />
   </ItemGroup>
 
-  <ItemGroup />
-
   <ItemGroup>
-    <PackageReference Include="Giraffe.ViewEngine" Version="[1.4.0]" />
     <PackageReference Include="Feliz.ViewEngine" Version="[0.24.0]" />
+    <PackageReference Include="Feliz.Bulma.ViewEngine" Version="[0.25.0]" />
     <ProjectReference Include="..\NBFormat.NET\NBFormat.NET.fsproj" PackageVersion="[1.0.0, 0.0.0)" />
   </ItemGroup>
 

diff --git a/src/NBConvert.NET/playground.fsx b/src/NBConvert.NET/playground.fsx
@@ -2,6 +2,7 @@
 #r "nuget: FSharp.SystemTextJson, 1.1.23"
 #r "nuget: Giraffe.ViewEngine, 1.4.0"
 #r "nuget: Feliz.ViewEngine, 0.24.0"
+#r "nuget: Feliz.Bulma.ViewEngine, 0.25.0"
 
 #load "../NBFormat.NET/Domain.fs"
 #load "../NBFormat.NET/Serialization.fs"

diff --git a/tests/NBFormat.NET.Tests/data/simple/polyglot_notebook_simple_fsharp.html b/tests/NBFormat.NET.Tests/data/simple/polyglot_notebook_simple_fsharp.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html><head></head><body><div># Markdown</div><code>let a = 42
-
-a</code><div><div><div class="dni-plaintext"><pre>42</pre></div><style>
+<html><head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"></head><body><div class="container"># Markdown</div><div class="container"><pre><p class="">let a = 42
+</p><p class="">
+</p><p class="">a</p></pre></div><div class="container"><div class="container"><div class="dni-plaintext"><pre>42</pre></div><style>
 
 .dni-code-hint {