Adding clientOnly flag to HtmlHelperExtension to allow for skipping server-side render stage while still outputing client-side code. Useful for debugging and quicker dev cycles

Author: Justin Slattery

src/React.AspNet/HtmlHelperExtensions.cs

@@ -66,21 +66,23 @@ private static IReactEnvironment Environment
 		/// <param name="props">Props to initialise the component with</param>
 		/// <param name="htmlTag">HTML tag to wrap the component in. Defaults to &lt;div&gt;</param>
 		/// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
+		/// <param name="clientOnly">Skip rendering server-side and only output client-side initialisation code. Defaults to false</param>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString React<T>(
 			this IHtmlHelper htmlHelper,
 			string componentName,
 			T props,
 			string htmlTag = null,
-			string containerId = null
+			string containerId = null, 
+			bool clientOnly = false
 		)
 		{
 			var reactComponent = Environment.CreateComponent(componentName, props, containerId);
 			if (!string.IsNullOrEmpty(htmlTag))
 			{
 				reactComponent.ContainerTag = htmlTag;
 			}
-			var result = reactComponent.RenderHtml();
+			var result = reactComponent.RenderHtml(clientOnly);
 			return new HtmlString(result);
 		}
 
@@ -95,21 +97,23 @@ public static IHtmlString React<T>(
 		/// <param name="props">Props to initialise the component with</param>
 		/// <param name="htmlTag">HTML tag to wrap the component in. Defaults to &lt;div&gt;</param>
 		/// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
+		/// <param name="clientOnly">Skip rendering server-side and only output client-side initialisation code. Defaults to false</param>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString ReactWithInit<T>(
 			this IHtmlHelper htmlHelper,
 			string componentName,
 			T props,
 			string htmlTag = null,
-			string containerId = null
+			string containerId = null, 
+			bool clientOnly = false
 		)
 		{
 			var reactComponent = Environment.CreateComponent(componentName, props, containerId);
 			if (!string.IsNullOrEmpty(htmlTag))
 			{
 				reactComponent.ContainerTag = htmlTag;
 			}
-			var html = reactComponent.RenderHtml();
+			var html = reactComponent.RenderHtml(clientOnly);
 			var script = new TagBuilder("script")
 			{
 				InnerHtml = reactComponent.RenderJavaScript()
@@ -132,4 +136,4 @@ public static IHtmlString ReactInitJavaScript(this IHtmlHelper htmlHelper)
 			return new HtmlString(tag.ToString());
 		}
 	}
-}
+}

src/React.Core/IReactComponent.cs

@@ -38,8 +38,9 @@ public interface IReactComponent
 		/// Renders the HTML for this component. This will execute the component server-side and
 		/// return the rendered HTML.
 		/// </summary>
+		/// <param name="renderContainerOnly">Only renders component container. Used for client-side only rendering.</param>
 		/// <returns>HTML</returns>
-		string RenderHtml();
+		string RenderHtml(bool renderContainerOnly = false);
 
 		/// <summary>
 		/// Renders the JavaScript required to initialise this component client-side. This will 
@@ -49,4 +50,4 @@ public interface IReactComponent
 		/// <returns>JavaScript</returns>
 		string RenderJavaScript();
 	}
-}
+}

src/React.Core/ReactComponent.cs

@@ -78,15 +78,20 @@ public ReactComponent(IReactEnvironment environment, IReactSiteConfiguration con
 		/// Renders the HTML for this component. This will execute the component server-side and
 		/// return the rendered HTML.
 		/// </summary>
+		/// <param name="renderContainerOnly">Only renders component container. Used for client-side only rendering.</param>
 		/// <returns>HTML</returns>
-		public virtual string RenderHtml()
+		public virtual string RenderHtml(bool renderContainerOnly = false)
 		{
 			EnsureComponentExists();
 			try
-			{
-				var html = _environment.Execute<string>(
-					string.Format("React.renderToString({0})", GetComponentInitialiser())
+			{ 
+				var html = string.Empty; 
+				if (!renderContainerOnly) 
+				{ 
+					html = _environment.Execute<string>( 
+						string.Format("React.renderToString({0})", GetComponentInitialiser())
 					);
+				}
 				return string.Format(
 					"<{2} id=\"{0}\">{1}</{2}>",
 					ContainerId,

src/React.Tests/Core/ReactComponentTest.cs

@@ -63,6 +63,25 @@ public void RenderHtmlShouldWrapComponentInDiv()
 			Assert.AreEqual(@"<div id=""container"">[HTML]</div>", result);
 		}
 
+		[Test]
+		public void RenderHtmlShouldNotRenderComponentHTML()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			environment.Setup(x => x.Execute<bool>("typeof Foo !== 'undefined'")).Returns(true);
+			environment.Setup(x => x.Execute<string>(@"React.renderToString(React.createElement(Foo, {""hello"":""World""}))"))
+				.Returns("[HTML]");
+			var config = new Mock<IReactSiteConfiguration>();
+
+			var component = new ReactComponent(environment.Object, config.Object, "Foo", "container")
+			{
+				Props = new { hello = "World" }
+			};
+			var result = component.RenderHtml(true); //renderContainerOnly = true
+
+			Assert.AreEqual(@"<div id=""container""></div>", result);
+			environment.Verify(x => x.Execute(It.IsAny<string>()), Times.Never);
+		}
+
 		[Test]
 		public void RenderHtmlShouldWrapComponentInCustomElement()
 		{

src/React.Tests/Mvc/HtmlHelperExtensionsTests.cs

@@ -33,7 +33,7 @@ private Mock<IReactEnvironment> ConfigureMockEnvironment()
 		public void ReactWithInitShouldReturnHtmlAndScript()
 		{
 			var component = new Mock<IReactComponent>();
-			component.Setup(x => x.RenderHtml()).Returns("HTML");
+			component.Setup(x => x.RenderHtml(false)).Returns("HTML");
 			component.Setup(x => x.RenderJavaScript()).Returns("JS");
 			var environment = ConfigureMockEnvironment();
 			environment.Setup(x => x.CreateComponent(
@@ -54,5 +54,27 @@ public void ReactWithInitShouldReturnHtmlAndScript()
 			);
 
 		}
+
+		[Test]
+		public void ReactWithClientOnlyTrueShouldCallRenderHtmlWithTrue()
+		{
+			var component = new Mock<IReactComponent>();
+			component.Setup(x => x.RenderHtml(true)).Returns("HTML");
+			var environment = ConfigureMockEnvironment();
+			environment.Setup(x => x.CreateComponent(
+				"ComponentName",
+				new {},
+				null
+			)).Returns(component.Object);
+
+			var result = HtmlHelperExtensions.React(
+				htmlHelper: null,
+				componentName: "ComponentName", 
+				props: new { }, 
+				htmlTag: "span",
+				clientOnly: true
+			);
+			component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true)), Times.Once);
+		}
 	}
 }