fix: support scoped CSS in Node.Elt (#336)

src/Bolero.Templating.Provider/Bolero.Templating.Provider.fsproj

@@ -17,6 +17,7 @@
       <Paket>True</Paket>
       <Link>paket-files/ProvidedTypes.fs</Link>
     </Compile>
+    <Compile Include="..\Bolero\NodeTypes.fs" Link="NodeTypes.fs" />
     <Compile Include="..\Bolero\Attr.fs" Link="Attr.fs" />
     <Compile Include="..\Bolero\Node.fs" Link="Node.fs" />
     <Compile Include="..\Bolero\Ref.fs" Link="Ref.fs" />

src/Bolero/Attr.fs

@@ -20,15 +20,7 @@
 
 namespace Bolero
 
-open Microsoft.AspNetCore.Components
-
-/// <summary>
-/// HTML attribute or Blazor component parameter.
-/// Use <see cref="T:Bolero.Html.attr" /> or <see cref="M:Bolero.Html.op_EqualsGreater" /> to create attributes.
-/// </summary>
-/// <category>HTML</category>
-type Attr = delegate of obj * Rendering.RenderTreeBuilder * int -> int
-
+[<CompilationRepresentation(CompilationRepresentationFlags.ModuleSuffix)>]
 module Attr =
 
     /// <summary>Create an HTML attribute or a component parameter.</summary>

src/Bolero/Bolero.fsproj

@@ -9,11 +9,12 @@
     <!-- <DefineConstants>DEBUG_RENDERER;$(DefineConstants)</DefineConstants> -->
   </PropertyGroup>
   <ItemGroup>
-    <Compile Include="Attr.fs" />
-    <Compile Include="Node.fs" />
+    <Compile Include="NodeTypes.fs" />
     <Compile Include="Router.fs" />
     <Compile Include="ProgramRun.fs" />
     <Compile Include="Components.fs" />
+    <Compile Include="Attr.fs" />
+    <Compile Include="Node.fs" />
     <Compile Include="Virtualize.fs" />
     <Compile Include="Ref.fs" />
     <Compile Include="TemplatingInternals.fs" />

src/Bolero/Components.fs

@@ -117,7 +117,7 @@ and [<AbstractClass>]
     inherit Component<'model>()
 
     let mutable oldModel = None
-    let mutable view = Node.Empty()
+    let mutable view = Node(fun _ _ s -> s)
     let mutable runProgramLoop = fun () -> ()
     let mutable dispatch = ignore<'msg>
     let mutable program = Unchecked.defaultof<Program<'model, 'msg>>

src/Bolero/Node.fs

@@ -26,10 +26,6 @@ open System
 open FSharp.Reflection
 open Microsoft.AspNetCore.Components
 
-/// <summary>An HTML fragment.</summary>
-/// <category>HTML</category>
-type Node = delegate of obj * Rendering.RenderTreeBuilder * int -> int
-
 /// <exclude />
 [<Sealed; AbstractClass>]
 type Matcher<'T> private () =
@@ -51,6 +47,7 @@ type Matcher<'T> private () =
             let tagReader = FSharpValue.PreComputeUnionTagReader(typeof<'T>)
             fun (x: 'T) -> tagReader (box x)
 
+[<CompilationRepresentation(CompilationRepresentationFlags.ModuleSuffix)>]
 module Node =
 
     /// <summary>Create an empty HTML fragment.</summary>
@@ -65,7 +62,15 @@ module Node =
     /// <seealso cref="M:Bolero.Html.elt" />
     let inline Elt name (attrs: seq<Attr>) (children: seq<Node>) = Node(fun comp tb i ->
         tb.OpenElement(i, name)
-        let mutable i = i + 1
+
+        match comp with
+        | :? Component as c ->
+            match c.CssScope with
+            | null -> ()
+            | s -> tb.AddAttribute(i + 1, s)
+        | _ -> ()
+
+        let mutable i = i + 2
         for attr in attrs do
             i <- attr.Invoke(comp, tb, i)
         for node in children do

src/Bolero/NodeTypes.fs

@@ -0,0 +1,20 @@
+namespace Bolero
+
+open Microsoft.AspNetCore.Components.Rendering
+
+/// <summary>
+/// HTML attribute or Blazor component parameter.
+/// Use <see cref="T:Bolero.Html.attr" /> or <see cref="M:Bolero.Html.op_EqualsGreater" /> to create attributes.
+/// </summary>
+/// <category>HTML</category>
+type Attr = delegate of obj * RenderTreeBuilder * int -> int
+
+/// <summary>An HTML fragment.</summary>
+/// <category>HTML</category>
+type Node = delegate of obj * RenderTreeBuilder * int -> int
+
+#if IS_DESIGNTIME
+type Component() =
+    inherit Microsoft.AspNetCore.Components.ComponentBase()
+    member _.CssScope = ""
+#endif

src/Bolero/Router.fs

@@ -974,4 +974,6 @@ type RouterExtensions =
     /// <returns>An <c>href</c> attribute pointing to the given endpoint.</returns>
     [<Extension>]
     static member HRef(this: Router<'ep, _, _>, endpoint: 'ep, [<Optional>] hash: string) : Attr =
-        Attr.Make "href" (this.Link(endpoint, hash))
+        Attr(fun _ tb i ->
+            tb.AddAttribute(i, "href", this.Link(endpoint, hash))
+            i + 1)

src/tpdummy/Microsoft.AspNetCore.Components/Library.fs

@@ -17,6 +17,7 @@ type RenderTreeBuilder =
     member _.OpenComponent(_: int, _: Type) : unit = raise (NotImplementedException())
     member _.CloseComponent() : unit = raise (NotImplementedException())
     member _.AddAttribute(_: int, _: string, _: obj) : unit = raise (NotImplementedException())
+    member _.AddAttribute(_: int, _: string) : unit = raise (NotImplementedException())
     member _.AddContent(_: int, _: string) : unit = raise (NotImplementedException())
     member _.AddMarkupContent(_: int, _: string) : unit = raise (NotImplementedException())
     member _.OpenRegion(_: int) : unit = raise (NotImplementedException())

tests/Server/Startup.fs

@@ -33,7 +33,8 @@ type Startup() =
     member this.ConfigureServices(services: IServiceCollection) =
         services.AddMvc() |> ignore
         services.AddServerSideBlazor() |> ignore
-        services.AddBoleroHost(server = false) |> ignore
+        services.AddBoleroHost(prerendered = true) |> ignore
+        services.AddLogging() |> ignore
 
     member this.Configure(app: IApplicationBuilder) =
         app

tests/Unit.Client/Templating.fs

@@ -199,6 +199,19 @@ type RefTester() =
             Refs().Elt()
         }
 
+type TemplateForScopedCss = Template<"""
+<span id="holed-must-be-scoped">${Text}</span>
+<span id="non-holed-must-be-scoped"></span>
+""">
+
+type ScopedCssTester() =
+    inherit Component()
+
+    override _.CssScope = "dummy-scope"
+
+    override _.Render() =
+        TemplateForScopedCss().Text("content").Elt()
+
 type ``Regression #11`` = Template<"""<span class="${Hole}">${Hole}</span>""">
 
 type ``Regression #256`` = Template<"""
@@ -243,4 +256,5 @@ let Tests() =
         comp<EventTester>
         comp<BindTester>
         comp<RefTester>
+        comp<ScopedCssTester>
     }

tests/Unit/Tests/Templating.fs

@@ -237,6 +237,16 @@ module Templating =
         btn.Click()
         elt.Eventually <@ btn.Text = "Template ref is bound" @>
 
+    [<Test>]
+    let ``Scoped CSS is propagated to elements that have holes``() =
+        let elt = elt.ById("holed-must-be-scoped")
+        testNotNull <@ elt.GetAttribute("dummy-scope") @>
+
+    [<Test>]
+    let ``Scoped CSS is propagated to elements that don't have holes``() =
+        let elt = elt.ById("non-holed-must-be-scoped")
+        testNotNull <@ elt.GetAttribute("dummy-scope") @>
+
     [<Test>]
     let ``Regression #11: common hole in attrs and children``() =
         test <@ elt.ByClass("regression-11").Text = "regression-11" @>