E2E test showing rendering of RenderFragment

test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs

@@ -166,13 +166,13 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
         }
 
         [Fact]
-        public void CanRenderRegionsWhilePreservingSurroundingElements()
+        public void CanRenderFragmentsWhilePreservingSurroundingElements()
         {
             // Initially, the region isn't shown
-            var appElement = MountTestComponent<RenderBlockComponent>();
+            var appElement = MountTestComponent<RenderFragmentToggler>();
             var originalButton = appElement.FindElement(By.TagName("button"));
-            var regionElements = appElement.FindElements(By.CssSelector("p[name=region-element]"));
+            var fragmentElements = appElement.FindElements(By.CssSelector("p[name=fragment-element]"));
-            Assert.Empty(regionElements);
+            Assert.Empty(fragmentElements);
 
             // The JS-side DOM builder handles regions correctly, placing elements
             // after the region after the corresponding elements
@@ -180,13 +180,13 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
 
             // When we click the button, the region is shown
             originalButton.Click();
-            regionElements = appElement.FindElements(By.CssSelector("p[name=region-element]"));
+            fragmentElements = appElement.FindElements(By.CssSelector("p[name=fragment-element]"));
-            Assert.Single(regionElements);
+            Assert.Single(fragmentElements);
 
             // The button itself was preserved, so we can click it again and see the effect
             originalButton.Click();
-            regionElements = appElement.FindElements(By.CssSelector("p[name=region-element]"));
+            fragmentElements = appElement.FindElements(By.CssSelector("p[name=fragment-element]"));
-            Assert.Empty(regionElements);
+            Assert.Empty(fragmentElements);
         }
 
         private IWebElement MountTestComponent<TComponent>() where TComponent: IComponent

test/testapps/BasicTestApp/RenderBlockComponent.cs

@@ -1,67 +0,0 @@
-// Copyright (c) .NET Foundation. All rights reserved.
-// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
-
-using System;
-using Microsoft.AspNetCore.Blazor.Components;
-using Microsoft.AspNetCore.Blazor.RenderTree;
-
-namespace BasicTestApp
-{
-    public class RenderBlockComponent : IComponent, IHandleEvent
-    {
-        private RenderHandle _renderHandle;
-        private bool _showRegion;
-
-        // Important: Notice that the sequence numbers inside the fragment are higher
-        // that the sequence numbers outside it. Without the region delimiter, the
-        // differencer would think the following nodes had been removed, then the
-        // region was inserted, followed by a new copy of the following nodes. That's
-        // not as efficient and wouldn't preserve focus etc.
-        private RenderFragment _exampleContent = builder =>
-        {
-            builder.OpenElement(100, "p");
-            builder.AddAttribute(101, "name", "region-element");
-            builder.AddAttribute(102, "style", "color: red");
-            builder.AddContent(103, "This is from the region");
-            builder.CloseElement();
-        };
-
-        public void Init(RenderHandle renderHandle)
-            => _renderHandle = renderHandle;
-
-        public void SetParameters(ParameterCollection parameters)
-            => Render();
-
-        public void HandleEvent(UIEventHandler handler, UIEventArgs args)
-        {
-            // TODO: Remove the necessity to implement IHandleEvent if you just want
-            // the event handler to be called. Then call Render from inside the handler.
-            handler(args);
-            Render();
-        }
-
-        private void Render() => _renderHandle.Render(builder =>
-        {
-            builder.OpenElement(0, "div"); // Container so we can see that passing through regions is OK
-            builder.AddContent(1, "Region will be toggled below ");
-
-            if (_showRegion)
-            {
-                builder.AddContent(2, _exampleContent);
-            }
-
-            builder.OpenElement(3, "button");
-            builder.AddAttribute(4, "onclick", ToggleRegion);
-            builder.AddContent(5, "Toggle");
-            builder.CloseElement();
-
-            builder.OpenElement(6, "p");
-            builder.AddContent(7, "The end");
-            builder.CloseElement();
-            builder.CloseElement();
-        });
-
-        private void ToggleRegion(UIEventArgs eventArgs)
-            => _showRegion = !_showRegion;
-    }
-}

test/testapps/BasicTestApp/RenderFragmentToggler.cshtml

@@ -0,0 +1,32 @@
+@using Microsoft.AspNetCore.Blazor.RenderTree
+<div>
+    <p>Fragment will be toggled below</p>
+
+    @if (showFragment)
+    {
+        @ExampleFragment
+    }
+
+    <button onclick=@{ showFragment = !showFragment; }>Toggle</button>
+    <p>The end</p>
+</div>
+
+@functions {
+    bool showFragment;
+
+    static RenderFragment ExampleFragment = builder =>
+    {
+        // TODO: Improve syntax
+        // Ideally we'd support inline Razor syntax here and are investigating this
+        // Could be:
+        //    static RenderFragment ExampleFragment()
+        //        => @<p>Some text<div>Child text</div></p>; // spaced over multiple lines, of course
+        // Failing that, we could have an C#-based representation, e.g.,
+        //    new Element.P { "Some text", new Element.Div { "Child text" } }, etc.
+        builder.OpenElement(100, "p");
+        builder.AddAttribute(101, "name", "fragment-element");
+        builder.AddAttribute(102, "style", "color: red");
+        builder.AddContent(103, "This is from the fragment");
+        builder.CloseElement();
+    };
+}